From 5eaf63bfe6968253667db55a594b20d14367d08a Mon Sep 17 00:00:00 2001
From: Maximilian Schneider <mail@maximilianschneider.net>
Date: Thu, 15 Jul 2021 03:11:43 +0200
Subject: [PATCH] refactor all buttons to work with new button preset

---
 components/Button.tsx              | 41 +++++++++++++++++++++++++-----
 components/ConnectWalletButton.tsx | 13 +++++++---
 components/ContributionModal.tsx   | 41 ++++++++++--------------------
 components/Link.tsx                | 13 +++-------
 components/RedeemModal.tsx         | 25 ++++--------------
 pages/index.tsx                    |  2 --
 6 files changed, 66 insertions(+), 69 deletions(-)

diff --git a/components/Button.tsx b/components/Button.tsx
index 3e0062d..4d5ab67 100644
--- a/components/Button.tsx
+++ b/components/Button.tsx
@@ -1,15 +1,16 @@
+import { FunctionComponent } from 'react'
 import styled from '@emotion/styled'
 import tw from 'twin.macro'
 
-const idleGradient = 'bg-gradient-to-r from-secondary-2-light to-primary-light'
-const activeGradient =
+export const idleGradient =
+  'bg-gradient-to-r from-secondary-2-light to-primary-light'
+export const activeGradient =
   'bg-gradient-to-bl from-secondary-1-light via-primary-dark to-secondary-2-light'
 
-const Button = styled.button`
-  ${tw`relative z-10 px-8 py-2 rounded-full text-fgd-1 ${idleGradient}`}
-
+const StyledButton = styled.button<ButtonProps>`
   :before {
-    ${tw`absolute left-0 top-0 opacity-0 h-full w-full block transition-opacity duration-500 ${activeGradient}`}
+    ${tw`absolute left-0 top-0 opacity-0 h-full w-full block transition-opacity duration-500`}
+    ${({ gray }) => (gray ? tw`bg-bkg-3` : tw`${activeGradient}`)}
     border-radius: inherit;
     content: '';
     z-index: -10;
@@ -21,7 +22,7 @@ const Button = styled.button`
     }
   }
 
-  focus {
+  :focus {
     ${tw`ring-2 ring-secondary-2-light ring-opacity-40 outline-none`}
   }
 
@@ -39,4 +40,30 @@ const Button = styled.button`
   }
 `
 
+interface ButtonProps {
+  className?: string
+  gray?: boolean
+  onClick?: () => void
+  disabled?: boolean
+}
+
+const Button: FunctionComponent<ButtonProps> = ({
+  children,
+  className,
+  gray,
+  ...props
+}) => {
+  return (
+    <StyledButton
+      className={`${className} relative z-10 px-8 py-2 rounded-full text-fgd-1 ${
+        gray ? 'bg-bkg-4' : idleGradient
+      }`}
+      gray={gray}
+      {...props}
+    >
+      {children}
+    </StyledButton>
+  )
+}
+
 export default Button
diff --git a/components/ConnectWalletButton.tsx b/components/ConnectWalletButton.tsx
index bcefb45..2f05556 100644
--- a/components/ConnectWalletButton.tsx
+++ b/components/ConnectWalletButton.tsx
@@ -4,6 +4,7 @@ import { WALLET_PROVIDERS, DEFAULT_PROVIDER } from '../hooks/useWallet'
 import useLocalStorageState from '../hooks/useLocalStorageState'
 import WalletSelect from './WalletSelect'
 import WalletIcon from './WalletIcon'
+import { LinkIcon } from '@heroicons/react/solid'
 import Button from './Button'
 
 const StyledWalletTypeLabel = styled.div`
