replace RP button to Mui Button and remove styles

Emurgo · Sep 16, 2021 · 21c0df6 · 21c0df6
1 parent b9cca35
commit 21c0df6
Show file tree

Hide file tree

Showing 54 changed files with 273 additions and 576 deletions.
diff --git a/packages/yoroi-extension/app/components/notice-board/NoticeBoard.js b/packages/yoroi-extension/app/components/notice-board/NoticeBoard.js
@@ -4,10 +4,7 @@ import type { Node } from 'react';
 import { intlShape } from 'react-intl';
 import moment from 'moment';
 import { observer } from 'mobx-react';
-import classnames from 'classnames';
-import { Button } from 'react-polymorph/lib/components/Button';
-import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
-
+import { LoadingButton } from '@mui/lab';
 import Notice from '../../domain/Notice';
 import NoticeBlock from './NoticeBlock';
 import globalMessages from '../../i18n/global-messages';
@@ -19,7 +16,7 @@ type Props = {|
   +loadedNotices: Array<Notice>,
   +onLoadMore: void => Promise<void>,
   +isLoading: boolean,
-  +hasMoreToLoad: boolean
+  +hasMoreToLoad: boolean,
 |};
 
 const DATE_FORMAT = 'YYYY-MM-DD';
@@ -33,7 +30,7 @@ type NoticesByDate = {|
 
 @observer
 export default class NoticeBoard extends Component<Props> {
-  static contextTypes: {|intl: $npm$ReactIntl$IntlFormat|} = { intl: intlShape.isRequired };
+  static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = { intl: intlShape.isRequired };
   localizedDateFormat: string = 'MM/DD/YYYY';
 
   // eslint-disable-next-line camelcase
@@ -94,19 +91,14 @@ export default class NoticeBoard extends Component<Props> {
     } = this.props;
     const noticeGroup = this.groupNoticesByDay(loadedNotices);
 
-    const buttonClasses = classnames([
-      'primary',
-      styles.loadMoreNoticesButton,
-    ]);
-
     return (
       <div className={styles.component}>
         <div className={styles.notices}>
           {noticeGroup.map(group => (
             <div className={styles.group} key={group.strDate}>
               <div className={styles.groupDate}>{this.localizedDate(group)}</div>
               <div>
-                {group.notices.map((notice) => (
+                {group.notices.map(notice => (
                   <NoticeBlock
                     key={`${group.strDate}-${notice.id}`}
                     notice={notice}
@@ -117,15 +109,16 @@ export default class NoticeBoard extends Component<Props> {
             </div>
           ))}
         </div>
-        {hasMoreToLoad &&
-          <Button
-            disabled={isLoading}
-            className={buttonClasses}
-            label={intl.formatMessage(globalMessages.loadMoreButtonLabel)}
+        {hasMoreToLoad && (
+          <LoadingButton
+            sx={{ width: '287px' }}
+            variant="primary"
             onClick={onLoadMore}
-            skin={ButtonSkin}
-          />
-        }
+            disabled={isLoading}
+          >
+            {intl.formatMessage(globalMessages.loadMoreButtonLabel)}
+          </LoadingButton>
+        )}
       </div>
     );
   }

diff --git a/packages/yoroi-extension/app/components/notice-board/NoticeBoard.scss b/packages/yoroi-extension/app/components/notice-board/NoticeBoard.scss
@@ -16,8 +16,4 @@
       }
     }
   }
-  .loadMoreNoticesButton {
-    display: block !important;
-    width: 287px;
-  }
 }
diff --git a/packages/yoroi-extension/app/components/profile/complexity-level/ComplexityLevelForm.js b/packages/yoroi-extension/app/components/profile/complexity-level/ComplexityLevelForm.js
@@ -8,8 +8,7 @@ import classnames  from 'classnames';
 import BeginnerLevel from '../../../assets/images/complexity-level/beginner-level.inline.svg';
 import AdvancedLevel from '../../../assets/images/complexity-level/advanced-level.inline.svg';
 import LocalizableError from '../../../i18n/LocalizableError';
-import { Button } from 'react-polymorph/lib/components/Button';
-import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
+import { LoadingButton } from '@mui/lab';
 import { ComplexityLevels } from '../../../types/complexityLevelType';
 import type { ComplexityLevelType } from '../../../types/complexityLevelType';
 
@@ -78,13 +77,6 @@ class ComplexityLevel extends Component<Props> {
       }
     ];
 
-    const buttonClasses = classnames([
-      'secondary',
-      isSubmitting ?
-        styles.submitButtonSpinning :
-        styles.submitButton
-    ]);
-
     return (
       <>
         <div className={styles.component}>
@@ -111,13 +103,14 @@ class ComplexityLevel extends Component<Props> {
                     <h3>{level.name}</h3>
                     <p>{level.description}</p>
                   </div>
-                  <Button
-                    label={intl.formatMessage(messages.labelChoose)}
-                    className={buttonClasses}
-                    disabled={isSubmitting || (complexityLevel === level.key)}
+                  <LoadingButton
+                    variant="secondary"
+                    loading={isSubmitting}
+                    disabled={(complexityLevel === level.key)}
                     onClick={() => this.props.onSubmit(level.key)}
-                    skin={ButtonSkin}
-                  />
+                  >
+                    {intl.formatMessage(messages.labelChoose)}
+                  </LoadingButton>
                 </div>
               </div>
             ))

diff --git a/packages/yoroi-extension/app/components/profile/complexity-level/ComplexityLevelForm.scss b/packages/yoroi-extension/app/components/profile/complexity-level/ComplexityLevelForm.scss
@@ -81,22 +81,12 @@
         line-height: 1.25rem;
       }
     }
-    .submitButton,
-    .submitButtonSpinning {
-      display: block !important;
-      margin: 0;
-      width: 100%;
-    }
-
-    .submitButtonSpinning {
-      @include loading-spinner("../../../assets/images/spinner-light.svg");
-    }
-
+
     .error {
       @include error-message;
       text-align: center;
       margin-bottom: 1rem;
     }
-    
+
   }
 }
