feat(voting): revamp voting page & dialogs

packages/yoroi-extension/app/components/common/card/Card.js

@@ -0,0 +1,39 @@
+// @flow
+import type { Node } from 'react';
+import { Box, Typography } from '@mui/material';
+import styles from './Card.scss';
+
+type Props = {|
+  label: string,
+  description: string | Node,
+  imageSrc: string,
+  onClick?: () => void,
+  children?: Node,
+  style?: Object,
+|};
+
+export default function Card(props: Props): Node {
+  const { label, description, imageSrc, onClick, style } = props;
+  return (
+    <button onClick={onClick} className={styles.component} style={style}>
+      <Box>
+        <img src={imageSrc} alt={label} />
+      </Box>
+      <Typography
+        variant="h3"
+        color="grayscale.max"
+        fontWeight={500}
+        textAlign="center"
+        padding="0px 40px"
+        mt="16px"
+        mb="4px"
+      >
+        {label}
+      </Typography>
+      <Typography variant="body2" color="grayscale.900" mb="16px">
+        {description}
+      </Typography>
+      {props.children}
+    </button>
+  );
+}

packages/yoroi-extension/app/components/common/card/Card.scss

@@ -0,0 +1,33 @@
+.component {
+  background: linear-gradient(180deg, #e4e8f7 0%, #c6f7f7 100%);
+  border-radius: 8px;
+  padding: 16px;
+  width: 100%;
+  max-width: 312px;
+  min-height: 352px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  cursor: pointer;
+  position: relative;
+  z-index: 1;
+
+  &::before {
+    position: absolute;
+    content: '';
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+    background: linear-gradient(180deg, #93f5e1 0%, #c6f7ed 100%);
+    border-radius: 8px;
+    z-index: -1;
+    transition: opacity 300ms linear;
+    opacity: 0;
+  }
+
+  &:hover::before {
+    opacity: 1;
+  }
+}

packages/yoroi-extension/app/components/common/stepper/Stepper.js

@@ -91,4 +91,4 @@ function Stepper(props: Props & Intl): Node {
   );
 }
 
-export default (injectIntl(observer(Stepper)): ComponentType<Props>);
+export default (injectIntl(observer(Stepper)): ComponentType<Props>);

packages/yoroi-extension/app/components/common/stepper/Stepper.scss

@@ -17,4 +17,4 @@
   border-style: solid;
   border-radius: 50%;
   transition: color 300ms ease;
-}
+}

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

@@ -21,6 +21,8 @@ type Props = {|
 |};
 
 type InjectedProps = {| isRevampLayout: boolean, currentTheme: string |};
