Update button styles in Installation Wizard

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,23 +29,20 @@ export const Button = styled.button<ButtonProps>`
       case "primary":
         return "#000";
       case "secondary":
-        return "#383838";
+        return "#646363";
       case "success":
         return "#c8e5c9";
       case "failure":
         return "#e4c6c6";
     }
   }};
 
+  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;

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>

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;
+`;

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}

src/components/common/Button/types.ts

@@ -6,4 +6,5 @@ export interface ButtonProps {
   children: React.ReactNode;
   onClick: React.MouseEventHandler<HTMLButtonElement>;
   disabled?: boolean;
+  className?: string;
 }