fix(ds): revamp modal dialog fixes

packages/yoroi-extension/app/components/buySell/BuySellDialog.js

@@ -8,13 +8,14 @@ import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
 import { truncateAddress } from '../../utils/formatters';
 import Dialog from '../widgets/Dialog';
 import DialogCloseButton from '../widgets/DialogCloseButton';
-import ChangellyFetcher from './ChangellyFetcher'
+import ChangellyFetcher from './ChangellyFetcher';
 
 import styles from './BuySellDialog.scss';
-import { ReactComponent as VerifyIcon }  from '../../assets/images/verify-icon.inline.svg'
-import VerticalFlexContainer from '../layout/VerticalFlexContainer'
-import LoadingSpinner from '../widgets/LoadingSpinner'
+import { ReactComponent as VerifyIcon } from '../../assets/images/verify-icon.inline.svg';
+import VerticalFlexContainer from '../layout/VerticalFlexContainer';
+import LoadingSpinner from '../widgets/LoadingSpinner';
 import globalMessages from '../../i18n/global-messages';
+import { Box } from '@mui/material';
 
 const messages = defineMessages({
   dialogTitle: {
@@ -23,11 +24,13 @@ const messages = defineMessages({
   },
   dialogSelectAddress: {
     id: 'buysell.dialog.selectAddress',
-    defaultMessage: '!!!Please select the receiving address. This will be shared with the third party provider called Changelly for the buy / sell of ADA. ',
+    defaultMessage:
+      '!!!Please select the receiving address. This will be shared with the third party provider called Changelly for the buy / sell of ADA. ',
   },
   dialogDescription: {
     id: 'buysell.dialog.instructions',
-    defaultMessage: '!!!Please select your preferences. On the next screen, confirm your selection by pressing the green arrow on the top right',
+    defaultMessage:
+      '!!!Please select your preferences. On the next screen, confirm your selection by pressing the green arrow on the top right',
   },
   dialogManual: {
     id: 'buysell.dialog.manual',
@@ -39,14 +42,15 @@ export type WalletInfo = {|
   walletName: string,
   currencyName: string,
   anAddressFormatted: string,
-|}
+|};
 
 type Props = {|
   +onCancel: void => void,
-  +genWalletList: () => Promise<Array<WalletInfo>>
+  +genWalletList: () => Promise<Array<WalletInfo>>,
 |};
 
-const WIDGET_URL = 'https://widget.changelly.com?from=*&to=*&amount=200&fromDefault=usd&toDefault=ada&theme=default&merchant_id=g9qheu8vschp16jj&payment_id=&v=3'
+const WIDGET_URL =
+  'https://widget.changelly.com?from=*&to=*&amount=200&fromDefault=usd&toDefault=ada&theme=default&merchant_id=g9qheu8vschp16jj&payment_id=&v=3';
 
 type State = {|
   addressSelected: ?string,
@@ -55,7 +59,7 @@ type State = {|
 
 @observer
 export default class BuySellDialog extends Component<Props, State> {
-  static contextTypes: {|intl: $npm$ReactIntl$IntlFormat|} = {
+  static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = {
     intl: intlShape.isRequired,
   };
 
@@ -64,41 +68,38 @@ export default class BuySellDialog extends Component<Props, State> {
     walletList: null,
   };
 
-  async componentDidMount () {
+  async componentDidMount() {
     const { intl } = this.context;
 
-    const resp = await this.props.genWalletList()
+    const resp = await this.props.genWalletList();
     const wallets = [
       ...resp,
       {
         walletName: intl.formatMessage(messages.dialogManual),
         currencyName: '',
         anAddressFormatted: '',
-      }
-    ]
-    this.setState({ walletList: wallets })
+      },
+    ];
+    this.setState({ walletList: wallets });
   }
 
-  createRows: ($npm$ReactIntl$IntlFormat, Array<WalletInfo>) => Node = (intl, wallets) => (
+  createRows: ($npm$ReactIntl$IntlFormat, Array<WalletInfo>) => Node = (intl, wallets) =>
     wallets.map((wallet, i) => {
       return (
         // eslint-disable-next-line react/no-array-index-key
         <div key={i} className={styles.row}>
           <div className={styles.left}>
             <div className={styles.nameAndCurrency}>
-              { wallet.currencyName ? `(${wallet.currencyName}) ` : ''}{wallet.walletName}
-            </div>
-            <div className={styles.address}>
-              {truncateAddress(wallet.anAddressFormatted)}
+              {wallet.currencyName ? `(${wallet.currencyName}) ` : ''}
+              {wallet.walletName}
             </div>
+            <div className={styles.address}>{truncateAddress(wallet.anAddressFormatted)}</div>
           </div>
           <div className={styles.right}>
             {/* Verify Address action */}
             <button
               type="button"
-              onClick={() =>
-                this.setState({ addressSelected: wallet.anAddressFormatted })
-              }
+              onClick={() => this.setState({ addressSelected: wallet.anAddressFormatted })}
             >
               <div>
                 <span className={styles.verifyIcon}>
@@ -109,9 +110,8 @@ export default class BuySellDialog extends Component<Props, State> {
             {/* Action block end */}
           </div>
         </div>
-      )
-    })
-  )
+      );
+    });
 
   render(): Node {
     const { intl } = this.context;
@@ -137,32 +137,27 @@ export default class BuySellDialog extends Component<Props, State> {
           closeOnOverlayClick={false}
           onClose={this.props.onCancel}
           closeButton={<DialogCloseButton />}
-          className=""
         >
           <div className={styles.content}>
-            {intl.formatMessage(messages.dialogSelectAddress)}
+            <Box mb="24px">{intl.formatMessage(messages.dialogSelectAddress)}</Box>
             {addressNodes}
           </div>
         </Dialog>
-      )
-    }
-
-      return (
-        <Dialog
-          title={intl.formatMessage(messages.dialogTitle)}
-          closeOnOverlayClick={false}
-          onClose={this.props.onCancel}
-          closeButton={<DialogCloseButton />}
-          className=""
-        >
-          <div className={styles.component}>
-            <div className={styles.description}>
-              {intl.formatMessage(messages.dialogDescription)}
-            </div>
-            <ChangellyFetcher widgetURL={WIDGET_URL} address={this.state.addressSelected} />
-          </div>
-        </Dialog>
       );
+    }
 
+    return (
+      <Dialog
+        title={intl.formatMessage(messages.dialogTitle)}
+        closeOnOverlayClick={false}
+        onClose={this.props.onCancel}
+        closeButton={<DialogCloseButton />}
+      >
+        <div className={styles.component}>
+          <div className={styles.description}>{intl.formatMessage(messages.dialogDescription)}</div>
+          <ChangellyFetcher widgetURL={WIDGET_URL} address={this.state.addressSelected} />
+        </div>
+      </Dialog>
+    );
   }
 }

packages/yoroi-extension/app/components/buySell/BuySellDialog.scss

@@ -4,6 +4,7 @@
   padding-left: 40px;
   padding-right: 40px;
   max-height: 600px;
+  max-width: 600px;
 
   .description {
     color: var(--yoroi-palette-gray-900);
@@ -20,17 +21,16 @@
   flex-direction: column;
   letter-spacing: 0;
   line-height: 22px;
+  max-width: 600px;
 }
 
 .row {
   display: flex;
-  flex-direction: row;
-  height: 60px;
-  align-items: flex-start;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: space-between;
 
   .left {
-    flex: 7;
-
     .nameAndCurrency {
       color: var(--yoroi-palette-gray-900);
       font-size: 16px;
@@ -44,15 +44,6 @@
       line-height: 22px;
     }
   }
-  .right {
-    flex: 1;
-    width: 40px;
-    height: 40px;
-  }
-}
-
-.row:first-child {
-  margin-top: 40px;
 }
 
 .verifyIcon {

packages/yoroi-extension/app/components/topbar/WalletListDialog.js

@@ -4,7 +4,7 @@ import type { Node } from 'react';
 import { Component } from 'react';
 import { observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
-import DialogRevamp from '../widgets/DialogRevamp';
+import Dialog from '../widgets/Dialog';
 import DialogCloseButton from '../widgets/DialogCloseButton';
 import styles from './WalletListDialog.scss';
 import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
@@ -185,12 +185,31 @@ export default class WalletListDialog extends Component<Props, State> {
     const walletsTotal = this.renderWalletsTotal();
 
     return (
-      <DialogRevamp
+      <Dialog
         className={styles.component}
         title={intl.formatMessage(globalMessages.changeWallet)}
         closeOnOverlayClick
         closeButton={<DialogCloseButton />}
         onClose={this.props.close}
+        actions={[
+          {
+            id: 'addWalletButton',
+            onClick: onAddWallet,
+            size: 'large',
+            label: intl.formatMessage(messages.addWallet),
+          },
+          {
+            id: 'applyWalletButton',
+            onClick: this.onSelect,
+            size: 'large',
+            disabled:
+              this.state.selectedWallet === null ||
+              this.isCurrentWallet(this.state.selectedWallet, 'global'),
+            primary: true,
+            label: intl.formatMessage(messages.applyWallet),
+          },
+        ]}
+        scrollableContentClass="WalletList"
       >
         <Box>
           <div className={styles.header}>
@@ -206,7 +225,7 @@ export default class WalletListDialog extends Component<Props, State> {
               </button>
             </div>
           </div>
-          <Box sx={{ overflow: 'auto',  overflowY: 'auto', paddingX: '40px', height: '400px' }}>
+          <Box className="WalletList" sx={{ overflow: 'auto', overflowY: 'auto', height: '400px' }}>
             {cardanoWalletsIdx.length > 0 && (
               <div className={styles.sectionHeader}>
                 <h1>{intl.formatMessage(messages.cardano)}</h1>
@@ -277,42 +296,8 @@ export default class WalletListDialog extends Component<Props, State> {
               </Droppable>
             </DragDropContext>
           </Box>
-          <Stack
-            spacing={1}
-            direction="row"
-            sx={{
-              alignItems: 'center',
-              justifyContent: 'center',
-              padding: '40px',
-              borderTop: '1px solid var(--yoroi-palette-gray-100)',
-            }}
-          >
-            <Button
-              id="addWalletButton"
-              onClick={onAddWallet}
-              size="large"
-              variant="outlined"
-              color="primary"
-              fullWidth
-            >
-              {intl.formatMessage(messages.addWallet)}
-            </Button>
-            <Button
-              id="applyWalletButton"
-              onClick={this.onSelect}
-              size="large"
-              disabled={
-                this.state.selectedWallet === null ||
-                this.isCurrentWallet(this.state.selectedWallet, 'global')
-              }
-              fullWidth
-              variant="primary"
-            >
-              {intl.formatMessage(messages.applyWallet)}
-            </Button>
-          </Stack>
         </Box>
-      </DialogRevamp>
+      </Dialog>
     );
   }
 

packages/yoroi-extension/app/components/topbar/WalletListDialog.scss

@@ -1,25 +1,9 @@
 .component {
-  font-size: 16px;
-  min-width: 675px !important;
-  height: 700px;
-  max-height: unset !important;
-  padding-right: 0 !important;
-  padding-bottom: 0px !important;
-
-  & > div {
-    padding: 0px;
-    max-height: unset !important;
-  }
-
   .header {
     position: sticky;
     top: 0px;
     background: var(--yoroi-comp-dialog-background);
     padding-bottom: 14px;
-
-    padding-top: 14px;
-    padding-left: 40px;
-
   }
 
   .totalInfo {
@@ -48,7 +32,7 @@
   }
 
   .sectionHeader {
-    color: #A7AFC0;
+    color: #a7afc0;
     font-size: 14px;
     margin-top: 26px;
   }
@@ -60,4 +44,3 @@
     overflow-y: auto;
   }
 }
-

packages/yoroi-extension/app/components/transfer/ErrorPage.js

@@ -46,7 +46,6 @@ export default class ErrorPage extends Component<Props> {
         closeOnOverlayClick={false}
         closeButton={<DialogCloseButton />}
         onClose={onCancel}
-        className={styles.dialog}
       >
         <div className={styles.component}>
           <div>

packages/yoroi-extension/app/components/transfer/ErrorPage.scss

@@ -5,6 +5,7 @@
   height: 100%;
   align-items: center;
   justify-content: center;
+  max-width: 600px;
 }
 
 .body {