Dark theme support: restore and create wallet

packages/yoroi-extension/app/components/common/autocomplete/Autocomplete.js

@@ -2,8 +2,7 @@
 import type { Node } from 'react';
 import { useState } from 'react';
 import { useCombobox } from 'downshift';
-import { Input, Box, FormControl } from '@mui/material';
-import { styled } from '@mui/system';
+import { Input, Box, FormControl, Typography, styled } from '@mui/material';
 
 type Props = {|
   +options: Array<string>,
@@ -31,9 +30,7 @@ function useCachedOptions(options) {
     if (!inputValue) return [];
 
     if (!cachedOptions[inputValue]) {
-      cachedOptions[inputValue] = options.filter(w =>
-        w.toLowerCase().startsWith(inputValue?.toLowerCase() ?? '')
-      );
+      cachedOptions[inputValue] = options.filter(w => w.toLowerCase().startsWith(inputValue?.toLowerCase() ?? ''));
     }
 
     return cachedOptions[inputValue];
@@ -66,15 +63,7 @@ function Autocomplete({
   const filteredList = isInputPresent ? getCachedOptions(inputValue) : [];
   const hasError = isInputPresent && filteredList.length === 0;
 
-  const {
-    isOpen,
-    getMenuProps,
-    getInputProps,
-    getComboboxProps,
-    highlightedIndex,
-    getItemProps,
-    closeMenu,
-  } = useCombobox({
+  const { isOpen, getMenuProps, getInputProps, getComboboxProps, highlightedIndex, getItemProps, closeMenu } = useCombobox({
     inputValue,
     defaultHighlightedIndex: 0,
     selectedItem: '',
@@ -168,12 +157,7 @@ function Autocomplete({
 
   return (
     <SFormControl error={Boolean(error)} onKeyDownCapture={handleKeyDownEvent}>
-      <InputWrapper
-        isVerified={isVerified}
-        onClick={() => !isOpen}
-        error={hasError}
-        isOpen={isOpen}
-      >
+      <InputWrapper isVerified={isVerified} onClick={() => !isOpen} error={hasError} isOpen={isOpen}>
         <Box {...getComboboxProps()}>
           <Input
             inputRef={inputRef}
@@ -206,27 +190,31 @@ function Autocomplete({
         {isOpen && (
           <>
             {filteredList.length === 0 ? (
-              <Box sx={{ padding: '16px', bgcolor: 'ds.bg_color_max' }}>{noResultsMessage}</Box>
+              <Typography color="ds.text_primary_medium" sx={{ padding: '16px', bgcolor: 'ds.bg_color_min' }}>
+                {noResultsMessage}
+              </Typography>
             ) : (
-              <Box sx={{ paddingY: '8px' }}>
-                {filteredList.map((item, index) => {
-                  const regularPart = inputValue != null ? item.replace(inputValue.toLowerCase(), '') : item;
-                  return (
-                    <Box
-                      key={`${item}${index}`}
-                      sx={{
-                        padding: '16px',
-                        backgroundColor: highlightedIndex === index ? 'ds.gray_50' : 'ds.bg_color_max',
-                        cursor: 'pointer',
-                      }}
-                      {...getItemProps({ item, index })}
-                    >
-                      <span style={{ fontWeight: 'bold' }}>{inputValue?.toLowerCase()}</span>
-                      <span>{regularPart}</span>
-                    </Box>
-                  );
-                })}
-              </Box>
+              filteredList.map((item, index) => {
+                const regularPart = inputValue != null ? item.replace(inputValue.toLowerCase(), '') : item;
+                return (
+                  <Box
+                    key={`${item}${index}`}
+                    sx={{
+                      padding: '16px',
+                      backgroundColor: highlightedIndex === index ? 'ds.gray_200' : 'ds.bg_color_min',
+                      cursor: 'pointer',
+                    }}
+                    {...getItemProps({ item, index })}
+                  >
+                    <Typography component="span" color="ds.text_primary_medium" style={{ fontWeight: 'bold' }}>
+                      {inputValue?.toLowerCase()}
+                    </Typography>
+                    <Typography component="span" color="ds.text_primary_medium">
+                      {regularPart}
+                    </Typography>
+                  </Box>
+                );
+              })
             )}
           </>
         )}
@@ -244,9 +232,8 @@ Autocomplete.defaultProps = {
   noResultsMessage: '',
 };
 
-const ULList = styled(Box)(({ theme }) => ({
+const ULList = styled(Box)(() => ({
   width: '100%',
-  background: theme.palette.ds.bg_color_max,
   margin: 0,
   borderTop: 0,
   position: 'absolute',
@@ -264,7 +251,7 @@ const ULList = styled(Box)(({ theme }) => ({
 const InputWrapper = styled(Box)(
   ({ theme, error, isVerified }) => `
   width: 100%;
-  background-color: transparent;
+  background-color: ${theme.palette.ds.bg_color_max};
   height: 40px;
   align-content: baseline;
   display: inline-flex;
@@ -295,8 +282,8 @@ const InputWrapper = styled(Box)(
         ? `&:not([value=""]):not(:focus) {
         border-color: transparent;
         border: 0;
+        color: ${isVerified && theme.palette.ds.black_static};
         background: ${isVerified ? theme.palette.ds.el_secondary : theme.palette.ds.primary_100};
-        color: ${isVerified ? theme.palette.ds.black_static : theme.palette.ds.primary_600};
       }`
         : ''
     }

packages/yoroi-extension/app/components/layout/CenteredLayout.js

@@ -14,7 +14,7 @@ function CenteredLayout({ children }: Props): Node {
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'space-between',
-        backgroundColor: 'var(--yoroi-loading-background-color)',
+        backgroundColor: 'ds.bg_color_max',
         height: '100%',
       }}
     >

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

@@ -161,18 +161,18 @@ export default class WalletCard extends Component<Props, State> {
                     />
                   </div>
                   <div className={styles.extraInfo}>
-                    <div className={styles.label}>
-                      {intl.formatMessage(messages.tokenTypes)}{' '}
-                      <span className={styles.value} id={walletTokensAmountId}>
+                    <Typography className={styles.label} color="ds.text_gray_medium">
+                      {intl.formatMessage(messages.tokenTypes)}:{' '}
+                      <Typography component="span" id={walletTokensAmountId} fontWeight="500">
                         {tokenTypes}
-                      </span>
-                    </div>
-                    <div className={styles.label}>
-                      NFTs{' '}
-                      <span className={styles.value} id={walletNFTsAmountId}>
+                      </Typography>
+                    </Typography>
+                    <Typography className={styles.label} color="ds.text_gray_medium">
+                      NFTs:{' '}
+                      <Typography component="span" id={walletNFTsAmountId} fontWeight="500">
                         {nfts}
-                      </span>
-                    </div>
+                      </Typography>
+                    </Typography>
                   </div>
                 </div>
               </div>

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

@@ -69,12 +69,9 @@
   flex: 1;
   text-align: left;
   .label {
-    color: var(--yoroi-palette-gray-600);
     line-height: 22px;
   }
-  .value {
-    color: var(--yoroi-palette-gray-900);
-  }
+
 }
 .actions {
   opacity: 0;

packages/yoroi-extension/app/components/wallet/add/option-dialog/PickCurrencyOptionDialog.js

@@ -12,6 +12,7 @@ import OptionBlock from '../../../widgets/options/OptionBlock';
 import environment from '../../../../environment';
 
 import styles from '../../../widgets/options/OptionListWrapperStyle.scss';
+import { Typography, Link } from '@mui/material';
 
 const messages = defineMessages({
   dialogTitle: {
@@ -24,7 +25,8 @@ const messages = defineMessages({
   },
   testnetDescription: {
     id: 'wallet.currency.pick.testnetDescription',
-    defaultMessage: '!!!Testnet are alternative chain to be used for testing. This allows application developers or testers to experiment, without having to use real coins.',
+    defaultMessage:
+      '!!!Testnet are alternative chain to be used for testing. This allows application developers or testers to experiment, without having to use real coins.',
   },
 });
 
@@ -39,7 +41,7 @@ type Props = {|
 
 @observer
 export default class PickCurrencyOptionDialog extends Component<Props> {
-  static contextTypes: {|intl: $npm$ReactIntl$IntlFormat|} = {
+  static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = {
     intl: intlShape.isRequired,
   };
 
@@ -62,17 +64,15 @@ export default class PickCurrencyOptionDialog extends Component<Props> {
               title="Cardano"
               learnMoreText={
                 <>
-                  {intl.formatMessage(messages.cardanoDescription)}<br />
-                  <a
-                    href="https://cardano.org"
-                    onClick={event => this.props.onExternalLinkClick(event)}
-                  >
+                  <Typography color="ds.text_gray_low">{intl.formatMessage(messages.cardanoDescription)}</Typography>
+                  <Link href="https://cardano.org" onClick={event => this.props.onExternalLinkClick(event)}>
                     {intl.formatMessage(globalMessages.learnMore)}
-                  </a>
-                </>}
+                  </Link>
+                </>
+              }
               onSubmit={this.props.onCardano}
             />
-            {(!environment.isProduction() || environment.isNightly() || environment.isTest()) &&
+            {(!environment.isProduction() || environment.isNightly() || environment.isTest()) && (
               <>
                 <OptionBlock
                   parentName="PickCurrencyOptionDialog"
@@ -81,18 +81,17 @@ export default class PickCurrencyOptionDialog extends Component<Props> {
                   onSubmit={this.props.onCardanoPreprodTestnet}
                   learnMoreText={
                     <>
-                      {intl.formatMessage(messages.testnetDescription)}<br />
-                      <a
-                        href="https://testnets.cardano.org/"
-                        onClick={event => this.props.onExternalLinkClick(event)}
-                      >
+                      {intl.formatMessage(messages.testnetDescription)}
+                      <br />
+                      <a href="https://testnets.cardano.org/" onClick={event => this.props.onExternalLinkClick(event)}>
                         {intl.formatMessage(globalMessages.learnMore)}
                       </a>
-                    </>}
+                    </>
+                  }
                 />
               </>
-            }
-            {(!environment.isProduction() || environment.isNightly() || environment.isTest()) &&
+            )}
+            {(!environment.isProduction() || environment.isNightly() || environment.isTest()) && (
               <>
                 <OptionBlock
                   parentName="PickCurrencyOptionDialog"
@@ -101,18 +100,17 @@ export default class PickCurrencyOptionDialog extends Component<Props> {
                   onSubmit={this.props.onCardanoPreviewTestnet}
                   learnMoreText={
                     <>
-                      {intl.formatMessage(messages.testnetDescription)}<br />
-                      <a
-                        href="https://testnets.cardano.org/"
-                        onClick={event => this.props.onExternalLinkClick(event)}
-                      >
+                      {intl.formatMessage(messages.testnetDescription)}
+                      <br />
+                      <a href="https://testnets.cardano.org/" onClick={event => this.props.onExternalLinkClick(event)}>
                         {intl.formatMessage(globalMessages.learnMore)}
                       </a>
-                    </>}
+                    </>
+                  }
                 />
               </>
-            }
-            {(!environment.isProduction() || environment.isNightly() || environment.isTest()) &&
+            )}
+            {(!environment.isProduction() || environment.isNightly() || environment.isTest()) && (
               <>
                 <OptionBlock
                   parentName="PickCurrencyOptionDialog"
@@ -121,17 +119,16 @@ export default class PickCurrencyOptionDialog extends Component<Props> {
                   onSubmit={this.props.onCardanoSanchoTestnet}
                   learnMoreText={
                     <>
-                      {intl.formatMessage(messages.testnetDescription)}<br />
-                      <a
-                        href="https://testnets.cardano.org/"
-                        onClick={event => this.props.onExternalLinkClick(event)}
-                      >
+                      {intl.formatMessage(messages.testnetDescription)}
+                      <br />
+                      <a href="https://testnets.cardano.org/" onClick={event => this.props.onExternalLinkClick(event)}>
                         {intl.formatMessage(globalMessages.learnMore)}
                       </a>
-                    </>}
+                    </>
+                  }
                 />
               </>
-            }
+            )}
           </ul>
         </div>
       </Dialog>

packages/yoroi-extension/app/components/wallet/create-wallet/HowToSaveRecoveryPhraseTipsDialog.js

@@ -21,13 +21,11 @@ const messages: Object = defineMessages({
   },
   thirdTip: {
     id: 'wallet.create.dialog.howToSaveRecoveryPhrase.thirdTip',
-    defaultMessage:
-      '!!!Write the recovery phrase on a piece of paper and store in a secure location like a safety deposit box. ',
+    defaultMessage: '!!!Write the recovery phrase on a piece of paper and store in a secure location like a safety deposit box. ',
   },
   forthTip: {
     id: 'wallet.create.dialog.howToSaveRecoveryPhrase.forthTip',
-    defaultMessage:
-      '!!!It is recommended to have 2 or 3 copies of the recovery phrase in different secure locations.',
+    defaultMessage: '!!!It is recommended to have 2 or 3 copies of the recovery phrase in different secure locations.',
   },
 });
 
@@ -53,13 +51,13 @@ function HowToSaveRecoveryPhraseTipsDialog(props: Props & Intl): Node {
 
   return (
     <InfoDialog open={open} onClose={onClose}>
-      <Typography component="div" textAlign="center" variant="body1" fontWeight="500" mb="16px">
+      <Typography component="div" textAlign="center" variant="body1" fontWeight="500" mb="16px" color="ds.text_gray_medium">
         {intl.formatMessage(messages.title)}
       </Typography>
       <Box component="ul" sx={{ listStyle: 'outside', px: '24px' }}>
         {tips.map(([tipId, tipTxt]) => (
           <Box key={tipId} component="li">
-            <Typography component="div" variant="body1" color="grey.800">
+            <Typography component="div" variant="body1" color="ds.text_gray_medium">
               {intl.formatMessage(tipTxt)}
             </Typography>
           </Box>

packages/yoroi-extension/app/components/wallet/create-wallet/RecoveryPhrase.js

@@ -45,6 +45,7 @@ function RecoveryPhrase(props: Props & Intl): Node {
               key={word}
               columns={7}
               sx={{
+                backgroundColor: 'ds.primary_100',
                 textAlign: 'center',
                 borderRadius: '8px',
                 display: 'flex',
@@ -56,7 +57,8 @@ function RecoveryPhrase(props: Props & Intl): Node {
               }}
               id={'recoveryPhraseWord' + idx}
             >
-              <Typography component="div"
+              <Typography
+                component="div"
                 sx={{
                   width: '124px',
                   whiteSpace: 'nowrap',
@@ -90,11 +92,7 @@ function RecoveryPhrase(props: Props & Intl): Node {
       >
         {shouldShowRecoveryPhrase ? <ClosedEyeIcon /> : <OpenedEyeIcon />}
         <Typography component="div" variant="body2" fontWeight="500">
-          {intl.formatMessage(
-            shouldShowRecoveryPhrase
-              ? messages.hideRecoveryPhraseBtn
-              : messages.showRecoveryPhraseBtn
-          )}
+          {intl.formatMessage(shouldShowRecoveryPhrase ? messages.hideRecoveryPhraseBtn : messages.showRecoveryPhraseBtn)}
         </Typography>
       </Button>
     </Box>

packages/yoroi-extension/app/components/wallet/create-wallet/StepController.js

@@ -16,14 +16,7 @@ function StepController(props: Props): Node {
   const { actions } = props;
 
   return (
-    <Stack
-      direction="row"
-      alignItems="center"
-      justifyContent="center"
-      mt="14px"
-      py="24px"
-      gap="24px"
-    >
+    <Stack direction="row" alignItems="center" justifyContent="center" mt="14px" py="24px" gap="24px">
       {actions.map(({ type, label, disabled, onClick }, idx) => {
         const isPrimary = type === 'primary';
         return (