From 978379db43510c3c64102f884e9f1aee40bc298b Mon Sep 17 00:00:00 2001
From: Kyrylo Shmidt <kshmidt@digma.ai>
Date: Fri, 31 Mar 2023 17:51:42 +0200
Subject: [PATCH] Update button styles in Installation Wizard

---
 src/components/InstallationWizard/Button/styles.ts | 13 ++++---------
 src/components/InstallationWizard/index.tsx        |  7 ++-----
 src/components/InstallationWizard/styles.ts        |  9 +++++++++
 src/components/common/Button/index.tsx             |  1 +
 src/components/common/Button/types.ts              |  1 +
 5 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/components/InstallationWizard/Button/styles.ts b/src/components/InstallationWizard/Button/styles.ts
index 63a92b245..42bb88845 100644
--- a/src/components/InstallationWizard/Button/styles.ts
+++ b/src/components/InstallationWizard/Button/styles.ts
@@ -12,14 +12,12 @@ export const Button = styled.button<ButtonProps>`
   padding: 6px 8px;
   border-radius: 2px;
   cursor: pointer;
-  border: none;
 
   color: ${({ buttonType }) => {
     switch (buttonType) {
       case "primary":
         return "#b9c2eb";
       case "secondary":
-        return "#dadada";
       case "success":
       case "failure":
         return "#1e1e1e";
@@ -31,7 +29,7 @@ export const Button = styled.button<ButtonProps>`
       case "primary":
         return "#000";
       case "secondary":
-        return "#383838";
+        return "#646363";
       case "success":
         return "#c8e5c9";
       case "failure":
@@ -39,15 +37,12 @@ export const Button = styled.button<ButtonProps>`
     }
   }};
 
+  border: ${({ buttonType }) =>
+    buttonType === "secondary" ? "1px solid #1e1e1e" : "none"};
+
   width: ${({ buttonType }) =>
     buttonType === "primary" ? "100%" : "max-content"};
 
-  &:hover {
-    ${({ buttonType }) => {
-      return buttonType === "secondary" ? "background: #2e2e2e;" : "";
-    }}
-  }
-
   &:disabled {
     ${({ buttonType }) => (buttonType === "primary" ? "opacity: 0.2;" : "")}
     cursor: initial;
diff --git a/src/components/InstallationWizard/index.tsx b/src/components/InstallationWizard/index.tsx
index db83cb5c6..1ba707f23 100644
--- a/src/components/InstallationWizard/index.tsx
+++ b/src/components/InstallationWizard/index.tsx
@@ -118,12 +118,9 @@ export const InstallationWizard = () => {
           installed)
         </s.SectionDescription>
         <s.SectionDescription>
-          <Button
-            buttonType={"secondary"}
-            onClick={handleInstallDigmaButtonClick}
-          >
+          <s.GetDigmaButton onClick={handleInstallDigmaButtonClick}>
             Get Digma Docker Extension
-          </Button>
+          </s.GetDigmaButton>
         </s.SectionDescription>
         <s.SectionDivider>or</s.SectionDivider>
         <s.SectionTitle>
diff --git a/src/components/InstallationWizard/styles.ts b/src/components/InstallationWizard/styles.ts
index 95b4ab97b..b8c98ebf8 100644
--- a/src/components/InstallationWizard/styles.ts
+++ b/src/components/InstallationWizard/styles.ts
@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import { Button } from "../common/Button";
 
 export const Container = styled.div`
   background: #5a5a5a;
@@ -145,3 +146,11 @@ export const Illustration = styled.img`
   margin: 12px 0;
   max-width: 500px;
 `;
+
+export const GetDigmaButton = styled(Button)`
+  width: max-content;
+  font-size: 12px;
+  line-height: 14px;
+  padding: 6px 8px;
+  height: 26px;
+`;
diff --git a/src/components/common/Button/index.tsx b/src/components/common/Button/index.tsx
index 1866c869f..de4d638b1 100644
--- a/src/components/common/Button/index.tsx
+++ b/src/components/common/Button/index.tsx
@@ -38,6 +38,7 @@ export const Button = (props: ButtonProps) => {
 
   return (
     <s.Button
+      className={props.className}
       onClick={handleClick}
       disabled={props.disabled}
       onMouseEnter={handleMouseEnter}
diff --git a/src/components/common/Button/types.ts b/src/components/common/Button/types.ts
index 21d445005..8510bb915 100644
--- a/src/components/common/Button/types.ts
+++ b/src/components/common/Button/types.ts
@@ -6,4 +6,5 @@ export interface ButtonProps {
   children: React.ReactNode;
   onClick: React.MouseEventHandler<HTMLButtonElement>;
   disabled?: boolean;
+  className?: string;
 }