replace RP to MUI checkbox

Emurgo · Oct 12, 2021 · 5fc4278 · 5fc4278
1 parent a871f0b
commit 5fc4278
Show file tree

Hide file tree

Showing 12 changed files with 51 additions and 93 deletions.
diff --git a/packages/yoroi-extension/app/components/profile/nightly/NightlyForm.js b/packages/yoroi-extension/app/components/profile/nightly/NightlyForm.js
@@ -3,8 +3,7 @@ import { Component } from 'react';
 import type { Node } from 'react';
 import { observer } from 'mobx-react';
 import { Button } from '@mui/material';
-import { Checkbox } from 'react-polymorph/lib/components/Checkbox';
-import { CheckboxSkin } from 'react-polymorph/lib/skins/simple/CheckboxSkin';
+import CheckboxLabel from '../../common/CheckboxLabel';
 import { defineMessages, intlShape, FormattedHTMLMessage } from 'react-intl';
 import styles from './NightlyForm.scss';
 import globalMessages from '../../../i18n/global-messages';
@@ -56,7 +55,7 @@ type State = {|
 
 @observer
 export default class NightlyForm extends Component<Props, State> {
-  static contextTypes: {|intl: $npm$ReactIntl$IntlFormat|} = {
+  static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = {
     intl: intlShape.isRequired,
   };
 
@@ -105,11 +104,10 @@ export default class NightlyForm extends Component<Props, State> {
             </ul>
           </div>
           <div className={styles.checkbox}>
-            <Checkbox
+            <CheckboxLabel
               label={intl.formatMessage(messages.acknowledgedRisks)}
               onChange={this.toggleAcceptance.bind(this)}
               checked={this.state.acknowledgedRisks}
-              skin={CheckboxSkin}
             />
           </div>
           <Button
@@ -124,5 +122,4 @@ export default class NightlyForm extends Component<Props, State> {
       </div>
     );
   }
-
 }
diff --git a/packages/yoroi-extension/app/components/profile/terms-of-use/TermsOfUseForm.js b/packages/yoroi-extension/app/components/profile/terms-of-use/TermsOfUseForm.js
@@ -4,8 +4,7 @@ import type { Node } from 'react';
 import { observer } from 'mobx-react';
 import { LoadingButton } from '@mui/lab';
 import { defineMessages, intlShape } from 'react-intl';
-import { Checkbox } from 'react-polymorph/lib/components/Checkbox';
-import { CheckboxSkin } from 'react-polymorph/lib/skins/simple/CheckboxSkin';
+import CheckboxLabel from '../../common/CheckboxLabel';
 import LocalizableError from '../../../i18n/LocalizableError';
 import TermsOfUseText from './TermsOfUseText';
 import PrivacyPolicy from './PrivacyPolicy';
@@ -34,11 +33,11 @@ type State = {|
 
 @observer
 export default class TermsOfUseForm extends Component<Props, State> {
-  static defaultProps: {|error: void|} = {
-    error: undefined
+  static defaultProps: {| error: void |} = {
+    error: undefined,
   };
 
-  static contextTypes: {|intl: $npm$ReactIntl$IntlFormat|} = {
+  static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = {
     intl: intlShape.isRequired,
   };
 
@@ -66,11 +65,10 @@ export default class TermsOfUseForm extends Component<Props, State> {
           <TermsOfUseText localizedTermsOfUse={localizedTermsOfUse} fixedHeight />
 
           <div className={styles.checkbox}>
-            <Checkbox
+            <CheckboxLabel
               label={intl.formatMessage(messages[checkboxLabel])}
               onChange={this.toggleAcceptance.bind(this)}
               checked={areTermsOfUseAccepted || this.props.isSubmitting}
-              skin={CheckboxSkin}
             />
 
             <LoadingButton
@@ -84,11 +82,7 @@ export default class TermsOfUseForm extends Component<Props, State> {
             </LoadingButton>
           </div>
 
-          {error && (
-            <p className={styles.error}>
-              {intl.formatMessage(error, error.values)}
-            </p>
-          )}
+          {error && <p className={styles.error}>{intl.formatMessage(error, error.values)}</p>}
         </div>
       </div>
     );

diff --git a/packages/yoroi-extension/app/components/transfer/HardwareDisclaimer.js b/packages/yoroi-extension/app/components/transfer/HardwareDisclaimer.js
@@ -2,8 +2,7 @@
 import type { Node } from 'react';
 import { Component } from 'react';
 import { observer } from 'mobx-react';
-import { Checkbox } from 'react-polymorph/lib/components/Checkbox';
-import { CheckboxSkin } from 'react-polymorph/lib/skins/simple/CheckboxSkin';
+import CheckboxLabel from '../common/CheckboxLabel';
 import { defineMessages, intlShape } from 'react-intl';
 import DialogBackButton from '../widgets/DialogBackButton';
 import Dialog from '../widgets/Dialog';
@@ -75,11 +74,10 @@ export default class HardwareDisclaimer extends Component<Props> {
               </p>
 
               <div className={styles.checkbox}>
-                <Checkbox
+                <CheckboxLabel
                   label={intl.formatMessage(messages.hardwareDisclaimer)}
                   onChange={this.props.toggleCheck}
                   checked={this.props.isChecked}
-                  skin={CheckboxSkin}
                 />
               </div>
             </div>

diff --git a/packages/yoroi-extension/app/components/wallet/WalletPaperDialog.js b/packages/yoroi-extension/app/components/wallet/WalletPaperDialog.js
@@ -3,15 +3,14 @@ import { Component } from 'react';
 import type { Node } from 'react';
 import { observer } from 'mobx-react';
 import classNames from 'classnames';
-import { Checkbox } from 'react-polymorph/lib/components/Checkbox';
 import { Select } from 'react-polymorph/lib/components/Select';
 import { SelectSkin } from 'react-polymorph/lib/skins/simple/SelectSkin';
 import { defineMessages, intlShape } from 'react-intl';
 import ReactToolboxMobxForm from '../../utils/ReactToolboxMobxForm';
 import LocalizableError from '../../i18n/LocalizableError';
 import styles from './WalletPaperDialog.scss';
 import ReactMarkdown from 'react-markdown';
-import { CheckboxOwnSkin } from '../../themes/skins/CheckboxOwnSkin';
+import CheckboxLabel from '../common/CheckboxLabel';
 import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
 import Dialog from '../widgets/Dialog';
 import DialogCloseButton from '../widgets/DialogCloseButton';
@@ -36,7 +35,7 @@ const messages = defineMessages({
 });
 
 type Props = {|
-  +onCreatePaper: {| numAddresses: number, printAccountPlate: boolean |} => void,
+  +onCreatePaper: ({| numAddresses: number, printAccountPlate: boolean |}) => void,
   +onCancel: void => void,
   +paperWalletsIntroText: string,
   +error?: ?LocalizableError,
@@ -70,21 +69,18 @@ export default class PaperWalletDialog extends Component<Props> {
         label: this.context.intl.formatMessage(messages.printIdentificationSelectLabel),
         value: true,
       },
-    }
+    },
   });
 
-  setPrintPaperIdentification: ((
-    printPaperWalletIdentification: boolean
-  ) => void) = (printPaperWalletIdentification) => {
-    this.form.$('printPaperWalletIdentification').value = printPaperWalletIdentification;
-  };
-
   render(): Node {
     const { intl } = this.context;
     const { error, paperWalletsIntroText, onCancel } = this.props;
     const numAddresses = this.form.$('numAddresses');
     const printPaperWalletIdentification = this.form.$('printPaperWalletIdentification');
-    const numAddressOptions = [...Array(5).keys()].map(x => ({ value: `${x + 1}`, label: `${x + 1}` }));
+    const numAddressOptions = [...Array(5).keys()].map(x => ({
+      value: `${x + 1}`,
+      label: `${x + 1}`,
+    }));
     const componentClassNames = classNames([styles.component, 'general']);
     const numAddressesSelectClassNames = classNames([styles.numAddressesSelect]);
 
@@ -105,7 +101,6 @@ export default class PaperWalletDialog extends Component<Props> {
         actions={actions}
         closeButton={<DialogCloseButton />}
       >
-
         <div className={styles.intro}>
           <ReactMarkdown source={paperWalletsIntroText} escapeHtml={false} />
         </div>
@@ -118,23 +113,15 @@ export default class PaperWalletDialog extends Component<Props> {
           isOpeningUpward
         />
 
-        <Checkbox
-          skin={CheckboxOwnSkin}
-          {...printPaperWalletIdentification.bind()}
+        <CheckboxLabel
           checked={printPaperWalletIdentification.value}
-          onChange={this.setPrintPaperIdentification}
+          onChange={printPaperWalletIdentification.onChange}
           label={this.context.intl.formatMessage(messages.printIdentificationSelectLabel)}
           description={this.context.intl.formatMessage(messages.printIdentificationMessage)}
         />
 
-        {error && (
-          <p className={styles.error}>
-            {intl.formatMessage(error, error.values)}
-          </p>
-        )}
-
+        {error && <p className={styles.error}>{intl.formatMessage(error, error.values)}</p>}
       </Dialog>
     );
   }
-
 }
diff --git a/...yoroi-extension/app/components/wallet/backup-recovery/WalletBackupPrivacyWarningDialog.js b/...yoroi-extension/app/components/wallet/backup-recovery/WalletBackupPrivacyWarningDialog.js
@@ -3,8 +3,7 @@ import type { Node } from 'react';
 import { Component } from 'react';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
-import { Checkbox } from 'react-polymorph/lib/components/Checkbox';
-import { CheckboxSkin } from 'react-polymorph/lib/skins/simple/CheckboxSkin';
+import CheckboxLabel from '../../common/CheckboxLabel'
 import { defineMessages, intlShape, FormattedHTMLMessage } from 'react-intl';
 import Dialog from '../../widgets/Dialog';
 import DialogCloseButton from '../../widgets/DialogCloseButton';
@@ -84,11 +83,12 @@ export default class WalletBackupPrivacyWarningDialog extends Component<Props> {
           instructionsText={<FormattedHTMLMessage {...messages.recoveryPhraseInstructions} />}
         />
         <div className={styles.checkbox}>
-          <Checkbox
+          <CheckboxLabel
             label={intl.formatMessage(messages.termNobodyWatching)}
             onChange={onAcceptPrivacyNotice}
             checked={isPrivacyNoticeAccepted}
-            skin={CheckboxSkin}
+            labelSx={{ fontSize: '0.875rem' }}
+            sx={{ marginTop: '20px' }}
           />
         </div>
       </Dialog>

diff --git a/...roi-extension/app/components/wallet/backup-recovery/WalletBackupPrivacyWarningDialog.scss b/...roi-extension/app/components/wallet/backup-recovery/WalletBackupPrivacyWarningDialog.scss
@@ -1,20 +1,12 @@
 .component {
   text-align: left;
 
-  .checkbox {
-    margin-top: 20px;
-
-    label {
-      font-size: 14px;
-    }
-  }
-
   .recoveryImage {
     display: block;
     width: 100%;
     text-align: center;
     margin: 23px 0 36px;
-  
+
     svg {
       width: 212px;
     }

diff --git a/.../yoroi-extension/app/components/wallet/backup-recovery/WalletRecoveryPhraseEntryDialog.js b/.../yoroi-extension/app/components/wallet/backup-recovery/WalletRecoveryPhraseEntryDialog.js
@@ -3,8 +3,7 @@ import type { Node } from 'react';
 import { Component } from 'react';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
-import { Checkbox } from 'react-polymorph/lib/components/Checkbox';
-import { CheckboxSkin } from 'react-polymorph/lib/skins/simple/CheckboxSkin';
+import CheckboxLabel from '../../common/CheckboxLabel'
 import { defineMessages, intlShape, FormattedHTMLMessage } from 'react-intl';
 import WalletRecoveryPhraseMnemonic from './WalletRecoveryPhraseMnemonic';
 import DialogCloseButton from '../../widgets/DialogCloseButton';
@@ -187,19 +186,19 @@ export default class WalletRecoveryPhraseEntryDialog extends Component<Props> {
         {isValid && (
           <div>
             <div className={styles.checkbox}>
-              <Checkbox
+              <CheckboxLabel
                 label={<FormattedHTMLMessage {...messages.termDevice} />}
                 onChange={onAcceptTermDevice}
                 checked={isTermDeviceAccepted}
-                skin={CheckboxSkin}
+                labelSx={{ fontSize: '14px' }}
               />
             </div>
             <div className={styles.checkbox}>
-              <Checkbox
+              <CheckboxLabel
                 label={intl.formatMessage(messages.termRecovery)}
                 onChange={onAcceptTermRecovery}
+                labelSx={{ fontSize: '14px' }}
                 checked={isTermRecoveryAccepted}
-                skin={CheckboxSkin}
               />
             </div>
           </div>

diff --git a/...oroi-extension/app/components/wallet/backup-recovery/WalletRecoveryPhraseEntryDialog.scss b/...oroi-extension/app/components/wallet/backup-recovery/WalletRecoveryPhraseEntryDialog.scss
@@ -25,12 +25,12 @@
     padding: 30px 20px;
     color: var(--theme-instructions-text-color);
   }
-  
+
   .phraseWrapper {
     display: flex;
     flex-wrap: wrap;
   }
-  
+
   .phraseWord {
     background-color: var(--theme-mnemonic-background-color);
     font-size: 14px;
@@ -60,9 +60,5 @@
 :global(.YoroiModern) {
   .component {
     text-align: left;
-
-    label {
-      font-size: 14px;
-    }
-  }  
+  }
 }
diff --git a/packages/yoroi-extension/app/components/widgets/DangerousActionDialog.js b/packages/yoroi-extension/app/components/widgets/DangerousActionDialog.js
@@ -8,8 +8,7 @@ import DialogCloseButton from './DialogCloseButton';
 import Dialog from './Dialog';
 import globalMessages from '../../i18n/global-messages';
 import LocalizableError from '../../i18n/LocalizableError';
-import { Checkbox } from 'react-polymorph/lib/components/Checkbox';
-import { CheckboxSkin } from 'react-polymorph/lib/skins/simple/CheckboxSkin';
+import CheckboxLabel from '../common/CheckboxLabel';
 import styles from './DangerousActionDialog.scss';
 import dangerousButtonStyles from '../../themes/overrides/DangerousButton.scss';
 import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
@@ -85,11 +84,10 @@ export default class DangerousActionDialog extends Component<Props> {
         {this.props.children}
 
         <div className={styles.checkbox}>
-          <Checkbox
+          <CheckboxLabel
             label={this.props.checkboxAcknowledge}
             onChange={this.props.toggleCheck}
             checked={this.props.isSubmitting || this.props.isChecked}
-            skin={CheckboxSkin}
           />
         </div>
 

diff --git a/packages/yoroi-extension/app/components/widgets/DangerousActionDialog.scss b/packages/yoroi-extension/app/components/widgets/DangerousActionDialog.scss
@@ -14,6 +14,10 @@
 
   .checkbox {
     padding-bottom: 16px;
+    p {
+      font-size: 1rem;
+      margin-bottom: 0;
+    }
   }
 
   .error {