Merge pull request #3714 from Emurgo/sorin/YOEXT-1317/wallet-init

Dark theme support: restore and create wallet
Emurgo · Nov 29, 2024 · f52a6ab · f52a6ab
2 parents 02ae612 + 2ee304b
commit f52a6ab
Show file tree

Hide file tree

Showing 69 changed files with 1,289 additions and 1,102 deletions.
diff --git a/...nsion/app/UI/features/portfolio/useCases/TokenDetails/ChartDetails/TokenChartInterval.tsx b/...nsion/app/UI/features/portfolio/useCases/TokenDetails/ChartDetails/TokenChartInterval.tsx
@@ -16,17 +16,18 @@ const StyledButton = styled(Button)(({ theme, disabled, variant }: { theme: any;
   padding: '6px !important',
   minWidth: '36px',
   backgroundColor:
-    variant === 'contained' ? (disabled ? theme.palette.ds.gray_100 : theme.palette.ds.primary_500) : `transparent`,
+    variant === 'contained' ? (disabled ? theme.palette.ds.gray_100 : theme.palette.ds.primary_400) : `transparent`,
+  color: 'ds.gray_min',
 
   '&.MuiButton-contained': {
-    color: theme.palette.ds.gray_min,
+    color: 'ds.gray_min',
   },
   '&.MuiButton-secondary': {
-    color: disabled ? theme.palette.ds.gray_100 : theme.palette.ds.text_primary_medium,
+    color: disabled ? theme.palette.ds.gray_100 : theme.palette.ds.gray_min,
   },
   '&:hover': {
     backgroundColor:
-      variant === 'contained' ? (disabled ? theme.palette.ds.gray_100 : theme.palette.ds.primary_500) : `transparent`,
+      variant === 'contained' ? (disabled ? theme.palette.ds.gray_100 : theme.palette.ds.primary_500) : `ds.primary_200`,
   },
 }));
 

