Adjust button sizes again

oasisprotocol · Oct 29, 2024 · fd46737 · fd46737
1 parent 02ffef4
commit fd46737
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 14 deletions.
diff --git a/frontend/src/components/ConnectWallet/index.module.css b/frontend/src/components/ConnectWallet/index.module.css
@@ -1,5 +1,5 @@
 .connectWalletBtn {
-  height: 3.75rem;
+  height: 48px
 }
 
 @media screen and (max-width: 1000px) {

diff --git a/frontend/src/components/ConnectWallet/index.tsx b/frontend/src/components/ConnectWallet/index.tsx
@@ -1,6 +1,6 @@
 import { FC, useState } from 'react'
 import { METAMASK_HOME_PAGE_URL } from '../../constants/config'
-import { Button, ButtonSize } from '../Button'
+import { Button } from '../Button'
 import { UnknownNetworkError } from '../../utils/errors'
 import { ConnectedAccount } from '../ConnectedAccount'
 
@@ -10,10 +10,9 @@ import { useEthereum } from '../../hooks/useEthereum'
 interface Props {
   mobileSticky: boolean
   avoidButtonClasses?: boolean
-  buttonSize?: ButtonSize
 }
 
-export const ConnectWallet: FC<Props> = ({ mobileSticky, avoidButtonClasses = false, buttonSize }) => {
+export const ConnectWallet: FC<Props> = ({ mobileSticky, avoidButtonClasses = false }) => {
   const [isLoading, setIsLoading] = useState(false)
 
   const {
@@ -70,7 +69,7 @@ export const ConnectWallet: FC<Props> = ({ mobileSticky, avoidButtonClasses = fa
             className={avoidButtonClasses ? undefined : classes.connectWalletBtn}
             color={'primary'}
             disabled={isLoading}
-            size={buttonSize}
+            size={'medium'}
           >
             Install MetaMask
           </Button>
@@ -80,7 +79,7 @@ export const ConnectWallet: FC<Props> = ({ mobileSticky, avoidButtonClasses = fa
         <Button
           className={avoidButtonClasses ? undefined : classes.connectWalletBtn}
           color={'primary'}
-          size={buttonSize}
+          size={'small'}
           disabled={isLoading}
           onClick={handleSwitchNetwork}
         >
@@ -91,7 +90,7 @@ export const ConnectWallet: FC<Props> = ({ mobileSticky, avoidButtonClasses = fa
         <Button
           className={avoidButtonClasses ? undefined : classes.connectWalletBtn}
           color={'primary'}
-          size={buttonSize}
+          size={'small'}
           disabled={isLoading}
           onClick={handleConnectWallet}
         >

diff --git a/frontend/src/pages/LandingPage/index.tsx b/frontend/src/pages/LandingPage/index.tsx
@@ -2,15 +2,14 @@ import { FC, useCallback } from 'react'
 import { Layout } from '../../components/Layout'
 import { ConnectWallet } from '../../components/ConnectWallet'
 import classes from './index.module.css'
-import { Button, ButtonSize } from '../../components/Button'
+import { Button } from '../../components/Button'
 import { useNavigate } from 'react-router-dom'
 import { appName } from '../../constants/config'
 import { getPollPath } from '../../utils/path.utils'
 
 export const LandingPage: FC = () => {
   const navigate = useNavigate()
   const openDemo = useCallback(() => navigate(getPollPath('demo')), [])
-  const buttonSize: ButtonSize = 'small'
 
   return (
     <Layout variation={'landing'}>
@@ -21,10 +20,10 @@ export const LandingPage: FC = () => {
         To participate in a poll or create one, please connect your wallet. This ensures secure and verified
         interaction with the polling system.
         <div className={'niceLineWide noWrap'}>
-          <Button color={'secondary'} variant={'outline'} size={buttonSize} onClick={openDemo}>
+          <Button color={'secondary'} variant={'outline'} size={'small'} onClick={openDemo}>
             View Demo
           </Button>
-          <ConnectWallet mobileSticky={false} avoidButtonClasses={true} buttonSize={buttonSize} />
+          <ConnectWallet mobileSticky={false} avoidButtonClasses={true} />
         </div>
       </div>
     </Layout>

diff --git a/frontend/src/pages/PollPage/ActivePoll.tsx b/frontend/src/pages/PollPage/ActivePoll.tsx
@@ -160,9 +160,7 @@ export const ActivePoll: FC<PollData> = ({
         fields={[[gaslessLabel, voteAction, completePoll, destroyPoll]]}
         expandHorizontally={false}
       />
-      {!hasWallet && !isPastDue && (
-        <ConnectWallet mobileSticky={false} buttonSize={'small'} avoidButtonClasses={true} />
-      )}
+      {!hasWallet && !isPastDue && <ConnectWallet mobileSticky={false} avoidButtonClasses={true} />}
       {isMine && gaslessEnabled && hasWallet && (
         <div>
           <h4>Gasless voting enabled:</h4>