Merge pull request #2395 from Emurgo/paulccari/mui-replacing-rp-compo…

…nents-1 Replace from RP to MUI components - 1
Emurgo · Oct 15, 2021 · 183b695 · 183b695
2 parents b96f1db + 4063ea8
commit 183b695
Show file tree

Hide file tree

Showing 65 changed files with 449 additions and 696 deletions.
diff --git a/packages/yoroi-extension/app/App.js b/packages/yoroi-extension/app/App.js
@@ -25,7 +25,7 @@ import { themeOverrides } from './themes/overrides';
 import { translations } from './i18n/translations';
 import type { StoresMap } from './stores';
 import type { ActionsMap } from './actions';
-import { changeToplevelTheme } from './themes';
+import { changeToplevelTheme, MuiThemes } from './themes';
 import ThemeManager from './ThemeManager';
 import environment from './environment';
 import MaintenancePage from './containers/MaintenancePage';
@@ -36,7 +36,6 @@ import { SimpleDefaults } from 'react-polymorph/lib/themes/simple';
 import { LayoutProvider } from './themes/context/layout';
 import { ThemeProvider as MuiThemeProvide } from '@mui/material/styles';
 import { CssBaseline } from '@mui/material';
-import { classicTheme, modernTheme } from './styles/themes';
 import { globalStyles } from './styles/globalStyles';
 
 // https://github.com/yahoo/react-intl/wiki#loading-locale-data
@@ -67,7 +66,6 @@ type State = {|
 
 @observer
 class App extends Component<Props, State> {
-
   state: State = {
     crashed: false,
   };
@@ -105,17 +103,14 @@ class App extends Component<Props, State> {
 
     changeToplevelTheme(currentTheme);
 
-    // <TODO:THEME_SELECT>
-    const isModernTheme = true;
-
-    const theme = isModernTheme ? modernTheme : classicTheme;
+    const muiTheme = MuiThemes[currentTheme ?? 'YoroiModern'];
 
     return (
       <div style={{ height: '100%' }}>
-        <MuiThemeProvide theme={theme}>
-          <CssBaseline />
-          {globalStyles(theme)}
-          <LayoutProvider>
+        <LayoutProvider>
+          <MuiThemeProvide theme={muiTheme}>
+            <CssBaseline />
+            {globalStyles(muiTheme)}
             <ThemeManager variables={themeVars} />
             {/* Automatically pass a theme prop to all components in this subtree. */}
             <ThemeProvider
@@ -129,8 +124,8 @@ class App extends Component<Props, State> {
                 {this.getContent()}
               </IntlProvider>
             </ThemeProvider>
-          </LayoutProvider>
-        </MuiThemeProvide>
+          </MuiThemeProvide>
+        </LayoutProvider>
       </div>
     );
   }
@@ -143,12 +138,8 @@ class App extends Component<Props, State> {
     if (stores.serverConnectionStore.isMaintenance) {
       return (<MaintenancePage stores={stores} actions={actions} />);
     }
-    return (
-      <Router history={history}>
-        {Routes(stores, actions)}
-      </Router>
-    );
-  }
+    return <Router history={history}>{Routes(stores, actions)}</Router>;
+  };
 }
 
 export default App;
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
@@ -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 { 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 +113,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 && (