From 0e882829ce5eec34191e2666974d383657c4c00e Mon Sep 17 00:00:00 2001
From: Guillaume Roux <guillaumeroux123@gmail.com>
Date: Tue, 25 Jan 2022 13:31:41 +0100
Subject: [PATCH 1/2] edit button

---
 src/atoms/Button.tsx |  3 +++
 src/theme.ts         | 38 +++++++++++++++++++++++++++++++++++++-
 2 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/src/atoms/Button.tsx b/src/atoms/Button.tsx
index b4cbc42a..4f448c30 100644
--- a/src/atoms/Button.tsx
+++ b/src/atoms/Button.tsx
@@ -7,6 +7,7 @@ import { Spinner } from './Spinner';
 interface OwnProps {
   compact?: boolean;
   loading?: boolean;
+  fullwidth?: boolean;
 }
 
 export type ButtonProps = OwnProps & RebassButtonProps;
@@ -15,6 +16,7 @@ export const Button: FunctionComponent<ButtonProps> = ({
   compact = false,
   loading = false,
   disabled = false,
+  fullwidth = false,
   children,
   ...props
 }) => (
@@ -22,6 +24,7 @@ export const Button: FunctionComponent<ButtonProps> = ({
     p={compact ? '0.625rem 2rem' : undefined}
     pl={loading ? '1.5rem' : undefined}
     fontSize={compact ? '0.9rem' : undefined}
+    width={fullwidth ? '100%' : undefined}
     disabled={loading || disabled}
     {...props}>
     <Flex variant="horizontal-center">
diff --git a/src/theme.ts b/src/theme.ts
index fe3f6851..e6aca241 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -40,7 +40,8 @@ const COLORS = {
   WHITE: '#ffffff',
   GREY_LIGHT: '#d8d8d8',
   GREY_ATHENS: '#e8eaed',
-  GREY_SECONDARY: '#b5bfc7'
+  GREY_SECONDARY: '#b5bfc7',
+  WARNING_ORANGE: '#fa873f'
 };
 
 const breakpoints: string[] & {
@@ -76,6 +77,8 @@ export const theme = {
     spinner: '#a086f7',
     loadingSpinner: '#7c9ec3',
 
+    warning: COLORS.WARNING_ORANGE,
+
     background: {
       muted: '#f6f8fa'
     },
@@ -93,6 +96,9 @@ export const theme = {
       },
       inverted: {
         hover: '#007896'
+      },
+      warning: {
+        hover: COLORS.WHITE
       }
     },
 
@@ -299,6 +305,36 @@ export const theme = {
         }
       }
     },
+    warning: {
+      cursor: 'pointer',
+      background: '',
+      color: 'primary',
+      fontSize: 2,
+      fontFamily: 'body',
+      padding: '0.625rem 2.125rem',
+      borderRadius: 'small',
+      borderWidth: '0.125rem',
+      borderStyle: 'solid',
+      borderColor: 'primary',
+      transition: 'color 0.12s ease 0s, background 0.12s ease 0s, box-shadow 0.12s ease 0s',
+      '&:hover': {
+        backgroundColor: 'button.warning.hover',
+        color: 'text.inverted'
+      },
+      '&:focus': {
+        boxShadow: 'button',
+        outline: 'none'
+      },
+      '&:disabled': {
+        cursor: 'default',
+        borderColor: 'button.primary.disabled',
+        color: 'button.primary.disabled',
+        '&:hover': {
+          background: 'none',
+          color: 'button.primary.disabled'
+        }
+      }
+    },
     clear: {
       cursor: 'pointer',
       background: 'none',

From eaf007c76715fb880a9226d80cd87a66cd193b0f Mon Sep 17 00:00:00 2001
From: Guillaume Roux <guillaumeroux123@gmail.com>
Date: Thu, 3 Feb 2022 17:46:00 +0100
Subject: [PATCH 2/2] Add button variants for core and fix some errors

---
 src/atoms/Icon.tsx       | 2 +-
 src/molecules/Banner.tsx | 4 ++--
 src/theme.ts             | 6 ++++++
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/atoms/Icon.tsx b/src/atoms/Icon.tsx
index 06342ea3..92d30a5b 100644
--- a/src/atoms/Icon.tsx
+++ b/src/atoms/Icon.tsx
@@ -105,7 +105,7 @@ export const Icon: FunctionComponent<IconProps & BoxProps> = ({
         as={InlineSVG}
         src={icons[type]}
         width={width}
-        fill={get(theme.colors, (fill as keyof Theme['colors']) as string) || fill}
+        sx={{ fill: get(theme.colors, (fill as keyof Theme['colors']) as string) || fill }}
         {...props}
       />
     );
diff --git a/src/molecules/Banner.tsx b/src/molecules/Banner.tsx
index 07d79665..d76dda6e 100644
--- a/src/molecules/Banner.tsx
+++ b/src/molecules/Banner.tsx
@@ -47,10 +47,10 @@ export const Banner: FunctionComponent<BannerProps & Omit<BoxProps, 'label'>> =
         variant="horizontal-start"
         p={extendable ? '2' : '3'}
         pb={'2'}
-        px={type === 'clear' && '0'}
+        px={type === 'clear' ? '0' : undefined}
         justifyContent="space-between"
         onClick={children && extendable ? handleToggle : undefined}
-        sx={{ cursor: children && extendable && 'pointer' }}
+        sx={{ cursor: children && extendable ? 'pointer' : undefined }}
         {...omitMarginProps(props)}
         data-testid="banner-toggle">
         <Flex variant="horizontal-start">
diff --git a/src/theme.ts b/src/theme.ts
index e6aca241..e94c6719 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -347,6 +347,12 @@ export const theme = {
       '&:hover': {
         transform: 'scale(1.05)'
       }
+    },
+    basic: {
+      cursor: 'pointer',
+      background: 'none',
+      border: 'none',
+      p: 0
     }
   },
   variants: {