[V2] Colour Sheet from Invision wireframes + added to Button + stories (

#1632) * cleanup button story * new colour sheet * fix type, remove class styles, use const style * use new colours in StyledButton * misc. 1. add borderRadius to const 2. use theme bg for darkMode switch
gnosis · Nov 20, 2020 · 8cd3167 · 8cd3167
1 parent a154c5c
commit 8cd3167
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 59 deletions.
diff --git a/src/components/common/Button/index.stories.tsx b/src/components/common/Button/index.stories.tsx
@@ -13,14 +13,13 @@ export default {
   decorators: [ThemeToggler],
   argTypes: {
     label: { control: 'text' },
-    kind: { control: 'inline-radio', options: ButtonVariations },
-    as: {
-      control: null,
+    kind: {
+      control: 'inline-radio',
+      options: ButtonVariations,
     },
+    as: { control: null },
     theme: { control: null },
-    forwardedAs: {
-      control: null,
-    },
+    forwardedAs: { control: null },
   },
 } as Meta
 

diff --git a/src/components/common/Button/index.tsx b/src/components/common/Button/index.tsx
@@ -2,40 +2,27 @@ import React from 'react'
 
 import styled from 'styled-components'
 import StyledButton, { ButtonVariations } from 'styles/common/StyledButton'
+import styles from 'styles/styles'
 
 export interface ButtonBaseProps extends React.ButtonHTMLAttributes<Element> {
   kind?: keyof typeof ButtonVariations
 }
 
 export const ButtonBase = styled(StyledButton)<ButtonBaseProps>`
-  border-radius: 2rem;
+  border-radius: ${styles.borderRadius};
   cursor: pointer;
   font-weight: bold;
   outline: 0;
   padding: 0.5rem 1rem;
 
   transition-duration: 0.2s;
   transition-timing-function: ease-in-out;
-  transition-property: color, background-color, border-color, opacity, margin;
+  transition-property: color, background, border-color, opacity, margin;
 
   &:disabled,
   &[disabled] {
-    &:hover {
-      background-color: var(--color-background-button-disabled-hover);
-    }
-    opacity: 0.35;
     pointer-events: none;
   }
-
-  &.big {
-    font-size: 1.2rem;
-    padding: 0.65rem 1rem;
-  }
-
-  &.small {
-    font-size: 0.6rem;
-    padding: 0.3rem 0.5rem;
-  }
 `
 
 const ThemeButtonToggleWrapper = styled.div<{ $mode: boolean }>`
@@ -46,7 +33,7 @@ const ThemeButtonToggleWrapper = styled.div<{ $mode: boolean }>`
 
   > button {
     width: 75%;
-    margin-left: ${({ $mode }): string | false => ($mode ? 'auto' : '0')};
+    margin-left: ${({ $mode }): string => ($mode ? 'auto' : '0')};
   }
 `
 

diff --git a/src/storybook/decorators.tsx b/src/storybook/decorators.tsx
@@ -28,7 +28,7 @@ export const ThemeToggler = (DecoratedStory: () => JSX.Element): JSX.Element =>
   return (
     <>
       <ThemeProvider theme={theme}>
-        <Frame style={{ backgroundColor: darkMode ? COLOURS.bgDark : COLOURS.bgLight }}>{DecoratedStory()}</Frame>
+        <Frame style={{ background: darkMode ? COLOURS.bgDark : COLOURS.bgLight }}>{DecoratedStory()}</Frame>
         {/* Cheeky use of ButtonBase here :P */}
         <ThemeButton kind={ButtonVariations.theme} onClick={handleDarkMode} mode={darkMode}>
           <FontAwesomeIcon icon={darkMode ? faSun : faMoon} />

diff --git a/src/styles/colours.ts b/src/styles/colours.ts
@@ -1,15 +1,22 @@
 export default {
   white: '#FFF',
   whiteDark: '#e9e9f0',
-  blue: '#218DFF',
-  blueDark: '#0b66c6',
+  blue: '#3F77FF',
+  blueDark: '#185afb',
+  purple: '#8958FF',
   bgLight: '#edf2f7',
-  bgDark: '#2e2e2e',
+  bgDark: 'linear-gradient(0deg, #21222E 0.05%, #2C2D3F 100%)',
   blackLight: '#181a1b',
   successLight: '#5ca95c',
   successDark: '#00BE2E',
   dangerLight: '#e55353',
   dangerDark: '#eb4025',
   warningLight: '#f1851d',
   warningDark: '#f1851d',
+  disabledLightOpaque: '#ffffff80',
+  disabledDarkOpaque: '#ffffff80',
+  disabledLight: '#31323E',
+  disabledDark: '#31323E',
+  mainGradient: 'linear-gradient(270deg, #8958FF 0%, #3F77FF 100%)',
+  mainGradientDarker: 'linear-gradient(270deg, #6a2cff 0%, #185afb 100%)',
 }
diff --git a/src/styles/common/StyledButton.ts b/src/styles/common/StyledButton.ts
@@ -17,6 +17,10 @@ const {
   dangerDark,
   bgLight,
   bgDark,
+  mainGradient,
+  mainGradientDarker,
+  disabledLight,
+  disabledLightOpaque,
 } = ColourSheet
 
 const { buttonBorder } = StyleSheet
@@ -42,19 +46,18 @@ export const ButtonTheme = variants<'kind', keyof typeof ButtonVariations>('mode
   default: {
     light: css`
       color: ${white};
-      background-color: ${blue};
+      background: ${mainGradient};
 
       &:hover {
-        background-color: ${blueDark};
+        background: ${mainGradientDarker};
       }
     `,
     dark: css`
-      color: ${blue};
-      background-color: ${bgDark};
+      color: ${white};
+      background: ${mainGradient};
 
       &:hover {
-        color: ${white};
-        background-color: ${blueDark};
+        background: ${mainGradientDarker};
       }
     `,
   },
@@ -64,80 +67,80 @@ export const ButtonTheme = variants<'kind', keyof typeof ButtonVariations>('mode
   secondary: {
     light: css`
       color: ${blue};
-      background-color: ${bgLight};
+      background: ${bgLight};
       border-color: ${blue};
 
       &:hover {
-        background-color: ${bgDark};
+        background: ${bgDark};
       }
     `,
     dark: css`
       color: ${blue};
-      background-color: ${bgDark};
+      background: ${bgDark};
       border-color: ${blue};
 
       &:hover {
         color: ${white};
-        background-color: ${blue};
+        background: ${blue};
       }
     `,
   },
   success: {
     light: css`
       color: ${white};
-      background-color: ${successLight};
+      background: ${successLight};
 
       &:hover {
-        background-color: ${successDark};
+        background: ${successDark};
         border-color: ${successDark};
       }
     `,
     dark: css`
       color: ${white};
-      background-color: ${successDark};
+      background: ${successDark};
 
       &:hover {
-        background-color: ${successLight};
+        background: ${successLight};
         border-color: ${successLight};
       }
     `,
   },
   danger: {
     light: css`
       color: ${white};
-      background-color: ${dangerLight};
+      background: ${dangerLight};
 
       &:hover {
-        background-color: ${dangerDark};
+        background: ${dangerDark};
         border-color: ${dangerDark};
       }
     `,
     dark: css`
       color: ${white};
-      background-color: ${dangerDark};
+      background: ${dangerDark};
 
       &:hover {
-        background-color: ${dangerLight};
+        background: ${dangerLight};
         border-color: ${dangerLight};
       }
     `,
   },
   warning: {
     light: css`
       color: ${white};
-      background-color: ${warningLight};
+      background: ${warningLight};
 
       &:hover {
-        background-color: ${warningDark};
+        background: ${warningDark};
         border-color: ${warningDark};
       }
     `,
     dark: css`
       color: ${white};
-      background-color: ${warningDark};
+      background: ${warningDark};
 
       &:hover {
-        background-color: ${warningLight};
+        background: ${warningLight};
         border-color: ${warningLight};
       }
     `,
@@ -148,7 +151,7 @@ export const ButtonTheme = variants<'kind', keyof typeof ButtonVariations>('mode
       background: transparent;
 
       &:hover {
-        background-color: ${blueDark};
+        background: ${blueDark};
       }
     `,
     dark: css`
@@ -157,18 +160,17 @@ export const ButtonTheme = variants<'kind', keyof typeof ButtonVariations>('mode
 
       &:hover {
         color: ${whiteDark};
-        background-color: ${blueDark};
+        background: ${blueDark};
       }
     `,
   },
   disabled: {
-    light: css`
-      color: ${white};
-      opacity: 0.5;
-      background: #000;
+    dark: css`
+      color: ${disabledLightOpaque};
+      background: ${disabledLight};
     `,
-    get dark(): ThemeValue {
-      return this.light
+    get light(): ThemeValue {
+      return this.dark
     },
   },
   theme: {
@@ -178,7 +180,7 @@ export const ButtonTheme = variants<'kind', keyof typeof ButtonVariations>('mode
 
       &:hover {
         color: ghostwhite;
-        background-color: darkorange;
+        background: darkorange;
       }
     `,
     dark: css`
@@ -187,12 +189,25 @@ export const ButtonTheme = variants<'kind', keyof typeof ButtonVariations>('mode
 
       &:hover {
         color: ${white};
-        background-color: darkpurple;
+        background: darkpurple;
       }
     `,
   },
 })
 
+/*
+TODO: consider adding:
+  &.small {
+    font-size: 0.6rem;
+    padding: 0.3rem 0.5rem;
+  }
+
+  &.big {
+    font-size: 1.2rem;
+    padding: 0.65rem 1rem;
+  }
+*/
+
 export default styled.button`
   border: ${buttonBorder};
 

diff --git a/src/styles/styles.ts b/src/styles/styles.ts
@@ -1,3 +1,4 @@
 export default {
   buttonBorder: '0.1rem solid transparent',
+  borderRadius: '1.6rem',
 }