Merge pull request #3254 from Emurgo/feat/YOEXT-673/revamp-send-page

feat(send): revamp send page layout
Emurgo · Sep 27, 2023 · 3b5493c · 3b5493c
2 parents 107fd78 + dbbd963
commit 3b5493c
Show file tree

Hide file tree

Showing 40 changed files with 1,649 additions and 1,370 deletions.
diff --git a/packages/yoroi-extension/app/assets/images/assets-page/asset-no.inline.svg b/packages/yoroi-extension/app/assets/images/assets-page/asset-no.inline.svg
diff --git a/packages/yoroi-extension/app/assets/images/revamp/fingerprint-info.inline.svg b/packages/yoroi-extension/app/assets/images/revamp/fingerprint-info.inline.svg
diff --git a/packages/yoroi-extension/app/components/common/AmountInput.scss b/packages/yoroi-extension/app/components/common/AmountInput.scss
diff --git a/packages/yoroi-extension/app/components/common/Divider.js b/packages/yoroi-extension/app/components/common/Divider.js
@@ -0,0 +1,7 @@
+// @flow
+import { Box } from '@mui/material';
+import type { Node } from 'react';
+
+export function Divider(): Node {
+  return <Box sx={{ width: '100%', height: '1px', backgroundColor: 'grayscale.200' }} />;
+}
diff --git a/packages/yoroi-extension/app/components/common/NumericInputRP.js b/packages/yoroi-extension/app/components/common/NumericInputRP.js
@@ -13,7 +13,6 @@ import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
 import TextField from './TextField';
 import { Box } from '@mui/system';
 import { Typography } from '@mui/material';
-import styles from './AmountInput.scss';
 
 type NumericInputValue = null | number | string | BigNumber;
 