diff --git a/packages/yoroi-extension/app/components/profile/language-selection/LanguageSelectionForm.js b/packages/yoroi-extension/app/components/profile/language-selection/LanguageSelectionForm.js
@@ -1,11 +1,9 @@
 // @flow
 import { Component } from 'react';
 import type { Node } from 'react';
-import classnames from 'classnames';
 import { observer } from 'mobx-react';
 import { Select } from 'react-polymorph/lib/components/Select';
-import { Button } from 'react-polymorph/lib/components/Button';
-import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
+import { LoadingButton } from '@mui/lab';
 import { SelectSkin } from 'react-polymorph/lib/skins/simple/SelectSkin';
 import { intlShape } from 'react-intl';
 import ReactToolboxMobxForm from '../../../utils/ReactToolboxMobxForm';
@@ -69,10 +67,6 @@ export default class LanguageSelectionForm extends Component<Props> {
       label: intl.formatMessage(language.label),
       svg: language.svg
     }));
-    const buttonClasses = classnames([
-      'primary',
-      isSubmitting ? styles.submitButtonSpinning : styles.submitButton,
-    ]);
 
     return (
       <div className={styles.component}>
@@ -96,12 +90,14 @@ export default class LanguageSelectionForm extends Component<Props> {
             </p>
           )}
 