diff --git a/packages/yoroi-extension/app/assets/images/add-wallet/restore/15-word.inline.svg b/packages/yoroi-extension/app/assets/images/add-wallet/restore/15-word.inline.svg
diff --git a/packages/yoroi-extension/app/assets/images/add-wallet/restore/24-word.inline.svg b/packages/yoroi-extension/app/assets/images/add-wallet/restore/24-word.inline.svg
diff --git a/packages/yoroi-extension/app/assets/images/spinner-blue-solid.svg b/packages/yoroi-extension/app/assets/images/spinner-blue-solid.svg
diff --git a/packages/yoroi-extension/app/assets/images/spinner-gray-solid.svg b/packages/yoroi-extension/app/assets/images/spinner-gray-solid.svg
diff --git a/packages/yoroi-extension/app/assets/images/spinner-white-solid.svg b/packages/yoroi-extension/app/assets/images/spinner-white-solid.svg
diff --git a/packages/yoroi-extension/app/components/common/TextField.js b/packages/yoroi-extension/app/components/common/TextField.js
@@ -91,7 +91,7 @@ function TextField({
           letterSpacing: '0.2px',
         },
         '& .MuiFormLabel-root': {
-          color: theme => `${theme.palette.ds.text_gray_medium} !important`,
+          color: theme => `${theme.palette.ds.text_gray_low} !important`,
           backgroundColor: theme => `${theme.palette.ds.bg_color_max} !important`,
           padding: '0 4px',
         },
@@ -102,6 +102,9 @@ function TextField({
         'input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active': {
           WebkitBoxShadow: `0 0 0 30px ${appTheme.palette.ds.bg_color_max} inset !important`,
         },
+        '& .MuiInputBase-input.Mui-disabled': {
+          '-webkit-text-fill-color': theme => `${theme.palette.ds.text_gray_medium} !important`,
+        },
       }}
       /*
         In order to show placeholders for classic theme we dont' need to override

diff --git a/packages/yoroi-extension/app/components/common/autocomplete/Autocomplete.js b/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}
@@ -194,8 +178,8 @@ function Autocomplete({
       <ULList
         component="ul"
         {...getMenuProps()}
+        isOpen
         sx={{
-          boxShadow: isOpen ? '0px 3px 10px rgba(24, 26, 30, 0.08)' : 'unset',
           maxHeight: 44 * maxVisibleOptions + 'px',
           color: 'ds.gray_900',
           borderRadius: '8px',
@@ -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_gray_medium" sx={{ padding: '16px', bgcolor: 'ds.bg_color_max' }}>
+                {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.bg_color_contrast_min' : 'ds.bg_color_contrast_high',
+                      cursor: 'pointer',
+                    }}
+                    {...getItemProps({ item, index })}
+                  >
+                    <Typography component="span" color="ds.text_gray_medium" style={{ fontWeight: 'bold' }}>
+                      {inputValue?.toLowerCase()}
+                    </Typography>
+                    <Typography component="span" color="ds.text_gray_medium">
+                      {regularPart}
+                    </Typography>
+                  </Box>
+                );
+              })
             )}
           </>
         )}
@@ -244,9 +232,8 @@ Autocomplete.defaultProps = {
   noResultsMessage: '',
 };
 
-const ULList = styled(Box)(({ theme }) => ({
+const ULList = styled(Box)(({ theme, isOpen }) => ({
   width: '100%',
-  background: theme.palette.ds.bg_color_max,
   margin: 0,
   borderTop: 0,
   position: 'absolute',
@@ -259,12 +246,13 @@ const ULList = styled(Box)(({ theme }) => ({
   outline: '0',
   transition: 'opacity .1s ease',
   borderRadius: 0,
+  boxShadow: isOpen ? theme.palette.ds.light_shadow_dropdown_menu : 'unset',
 }));
 
 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;
@@ -273,7 +261,8 @@ const InputWrapper = styled(Box)(
   cursor: text;
   margin-bottom: 0;
   border-radius: 8px;
-  
+  marginBottom: '2px';
+
   & input {
     background-color: transparent;
     color: ${theme.palette.primary[600]};
@@ -295,8 +284,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};
       }`
         : ''
     }

diff --git a/packages/yoroi-extension/app/components/common/walletInfo/WalletInfo.js b/packages/yoroi-extension/app/components/common/walletInfo/WalletInfo.js
@@ -5,20 +5,23 @@ import type { TokenLookupKey } from '../../../api/common/lib/MultiToken';
 import type { TokenRow } from '../../../api/ada/lib/storage/database/primitives/tables';
 import { Component } from 'react';
 import { observer } from 'mobx-react';
-import { Typography, Tooltip } from '@mui/material';
-import {
-  splitAmount,
-  truncateToken,
-  truncateLongName,
-  maxNameLengthBeforeTruncation,
-} from '../../../utils/formatters';
+import { Typography, Tooltip, styled, Box } from '@mui/material';
+import { splitAmount, truncateToken, truncateLongName, maxNameLengthBeforeTruncation } from '../../../utils/formatters';
 import { ReactComponent as IconEyeOpen } from '../../../assets/images/forms/password-eye.inline.svg';
 import { ReactComponent as IconEyeClosed } from '../../../assets/images/forms/password-eye-close.inline.svg';
 import { hiddenAmount } from '../../../utils/strings';
 import { MultiToken } from '../../../api/common/lib/MultiToken';
 import { getTokenName } from '../../../stores/stateless/tokenHelpers';
 import styles from './WalletInfo.scss';
-import WalletAccountIcon from '../../topbar/WalletAccountIcon';
+import { constructPlate40 } from '../../topbar/WalletCard';
+
+const IconWrapper = styled(Box)(({ theme }) => ({
+  '& svg': {
+    '& path': {
+      fill: theme.palette.ds.el_gray_medium,
+    },
+  },
+}));
 
 type Props = {|
   +onUpdateHideBalance: void => Promise<void>,
@@ -31,23 +34,6 @@ type Props = {|
   +conceptualWalletName: string,
 |};
 
-function constructPlate(
-  plate: WalletChecksum,
-  saturationFactor: number,
-  divClass: string
-): [string, React$Element<'div'>] {
-  return [
-    plate.TextPart,
-    <div className={divClass}>
-      <WalletAccountIcon
-        iconSeed={plate.ImagePart}
-        saturationFactor={saturationFactor}
-        scalePx={6}
-      />
-    </div>,
-  ];
-}
-
 @observer
 export default class WalletInfo extends Component<Props> {
   static contextTypes: {| infoText: void |} = {
@@ -57,29 +43,37 @@ export default class WalletInfo extends Component<Props> {
   render(): Node {
     const { shouldHideBalance, onUpdateHideBalance, walletAmount, conceptualWalletName } = this.props;
 
-    const [accountPlateId, iconComponent] = this.props.plate
-      ? constructPlate(this.props.plate, 0, styles.icon)
-      : [];
+    const [accountPlateId, iconComponent] = this.props.plate ? constructPlate40(this.props.plate) : [];
 
     return (
       <div className={styles.wrapper}>
         <div className={styles.plateAndName}>
           {iconComponent}
           <div className={styles.content}>
-            <div className={styles.name} id='walletInfo-walletName-text'>
+            <Typography className={styles.name} id="walletInfo-walletName-text" color="ds.text_gray_medium" fontWeight="500">
               {this.generateNameElem(conceptualWalletName)}
-            </div>
+            </Typography>
             <div className={styles.type}>
-              <div className={styles.plate} id='walletInfo-walletPlate-text'>{accountPlateId}</div>
+              <Typography className={styles.plate} id="walletInfo-walletPlate-text" color="ds.text_gray_medium">
+                {accountPlateId}
+              </Typography>
             </div>
           </div>
         </div>
         <div className={styles.amountAndHideIcon}>
-          <div className={styles.amount} id='walletInfo-amount-text'>
+          <Typography className={styles.amount} color="ds.text_gray_medium" id="walletInfo-amount-text">
             {this.renderAmountDisplay({ shouldHideBalance, amount: walletAmount })}
-          </div>
+          </Typography>
           <button type="button" className={styles.toggleButton} onClick={onUpdateHideBalance}>
-            {shouldHideBalance ? <IconEyeClosed /> : <IconEyeOpen />}
+            {shouldHideBalance ? (
+              <IconWrapper>
+                <IconEyeClosed />{' '}
+              </IconWrapper>
+            ) : (
+              <IconWrapper>
+                <IconEyeOpen />
+              </IconWrapper>
+            )}
           </button>
         </div>
       </div>
@@ -102,10 +96,7 @@ export default class WalletInfo extends Component<Props> {
     if (request.shouldHideBalance) {
       balanceDisplay = <span>{hiddenAmount}</span>;
     } else {
-      const [beforeDecimalRewards, afterDecimalRewards] = splitAmount(
-        shiftedAmount,
-        tokenInfo.Metadata.numberOfDecimals
-      );
+      const [beforeDecimalRewards, afterDecimalRewards] = splitAmount(shiftedAmount, tokenInfo.Metadata.numberOfDecimals);
 
       balanceDisplay = (
         <>
@@ -131,8 +122,16 @@ export default class WalletInfo extends Component<Props> {
     const truncatedName = truncateLongName(walletName);
 
     return (
-      <Tooltip title={<Typography component="div" variant="body3">{walletName}</Typography>}>
-        <Typography component="div" variant="body-2-medium">{truncatedName}</Typography>
+      <Tooltip
+        title={
+          <Typography component="div" variant="body3">
+            {walletName}
+          </Typography>
+        }
+      >
+        <Typography component="div" variant="body-2-medium">
+          {truncatedName}
+        </Typography>
       </Tooltip>
     );
   };

diff --git a/packages/yoroi-extension/app/components/common/walletInfo/WalletInfo.scss b/packages/yoroi-extension/app/components/common/walletInfo/WalletInfo.scss
@@ -28,7 +28,6 @@
   font-weight: 500;
   font-size: 14px;
   line-height: 22px;
-  color: var(--yoroi-palette-gray-900);
   margin-right: 4px;
   display: flex;
   align-items: center;
@@ -40,7 +39,6 @@
 }
 
 .plate {
-  color: var(--yoroi-palette-gray-600);
   font-weight: 400;
   font-size: 12px;
   line-height: 20px;
@@ -64,7 +62,6 @@
   font-weight: 500;
   font-size: 14px;
   line-height: 22px;
-  color: var(--yoroi-palette-gray-900);
 
   .isLoading {
     margin-left: 9px;

diff --git a/packages/yoroi-extension/app/components/layout/CenteredLayout.js b/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%',
       }}
     >