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` 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` 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` } }}; + 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) - + or 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 ( ; disabled?: boolean; + className?: string; }