Merge pull request #39 from oasisprotocol/ml/home-page-design-check-up

Update HomePage and its contents styles
oasisprotocol · Mar 15, 2024 · fa787a0 · fa787a0
2 parents 6a19e32 + 0d8e857
commit fa787a0
Show file tree

Hide file tree

Showing 13 changed files with 110 additions and 42 deletions.
diff --git a/frontend/src/components/Alert/index.tsx b/frontend/src/components/Alert/index.tsx
@@ -20,7 +20,7 @@ const alertTypeValuesMap: Record<AlertType, AlertTypeValues> = {
   },
   success: {
     header: 'Vote cast',
-    icon: <CheckCircleIcon />,
+    icon: <CheckCircleIcon size="xlarge" />,
   },
   loading: {
     header: 'Casting your vote',

diff --git a/frontend/src/components/Button/index.module.css b/frontend/src/components/Button/index.module.css
@@ -23,7 +23,7 @@
   font-size: 14px;
   line-height: 140%;
   font-weight: 400;
-  padding: 0.326rem 1.75rem;
+  padding: 0.4125rem 1.21875rem;
   letter-spacing: 0;
 }
 
@@ -45,6 +45,12 @@
     background-color: var(--white);
     color: var(--palatinate-blue);
   }
+
+  &.buttonSuccess {
+    background: var(--green-sheen);
+    color: var(--white);
+    border: 1px var(--green-sheen) solid;
+  }
 }
 
 .buttonOutline {
@@ -59,6 +65,12 @@
     color: var(--palatinate-blue);
     border: 1px var(--palatinate-blue) solid;
   }
