[wip] refactor button styles

components/Button.tsx

@@ -3,35 +3,96 @@ import styled from '@emotion/styled'
 import tw from 'twin.macro'
 
 type StyledButtonProps = {
+  disabled: boolean
   secondary: boolean
 }
 
-const StyledButton = styled.button<StyledButtonProps>`
+const idleGradient = 'bg-gradient-to-r from-secondary-2-light to-primary-light'
+const activeGradient =
+  'bg-gradient-to-bl from-secondary-1-light via-primary-dark to-secondary-2-light'
+
+export const PrimaryButton = styled.button`
+  ${tw`relative z-10 px-8 py-2 rounded-full text-fgd-1 ${idleGradient}`}
+
   :before {
-    ${tw`absolute left-0 top-0 opacity-0 h-full w-full block bg-gradient-to-tl from-secondary-1-light via-secondary-1-dark to-secondary-2-light transition-opacity duration-500`}
+    ${tw`absolute left-0 top-0 opacity-0 h-full w-full block transition-opacity duration-500 ${activeGradient}`}
     border-radius: inherit;
     content: '';
     z-index: -10;
   }
 
   :hover {
+    :before {
+      ${tw`opacity-100`}
+    }
+  }
+
+  focus {
+    ${tw`ring-2 ring-secondary-2-light ring-opacity-40 outline-none`}
+  }
+
+  :active {
+    :before {
+      ${tw`ring-2 ring-secondary-2-light ring-opacity-40`}
+    }
+  }
+
+  :disabled {
+    ${tw`cursor-not-allowed opacity-60`}
+    :before {
+      ${tw`hidden`}
+    }
+  }
+`
+
+export const SecondaryButton = styled.button`
+  ${tw`relative z-10 px-8 py-2 rounded-full text-fgd-1`}
+
+  :hover {
+    ${tw`underline`}
+  }
+
+  :disabled {
+    ${tw`cursor-not-allowed opacity-60`}
+  }
+`
+
+// use before as an overlay to have nice alpha transitions
+export const StyledButton = styled.button<StyledButtonProps>`
+  :before {
+    ${tw`absolute left-0 top-0 opacity-0 h-full w-full block transition-opacity duration-500`}
+    ${({ secondary, disabled }) =>
+      !secondary && !disabled && tw`${activeGradient}`}
+    border-radius: inherit;
+    content: '';
+    z-index: -10;
+  }
+
+  :hover {
+    ${({ secondary }) => secondary && tw`underline`}
+
     :before {
       ${tw`opacity-100`};
-      ${({ disabled, secondary }) => (disabled || secondary) && tw`hidden`}
+      ${({ disabled }) => disabled && tw`hidden`}
     }
   }
 
   :focus {
-    ${tw`ring-4 ring-secondary-2-light ring-opacity-40`}
+    ${tw`ring-2 ring-secondary-2-light ring-opacity-40 outline-none`}
     ${({ secondary }) => secondary && tw`ring-0`}
   }
 
   :active {
     :before {
-      ${tw`ring-4 ring-secondary-2-light ring-opacity-40`}
+      ${tw`ring-2 ring-secondary-2-light ring-opacity-40`}
+      ${({ secondary }) => secondary && tw`ring-0`}
     }
   }
 
+  :disabled {
+    ${tw`cursor-not-allowed opacity-60`}
+  }
+
   ${({ secondary }) => secondary && tw`bg-none`}
 `
 
@@ -54,7 +115,7 @@ const Button: FunctionComponent<ButtonProps> = ({
     <StyledButton
       onClick={onClick}
       disabled={disabled}
-      className={`${className} bg-gradient-to-br from-secondary-1-light via-secondary-1-dark to-secondary-2-light relative z-10 default-transition px-6 py-2 rounded-lg text-fgd-1 hover:bg-bkg-3 focus:outline-none disabled:cursor-not-allowed disabled:opacity-60`}
+      className={`${className} relative z-10 px-8 py-2 rounded-full text-fgd-1 ${idleGradient}`}
       secondary={secondary}
       {...props}
     >
@@ -63,4 +124,31 @@ const Button: FunctionComponent<ButtonProps> = ({
   )
 }
 
+// default heroicon does not allow customizing stroke
+const ChevronRightIcon = ({ className }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    className={className}
+  >
+    <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7"></path>
+  </svg>
+)
+
+export const ButtonWithChevronRight: FunctionComponent<ButtonProps> = ({
+  children,
+  className,
+  ...props
+}) => {
+  return (
+    <Button className={`${className} pr-5 flex`} {...props}>
+      {children}{' '}
+      <ChevronRightIcon
+        className={`relative stroke-3 top-1 h-4 w-4 text-fgd-1 ml-1`}
+      />
+    </Button>
+  )
+}
 export default Button

components/Link.tsx

@@ -0,0 +1,58 @@
+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`}
+
+  :hover {
+    ${tw`underline`}
+  }
+
+  :disabled {
+    ${tw`cursor-not-allowed opacity-60`}
+  }
+`
+
+// default heroicon does not allow customizing stroke
+const ChevronRightIcon = ({ className }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    className={className}
+  >
+    <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7"></path>
+  </svg>
+)
+
+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`}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon
+        className={`relative stroke-3 top-1 h-4 w-4 text-fgd-1 ml-1`}
+      />
+    </StyledButton>
+  )
+}
+
+export default Link

pages/index.tsx

@@ -1,6 +1,11 @@
 import ContributionPage from './ContributionPage'
 import RedeemPage from './RedeemPage'
 import Notifications from '../components/Notification'
+import Button, {
+  ButtonWithChevronRight,
+  PrimaryButton,
+} from '../components/Button'
+import Link from '../components/Link'
 import TopBar from '../components/TopBar'
 
 import usePool from '../hooks/usePool'
@@ -11,9 +16,34 @@ const Index = () => {
   return (
     <div className={`bg-bkg-1 text-fgd-1 transition-all`}>
       <TopBar />
-      <Notifications />
+      <div>
+        <div>
+          <PrimaryButton>Primary</PrimaryButton>
+        </div>
+        <div>
+          <Button disabled>Disabled</Button>
+        </div>
+        <div>
+          <Link>Link</Link>
+        </div>
+        <div>
+          <Link disabled>Disabled</Link>
+        </div>
+      </div>
+      <div>
+        <div>
+          <ButtonWithChevronRight>Primary</ButtonWithChevronRight>
+        </div>
+        <div>
+          <ButtonWithChevronRight disabled>Disabled</ButtonWithChevronRight>
+        </div>
+        <div>
+          <ButtonWithChevronRight secondary>Secondary</ButtonWithChevronRight>
+        </div>
+      </div>
+      {/* <Notifications />
       {endIdo?.isAfter() && <ContributionPage />}
-      {endIdo?.isBefore() && <RedeemPage />}
+      {endIdo?.isBefore() && <RedeemPage />} */}
     </div>
   )
 }

tailwind.config.js

@@ -54,6 +54,13 @@ module.exports = {
           },
         },
       },
+      strokeWidth: {
+        3: '3',
+        4: '4',
+        5: '5',
+        6: '6',
+        7: '7',
+      },
     },
   },
   variants: {