From 01fbc5eecdda26f7f647f846201bc9fcce9d27f5 Mon Sep 17 00:00:00 2001
From: Lukas <Lukas.nyberg@gmail.com>
Date: Wed, 18 Sep 2024 13:54:25 +0200
Subject: [PATCH] feat(ceremony): add x as provider

---
 ceremony/src/lib/components/Button.svelte  |  2 +-
 ceremony/src/routes/auth/dive/+page.svelte | 16 ++++++++++------
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/ceremony/src/lib/components/Button.svelte b/ceremony/src/lib/components/Button.svelte
index 772a73d26a5..706f868320a 100644
--- a/ceremony/src/lib/components/Button.svelte
+++ b/ceremony/src/lib/components/Button.svelte
@@ -6,7 +6,7 @@ let { children, class: className = "", loading = false, ...props } = $props()
 
 <button
         {...props}
-        class={`flex items-center gap-2 px-4 py-2 text-black font-bold hover:text-black bg-union-accent-500 uppercase justify-center ${className}`}>
+        class={`flex items-center w-full gap-2 px-4 py-2 text-black font-bold hover:text-black bg-union-accent-500 uppercase justify-center ${className}`}>
   {@render children()}
   {#if loading}
     <Spinner class="size-4"/>
diff --git a/ceremony/src/routes/auth/dive/+page.svelte b/ceremony/src/routes/auth/dive/+page.svelte
index 13eb6bedca7..496f1894635 100644
--- a/ceremony/src/routes/auth/dive/+page.svelte
+++ b/ceremony/src/routes/auth/dive/+page.svelte
@@ -2,10 +2,11 @@
 import Button from "$lib/components/Button.svelte"
 import { page } from "$app/stores"
 import { supabase } from "$lib/supabase/client.ts"
+import H1 from "$lib/components/typography/H1.svelte"
 // import Spinner from "$lib/components/Spinner.svelte"
 
-type AuthProviders = "github" | "google"
-const providers: Array<AuthProviders> = ["github", "google"]
+type AuthProviders = "github" | "google" | "twitter"
+const providers: Array<AuthProviders> = ["github", "google", "twitter"]
 
 async function diveIn(provider: AuthProviders) {
   const { data, error } = await supabase.auth.signInWithOAuth({
@@ -23,14 +24,17 @@ async function diveIn(provider: AuthProviders) {
 
 {#snippet Dive(provider)}
 <Button onclick={() => diveIn(provider)}>
-  <span>Dive in using {provider}</span>
+  <span>{provider === "twitter" ? "X" : provider}</span>
 </Button>
 {/snippet}
 
 <div class="p-8 flex items-center flex-col gap-4">
-  {#each providers as provider}
-    {@render Dive(provider)}
-  {/each}
+  <H1>Dive in</H1>
+  <div class="flex gap-4">
+    {#each providers as provider}
+      {@render Dive(provider)}
+    {/each}
+  </div>
 </div>
 
 <!--{#if loading}-->