fix: button improvements

Basis-Theory · Dec 13, 2022 · 920a0a2 · 920a0a2
1 parent 6e0b450
commit 920a0a2
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 3 deletions.
diff --git a/src/components/navbar/SignInButton.module.css b/src/components/navbar/SignInButton.module.css
@@ -0,0 +1,3 @@
+.button {
+  padding: 2px 12px 2px 12px !important;
+}
diff --git a/src/components/navbar/SignInButton.tsx b/src/components/navbar/SignInButton.tsx
@@ -1,11 +1,14 @@
 import React from "react";
 import { Button } from "../shared/Button";
 
+import styles from "./SignInButton.module.css";
+
 export const SignInButton = () => (
   <Button
     href="https://portal.basistheory.com/"
     target="_blank"
     variant="secondary"
+    className={styles.button}
   >
     Sign In
   </Button>

diff --git a/src/components/shared/Button.module.css b/src/components/shared/Button.module.css
@@ -2,23 +2,29 @@
   display: flex;
   align-items: center;
   border: none;
-  padding: 8px 12px 8px 12px !important;
+  padding: 8px 18px 8px 18px !important;
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 1px 2px rgba(0, 0, 0, 0.04);
   border-radius: 4px;
   font-weight: 600;
-  font-size: 13px;
+  font-size: 14px;
   line-height: 24px;
 }
 
 .primary {
   background: var(--ifm-color-primary);
+  border: 1px solid var(--ifm-color-primary);
   color: var(--bt-primary-button-color);
 }
 
 .primary svg path {
   fill: var(--bt-primary-button-color);
 }
 
+.primary.button:hover {
+  background: var(--ifm-color-primary-darker);
+  border: 1px solid var(--ifm-color-primary-darker);
+}
+
 .secondary {
   background: transparent;
   color: var(--ifm-color-primary);
@@ -28,6 +34,7 @@
 
 .secondary.button:hover {
   color: var(--ifm-color-primary);
+  background: #00b68a0a;
 }
 
 .secondary svg path {

diff --git a/src/components/shared/Button.tsx b/src/components/shared/Button.tsx
@@ -1,6 +1,8 @@
 import clsx from "clsx";
 import React, { PropsWithChildren } from "react";
 
+import Link from "@docusaurus/Link";
+
 import styles from "./Button.module.css";
 
 export const Button = ({
@@ -20,7 +22,7 @@ export const Button = ({
     [styles.secondary]: variant == "secondary",
   });
 
-  const defaultElement = other.href ? "a" : "button";
+  const defaultElement = other.href ? Link : "button";
   const Root: React.ElementType = defaultElement;
 
   return (