From 3c97b81b69029f9b0e66486a6df02d1bce5f8f42 Mon Sep 17 00:00:00 2001
From: Mark Berger <m19.berger@gmail.com>
Date: Thu, 1 Dec 2022 02:06:59 +0200
Subject: [PATCH] Added dark variant to Button

---
 .../src/components/ui/Button/Button.module.scss   | 15 +++++++++++++++
 .../src/components/ui/Button/Button.tsx           |  1 +
 .../src/components/ui/Button/index.stories.tsx    |  6 ++++++
 airbyte-webapp/src/components/ui/Button/types.tsx |  2 +-
 4 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/airbyte-webapp/src/components/ui/Button/Button.module.scss b/airbyte-webapp/src/components/ui/Button/Button.module.scss
index 3ac76b37cd6e7..1358b7fbc5460 100644
--- a/airbyte-webapp/src/components/ui/Button/Button.module.scss
+++ b/airbyte-webapp/src/components/ui/Button/Button.module.scss
@@ -213,6 +213,21 @@
     }
   }
 
+  &.typeDark {
+    background-color: colors.$dark-blue;
+    color: colors.$white;
+
+    &:hover {
+      background-color: colors.$dark-blue-800;
+      color: colors.$white;
+    }
+
+    &:active {
+      background-color: colors.$dark-blue-1000;
+      color: colors.$white;
+    }
+  }
+
   &.isLoading {
     position: relative;
     align-content: center;
diff --git a/airbyte-webapp/src/components/ui/Button/Button.tsx b/airbyte-webapp/src/components/ui/Button/Button.tsx
index a9294b7a937bf..bcc9782df54d6 100644
--- a/airbyte-webapp/src/components/ui/Button/Button.tsx
+++ b/airbyte-webapp/src/components/ui/Button/Button.tsx
@@ -32,6 +32,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, r
     [styles.typeLight]: variant === "light",
     [styles.typePrimary]: variant === "primary",
     [styles.typeSecondary]: variant === "secondary",
+    [styles.typeDark]: variant === "dark",
   };
   const widthStyle: { width?: string } = {};
   if (width) {
diff --git a/airbyte-webapp/src/components/ui/Button/index.stories.tsx b/airbyte-webapp/src/components/ui/Button/index.stories.tsx
index 26fade189d628..7a3d8472ee1b8 100644
--- a/airbyte-webapp/src/components/ui/Button/index.stories.tsx
+++ b/airbyte-webapp/src/components/ui/Button/index.stories.tsx
@@ -75,3 +75,9 @@ Clear.args = {
   variant: "clear",
   children: "No Stroke",
 };
+
+export const Dark = Template.bind({});
+Dark.args = {
+  variant: "dark",
+  children: "Dark",
+};
diff --git a/airbyte-webapp/src/components/ui/Button/types.tsx b/airbyte-webapp/src/components/ui/Button/types.tsx
index 836aa4eb6a192..09e46b431047e 100644
--- a/airbyte-webapp/src/components/ui/Button/types.tsx
+++ b/airbyte-webapp/src/components/ui/Button/types.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 type ButtonSize = "xs" | "sm" | "lg";
-type ButtonVariant = "primary" | "secondary" | "danger" | "light" | "clear";
+type ButtonVariant = "primary" | "secondary" | "danger" | "light" | "clear" | "dark";
 
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   clickable?: boolean;