[CLIENT] UI improvements (#49)

* client UI improvements

* fix proof generation modal

client/src/components/Button/index.tsx

@@ -6,13 +6,16 @@ export const PrimaryButton = styled.button`
   align-items: center;
   justify-content: center;
   width: 100%;
-  padding: 16px;
+  padding: 19px 16px;
   background-color: ${({ theme }) => theme.accent1};
   border: 0;
   border-radius: 12px;
   font-weight: 500;
   text-decoration: none;
   cursor: pointer;
+  color: ${({ theme }) => theme.neutral1};
+  font-size: 16px;
+  font-weight: 485;
 
   &:disabled {
     background-color: ${({ theme }) => theme.surface};

client/src/components/Card/index.tsx

@@ -5,7 +5,7 @@ import { Column } from '../Flex'
 // eslint-disable-next-line import/no-unused-modules
 export const Card = styled(Column)<{ bg?: string }>`
   width: 100%;
-  padding: ${({ theme }) => theme.grids.md};
+  padding: 12px;
   background-color: ${({ bg = 'bg2', theme }) => theme[bg]};
   border: 1px solid ${({ theme }) => theme.border};
   border-radius: 6px;

client/src/components/ConnectWalletModal/index.tsx

@@ -47,7 +47,7 @@ export const ConnectWalletModal = (props: React.ComponentPropsWithoutRef<typeof
 
   return (
     <Container gap={16} {...props}>
-      <ThemedText.Title fontWeight={400}>Connect wallet</ThemedText.Title>
+      <ThemedText.HeadlineSmall fontWeight={400}>Connect wallet</ThemedText.HeadlineSmall>
 
       <ConnectorsList gap={4}>
         {connectors
@@ -56,7 +56,7 @@ export const ConnectWalletModal = (props: React.ComponentPropsWithoutRef<typeof
             <ConnectorCard as="button" key={connector.id} gap={16} onClick={() => connect({ connector })}>
               <img src={connector.icon.dark} alt={connector.name} width={32} height={32} />
 
-              <ThemedText.Title fontWeight={400}>{connector.name}</ThemedText.Title>
+              <ThemedText.BodyPrimary>{connector.name}</ThemedText.BodyPrimary>
             </ConnectorCard>
           ))}
       </ConnectorsList>

client/src/components/CurrencyButton/index.tsx

@@ -1,52 +1,34 @@
 import { Currency } from 'src/constants/currencies'
 import { ThemedText } from 'src/theme/components'
-import { ChevronDown } from 'src/theme/components/icons'
 import styled from 'styled-components'
 
 import { Row } from '../Flex'
 
 const CurrencyCard = styled(Row)`
   background-color: ${({ theme }) => theme.bg2};
   color: ${({ theme }) => theme.neutral1};
-  padding: ${({ theme }) => theme.grids.xs};
-  padding-right: ${({ theme }) => theme.grids.sm};
+  padding: 4px 8px 4px 4px;
   border: 1px solid ${({ theme }) => theme.border};
   border-radius: 99px;
 
   img {
     width: 28px;
     height: 28px;
     border-radius: 28px;
+    object-fit: cover;
   }
 `
 
-type CurrencyButtonProps<
-  TSymbols extends string,
-  TCurrency extends Currency,
-  TAvailableCurrencies extends Record<TSymbols, TCurrency>
-> = {
-  selectedCurrency: keyof TAvailableCurrencies
-  availableCurrencies: TAvailableCurrencies
+interface CurrencyButtonProps {
+  selectedCurrency: Currency
 }
 
-export const CurrencyButton = <
-  TSymbols extends string,
-  TCurrency extends Currency,
-  TAvailableCurrencies extends Record<TSymbols, TCurrency>
->(
-  props: CurrencyButtonProps<TSymbols, TCurrency, TAvailableCurrencies>
-) => {
-  const { selectedCurrency, availableCurrencies } = props
-
-  const currency = availableCurrencies[selectedCurrency]
-
+export function CurrencyButton({ selectedCurrency }: CurrencyButtonProps) {
   return (
     <CurrencyCard as="button" gap={4}>
-      <img src={currency.img} alt={currency.name} />
-
-      <ThemedText.Title fontWeight={500}>{currency.name}</ThemedText.Title>
+      <img src={selectedCurrency.img} alt={selectedCurrency.name} />
 
-      <ChevronDown width={18} height={18} />
+      <ThemedText.BodyPrimary fontWeight={500}>{selectedCurrency.name}</ThemedText.BodyPrimary>
     </CurrencyCard>
   )
 }

client/src/components/GenerateProofModal/index.tsx

@@ -1,3 +1,4 @@
+import { useCloseModal, useProofGenerationModal } from 'src/hooks/useModal'
 import { ThemedText } from 'src/theme/components'
 import { Logo } from 'src/theme/components/icons'
 
@@ -6,28 +7,28 @@ import Content from '../Modal/Content'
 import Overlay from '../Modal/Overlay'
 import Portal from '../Portal'
 
-function GenerateProofModalContent() {
-  return (
-    <Content title="Proof generation">
-      <Column gap={42} alignItems="center">
-        <Column gap={16}>
-          <Logo width={42} height={42} />
-
-          <ThemedText.HeadlineSmall>Snarkification of the elliptic curve...</ThemedText.HeadlineSmall>
-        </Column>
+export default function GenerateProofModal() {
+  // modal
+  const [isOpen] = useProofGenerationModal()
+  const close = useCloseModal()
 
-        <ThemedText.BodySecondary fontSize={16}>This might take a while</ThemedText.BodySecondary>
-      </Column>
-    </Content>
-  )
-}
+  if (!isOpen) return null
 
-export default function GenerateProofModal() {
   return (
     <Portal>
-      <GenerateProofModalContent />
+      <Content title="Proof generation" close={close}>
+        <Column gap={42} alignItems="center">
+          <Column gap={16}>
+            <Logo width={42} height={42} />
+
+            <ThemedText.HeadlineSmall>Snarkification of the elliptic curve...</ThemedText.HeadlineSmall>
+          </Column>
+
+          <ThemedText.BodySecondary fontSize={16}>This might take a while</ThemedText.BodySecondary>
+        </Column>
+      </Content>
 
-      <Overlay />
+      <Overlay onClick={close} />
     </Portal>
   )
 }

client/src/components/Header/index.tsx

@@ -17,8 +17,6 @@ const Container = styled(Row)`
 
 const Link = styled(ThemedText.BodyPrimary)`
   color: rgba(255, 255, 255, 0.7);
-  font-weight: 500;
-  font-size: 18px;
   text-decoration: none;
 
   &.active {
@@ -88,9 +86,9 @@ export default function Header() {
         <AccountChip as="button" gap={4} onClick={showWalletSidebar}>
           <AccountStatusIcon />
 
-          <ThemedText.Title fontWeight={400}>
+          <ThemedText.BodyPrimary>
             {address.slice(0, 6)}...{address.slice(-4)}
-          </ThemedText.Title>
+          </ThemedText.BodyPrimary>
         </AccountChip>
       ) : (
         <ConnectContainer>

client/src/components/WalletConnect/ConnectionOption.tsx

@@ -1,4 +1,5 @@
 import { Connector, useConnect } from '@starknet-react/core'
+import { ThemedText } from 'src/theme/components'
 import { styled } from 'styled-components'
 
 import { Row } from '../Flex'
@@ -13,6 +14,7 @@ const OptionRow = styled(Row)`
   cursor: pointer;
   padding: 12px;
   border-radius: 10px;
+
   &:hover {
     background-color: ${({ theme }) => theme.white};
     color: ${({ theme }) => theme.black};
@@ -30,7 +32,7 @@ function Option({ connection, activate }: OptionProps) {
       ) : (
         <img width="32" height="32" src={connection.icon.dark} />
       )}
-      <p style={{ margin: '0' }}>{connection.name}</p>
+      <ThemedText.BodyPrimary>{connection.name}</ThemedText.BodyPrimary>
     </OptionRow>
   )
 }

client/src/components/WalletSidebar/index.tsx

@@ -77,9 +77,9 @@ export default function WalletSidebar({ onClose }: WalletSidebarProps) {
         <WalletInfo>
           <Row gap={12}>
             <StarknetLogo width={40} height={40} />
-            <ThemedText.Title fontWeight={500}>
+            <ThemedText.BodyPrimary>
               {address.slice(0, 6)}...{address.slice(-4)}
-            </ThemedText.Title>
+            </ThemedText.BodyPrimary>
           </Row>
 
           <CloseButton onClick={onClose}>

client/src/constants/currencies.ts

@@ -6,23 +6,15 @@ export type Currency = {
   name: string
 }
 
-export enum FIAT_CURRENCY {
-  EUR = 'EUR',
-}
-
-export enum TOKEN_CURRENCY {
-  USDC = 'USDC',
-}
-
 export const FIAT_CURRENCIES = {
-  [FIAT_CURRENCY.EUR]: {
+  EUR: {
     img: EURLogo,
     name: 'EUR',
   },
 }
 
 export const TOKEN_CURRENCIES = {
-  [TOKEN_CURRENCY.USDC]: {
+  USDC: {
     img: USDCLogo,
     name: 'USDC',
   },

client/src/hooks/useModal.ts

@@ -25,3 +25,5 @@ function useModal(modal: ModalType): [boolean, () => void] {
 export const useWalletConnectModal = () => useModal(ModalType.WALLET_CONNECT)
 // eslint-disable-next-line import/no-unused-modules
 export const useWalletOverviewModal = () => useModal(ModalType.WALLET_OVERVIEW)
+
+export const useProofGenerationModal = () => useModal(ModalType.PROOF_GENERATION)

client/src/pages/Register.tsx

@@ -1,27 +1,22 @@
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import { PrimaryButton } from 'src/components/Button'
 import { Column, Row } from 'src/components/Flex'
 import GenerateProofModal from 'src/components/GenerateProofModal'
+import { useProofGenerationModal } from 'src/hooks/useModal'
 import { ThemedText } from 'src/theme/components'
 import { LockClosed, LockOpen } from 'src/theme/components/icons'
 import { styled, useTheme } from 'styled-components'
 
-const Layout = styled(Column)`
-  width: 100%;
-  margin: 0 auto;
-  justify-content: center;
-  flex: 1;
-`
-
 const Content = styled(Column)`
   max-width: 464px;
   width: 100%;
+  margin: 120px auto 0;
 `
 
 const Headline = styled(Row)`
   width: 100%;
   justify-content: space-between;
-  margin-bottom: ${({ theme }) => theme.grids.md};
+  margin-bottom: 12px;
 `
 
 const ContentCard = styled(Column)`
@@ -54,22 +49,17 @@ const ProofCard = styled(Row)`
 `
 
 export default function RegisterPage() {
+  // theme
   const theme = useTheme()
+
+  // modal
+  const [, toggleProofGenerationModal] = useProofGenerationModal()
+
   const [revtag, setRevtag] = useState('')
-  const [generatingProof, setGeneratingProof] = useState(false)
-  const [proven, setProven] = useState(false)
-
-  useEffect(() => {
-    if (generatingProof) {
-      setTimeout(() => {
-        setProven(true)
-        setGeneratingProof(false)
-      }, 5_000)
-    }
-  }, [generatingProof])
+  const [proven] = useState(false)
 
   return (
-    <Layout>
+    <>
       <Content gap={12}>
         <Headline>
           <ThemedText.HeadlineLarge>Register</ThemedText.HeadlineLarge>
@@ -79,13 +69,11 @@ export default function RegisterPage() {
           <>
             <ContentCard>
               <NoDataCard>
-                <ThemedText.Title fontWeight={500}>No data detected</ThemedText.Title>
+                <ThemedText.BodyPrimary fontWeight={500}>No data detected</ThemedText.BodyPrimary>
               </NoDataCard>
             </ContentCard>
 
-            <PrimaryButton onClick={() => setRevtag('chqrlesjuzw')}>
-              <ThemedText.Title>Open sidebar</ThemedText.Title>
-            </PrimaryButton>
+            <PrimaryButton onClick={() => setRevtag('chqrlesjuzw')}>Open sidebar</PrimaryButton>
           </>
         )}
 
@@ -107,19 +95,21 @@ export default function RegisterPage() {
                 {proven ? (
                   <ThemedText.BodyPrimary>Proved</ThemedText.BodyPrimary>
                 ) : (
-                  <ThemedText.BodySecondary fontWeight={500}>Unproved</ThemedText.BodySecondary>
+                  <ThemedText.BodySecondary>Unproved</ThemedText.BodySecondary>
                 )}
               </ProofCard>
             </ContentCard>
 
-            <PrimaryButton onClick={() => !proven && setGeneratingProof(true)}>
-              <ThemedText.Title>{proven ? 'Complete registration' : 'Generate proof'}</ThemedText.Title>
-            </PrimaryButton>
+            {proven ? (
+              <PrimaryButton>Complete registration</PrimaryButton>
+            ) : (
+              <PrimaryButton onClick={toggleProofGenerationModal}>Generate proof</PrimaryButton>
+            )}
           </>
         )}
       </Content>
 
-      {generatingProof && <GenerateProofModal />}
-    </Layout>
+      <GenerateProofModal />
+    </>
   )
 }