@@ -529,7 +528,23 @@ class AmountInputRevamp extends Component<AmountInputProps> {
     const { intl } = this.context;
 
     return (
-      <Box className={styles.component} sx={{ '& input::placeholder': { color: 'grayscale.400' } }}>
+      <Box
+        sx={{
+          width: '100%',
+          '& > div': {
+            padding: '0px',
+            margin: '0px',
+          },
+          '& input': {
+            border: 'none',
+            outline: 'none',
+            width: '100%',
+            fontSize: '24px',
+            lineHeight: '32px',
+          },
+          '& input::placeholder': { color: 'grayscale.600' },
+        }}
+      >
         <NumericInputRP {...this.props} />
       </Box>
     );

diff --git a/packages/yoroi-extension/app/components/common/stepper/Stepper.js b/packages/yoroi-extension/app/components/common/stepper/Stepper.js
@@ -17,58 +17,77 @@ type Props = {|
   steps: Array<StepProps>,
   currentStep: string,
   setCurrentStep(stepId: string): void,
+  sx?: Object,
 |};
 
 function Stepper(props: Props & Intl): Node {
-  const { intl, steps, currentStep, setCurrentStep } = props;
+  const { intl, steps, currentStep, setCurrentStep, sx } = props;
   const currentStepIdx = steps.findIndex(step => step.stepId === currentStep);
   if (currentStepIdx === -1) throw new Error(`Step to found. Should never happen`);
 
   return (
-    <Box>
-      <Stack sx={{ flexDirection: 'row' }} className={styles.stackContainer}>
-        {steps.map(({ stepId, message }, idx) => {
-          const isCurrentStep = currentStepIdx === idx;
-          const isPrevStep = idx < currentStepIdx;
-          const isFutureStep = idx > currentStepIdx;
-          let stepColor = 'grey.400';
-          let cursor = 'pointer';
+    <Stack sx={{ flexDirection: 'row', ...sx }} className={styles.stackContainer}>
+      {steps.map(({ stepId, message }, idx) => {
+        const isCurrentStep = currentStepIdx === idx;
+        const isPrevStep = idx < currentStepIdx;
+        const isFutureStep = idx > currentStepIdx;
+        let stepColor = 'grey.400';
+        let cursor = 'pointer';
 
-          if (isCurrentStep) stepColor = 'primary.600';
-          else if (isPrevStep) stepColor = 'primary.300';
+        if (isCurrentStep) stepColor = 'primary.600';
+        else if (isPrevStep) stepColor = 'primary.300';
+        if (isFutureStep) cursor = 'not-allowed';
 
-          if (isFutureStep) cursor = 'not-allowed';
-
-          return (
-            <Stack
-              sx={{ flexDirection: 'row' }}
-              className={styles.stackSteps}
-              key={stepId}
-              onClick={() => {
-                if (isPrevStep) setCurrentStep(stepId);
+        return (
+          <Stack
+            sx={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}
+            key={stepId}
+            onClick={() => {
+              if (isPrevStep) setCurrentStep(stepId);
+            }}
+          >
+            <Box
+              component="button"
+              sx={{
+                width: '24px',
+                height: '24px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                mr: '8px',
+                ...(!isPrevStep
+                  ? {
+                      borderWidth: '2.5px',
+                      borderStyle: 'solid',
+                    }
+                  : {}),
+                bgcolor: isCurrentStep ? 'primary.500' : 'unset',
+                borderRadius: '50%',
+                transition: 'color 300ms ease',
+                cursor,
+                borderColor: isCurrentStep ? 'primary.500' : stepColor,
               }}
             >
-              <Box
-                component="button"
-                className={styles.stackStep}
-                sx={{ borderColor: stepColor, cursor }}
-              >
-                {isPrevStep ? (
-                  <StepMarkIcon />
-                ) : (
-                  <Typography variant="body2" fontWeight={500} color={stepColor}>
-                    {idx + 1}
-                  </Typography>
-                )}
-              </Box>
-              <Typography sx={{ cursor }} variant="body1" color={stepColor} fontWeight={500}>
-                {intl.formatMessage(message)}
-              </Typography>
-            </Stack>
-          );
-        })}
-      </Stack>
-    </Box>
+              {isPrevStep ? (
+                <StepMarkIcon />
+              ) : (
+                <Typography
+                  variant="body2"
+                  fontWeight={500}
+                  color={isCurrentStep ? 'common.white' : stepColor}
+                  lineHeight="27px"
+                >
+                  {idx + 1}
+                </Typography>
+              )}
+            </Box>
+            <Typography sx={{ cursor }} variant="body1" color={stepColor} fontWeight={500}>
+              {intl.formatMessage(message)}
+            </Typography>
+          </Stack>
+        );
+      })}
+    </Stack>
   );
 }
 

diff --git a/packages/yoroi-extension/app/components/common/stepper/Stepper.scss b/packages/yoroi-extension/app/components/common/stepper/Stepper.scss
@@ -6,12 +6,6 @@
   margin-bottom: 48px;
 }
 
-.stackSteps {
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-}
-
 .stackStep {
   width: 24px;
   height: 24px;

diff --git a/packages/yoroi-extension/app/components/topbar/NavWalletDetailsRevamp.js b/packages/yoroi-extension/app/components/topbar/NavWalletDetailsRevamp.js
@@ -93,10 +93,9 @@ export default class NavWalletDetailsRevamp extends Component<Props> {
     } = this.props;
 
     const totalAmount = this.getTotalAmount();
-
     const showEyeIconSafe = showEyeIcon != null && showEyeIcon;
-
     const [accountPlateId, iconComponent] = plate ? constructPlate(plate, 0, styles.icon) : [];
+
     return (
       <Box
         sx={{

diff --git a/packages/yoroi-extension/app/components/topbar/NavWalletDetailsRevamp.scss b/packages/yoroi-extension/app/components/topbar/NavWalletDetailsRevamp.scss
@@ -74,7 +74,7 @@
   justify-content: center;
   align-items: flex-start;
   text-align: left;
-  font-size: 16px;
+  font-size: 12px;
   line-height: 22px;
   width: 100%;
   margin-left: 24px;
@@ -105,6 +105,10 @@
       font-size: 14px;
     }
 
+    &:nth-child(1) {
+      font-size: 14px;
+    }
+
     &:nth-child(2) {
       margin-top: -2px;
       text-align: left;

diff --git a/packages/yoroi-extension/app/components/wallet/send/MaxAssetsError.js b/packages/yoroi-extension/app/components/wallet/send/MaxAssetsError.js
@@ -7,46 +7,38 @@ import { defineMessages, intlShape, FormattedHTMLMessage } from 'react-intl';
 import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
 import globalMessages from '../../../i18n/global-messages';
 
-
 const messages = defineMessages({
-    maxNumberAllowed: {
-      id: 'wallet.send.form.dialog.maxNumberAllowed',
-      defaultMessage: '!!!<strong>{number} Assets</strong> is maximum number allowed to be send in one transaction',
-    }
+  maxNumberAllowed: {
+    id: 'wallet.send.form.dialog.maxNumberAllowed',
+    defaultMessage:
+      '!!!<strong>{number} Assets</strong> is maximum number allowed to be send in one transaction',
+  },
 });
 
 type Props = {|
   maxAssetsAllowed: number,
-|}
+|};
 
 export default class MaxAssetsError extends Component<Props> {
-    static contextTypes: {|intl: $npm$ReactIntl$IntlFormat|} = {
-        intl: intlShape.isRequired,
-    };
+  static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = {
+    intl: intlShape.isRequired,
+  };
 
-    render(): Node {
-        const { intl } = this.context;
+  render(): Node {
+    const { intl } = this.context;
 
-        return (
-          <Box
-            sx={{
-              boxShadow: 'var(--yoroi-warning-box-bg-shadow)',
-              color: 'var(--yoroi-palette-error-200)',
-              backgroundColor: 'rgba(255, 19, 81, 0.06)',
-              padding: '16px',
-              borderRadius: '8px'
-            }}
-          >
-            <Typography variant='h5' marginBottom='3px'>
-              {intl.formatMessage(globalMessages.errorLabel)}
-            </Typography>
-            <Typography color='var(--yoroi-palette-gray-900)'>
-              <FormattedHTMLMessage
-                {...messages.maxNumberAllowed}
-                values={{ number: this.props.maxAssetsAllowed }}
-              />
-            </Typography>
-          </Box>
-        )
-    }
-}
+    return (
+      <Box sx={{ backgroundColor: 'magenta.100', padding: '12px 16px', borderRadius: '8px' }}>
+        <Typography fontWeight={500} variant="body1" color="magenta.500" marginBottom="8px">
+          {intl.formatMessage(globalMessages.errorLabel)}
+        </Typography>
+        <Typography variant="body1" color="grayscale.900">
+          <FormattedHTMLMessage
+            {...messages.maxNumberAllowed}
+            values={{ number: this.props.maxAssetsAllowed }}
+          />
+        </Typography>
+      </Box>
+    );
+  }
+}