Add Vote Proposal card layout

src/components/v2/Icon/icons/check.tsx

@@ -2,12 +2,18 @@ import * as React from 'react';
 import { SVGProps } from 'react';
 
 const SvgCheck = (props: SVGProps<SVGSVGElement>) => (
-  <svg viewBox="0 0 65 64" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg
+    viewBox="0 0 65 64"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    strokeWidth={4}
+    {...props}
+  >
     <circle cx={32.5} cy={32} r={24} fill="currentColor" />
     <path
       d="m41.5 26-12 12-6-6"
       stroke="#fff"
-      strokeWidth={4}
+      strokeWidth="inherit"
       strokeLinecap="round"
       strokeLinejoin="round"
     />

src/components/v2/Icon/icons/dots.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgDots = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width="21"
+    height="4"
+    viewBox="0 0 21 4"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <circle cx="10.5" cy="2" r="2" fill="currentColor" />
+    <circle cx="18.5" cy="2" r="2" fill="currentColor" />
+    <circle cx="2.5" cy="2" r="2" fill="currentColor" />
+  </svg>
+);
+
+export default SvgDots;

src/components/v2/Icon/icons/exclamation.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgExclamation = (props: SVGProps<SVGSVGElement>) => (
+  <svg viewBox="0 0 3 18" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <circle cx="1.5" cy="16.5" r="1.5" fill="currentColor" />
+    <rect x="0.5" width="2" height="12" rx="1" fill="currentColor" />
+  </svg>
+);
+
+export default SvgExclamation;

src/components/v2/Icon/icons/index.ts

@@ -35,6 +35,8 @@ export { default as checkInline } from './checkInline';
 export { default as mark } from './mark';
 export { default as arrowShaft } from './arrowShaft';
 export { default as notice } from './notice';
+export { default as dots } from './dots';
+export { default as exclamation } from './exclamation';
 
 // Coin icons
 export { default as aave } from './coins/aave';

src/components/v2/VoteProposalUi/index.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { withThemeProvider, withCenterStory } from 'stories/decorators';
+import { VoteProposalUi } from '.';
+
+export default {
+  title: 'Components/VoteProposalUi',
+  decorators: [withThemeProvider, withCenterStory({ width: 600 })],
+  parameters: {
+    backgrounds: {
+      default: 'Default',
+    },
+  },
+};
+
+export const Active = () => <VoteProposalUi status="active" />;
+export const Queued = () => <VoteProposalUi status="queued" />;
+export const ReadyToExecute = () => <VoteProposalUi status="readyToExecute" />;
+export const Executed = () => <VoteProposalUi status="executed" />;
+export const Cancelled = () => <VoteProposalUi status="cancelled" />;

src/components/v2/VoteProposalUi/index.tsx

@@ -0,0 +1,131 @@
+/** @jsxImportSource @emotion/react */
+import React from 'react';
+import Paper from '@mui/material/Paper';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+
+import { Icon } from '../Icon';
+import { useStyles } from './styles';
+
+type Status = 'active' | 'queued' | 'readyToExecute' | 'executed' | 'cancelled';
+
+interface IStatusCard {
+  status: Status;
+}
+
+const StatusCard: React.FC<IStatusCard> = ({ status }) => {
+  const styles = useStyles();
+
+  switch (status) {
+    case 'active':
+      return (
+        <>
+          <Typography css={styles.statusText} variant="body2">
+            stats
+          </Typography>
+        </>
+      );
+    case 'queued':
+      return (
+        <>
+          <div css={[styles.iconWrapper, styles.iconDotsWrapper]}>
+            <Icon css={styles.icon} name="dots" />
+          </div>
+          <Typography css={styles.statusText} variant="body2">
+            Queue
+          </Typography>
+        </>
+      );
+    case 'readyToExecute':
+      return (
+        <>
+          <div css={[styles.iconWrapper, styles.iconInfoWrapper]}>
+            <Icon css={styles.icon} name="exclamation" />
+          </div>
+          <Typography css={styles.statusText} variant="body2">
+            Ready to execute
+          </Typography>
+        </>
+      );
+    case 'executed':
+      return (
+        <>
+          <div css={[styles.iconWrapper, styles.iconMarkWrapper]}>
+            <Icon css={[styles.icon, styles.iconCheck]} name="mark" />
+          </div>
+          <Typography css={styles.statusText} variant="body2">
+            Executed
+          </Typography>
+        </>
+      );
+    default:
+    case 'cancelled':
+      return (
+        <>
+          <div css={[styles.iconWrapper, styles.iconCloseWrapper]}>
+            <Icon css={styles.icon} name="close" />
+          </div>
+          <Typography css={styles.statusText} variant="body2">
+            Cancelled
+          </Typography>
+        </>
+      );
+  }
+};
+
+interface IVoteProposalUiProps {
+  className?: string;
+  status: Status;
+}
+
+export const VoteProposalUi: React.FC<IVoteProposalUiProps> = ({ className, status }) => {
+  const styles = useStyles();
+  return (
+    <Paper className={className} css={styles.root}>
+      <Grid container>
+        <Grid css={[styles.gridItem, styles.gridItemLeft]} item xs={12} sm={8}>
+          <div css={styles.cardHeader}>
+            <div css={styles.cardBadges}>
+              <Typography
+                variant="small2"
+                color="textPrimary"
+                css={[styles.cardBadgeItem, styles.cardBadgeNumber]}
+              >
+                #57
+              </Typography>
+              <Typography
+                variant="small2"
+                color="textPrimary"
+                css={[styles.cardBadgeItem, styles.cardBadgeActive]}
+              >
+                Active
+              </Typography>
+            </div>
+
+            <Typography variant="small2">Not voted</Typography>
+          </div>
+
+          <Typography variant="h4" css={styles.cardTitle}>
+            Buy back and burn and Tokenomic contribution finised soon
+          </Typography>
+
+          <div css={styles.cardFooter}>
+            <Typography variant="small2">
+              Active until:
+              <Typography variant="small2" color="textPrimary">
+                27 Jun 13:54
+              </Typography>
+            </Typography>
+
+            <Typography color="textPrimary" variant="small2">
+              27h : 13m : 54s
+            </Typography>
+          </div>
+        </Grid>
+        <Grid css={[styles.gridItem, styles.gridItemRight]} item xs={12} sm={4}>
+          <StatusCard status={status} />
+        </Grid>
+      </Grid>
+    </Paper>
+  );
+};

