From 722ce7b4bede2735cba7e1d237bd1f85290c1ef0 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Fri, 28 Apr 2023 15:41:44 +0100
Subject: [PATCH] feat: github btn styling

---
 src/lib/elements/forms/button.svelte | 17 +++++++++++++++++
 src/routes/login/+page.svelte        |  2 +-
 src/routes/register/+page.svelte     |  2 +-
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/lib/elements/forms/button.svelte b/src/lib/elements/forms/button.svelte
index 27764b2a3..7895f7e4a 100644
--- a/src/lib/elements/forms/button.svelte
+++ b/src/lib/elements/forms/button.svelte
@@ -3,6 +3,7 @@
 
     export let submit = false;
     export let secondary = false;
+    export let github = false;
     export let text = false;
     export let danger = false;
     export let disabled = false;
@@ -38,6 +39,7 @@
         class="button"
         class:is-only-icon={round}
         class:is-secondary={secondary}
+        class:is-github={github}
         class:is-text={text}
         class:is-danger={danger}
         class:is-full-width={fullWidth}
@@ -53,6 +55,7 @@
         class="button"
         class:is-only-icon={round}
         class:is-secondary={secondary}
+        class:is-github={github}
         class:is-danger={danger}
         class:is-text={text}
         class:is-full-width={fullWidth}
@@ -62,3 +65,17 @@
         <slot />
     </button>
 {/if}
+
+<style lang="scss">
+    .is-github {
+        background-color: #373b4d;
+
+        &:hover {
+            background-color: lighten($color: #373b4d, $amount: 2.5);
+        }
+
+        &:active {
+            background-color: darken($color: #373b4d, $amount: 5);
+        }
+    }
+</style>
diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
index 1a965b836..9f7f1d71a 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -77,7 +77,7 @@
                 </FormItem>
                 <span class="with-separators eyebrow-heading-3">or</span>
                 <FormItem>
-                    <Button secondary fullWidth on:click={onGithubLogin} {disabled}>
+                    <Button github fullWidth on:click={onGithubLogin} {disabled}>
                         <span class="icon-github" aria-hidden="true" />
                         <span class="text">Sign in with Github</span>
                     </Button>
diff --git a/src/routes/register/+page.svelte b/src/routes/register/+page.svelte
index 574325b4a..93b018201 100644
--- a/src/routes/register/+page.svelte
+++ b/src/routes/register/+page.svelte
@@ -95,7 +95,7 @@
                 </FormItem>
                 <span class="with-separators eyebrow-heading-3">or</span>
                 <FormItem>
-                    <Button secondary fullWidth on:click={onGithubLogin} {disabled}>
+                    <Button github fullWidth on:click={onGithubLogin} {disabled}>
                         <span class="icon-github" aria-hidden="true" />
                         <span class="text">Sign up with Github</span>
                     </Button>