@@ -45,14 +46,18 @@ const ConnectWalletButton = () => {
 
 export default ConnectWalletButton
 
-export const ConnectWalletButtonSmall = ({ children, onClick }) => (
+export const ConnectWalletButtonSmall = ({ connected, ...props }) => (
   <div className="relative">
     <Button
       className="rounded-full h-9 w-44 z-30 relative"
-      onClick={() => onClick()}
+      gray={connected}
+      {...props}
     >
-      <div className="flex items-center justify-center text-sm">{children}</div>
+      <LinkIcon className="h-4 w-4 relative top-1 mr-2" />
+      {connected ? 'Disconnect' : 'Connect Wallet'}
     </Button>
-    <div className="absolute animate-connect-wallet-ping bg-secondary-2-light top-0 rounded-full h-9 w-44 z-20" />
+    {!connected && (
+      <div className="absolute animate-connect-wallet-ping bg-secondary-2-light top-0 rounded-full h-10 w-48" />
+    )}
   </div>
 )
diff --git a/components/ContributionModal.tsx b/components/ContributionModal.tsx
index 6d70ba8..6284911 100644
--- a/components/ContributionModal.tsx
+++ b/components/ContributionModal.tsx
@@ -4,7 +4,6 @@ import {
   LockClosedIcon,
   LockOpenIcon,
 } from '@heroicons/react/outline'
-import { LinkIcon } from '@heroicons/react/solid'
 import useWalletStore from '../stores/useWalletStore'
 import Input from './Input'
 import Button from './Button'
@@ -16,6 +15,10 @@ import WalletIcon from './WalletIcon'
 import useLargestAccounts from '../hooks/useLargestAccounts'
 import useVaults from '../hooks/useVaults'
 import usePool from '../hooks/usePool'
+import styled from '@emotion/styled'
+import 'twin.macro'
+
+const SmallButton = styled.button``
 
 const ContributionModal = () => {
   const actions = useWalletStore((s) => s.actions)
@@ -200,25 +203,23 @@ const ContributionModal = () => {
                 </div>
                 <div className="flex">
                   {submitted ? (
-                    <Button
+                    <SmallButton
                       className="ring-1 ring-secondary-1-light ring-inset hover:ring-secondary-1-dark hover:bg-transparent hover:text-secondary-1-dark font-normal rounded text-secondary-1-light text-xs py-0.5 px-1.5 mr-2"
                       disabled={!connected}
                       onClick={() => handleEditContribution()}
-                      secondary
                     >
                       Unlock
-                    </Button>
+                    </SmallButton>
                   ) : null}
-                  <Button
+                  <SmallButton
                     className={`${
                       disableFormInputs && 'opacity-30'
-                    } bg-bkg-4 font-normal rounded text-fgd-3 text-xs py-0.5 px-1.5`}
+                    } bg-bkg-4 hover:bg-bkg-3 font-normal rounded text-fgd-3 text-xs py-0.5 px-1.5`}
                     disabled={disableFormInputs}
                     onClick={() => handleMax()}
-                    secondary
                   >
                     Max
-                  </Button>
+                  </SmallButton>
                 </div>
               </div>
               <div className="flex items-center pb-4 relative">
@@ -273,25 +274,11 @@ const ContributionModal = () => {
               </div>
             </div>
             <div className="flex justify-center">
-              {connected ? (
-                <Button
-                  className="rounded-full bg-bkg-4 text-fgd-3 font-normal"
-                  onClick={() => handleConnectDisconnect()}
-                  secondary
-                >
-                  <div className="flex items-center text-sm">
-                    <LinkIcon className="h-4 w-4 mr-1" />
-                    Disconnect
-                  </div>
-                </Button>
-              ) : (
-                <ConnectWalletButtonSmall onClick={handleConnectDisconnect}>
-                  <div className="flex items-center justify-center text-sm">
-                    <LinkIcon className="h-4 w-4 mr-1" />
-                    Connect Wallet
-                  </div>
-                </ConnectWalletButtonSmall>
-              )}
+              <ConnectWalletButtonSmall
+                className="flex pl-6"
+                connected={connected}
+                onClick={handleConnectDisconnect}
+              />
             </div>
           </>
         )}
diff --git a/components/Link.tsx b/components/Link.tsx
index b49c6e4..4958549 100644
--- a/components/Link.tsx
+++ b/components/Link.tsx
@@ -2,8 +2,9 @@ import { FunctionComponent } from 'react'
 import styled from '@emotion/styled'
 import tw from 'twin.macro'
 
-const StyledButton = styled.button`
-  ${tw`relative z-10 px-8 py-2 rounded-full text-fgd-1`}
+const StyledButton = styled.a`
+  font-weight: 700;
+  cursor: pointer;
 
   :hover {
     ${tw`underline`}
@@ -28,23 +29,17 @@ const ChevronRightIcon = ({ className }) => (
 )
 
 interface LinkProps {
-  onClick?: (x?) => void
-  disabled?: boolean
   className?: string
 }
 
 const Link: FunctionComponent<LinkProps> = ({
   children,
-  onClick,
-  disabled = false,
   className,
   ...props
 }) => {
   return (
     <StyledButton
-      onClick={onClick}
-      disabled={disabled}
-      className={`${className} pr-5 flex z-10 px-8 py-2 text-fgd-1`}
+      className={`${className} pr-5 flex z-10 px-8 py-2 text-fgd-1 relative rounded-full`}
       {...props}
     >
       {children}
diff --git a/components/RedeemModal.tsx b/components/RedeemModal.tsx
index 84d306e..58aeca7 100644
--- a/components/RedeemModal.tsx
+++ b/components/RedeemModal.tsx
@@ -1,5 +1,4 @@
 import { useEffect, useState } from 'react'
-import { LinkIcon } from '@heroicons/react/solid'
 import useWalletStore from '../stores/useWalletStore'
 import Button from './Button'
 import Input from './Input'
@@ -156,25 +155,11 @@ const RedeemModal = () => {
               </div>
             </div>
             <div className="flex justify-center">
-              {connected ? (
-                <Button
-                  className="rounded-full bg-bkg-4 text-fgd-3 font-normal"
-                  onClick={() => handleConnectDisconnect()}
-                  secondary
-                >
-                  <div className="flex items-center text-sm">
-                    <LinkIcon className="h-4 w-4 mr-1" />
-                    Disconnect
-                  </div>
-                </Button>
-              ) : (
-                <ConnectWalletButtonSmall onClick={handleConnectDisconnect}>
-                  <div className="flex items-center justify-center text-sm">
-                    <LinkIcon className="h-4 w-4" />
-                    Connect Wallet
-                  </div>
-                </ConnectWalletButtonSmall>
-              )}
+              <ConnectWalletButtonSmall
+                className="flex pl-6"
+                connected={connected}
+                onClick={handleConnectDisconnect}
+              />
             </div>
           </>
         )}
diff --git a/pages/index.tsx b/pages/index.tsx
index e373817..492d2cd 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,8 +1,6 @@
 import ContributionPage from './ContributionPage'
 import RedeemPage from './RedeemPage'
 import Notifications from '../components/Notification'
-import Button from '../components/Button'
-import Link from '../components/Link'
 import TopBar from '../components/TopBar'
 
 import usePool from '../hooks/usePool'