Merge pull request #61 from supabase/fix/button-color-and-size

Fix/button color and size
supabase · Jan 13, 2021 · ea1d934 · ea1d934
2 parents 5135888 + f3485ae
commit ea1d934
Show file tree

Hide file tree

Showing 4 changed files with 168 additions and 33 deletions.
diff --git a/src/components/Button/Button.css b/src/components/Button/Button.css
@@ -7,11 +7,10 @@
   @apply rounded;
   font-family: inherit;
   font-weight: inherit;
-  text-shadow: 0 -1px 0 rgba(0,0,0,.12);
 }
 
 .sbui-btn-container--shadow {
-  box-shadow: 0 2px 0 rgba(0,0,0,.045);
+  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
 }
 
 .sbui-btn--w-full {
@@ -47,23 +46,25 @@
   Button varients
 */
 .sbui-btn-primary {
-  @apply text-white bg-brand-700 hover:bg-brand-600;
-  @apply dark:hover:bg-brand-800;
+  @apply text-white bg-brand-800 hover:bg-brand-600;
+  @apply dark:hover:bg-brand-900;
+  text-shadow: 0px 0px 4px rgba(38 111 78 / 50%);
 }
 .sbui-btn-default {
-  @apply text-gray-500 bg-white border-gray-300 hover:text-gray-600; 
-  @apply hover:bg-white hover:border-gray-200; 
-  
+  @apply text-gray-500 bg-white border-gray-300 hover:text-gray-600;
+  @apply hover:bg-white hover:border-gray-200;
+
   @apply dark:border-dark-700 dark:bg-gray-600 dark:text-dark-200;
   @apply dark:hover:bg-gray-700;
-
+  text-shadow: 0px 0px 4px rgba(31 31 31 / 50%);
 }
 .sbui-btn-secondary {
   @apply text-gray-600 bg-gray-200;
   @apply hover:text-gray-700 hover:bg-gray-300;
 
   @apply dark:text-gray-300 dark:bg-gray-500;
   @apply dark:hover:bg-gray-600;
+  text-shadow: 0px 0px 4px rgba(42 42 42 / 50%);
 }
 .sbui-btn-outline {
   @apply border text-gray-500 bg-transparent border-gray-200 border-solid hover:bg-white hover:text-gray-600 hover:border-gray-600 dark:text-white dark:border-dark-400 dark:hover:text-dark-600 dark:hover:border-white;
@@ -73,26 +74,32 @@
   @apply dark:text-white dark:border-dark-400 dark:hover:text-white dark:hover:border-white;
 }
 .sbui-btn-link {
-  @apply text-brand-700 bg-transparent text-brand-700 border-none hover:bg-brand-300 hover:bg-opacity-25;
+  @apply text-brand-800 bg-transparent text-brand-800 border-none hover:bg-brand-900 hover:bg-opacity-25;
 }
 .sbui-btn-text {
   @apply text-gray-400 bg-transparent border-none hover:bg-gray-200 hover:bg-opacity-25;
   @apply dark:text-dark-300 dark:hover:bg-dark-600;
 }
 
 .sbui-btn--danger {
-  @apply border-red-500 text-red-500; 
+  @apply border-red-500 text-red-500;
   @apply dark:border-red-500 dark:text-red-500;
+  text-shadow: 0px 0px 4px rgba(229, 62, 62 / 50%);
 }
 
 .sbui-btn-primary.sbui-btn--danger {
   @apply bg-red-500 text-white;
   @apply hover:bg-red-600 hover:border-red-600;
 }
-.sbui-btn-default.sbui-btn--danger, .sbui-btn-secondary.sbui-btn--danger, .sbui-btn-outline.sbui-btn--danger, .sbui-btn-dashed.sbui-btn--danger, .sbui-btn-link.sbui-btn--danger, .sbui-btn-text.sbui-btn--danger {
+.sbui-btn-default.sbui-btn--danger,
+.sbui-btn-secondary.sbui-btn--danger,
+.sbui-btn-outline.sbui-btn--danger,
+.sbui-btn-dashed.sbui-btn--danger,
+.sbui-btn-link.sbui-btn--danger,
+.sbui-btn-text.sbui-btn--danger {
   @apply hover:bg-red-600 hover:text-white hover:border-red-600;
 }
- /* {
+/* {
   @apply hover:bg-red-600 hover:text-white hover:border-red-600;
 } */
 

diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
@@ -1,6 +1,7 @@
 import React, { useRef, useState } from 'react'
 
 import { Button } from '.'
+import { Space } from '../../components/Space'
 import { Icon } from '../Icon'
 
 export default {
@@ -11,13 +12,15 @@ export default {
 export const Default = (args: any) => <Button {...args}>Button text</Button>
 export const withStyles = (args: any) => <Button {...args}>Button text</Button>
 export const withIcon = (args: any) => <Button {...args}>Button text</Button>
-export const withIconRight = (args: any) => <Button {...args}>Button text</Button>
+export const withIconRight = (args: any) => (
+  <Button {...args}>Button text</Button>
+)
 export const withBlock = (args: any) => <Button {...args}>Button text</Button>
-export const withOnlyIcon = (args: any) => <Button {...args}/>
-export const withOnlyLoading = (args: any) => <Button {...args}/>
-export const withRef = () => { 
+export const withOnlyIcon = (args: any) => <Button {...args} />
+export const withOnlyLoading = (args: any) => <Button {...args} />
+export const withRef = () => {
   const buttonRef = useRef(null)
-  const [msg, setMsg] = useState("Click button to console.log Ref")
+  const [msg, setMsg] = useState('Click button to console.log Ref')
 
   function onClick() {
     const message = `container: ${buttonRef?.current.container} button:${buttonRef?.current.button}  `
@@ -26,17 +29,137 @@ export const withRef = () => {
   }
 
   return (
-  <>
-    <Button ref={buttonRef} onClick={onClick}>
-      Button with forwardRef
-    </Button>
+    <>
+      <Button ref={buttonRef} onClick={onClick}>
+        Button with forwardRef
+      </Button>
 
-    <p style={{color: '#666666'}}>{msg}</p>
-  </>
+      <p style={{ color: '#666666' }}>{msg}</p>
+    </>
   )
 }
+export const allButtons = (args: any) => (
+  <>
+    <Space direction="vertical" size={6}>
+      <Space>
+        <Button {...args} size="tiny">
+          Button text
+        </Button>
+        <Button {...args} size="tiny" type="secondary">
+          Button text
+        </Button>
+        <Button {...args} size="tiny" type="default">
+          Button text
+        </Button>
+        <Button {...args} size="tiny" type="link">
+          Button text
+        </Button>
+        <Button {...args} size="tiny" type="text">
+          Button text
+        </Button>
+        <Button {...args} size="tiny" type="dashed">
+          Button text
+        </Button>
+        <Button {...args} size="tiny" type="outline">
+          Button text
+        </Button>
+      </Space>
+
+      <Space>
+        <Button {...args} size="small">
+          Button text
+        </Button>
+        <Button {...args} size="small" type="secondary">
+          Button text
+        </Button>
+        <Button {...args} size="small" type="default">
+          Button text
+        </Button>
+        <Button {...args} size="small" type="link">
+          Button text
+        </Button>
+        <Button {...args} size="small" type="text">
+          Button text
+        </Button>
+        <Button {...args} size="small" type="dashed">
+          Button text
+        </Button>
+        <Button {...args} size="small" type="outline">
+          Button text
+        </Button>
+      </Space>
+      <Space>
+        <Button {...args}>Button text</Button>
+        <Button {...args} size="medium" type="secondary">
+          Button text
+        </Button>
+        <Button {...args} size="medium" type="default">
+          Button text
+        </Button>
+        <Button {...args} size="medium" type="link">
+          Button text
+        </Button>
+        <Button {...args} size="medium" type="text">
+          Button text
+        </Button>
+        <Button {...args} size="medium" type="dashed">
+          Button text
+        </Button>
+        <Button {...args} size="medium" type="outline">
+          Button text
+        </Button>
+      </Space>
+      <Space>
+        <Button {...args} size="large">
+          Button text
+        </Button>
+        <Button {...args} size="large" type="secondary">
+          Button text
+        </Button>
+        <Button {...args} size="large" type="default">
+          Button text
+        </Button>
+        <Button {...args} size="large" type="link">
+          Button text
+        </Button>
+        <Button {...args} size="large" type="text">
+          Button text
+        </Button>
+        <Button {...args} size="large" type="dashed">
+          Button text
+        </Button>
+        <Button {...args} size="large" type="outline">
+          Button text
+        </Button>
+      </Space>
+      <Space>
+        <Button {...args} size="xlarge">
+          Button text
+        </Button>
+        <Button {...args} size="xlarge" type="secondary">
+          Button text
+        </Button>
+        <Button {...args} size="xlarge" type="default">
+          Button text
+        </Button>
+        <Button {...args} size="xlarge" type="link">
+          Button text
+        </Button>
+        <Button {...args} size="xlarge" type="text">
+          Button text
+        </Button>
+        <Button {...args} size="xlarge" type="dashed">
+          Button text
+        </Button>
+        <Button {...args} size="xlarge" type="outline">
+          Button text
+        </Button>
+      </Space>
+    </Space>
+  </>
+)
 
-const icon = <Icon type={"Package"}/>
+const icon = <Icon type={'Package'} />
 
 withIcon.args = {
   type: 'primary',
@@ -45,23 +168,28 @@ withIcon.args = {
 
 withIconRight.args = {
   type: 'primary',
-  iconRight: <Icon type={"ChevronRight"} strokeWidth={2}/>,
+  iconRight: <Icon type={'ChevronRight'} strokeWidth={2} />,
 }
 
 withStyles.args = {
   type: 'primary',
-  style: {backgroundColor: 'red', color: 'yellow'}
+  style: { backgroundColor: 'red', color: 'yellow' },
 }
 
 withBlock.args = {
   type: 'primary',
-  block: true
+  block: true,
 }
 
 withOnlyIcon.args = {
-  icon: icon
+  icon: icon,
 }
 
 withOnlyLoading.args = {
-  loading: true
-}
+  loading: true,
+}
+
+allButtons.args = {
+  loading: false,
+  danger: false,
+}
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -47,7 +47,7 @@ const Button = forwardRef<RefHandle, Props>(
       iconRight,
       loading = false,
       shadow = true,
-      size = 'medium',
+      size = 'tiny',
       style,
       type = 'primary',
       htmlType,

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -34,8 +34,8 @@ module.exports = {
           500: '#9FE7C7',
           600: '#65D9A5',
           700: '#3ECF8E',
-          800: '#38BC81',
-          900: '#10633E',
+          800: '#24b47e', // green-500 in dashboard
+          900: '#2c9c6a',
         },
 
         gray: {