feat(xo-web/backup-ng/new): make the smart mode's toggle more visible (#3263)

See #2711

CHANGELOG.md

@@ -5,6 +5,7 @@
 ### Enhancements
 
 - [Remotes] Make SMB subfolder field optional [#3249](https://github.com/vatesfr/xen-orchestra/issues/3249) (PR [#3250](https://github.com/vatesfr/xen-orchestra/pull/3250))
+- [Backup NG form] Make the smart mode's toggle more visible [#2711](https://github.com/vatesfr/xen-orchestra/issues/2711) (PR [#3263](https://github.com/vatesfr/xen-orchestra/pull/3263))
 
 ### Bug fixes
 

packages/xo-web/src/xo-app/backup-ng/new/index.js

@@ -18,7 +18,7 @@ import { Card, CardBlock, CardHeader } from 'card'
 import { constructSmartPattern, destructSmartPattern } from 'smart-backup'
 import { Container, Col, Row } from 'grid'
 import { injectState, provideState } from '@julien-f/freactal'
-import { Number, Toggle } from 'form'
+import { Number } from 'form'
 import { SelectRemote, SelectSr, SelectVm } from 'select-objects'
 import {
   cloneDeep,
@@ -326,10 +326,6 @@ export default [
           },
         },
       }),
-      toggleSmartMode: (_, smartMode) => state => ({
-        ...state,
-        smartMode,
-      }),
       setName: (_, { target: { value } }) => state => ({
         ...state,
         name: value,
@@ -605,14 +601,16 @@ export default [
               <Card>
                 <CardHeader>
                   {_('backupName')}*
-                  <Tooltip content={_('smartBackupModeTitle')}>
-                    <Toggle
-                      className='pull-right'
-                      onChange={effects.toggleSmartMode}
-                      value={state.smartMode}
-                      iconSize={1}
-                    />
-                  </Tooltip>
+                  <ActionButton
+                    className='pull-right'
+                    data-mode='smartMode'
+                    handler={effects.toggleMode}
+                    icon={state.smartMode ? 'toggle-on' : 'toggle-off'}
+                    iconColor={state.smartMode ? 'text-success' : undefined}
+                    size='small'
+                  >
+                    {_('smartBackupModeTitle')}
+                  </ActionButton>
                 </CardHeader>
                 <CardBlock>
                   <FormGroup>