+
+type AllProps = {| ...Props, ...InjectedProps |};
 /** Adds a top bar above the wrapped node */
 function TopBarLayout({
   banner,
@@ -36,7 +38,7 @@ function TopBarLayout({
   isRevampLayout,
   asModern,
   bgcolor,
-}: Props & InjectedProps) {
+}: AllProps) {
   const isModern = currentTheme === THEMES.YOROI_MODERN;
 
   const getContentUnderBanner: void => Node = () => {
@@ -50,7 +52,6 @@ function TopBarLayout({
         <Box
           sx={{
             position: 'relative',
-            overflow: 'auto',
             height: '100%',
             '&::-webkit-scrollbar-button': {
               height: '7px',
@@ -67,12 +68,7 @@ function TopBarLayout({
               flex: '0 1 auto',
               height: '100%',
             }),
-            ...(isRevampLayout &&
-              asModern !== true &&
-              // $FlowFixMe
-              !isModern && {
-                overflow: 'auto',
-              }),
+            overflow: isRevampLayout && asModern !== true && !isModern ? 'auto' : '',
           }}
         >
           {isRevampLayout && asModern !== true && !isModern ? (
@@ -187,15 +183,7 @@ function TopBarLayout({
             display: 'flex',
             flexDirection: 'column',
             position: 'relative',
-            backgroundColor:
-              showInContainer === true && isRevampLayout
-                ? 'common.white'
-                : 'var(--yoroi-palette-gray-50)',
-            ...(isRevampLayout &&
-              asModern !== true &&
-              !isModern && {
-                backgroundColor: 'common.white',
-              }),
+            backgroundColor: isRevampLayout && asModern !== true && !isModern ? 'common.white' : '',
           }}
         >
           {banner}

packages/yoroi-extension/app/components/wallet/voting/ConfirmPinDialog.js

@@ -18,11 +18,14 @@ import PinInput from '../../widgets/forms/PinInput';
 
 import styles from './ConfirmPinDialog.scss';
 import type { StepsList } from './types';
+import { Typography } from '@mui/material';
+import Stepper from '../../common/stepper/Stepper';
 
 const messages = defineMessages({
   line1: {
     id: 'wallet.voting.dialog.step.confirm.line1',
-    defaultMessage: '!!!Please enter the PIN as you will need it <strong>every time</strong> you want to access the Catalyst Voting app.',
+    defaultMessage:
+      '!!!Please enter the PIN as you will need it <strong>every time</strong> you want to access the Catalyst Voting app.',
   },
 });
 
@@ -36,13 +39,13 @@ type Props = {|
   +classicTheme: boolean,
   +pinValidation: string => boolean,
   +isProcessing: boolean,
+  +isRevamp: boolean,
 |};
 
 @observer
 export default class ConfirmPinDialog extends Component<Props> {
-
-  static contextTypes: {|intl: $npm$ReactIntl$IntlFormat|} = {
-    intl: intlShape.isRequired
+  static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = {
+    intl: intlShape.isRequired,
   };
   @observable pinForm: void | ReactToolboxMobxForm;
 
@@ -63,13 +66,15 @@ export default class ConfirmPinDialog extends Component<Props> {
       isProcessing,
     } = this.props;
 
-    const dailogActions = [{
-      label: intl.formatMessage(globalMessages.stepConfirm),
-      primary: true,
-      onClick: this._submitForm,
-      isSubmitting: isProcessing,
-      disabled: isProcessing,
-    }];
+    const dailogActions = [
+      {
+        label: intl.formatMessage(globalMessages.stepConfirm),
+        primary: true,
+        onClick: this._submitForm,
+        isSubmitting: isProcessing,
+        disabled: isProcessing,
+      },
+    ];
 
     return (
       <Dialog
@@ -81,14 +86,35 @@ export default class ConfirmPinDialog extends Component<Props> {
         backButton={<DialogBackButton onBack={goBack} />}
         onClose={cancel}
       >
-        <ProgressStepBlock
-          stepsList={stepsList}
-          progressInfo={progressInfo}
-          classicTheme={classicTheme}
-        />
-        <div className={classnames([styles.lineText, styles.firstItem])}>
-          <FormattedHTMLMessage {...messages.line1} />
-        </div>
+        {this.props.isRevamp ? (
+          <>
+            <Stepper
+              currentStep={String(progressInfo.currentStep)}
+              steps={stepsList.map(step => ({ message: step.message, stepId: String(step.step) }))}
+              setCurrentStep={() => goBack()}
+            />
+            <Typography
+              textAlign="center"
+              pt="24px"
+              pb="40px"
+              variant="body1"
+              color="grayscale.900"
+            >
+              <FormattedHTMLMessage {...messages.line1} />
+            </Typography>
+          </>
+        ) : (
+          <>
+            <ProgressStepBlock
+              stepsList={stepsList}
+              progressInfo={progressInfo}
+              classicTheme={classicTheme}
+            />
+            <div className={classnames([styles.lineText, styles.firstItem])}>
+              <FormattedHTMLMessage {...messages.line1} />
+            </div>
+          </>
+        )}
         <div className={styles.pinInputContainer}>
           <PinInput
             setForm={form => this.setPinForm(form)}
@@ -101,7 +127,8 @@ export default class ConfirmPinDialog extends Component<Props> {
             allowEmptyInput={false}
           />
         </div>
-      </Dialog>);
+      </Dialog>
+    );
   }
 
   _submitForm: void => Promise<void> = async () => {