src/components/v2/VoteProposalUi/styles.ts

@@ -0,0 +1,124 @@
+import { css } from '@emotion/react';
+import { alpha, useTheme } from '@mui/material';
+
+export const useStyles = () => {
+  const theme = useTheme();
+
+  return {
+    root: css`
+      padding-top: 0;
+      padding-bottom: 0;
+      ${theme.breakpoints.down('sm')} {
+        padding-left: 0;
+        padding-right: 0;
+      }
+    `,
+    gridItem: css`
+      padding: ${theme.spacing(6, 0)};
+      ${theme.breakpoints.down('sm')} {
+        padding-left: ${theme.spacing(6)};
+        padding-right: ${theme.spacing(6)};
+      }
+    `,
+    gridItemLeft: css`
+      padding-right: ${theme.spacing(6)};
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+    `,
+    cardHeader: css`
+      display: flex;
+      justify-content: space-between;
+    `,
+    cardBadges: css`
+      /* TODO */
+    `,
+    cardBadgeItem: css`
+      padding: ${theme.spacing(1, 3)};
+      background-color: ${theme.palette.secondary.light};
+      border-radius: ${theme.shape.borderRadius.small}px;
+      margin-right: ${theme.spacing(2)};
+    `,
+    cardBadgeNumber: css`
+      /* TODO */
+    `,
+    cardBadgeActive: css`
+      background-color: ${alpha(theme.palette.interactive.success as string, 0.1)};
+      color: ${theme.palette.interactive.success};
+    `,
+    cardTitle: css`
+      padding-top: ${theme.spacing(5)};
+      padding-bottom: ${theme.spacing(6)};
+    `,
+    cardFooter: css`
+      display: flex;
+      justify-content: space-between;
+    `,
+    gridItemRight: css`
+      padding-left: ${theme.spacing(6)};
+      border-left: 1px solid ${theme.palette.secondary.light};
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      ${theme.breakpoints.down('sm')} {
+        flex-direction: row;
+        border-left: none;
+        border-top: 1px solid ${theme.palette.secondary.light};
+        padding-top: ${theme.spacing(10)};
+        padding-bottom: ${theme.spacing(10)};
+      }
+    `,
+
+    /* StatusCard styles */
+    statusText: css`
+      color: ${theme.palette.text.primary};
+      text-transform: none;
+      margin-top: ${theme.spacing(2)};
+      text-align: center;
+      ${theme.breakpoints.down('sm')} {
+        margin-top: 0;
+        margin-left: ${theme.spacing(3)};
+      }
+    `,
+
+    iconWrapper: css`
+      border-radius: 50%;
+      width: ${theme.shape.iconSize.xxLarge}px;
+      height: ${theme.shape.iconSize.xxLarge}px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      ${theme.breakpoints.down('sm')} {
+        width: ${theme.shape.iconSize.xLarge}px;
+        height: ${theme.shape.iconSize.xLarge}px;
+      }
+    `,
+    iconDotsWrapper: css`
+      background-color: ${theme.palette.text.secondary};
+    `,
+    iconInfoWrapper: css`
+      background-color: ${theme.palette.interactive.primary};
+    `,
+    iconMarkWrapper: css`
+      background-color: ${theme.palette.interactive.success};
+    `,
+    iconCloseWrapper: css`
+      background-color: ${theme.palette.interactive.error};
+    `,
+    icon: css`
+      width: ${theme.shape.iconSize.medium}px;
+      height: ${theme.shape.iconSize.medium}px;
+      color: white;
+      ${theme.breakpoints.down('sm')} {
+        width: ${theme.shape.iconSize.small}px;
+        height: ${theme.shape.iconSize.small}px;
+      }
+    `,
+    iconCheck: css`
+      background-color: ${theme.palette.interactive.success};
+      border-radius: 50%;
+      stroke-width: ${theme.spacing(0.5)};
+    `,
+  };
+};

src/theme/MuiThemeProvider/muiTheme.ts

@@ -88,9 +88,11 @@ export const SHAPE = {
     large: SPACING * 6,
   } as any, // our custom types seem to clash with the default MUI types
   iconSize: {
+    small: SPACING * 3,
     medium: SPACING * 4,
     large: SPACING * 5,
     xLarge: SPACING * 6,
+    xxLarge: SPACING * 10,
   },
   footerHeight: '56px',
   bannerHeight: '56px',

src/types/mui.d.ts

@@ -45,9 +45,11 @@ declare module '@mui/material/styles' {
       large: number;
     };
     iconSize: {
+      small: number;
       medium: number;
       large: number;
       xLarge: number;
+      xxLarge: number;
     };
     footerHeight: string;
     bannerHeight: string;