better mobile support

bancorprotocol · Nov 5, 2023 · 2fb968c · 2fb968c
1 parent c0abe43
commit 2fb968c
Show file tree

Hide file tree

Showing 13 changed files with 108 additions and 72 deletions.
diff --git a/src/components/button/Button.stories.tsx b/src/components/button/Button.stories.tsx
@@ -71,7 +71,7 @@ export const Playground: ComponentStory<typeof Button> = (args) => (
 Playground.args = {
   children: 'Primary Button',
   variant: ButtonVariant.Primary,
-  size: ButtonSize.Meduim,
+  size: ButtonSize.Medium,
   disabled: false,
   className: '',
 };

diff --git a/src/components/button/Button.tsx b/src/components/button/Button.tsx
@@ -12,7 +12,7 @@ export enum ButtonSize {
   Full,
   ExtraLarge,
   Large,
-  Meduim,
+  Medium,
   Small,
   ExtraSmall,
 }
@@ -45,7 +45,7 @@ const getSizeStyle = (size: ButtonSize) => {
       return 'w-[428px] h-[53px]';
     case ButtonSize.Large:
       return 'w-[335px] h-[53px]';
-    case ButtonSize.Meduim:
+    case ButtonSize.Medium:
       return 'w-[266px] h-[47px]';
     case ButtonSize.Small:
       return 'w-[142px] h-[39px]';

diff --git a/src/elements/earn/portfolio/v3/pendingWithdraw/confirm/V3WithdrawConfirmInfo.tsx b/src/elements/earn/portfolio/v3/pendingWithdraw/confirm/V3WithdrawConfirmInfo.tsx
@@ -22,7 +22,7 @@ export const V3WithdrawConfirmInfo = ({ handleCancelClick }: Props) => {
       <Button
         className="mt-50"
         onClick={handleCancelClick}
-        size={ButtonSize.Meduim}
+        size={ButtonSize.Medium}
         variant={ButtonVariant.Secondary}
       >
         Cancel withdrawal

diff --git a/src/elements/walletConnect/WalletConnectRequest.tsx b/src/elements/walletConnect/WalletConnectRequest.tsx
@@ -13,7 +13,7 @@ export const WalletConnectRequest = () => {
       </div>
       <Button
         variant={ButtonVariant.Secondary}
-        size={ButtonSize.Meduim}
+        size={ButtonSize.Medium}
         onClick={() => handleWalletButtonClick()}
       >
         Connect Wallet

diff --git a/src/pages/UnsupportedNetwork.tsx b/src/pages/UnsupportedNetwork.tsx
@@ -17,7 +17,7 @@ export const UnsupportedNetwork = () => {
       <div className="flex items-center gap-15">
         <Button
           variant={ButtonVariant.Secondary}
-          size={isMobile ? ButtonSize.Small : ButtonSize.Meduim}
+          size={isMobile ? ButtonSize.Small : ButtonSize.Medium}
         >
           <Navigate
             to="https://support.bancor.network/hc/en-us/articles/5463892405010-MetaMask-Setup-Guide"
@@ -29,7 +29,7 @@ export const UnsupportedNetwork = () => {
         </Button>
         <Button
           variant={ButtonVariant.Primary}
-          size={isMobile ? ButtonSize.Small : ButtonSize.Meduim}
+          size={isMobile ? ButtonSize.Small : ButtonSize.Medium}
           onClick={() => requestSwitchChain()}
         >
           Switch Network

diff --git a/src/pages/vote/LegacyVoteCard.tsx b/src/pages/vote/LegacyVoteCard.tsx
@@ -0,0 +1,32 @@
+import { ReactComponent as IconLink } from 'assets/icons/link.svg';
+
+export interface LegacyVoteCardProps {
+  className?: string;
+}
+
+export const LegacyVoteCard: React.FC<LegacyVoteCardProps> = ({
+  className,
+}) => {
+  return (
+    <div
+      className={`flex flex-col justify-between lt-md:min-h-[180px] ${className}`}
+    >
+      <div className="text-16 text-charcoal dark:text-white mb-18 font-medium">
+        Legacy onchain contract
+      </div>
+
+      <div className="text-secondary text-12 mb-auto">
+        View previous votes and decisions made onchain.
+      </div>
+
+      <a
+        href="https://etherscan.io/address/0x892f481bd6e9d7d26ae365211d9b45175d5d00e4"
+        target="_blank"
+        className="flex items-center lt-md:justify-center text-primary dark:text-primary-light font-medium h-[47px]"
+        rel="noreferrer"
+      >
+        View Legacy Gov <IconLink className="w-14 ml-6" />
+      </a>
+    </div>
+  );
+};
diff --git a/src/pages/vote/StakedCard.tsx b/src/pages/vote/StakedCard.tsx
@@ -24,7 +24,9 @@ export const StakeCard: React.FC<StakeCardProps> = ({
 }) => {
   const { handleWalletButtonClick } = useWalletConnect();
   return (
-    <div className={`flex flex-row ${className}`}>
+    <div
+      className={`flex flex-col md:flex-row lt-md:min-h-[360px] lt-md:justify-between ${className}`}
+    >
       <div className="flex flex-col max-w-[500px]">
         <div className="text-16 text-charcoal dark:text-white mb-18 font-medium">
           Stake {symbol}
@@ -34,11 +36,11 @@ export const StakeCard: React.FC<StakeCardProps> = ({
           In order to participate in Bancor governance activities, you should
           stake {symbol} tokens.
         </div>
-        <div className="flex w-full">
+        <div className="flex w-full justify-center md:justify-start">
           <Button
             variant={ButtonVariant.Primary}
-            size={ButtonSize.Meduim}
-            className="mt-20"
+            size={ButtonSize.Medium}
+            className="mt-20 lt-md:w-full"
             onClick={() => {
               if (!account) {
                 handleWalletButtonClick();

diff --git a/src/pages/vote/UnstakedCard.tsx b/src/pages/vote/UnstakedCard.tsx
@@ -32,16 +32,16 @@ export const UnstakeCard: React.FC<UnstakeCardProps> = ({
         In order to remove {symbol} from governance you would need to unstake
         them first.
       </div>
-      <div className="flex items-center w-full">
+      <div className="flex items-center w-full justify-center">
         <Button
           variant={
             (!!unstakeTime || !stakeAmount || Number(stakeAmount) === 0) &&
             !isUnlocked
               ? ButtonVariant.Secondary
               : ButtonVariant.Primary
           }
-          size={ButtonSize.Meduim}
-          className="mt-20 md:mt-0"
+          size={ButtonSize.Medium}
+          className="mt-20 md:mt-0 lt-md:w-full"
           disabled={
             (!!unstakeTime || !stakeAmount || Number(stakeAmount) === 0) &&
             !isUnlocked

diff --git a/src/pages/vote/Vote.tsx b/src/pages/vote/Vote.tsx
@@ -1,5 +1,4 @@
 import { useWeb3React } from '@web3-react/core';
-import { ReactComponent as IconLink } from 'assets/icons/link.svg';
 import { ModalVbnt } from 'elements/modalVbnt/ModalVbnt';
 import { useCallback, useState } from 'react';
 import { useEffect } from 'react';
@@ -10,8 +9,6 @@ import {
   getStakedAmount,
   getUnstakeTimer,
 } from 'services/web3/governance/governance';
-import { openNewTab } from 'utils/pureFunctions';
-import { Button, ButtonSize, ButtonVariant } from 'components/button/Button';
 import { Page } from 'components/Page';
 import { useDispatch } from 'react-redux';
 import {
@@ -20,10 +17,11 @@ import {
   setStakedBntAmount,
   setUnstakeBntTimer,
 } from 'store/gov/gov';
-import { Navigate } from 'components/navigate/Navigate';
 import { VoteCardDivided } from 'pages/vote/VoteCardDivided';
 import { UnstakeCard } from 'pages/vote/UnstakedCard';
 import { StakeCard } from 'pages/vote/StakedCard';
+import { VoteCard } from 'pages/vote/VoteCard';
+import { LegacyVoteCard } from './LegacyVoteCard';
 
 export const Vote = () => {
   const { chainId } = useWeb3React();
@@ -87,9 +85,6 @@ export const Vote = () => {
     refresh();
   }, [refresh]);
 
-  const stakedAny =
-    Number(stakeVbntAmount) !== 0 || Number(stakeBntAmount) !== 0;
-
   return (
     <Page
       title={'Vote'}
@@ -138,57 +133,17 @@ export const Vote = () => {
             />
           </VoteCardDivided>
           <VoteCardDivided>
-            <div className="flex flex-col justify-between">
-              <div className="text-16 text-charcoal dark:text-white mb-18 font-medium">
-                Voting on Bancor DAO
-              </div>
-
-              <div className="text-secondary text-12 mb-auto">
-                Voting on Bancor DAO is free as it is using the Snapshot
-                off-chain infrastructure. Every user can vote on every available
-                proposal and help shape the future of the Bancor Protocol.
-              </div>
-              <div className="flex items-baseline">
-                <Button
-                  variant={
-                    stakedAny ? ButtonVariant.Primary : ButtonVariant.Secondary
-                  }
-                  size={ButtonSize.Meduim}
-                  className="mt-20"
-                  onClick={() => openNewTab('https://vote.bancor.network/')}
-                >
-                  {'Vote on Snapshot'}
-                </Button>
-                <Navigate
-                  to="https://support.bancor.network/hc/en-us/articles/5476957904914"
-                  className="flex items-center text-primary dark:text-primary-light font-medium ml-40"
-                >
-                  How to Vote <IconLink className="w-14 ml-6" />
-                </Navigate>
-              </div>
-            </div>
-            <div className="flex flex-col justify-between">
-              <div className="text-16 text-charcoal dark:text-white mb-18 font-medium">
-                Legacy onchain contract
-              </div>
-
-              <div className="text-secondary text-12 mb-auto">
-                View previous votes and decisions made onchain.
-              </div>
-
-              <a
-                href="https://etherscan.io/address/0x892f481bd6e9d7d26ae365211d9b45175d5d00e4"
-                target="_blank"
-                className="flex items-center text-primary dark:text-primary-light font-medium h-[47px]"
-                rel="noreferrer"
-              >
-                View Legacy Gov <IconLink className="w-14 ml-6" />
-              </a>
-            </div>
+            <VoteCard
+              stakedAny={
+                Number(stakeVbntAmount) !== 0 || Number(stakeBntAmount) !== 0
+              }
+            />
+            <LegacyVoteCard />
           </VoteCardDivided>
         </div>
         {vbntToken && (
           <ModalVbnt
+            key="vbntModal"
             isOpen={stakeVbntModal}
             setIsOpen={setStakeVbntModal}
             token={vbntToken}
@@ -199,6 +154,7 @@ export const Vote = () => {
         )}
         {bntToken && (
           <ModalVbnt
+            key="bntModal"
             isOpen={stakeBntModal}
             setIsOpen={setStakeBntModal}
             token={bntToken}

diff --git a/src/pages/vote/VoteBalances.tsx b/src/pages/vote/VoteBalances.tsx
@@ -13,7 +13,7 @@ export const VoteBalances: React.FC<VoteBalancesProps> = ({
   stakeAmount,
 }) => {
   return (
-    <div className="flex flex-col w-[220px] ml-20 border border-silver dark:border-grey rounded-10 pl-20 pr-20">
+    <div className="flex flex-col md:w-[220px] lt-md:h-[145px] md:ml-20 border border-silver dark:border-grey rounded-10 pl-20 pr-20">
       <div className="flex flex-col justify-evenly items-center flex-1">
         <div className="text-secondary">Available Balance</div>
         {!account || (govToken && govToken.balance) ? (

diff --git a/src/pages/vote/VoteCard.tsx b/src/pages/vote/VoteCard.tsx
@@ -0,0 +1,41 @@
+import { Button, ButtonSize, ButtonVariant } from 'components/button/Button';
+import { Navigate } from 'components/navigate/Navigate';
+import { openNewTab } from 'utils/pureFunctions';
+import { ReactComponent as IconLink } from 'assets/icons/link.svg';
+
+export interface VoteCardProps {
+  stakedAny: boolean;
+  className?: string;
+}
+
+export const VoteCard: React.FC<VoteCardProps> = ({ stakedAny, className }) => {
+  return (
+    <div className={`flex flex-col justify-between ${className}`}>
+      <div className="text-16 text-charcoal dark:text-white mb-18 font-medium">
+        Voting on Bancor DAO
+      </div>
+
+      <div className="text-secondary text-12 mb-auto">
+        Voting on Bancor DAO is free as it is using the Snapshot off-chain
+        infrastructure. Every user can vote on every available proposal and help
+        shape the future of the Bancor Protocol.
+      </div>
+      <div className="flex flex-col md:flex-row md:items-baseline items-center w-full">
+        <Button
+          variant={stakedAny ? ButtonVariant.Primary : ButtonVariant.Secondary}
+          size={ButtonSize.Medium}
+          className="mt-20 lt-md:w-full"
+          onClick={() => openNewTab('https://vote.bancor.network/')}
+        >
+          {'Vote on Snapshot'}
+        </Button>
+        <Navigate
+          to="https://support.bancor.network/hc/en-us/articles/5476957904914"
+          className="flex items-center text-primary dark:text-primary-light font-medium md:ml-40 lt-md:mt-20"
+        >
+          How to Vote <IconLink className="w-14 ml-6" />
+        </Navigate>
+      </div>
+    </div>
+  );
+};
diff --git a/src/pages/vote/VoteCardDivided.tsx b/src/pages/vote/VoteCardDivided.tsx
@@ -18,17 +18,21 @@ export const VoteCardDivided: React.FC<VoteCardDividedProps> = ({
   // Append TailwindCSS classes to the first child's existing classes
   const firstChildClasses = childrenArray[0].props.className || '';
   const firstChildWithClasses = cloneElement(childrenArray[0], {
-    className: `flex-1 h-full p-24 ${firstChildClasses}`.trim(),
+    className: `flex-1 md:h-full lt-md:w-full p-24 ${firstChildClasses}`.trim(),
   });
 
   // Append TailwindCSS classes to the second child's existing classes
   const secondChildClasses = childrenArray[1].props.className || '';
   const secondChildWithClasses = cloneElement(childrenArray[1], {
-    className: `flex-none h-full w-[350px] p-24 ${secondChildClasses}`.trim(),
+    className:
+      `flex-none md:h-full md:w-[350px] lt-md:w-full p-24 ${secondChildClasses}`.trim(),
   });
 
   return (
-    <div className="content-block flex flex-col md:flex-row md:col-span-2 md:items-center min-h-[170px] md:hover:shadow-lg mb:divide-y md:divide-x divide-silver dark:divide-grey">
+    <div
+      className={`content-block flex flex-col md:flex-row md:col-span-2 items-center
+      md:min-h-[170px] md:hover:shadow-lg md:divide-x lt-md:divide-y divide-silver dark:divide-grey`}
+    >
       {firstChildWithClasses}
       {secondChildWithClasses}
     </div>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -9,6 +9,7 @@ module.exports = {
     screens: {
       sm: '640px',
       md: '768px',
+      'lt-md': { max: '767px' }, // lt-md for "less than md"
       lg: '1024px',
       xl: '1280px',
       '2xl': '1536px',