-          <Button
-            className={buttonClasses}
-            label={intl.formatMessage(globalMessages.continue)}
-            onMouseUp={this.submit}
-            skin={ButtonSkin}
-          />
+          <LoadingButton
+            variant="primary"
+            fullWidth
+            loading={isSubmitting}
+            onClick={this.submit}
+          >
+            {intl.formatMessage(globalMessages.continue)}
+          </LoadingButton>
 
           {!tier1Languages.includes(currentLocale) &&
             <div className={styles.info}>

diff --git a/...ages/yoroi-extension/app/components/profile/language-selection/LanguageSelectionForm.scss b/...ages/yoroi-extension/app/components/profile/language-selection/LanguageSelectionForm.scss
@@ -1,4 +1,3 @@
-@import '../../../themes/mixins/loading-spinner';
 @import '../../../themes/mixins/error-message';
 
 .component {
@@ -12,17 +11,6 @@
     width: 400px;
   }
 
-  .submitButton,
-  .submitButtonSpinning {
-    display: block !important;
-    margin: 0 auto;
-    width: 100% !important;
-  }
-
-  .submitButtonSpinning {
-    @include loading-spinner("../../../assets/images/spinner-light.svg");
-  }
-
   .error {
     @include error-message;
     text-align: center;
@@ -31,7 +19,7 @@
 
   .languageSelect {
     margin-bottom: 10px;
-  
+
     label {
       width: 100%;
       left: 0;

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 classnames from 'classnames';
 import { observer } from 'mobx-react';
-import { Button } from 'react-polymorph/lib/components/Button';
-import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
+import { Button } from '@mui/material';
 import { Checkbox } from 'react-polymorph/lib/components/Checkbox';
 import { CheckboxSkin } from 'react-polymorph/lib/skins/simple/CheckboxSkin';
 import { defineMessages, intlShape, FormattedHTMLMessage } from 'react-intl';
@@ -115,12 +114,13 @@ export default class NightlyForm extends Component<Props, State> {
             />
           </div>
           <Button
-            className={classnames(['primary', styles.button])}
-            label={intl.formatMessage(globalMessages.continue)}
-            onMouseUp={this.props.onSubmit}
-            skin={ButtonSkin}
+            variant="primary"
+            onClick={this.props.onSubmit}
             disabled={!this.state.acknowledgedRisks}
-          />
+            sx={{ width: '480px' }}
+          >
+            {intl.formatMessage(globalMessages.continue)}
+          </Button>
         </div>
       </div>
     );

diff --git a/packages/yoroi-extension/app/components/profile/nightly/NightlyForm.scss b/packages/yoroi-extension/app/components/profile/nightly/NightlyForm.scss
@@ -37,10 +37,6 @@
     }
   }
 
-  .button {
-    width: 480px;
-  }
-
   .checkbox {
     margin-top: 40px;
     margin-bottom: 40px;

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
@@ -1,10 +1,8 @@
 // @flow
 import { Component } from 'react';
 import type { Node } from 'react';
-import classnames from 'classnames';
 import { observer } from 'mobx-react';
-import { Button } from 'react-polymorph/lib/components/Button';
-import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
+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';
@@ -57,11 +55,6 @@ export default class TermsOfUseForm extends Component<Props, State> {
     const { isSubmitting, error, localizedTermsOfUse } = this.props;
     const { areTermsOfUseAccepted } = this.state;
 
-    const buttonClasses = classnames([
-      'primary',
-      isSubmitting ? styles.submitButtonSpinning : styles.submitButton,
-    ]);
-
     const checkboxLabel = 'checkboxLabel';
     return (
       <div className={styles.component}>
@@ -80,13 +73,15 @@ export default class TermsOfUseForm extends Component<Props, State> {
               skin={CheckboxSkin}
             />
 
-            <Button
-              className={buttonClasses}
-              label={intl.formatMessage(globalMessages.continue)}
-              onMouseUp={this.props.onSubmit}
-              disabled={!areTermsOfUseAccepted || this.props.isSubmitting}
-              skin={ButtonSkin}
-            />
+            <LoadingButton
+              variant="primary"
+              disabled={!areTermsOfUseAccepted}
+              onClick={this.props.onSubmit}
+              loading={isSubmitting}
+              sx={{ width: '350px' }}
+            >
+              {intl.formatMessage(globalMessages.continue)}
+            </LoadingButton>
           </div>
 
           {error && (

diff --git a/packages/yoroi-extension/app/components/profile/terms-of-use/TermsOfUseForm.scss b/packages/yoroi-extension/app/components/profile/terms-of-use/TermsOfUseForm.scss
@@ -1,4 +1,3 @@
-@import '../../../themes/mixins/loading-spinner';
 @import '../../../themes/mixins/error-message';
 
 .component {
@@ -21,33 +20,22 @@
     margin: 0 auto;
     width: 800px;
   }
-
-  .submitButton,
-  .submitButtonSpinning {
-    display: block !important;
-    margin: 0;
-    width: 350px;
-  }
-
-  .submitButtonSpinning {
-    @include loading-spinner("../../../assets/images/spinner-light.svg");
-  }
-
+
   .error {
     @include error-message;
     text-align: center;
     margin-bottom: 1rem;
   }
-  
+
   .checkbox {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding-right: 15px;
     padding-top: 40px;
-  
+
     :global .SimpleCheckbox_label {
       font-family: var(--rp-theme-font-regular);
     }
-  }  
+  }
 }