+
+  &.buttonSuccess {
+    background-color: var(--white);
+    color: var(--green-sheen);
+    border: 1px var(--green-sheen) solid;
+  }
 }
 
 .buttonText {

diff --git a/frontend/src/components/Button/index.tsx b/frontend/src/components/Button/index.tsx
@@ -3,7 +3,7 @@ import { FC, MouseEventHandler, PropsWithChildren } from 'react'
 import { StringUtils } from '../../utils/string.utils.ts'
 
 type ButtonSize = 'small' | 'medium'
-type ButtonColor = 'primary' | 'secondary'
+type ButtonColor = 'primary' | 'secondary' | 'success'
 type ButtonVariant = 'solid' | 'outline' | 'text'
 
 interface Props extends PropsWithChildren {
@@ -25,6 +25,7 @@ const sizeMap: Record<ButtonSize, string> = {
 const colorMap: Record<ButtonColor, string> = {
   primary: classes.buttonPrimary,
   secondary: classes.buttonSecondary,
+  success: classes.buttonSuccess,
 }
 
 const variantMap: Record<ButtonVariant, string> = {

diff --git a/frontend/src/components/Card/index.module.css b/frontend/src/components/Card/index.module.css
@@ -4,7 +4,7 @@
   margin: 0 auto;
   width: 100%;
   max-width: 876px;
-  min-height: 688px;
+  min-height: 704px;
   padding: 2.25rem 4.6875rem 1.875rem;
   margin-bottom: 5rem;
   border-radius: 12px;

diff --git a/frontend/src/components/ConnectWallet/index.tsx b/frontend/src/components/ConnectWallet/index.tsx
@@ -1,6 +1,6 @@
 import { FC, useEffect, useState } from 'react'
 import { useWeb3 } from '../../hooks/useWeb3.ts'
-import { METAMASK_HOME_PAGE } from '../../constants/config.ts'
+import { METAMASK_HOME_PAGE_URL } from '../../constants/config.ts'
 import { Button } from '../Button'
 import { UnknownNetworkError } from '../../utils/errors.ts'
 import { ConnectedAccount } from '../ConnectedAccount'
@@ -62,7 +62,7 @@ export const ConnectWallet: FC = () => {
   return (
     <>
       {!isConnected && !providerAvailable && (
-        <a href={METAMASK_HOME_PAGE} target={'_blank'} rel={'noopener noreferrer'}>
+        <a href={METAMASK_HOME_PAGE_URL} target={'_blank'} rel={'noopener noreferrer'}>
           <Button className={classes.connectWalletBtn} color="secondary" disabled={isLoading}>
             Install MetaMask
           </Button>

diff --git a/frontend/src/components/Icon/index.tsx b/frontend/src/components/Icon/index.tsx
@@ -1,6 +1,5 @@
 import { cloneElement, FC, ReactElement, SVGProps } from 'react'
-
-type IconSize = 'small' | 'medium' | 'large' | 'xlarge'
+import { IconSize } from '../../types'
 
 interface Props {
   children: ReactElement

diff --git a/frontend/src/components/MascotCard/index.module.css b/frontend/src/components/MascotCard/index.module.css
@@ -1,4 +1,5 @@
 .mascotCard {
+  position: relative;
   display: flex;
   margin: 0 auto;
   width: 100%;
@@ -14,8 +15,9 @@
     flex-direction: column;
     justify-content: flex-start;
     max-width: 218px;
-    padding: 0.75rem 1.125rem 1.25rem;
+    padding: 0.625rem 1rem 0.875rem;
     text-align: center;
+    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
 
     img {
       margin-bottom: 0.75rem;
@@ -24,7 +26,11 @@
     }
 
     &:not(.mascotCardSelected) {
-      padding: 0.875rem 1.25rem 1.375rem;
+      padding: 0.75rem 1.125rem 1rem;
+    }
+
+    .mascotCardDescription {
+      margin: 0 -0.5rem 1.125rem;
     }
   }
 
@@ -49,9 +55,8 @@
 }
 
 .mascotCardDescription {
-  font-size: 18px;
+  font-size: 16px;
   font-weight: 400;
   line-height: 120%;
   letter-spacing: 0;
-  margin-bottom: 1.625rem;
 }
diff --git a/frontend/src/components/icons/CheckCircleIcon.tsx b/frontend/src/components/icons/CheckCircleIcon.tsx
@@ -3,9 +3,14 @@
 import { FC } from 'react'
 import CheckCircleSvg from '@phosphor-icons/core/assets/fill/check-circle-fill.svg?react'
 import { Icon } from '../Icon'
+import { IconSize } from '../../types'
 
-export const CheckCircleIcon: FC = () => (
-  <Icon size="xlarge">
+interface Props {
+  size: IconSize
+}
+
+export const CheckCircleIcon: FC<Props> = ({ size }) => (
+  <Icon size={size}>
     <CheckCircleSvg />
   </Icon>
 )
diff --git a/frontend/src/constants/config.ts b/frontend/src/constants/config.ts
@@ -77,7 +77,8 @@ export const POLL_CHOICES: readonly PollChoice[] = Object.freeze([
   },
 ])
 
-export const METAMASK_HOME_PAGE = 'https://metamask.io/'
+export const METAMASK_HOME_PAGE_URL = 'https://metamask.io/'
+export const VOTING_LANDING_PAGE_URL = 'https://oasisprotocol.org/blog'
 
 const {
   VITE_NETWORK: ENV_VITE_NETWORK,

diff --git a/frontend/src/pages/HomePage/index.module.css b/frontend/src/pages/HomePage/index.module.css
@@ -12,7 +12,7 @@
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-gap: 2.0625rem;
-  margin-bottom: 2.5rem;
+  margin-bottom: 2.25rem;
 }
 
 .mascotCardActions {
@@ -25,7 +25,7 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  margin-bottom: 2rem;
+  margin-bottom: 1.5rem;
 
   > * {
     align-self: center;
@@ -70,3 +70,23 @@
   margin-top: -2rem;
   margin-bottom: 1rem;
 }
+
+.landingPageLink {
+  color: var(--dark-gunmetal);
+}
+
+.mascotCardSelectBtn {
+  min-width: 97px;
+}
+
+.mascotCardSelectedCheckIcon {
+  position: absolute;
+  top: -0.9375rem;
+  right: -1.125rem;
+  width: 30px;
+  height: 30px;
+  border-radius: 25%;
+  color: var(--green-sheen);
+  /* TODO: Fix border */
+  background: var(--white);
+}
diff --git a/frontend/src/pages/HomePage/index.tsx b/frontend/src/pages/HomePage/index.tsx
@@ -4,7 +4,7 @@ import { Button } from '../../components/Button'
 import { Card } from '../../components/Card'
 import classes from './index.module.css'
 import { MascotCard } from '../../components/MascotCard'
-import { POLL_CHOICES } from '../../constants/config.ts'
+import { POLL_CHOICES, VOTING_LANDING_PAGE_URL } from '../../constants/config.ts'
 import { useWeb3 } from '../../hooks/useWeb3.ts'
 import { Alert } from '../../components/Alert'
 import { StringUtils } from '../../utils/string.utils.ts'
@@ -13,6 +13,7 @@ import { Navigate, useSearchParams } from 'react-router-dom'
 import { DateUtils } from '../../utils/date.utils.ts'
 import { MascotChoices } from '../../types'
 import { NumberUtils } from '../../utils/number.utils.ts'
+import { CheckCircleIcon } from '../../components/icons/CheckCircleIcon.tsx'
 
 export const HomePage: FC = () => {
   const {
@@ -161,32 +162,54 @@ export const HomePage: FC = () => {
       {pageStatus === 'vote' && (
         <Card>
           <p className={classes.cardHeaderText}>
-            Select your preferred mascot option. Once you confirm this vote you will not be able to cancel it.
-            Read more about the campaign on our website.
+            Select your preferred mascot option. Once you confirm this vote you will not
+            <br />
+            be able to cancel it. Read more about the campaign{' '}
+            <a
+              className={classes.landingPageLink}
+              href={VOTING_LANDING_PAGE_URL}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              on our website
+            </a>
+            .
           </p>
           <div className={classes.mascotCards}>
-            {POLL_CHOICES.map(({ name, description, imagePath }, choiceId) => (
-              <MascotCard
-                key={name}
-                title={name}
-                description={description}
-                image={<img alt={name} src={imagePath} />}
-                selected={choiceId === selectedChoice}
-                actions={
-                  <div className={classes.mascotCardActions}>
-                    <Button
-                      variant="outline"
-                      size="small"
-                      color="secondary"
-                      disabled={isLoading}
-                      onClick={() => handleSelectChoice(choiceId as MascotChoices)}
-                    >
-                      Select
-                    </Button>
-                  </div>
-                }
-              />
-            ))}
+            {POLL_CHOICES.map(({ name, description, imagePath }, choiceId) => {
+              const isSelected = choiceId === selectedChoice
+
+              return (
+                <MascotCard
+                  key={name}
+                  title={name}
+                  description={description}
+                  image={<img alt={name} src={imagePath} />}
+                  selected={isSelected}
+                  actions={
+                    <>
+                      <div className={classes.mascotCardActions}>
+                        <Button
+                          className={classes.mascotCardSelectBtn}
+                          variant={isSelected ? 'solid' : 'outline'}
+                          size="small"
+                          color={isSelected ? 'success' : 'secondary'}
+                          disabled={isLoading}
+                          onClick={() => handleSelectChoice(choiceId as MascotChoices)}
+                        >
+                          Select{isSelected ? 'ed' : ''}
+                        </Button>
+                      </div>
+                      {isSelected && (
+                        <span className={classes.mascotCardSelectedCheckIcon}>
+                          <CheckCircleIcon size="medium" />
+                        </span>
+                      )}
+                    </>
+                  }
+                />
+              )
+            })}
           </div>
           <div className={classes.cardAction}>
             {(isConnected || selectedChoice === null) && NumberUtils.isValidMascotChoiceId(previousVote) && (

diff --git a/frontend/src/types/icon-size.ts b/frontend/src/types/icon-size.ts
@@ -0,0 +1 @@
+export type IconSize = 'small' | 'medium' | 'large' | 'xlarge'
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
@@ -3,3 +3,4 @@ export type { Poll } from './poll.ts'
 export type { PollChoice } from './poll-choice.ts'
 export type { VotesStorage } from './votes-storage.ts'
 export type { MascotChoices } from './mascot-choices.ts'
+export type { IconSize } from './icon-size.ts'