chore: define secondary button styles

I also rename submit style to primary.

6 files changed, 92 insertions, 5 deletions

diff --git a/src/components/Buttons/Button/Button.tsx b/src/components/Buttons/Button/Button.tsx
new file mode 100644
index 0000000..c186d2a
--- /dev/null
+++ b/src/components/Buttons/Button/Button.tsx
@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+import styles from '../Buttons.module.scss';
+
+const Button = ({
+  children,
+  clickHandler,
+  isDisabled = false,
+  isPrimary = false,
+}: {
+  children: ReactNode;
+  clickHandler: any;
+  isDisabled: boolean;
+  isPrimary?: boolean;
+}) => {
+  const classes = `${styles.btn} ${
+    isPrimary ? styles.primary : styles.secondary
+  }`;
+
+  return (
+    <button
+      className={classes}
+      type="button"
+      disabled={isDisabled}
+      onClick={clickHandler}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default Button;
diff --git a/src/components/Buttons/ButtonSubmit/ButtonSubmit.tsx b/src/components/Buttons/ButtonSubmit/ButtonSubmit.tsx
index fd7fc62..a2e493a 100644
--- a/src/components/Buttons/ButtonSubmit/ButtonSubmit.tsx
+++ b/src/components/Buttons/ButtonSubmit/ButtonSubmit.tsx
@@ -2,7 +2,7 @@ import styles from '../Buttons.module.scss';
 
 const ButtonSubmit: React.FunctionComponent = ({ children }) => {
   return (
-    <button type="submit" className={`${styles.btn} ${styles.submit}`}>
+    <button type="submit" className={`${styles.btn} ${styles.primary}`}>
       {children}
     </button>
   );
diff --git a/src/components/Buttons/Buttons.module.scss b/src/components/Buttons/Buttons.module.scss
index 93dfb9d..b5e2c75 100644
--- a/src/components/Buttons/Buttons.module.scss
+++ b/src/components/Buttons/Buttons.module.scss
@@ -2,13 +2,13 @@
 
 .btn {
   display: block;
-  padding: var(--spacing-2xs) var(--spacing-md);
+  margin: auto;
   border: none;
   font-size: var(--font-size-md);
 }
 
-.submit {
-  margin: auto;
+.primary {
+  padding: var(--spacing-xs) var(--spacing-md);
   background: var(--color-primary);
   border-radius: fun.convert-px(3);
   box-shadow: fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-primary-dark);
@@ -32,3 +32,51 @@
     transform: translateX(#{fun.convert-px(3)}) translateY(#{fun.convert-px(3)});
   }
 }
+
+.secondary {
+  padding: var(--spacing-2xs) var(--spacing-md);
+  background: var(--color-bg);
+  border: fun.convert-px(5) solid var(--color-primary);
+  border-radius: fun.convert-px(25);
+  box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
+      var(--color-shadow-light),
+    fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2)
+      var(--color-shadow-light),
+    fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4)
+      var(--color-shadow-light);
+  color: var(--color-primary);
+  font-weight: 500;
+  transition: all 0.35s ease-in-out 0s;
+
+  &:disabled {
+    color: var(--color-fg-light);
+    border-color: var(--color-border);
+    cursor: wait;
+  }
+
+  &:not(:disabled) {
+    &:hover,
+    &:focus {
+      transform: translateX(#{fun.convert-px(-3)})
+        translateY(#{fun.convert-px(-6)});
+      box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
+          var(--color-shadow-lighter),
+        fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2)
+          var(--color-shadow-lighter),
+        fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4)
+          var(--color-shadow-lighter),
+        fun.convert-px(7) fun.convert-px(10) fun.convert-px(12)
+          fun.convert-px(-3) var(--color-shadow-lighter);
+    }
+
+    &:focus {
+      text-decoration: underline var(--color-primary) fun.convert-px(3);
+    }
+
+    &:active {
+      text-decoration: none;
+      transform: translateY(#{fun.convert-px(2)});
+      box-shadow: 0 0 0 0 var(--color-shadow-light);
+    }
+  }
+}
diff --git a/src/components/Buttons/index.tsx b/src/components/Buttons/index.tsx
index ea145ca..78289c9 100644
--- a/src/components/Buttons/index.tsx
+++ b/src/components/Buttons/index.tsx
@@ -1,3 +1,4 @@
+import Button from './Button/Button';
 import ButtonSubmit from './ButtonSubmit/ButtonSubmit';
 
-export { ButtonSubmit };
+export { Button, ButtonSubmit };
diff --git a/src/styles/abstracts/_variables.scss b/src/styles/abstracts/_variables.scss
index e7816f3..1ea1d5d 100644
--- a/src/styles/abstracts/_variables.scss
+++ b/src/styles/abstracts/_variables.scss
@@ -154,6 +154,10 @@ $color_blue-dark: hsl(206, 76%, 25%);
 $color_grey: hsl(206, 15%, 80%);
 $color_grey-dark: hsla(206, 10%, 25%);
 $color_grey-dark-o70: hsla(206, 10%, 25%, 0.7);
+$color_grey-dark-o40: hsla(206, 10%, 25%, 0.4);
+$color_grey-dark-o20: hsla(206, 10%, 25%, 0.2);
 $color_orange: hsl(32, 100%, 55%);
 $color_white: hsl(206, 15%, 97%);
 $color_white-o90: hsl(206, 15%, 97%, 0.9);
+$test: hsl(206, 54%, 95%);
+$test2: hsl(210, 40%, 96%);
diff --git a/src/styles/base/_colors.scss b/src/styles/base/_colors.scss
index 8986dd0..31733b9 100644
--- a/src/styles/base/_colors.scss
+++ b/src/styles/base/_colors.scss
@@ -4,6 +4,7 @@
   --color-bg: #{var.$color_white};
   --color-bg-opacity: #{var.$color_white-o90};
   --color-fg: #{var.$color_black};
+  --color-fg-light: #{var.$color_grey-dark};
   --color-fg-inverted: #{var.$color_white};
   --color-primary: #{var.$color_blue};
   --color-primary-light: #{var.$color_blue-bright};
@@ -13,4 +14,6 @@
   --color-border-light: #{var.$color_grey};
   --color-highlight: #{var.$color_blue-brighter};
   --color-shadow: #{var.$color_grey-dark-o70};
+  --color-shadow-light: #{var.$color_grey-dark-o40};
+  --color-shadow-lighter: #{var.$color_grey-dark-o20};
 }