From 25ef6b37d178bf3ad0d7a53cd352d4fca6184c19 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Sat, 2 Oct 2021 13:21:40 +0200
Subject: [PATCH] Fix Button styling

---
 src/components/atoms/Button.svelte | 9 +++++++--
 src/style/atoms/_button.scss       | 9 ++++-----
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/atoms/Button.svelte b/src/components/atoms/Button.svelte
index 468b2aa..27658f8 100644
--- a/src/components/atoms/Button.svelte
+++ b/src/components/atoms/Button.svelte
@@ -2,15 +2,20 @@
     export let text: string
     export let tag: string = 'a'
     export let url: string = undefined
+
+    const classes = [
+        'button',
+        $$props.class
+    ].join(' ')
 </script>
 
 {#if tag === 'button'}
-    <button class="button {$$props.class}">
+    <button class={classes}>
         <slot />
         {text}
     </button>
 {:else if tag === 'a'}
-    <a href={url} class="button {$$props.class}">
+    <a href={url} class={classes}>
         <slot />
         <span>{text}</span>
     </a>
diff --git a/src/style/atoms/_button.scss b/src/style/atoms/_button.scss
index 2e7edba..3a0bee7 100644
--- a/src/style/atoms/_button.scss
+++ b/src/style/atoms/_button.scss
@@ -1,13 +1,11 @@
 .button {
     display: inline-flex;
-    height: 48px;
     align-items: center;
-    background: #fff;
+    height: 48px;
     padding: 0 24px;
+    background: #fff;
+    font: 900 #{rem(18px)}/1 $font-sans;
     color: $color-text;
-    font-size: rem(18px);
-    line-height: 1;
-    font-weight: 700;
     border-radius: 100vh;
     border: none;
     text-decoration: none;
@@ -22,6 +20,7 @@
     // Small
     &--small {
         height: 40px;
+        padding: 0 16px;
     }
 
     // Color Variants