From 32749e5f7b7568a05f9749d1f4dc87f476a2b2f1 Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <github@thib.top>
Date: Tue, 28 Sep 2021 16:09:14 +0200
Subject: [PATCH] fix tertiary buttons

---
 .../common-components/src/Button/Button.tsx   |  8 ++---
 .../src/stories/Button.stories.tsx            |  2 +-
 packages/common-theme/src/Overrides/Button.ts |  6 ++++
 packages/files-ui/src/Themes/DarkTheme.ts     | 30 +++++++++++++++++++
 4 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/packages/common-components/src/Button/Button.tsx b/packages/common-components/src/Button/Button.tsx
index 48700a6de0..0900773aaf 100644
--- a/packages/common-components/src/Button/Button.tsx
+++ b/packages/common-components/src/Button/Button.tsx
@@ -118,19 +118,19 @@ const useStyles = makeStyles(
         "&:hover": {
           backgroundColor: palette.primary.main,
           color: palette.common.white.main,
-          ...overrides?.Button?.variants?.secondary?.hover
+          ...overrides?.Button?.variants?.tertiary?.hover
         },
         "&:focus": {
           backgroundColor: palette.primary.main,
           color: palette.common.white.main,
-          ...overrides?.Button?.variants?.secondary?.focus
+          ...overrides?.Button?.variants?.tertiary?.focus
         },
         "&:active": {
           backgroundColor: palette.primary.main,
           color: palette.common.white.main,
-          ...overrides?.Button?.variants?.secondary?.active
+          ...overrides?.Button?.variants?.tertiary?.active
         },
-        ...overrides?.Button?.variants?.secondary?.root
+        ...overrides?.Button?.variants?.tertiary?.root
       },
       outline: {
         color: palette.additional["gray"][8],
diff --git a/packages/common-components/src/stories/Button.stories.tsx b/packages/common-components/src/stories/Button.stories.tsx
index d45cbee53f..cffaf6a3b2 100644
--- a/packages/common-components/src/stories/Button.stories.tsx
+++ b/packages/common-components/src/stories/Button.stories.tsx
@@ -15,7 +15,7 @@ export const actionsData = {
   onClick: action("onClickButton")
 }
 
-type VariantOption = "primary" | "outline" | "dashed" | "danger" | undefined;
+type VariantOption = "primary" | "secondary" | "tertiary" | "outline" | "dashed" | "danger" | undefined;
 const variantOptions: VariantOption[] = [
   "primary",
   "outline",
diff --git a/packages/common-theme/src/Overrides/Button.ts b/packages/common-theme/src/Overrides/Button.ts
index 1c7d5237b8..106c92e11c 100644
--- a/packages/common-theme/src/Overrides/Button.ts
+++ b/packages/common-theme/src/Overrides/Button.ts
@@ -24,6 +24,12 @@ export interface IButtonOverride {
       focus?: Record<string, any>
       active?: Record<string, any>
     }
+    tertiary?: {
+      root?: Record<string, any>
+      hover?: Record<string, any>
+      focus?: Record<string, any>
+      active?: Record<string, any>
+    }
     outline?: {
       root?: Record<string, any>
       hover?: Record<string, any>
diff --git a/packages/files-ui/src/Themes/DarkTheme.ts b/packages/files-ui/src/Themes/DarkTheme.ts
index c78c07646b..d2fad329d0 100644
--- a/packages/files-ui/src/Themes/DarkTheme.ts
+++ b/packages/files-ui/src/Themes/DarkTheme.ts
@@ -656,6 +656,36 @@ export const darkTheme = createTheme<CsfColors>({
               }
             }
           },
+          tertiary: {
+            root: {
+              backgroundColor: "var(--gray5)",
+              color: "var(--gray9)",
+              "& svg": {
+                fill: "var(--gray9)"
+              }
+            },
+            active: {
+              backgroundColor: "var(--gray7)",
+              color: "var(--gray9)",
+              "& svg": {
+                fill: "var(--gray9)"
+              }
+            },
+            hover: {
+              backgroundColor: "var(--gray7)",
+              color: "var(--gray9)",
+              "& svg": {
+                fill: "var(--gray9)"
+              }
+            },
+            focus: {
+              color: "none",
+              backgroundColor: "none",
+              "& svg": {
+                fill: "none"
+              }
+            }
+          },
           outline: {
             root: {
               backgroundColor: "var(--gray3) !important",