From f674dfa02de1bcdb13c7944e23654a7486747019 Mon Sep 17 00:00:00 2001
From: Scott Chacon <schacon@gmail.com>
Date: Tue, 21 Feb 2023 12:47:21 +0100
Subject: [PATCH] a _little_ more design on the login page

---
 src/lib/components/Login.svelte | 11 +++--
 src/routes/users/+page.svelte   | 81 +++++++++++++++++++++++++++++++--
 2 files changed, 84 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/Login.svelte b/src/lib/components/Login.svelte
index 888037db3..9f1e0c7da 100644
--- a/src/lib/components/Login.svelte
+++ b/src/lib/components/Login.svelte
@@ -27,7 +27,10 @@
 
 <div>
     {#if $user}
-        <button on:click={() => user.delete()}>Log out</button>
+        <button
+            class="py-1 px-3 rounded text-white bg-blue-400"
+            on:click={() => user.delete()}>Log out</button
+        >
     {:else if $token !== null}
         {#await Promise.all([open($token.url), pollForUser($token.token)])}
             <div>Log in in your system browser</div>
@@ -39,8 +42,10 @@
             if you are not redirected automatically, you can
         </p>
     {:else}
-        <button on:click={() => api.login.token.create().then(token.set)}
-            >Log in</button
+        <button
+            class="py-1 px-3 rounded text-white bg-blue-400"
+            on:click={() => api.login.token.create().then(token.set)}
+            >Sign up or Log in</button
         >
     {/if}
 </div>
diff --git a/src/routes/users/+page.svelte b/src/routes/users/+page.svelte
index e1b1ff070..b99e4b7ee 100644
--- a/src/routes/users/+page.svelte
+++ b/src/routes/users/+page.svelte
@@ -6,9 +6,80 @@
     const { user, api } = data;
 </script>
 
-<div>
-    {#if $user}
-        <div>Welcome, {$user.name}!</div>
-    {/if}
-    <Login {user} {api} />
+<div class="p-4 mx-auto">
+    <div class="max-w-xl mx-auto p-4">
+        {#if $user}
+            <div>Welcome, {$user.name}!</div>
+            <Login {user} {api} />
+        {:else}
+            <div class="text-2xl text-white text-center p-4">
+                Connect to GitButler Cloud
+            </div>
+            <div class="text-white space-y-4">
+                <div>
+                    Sign up or log in to GitButler Cloud for more tools and
+                    features:
+                </div>
+                <ul class="text-zinc-400 pb-4 space-y-1">
+                    <li class="flex flex-row space-x-3">
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke-width="1.5"
+                            stroke="white"
+                            class="w-6 h-6"
+                        >
+                            <path
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                d="M12 16.5V9.75m0 0l3 3m-3-3l-3 3M6.75 19.5a4.5 4.5 0 01-1.41-8.775 5.25 5.25 0 0110.233-2.33 3 3 0 013.758 3.848A3.752 3.752 0 0118 19.5H6.75z"
+                            />
+                        </svg>
+                        <span
+                            >Backup everything you do in any of your projects</span
+                        >
+                    </li>
+                    <li class="flex flex-row space-x-3">
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke-width="1.5"
+                            stroke="white"
+                            class="w-6 h-6"
+                        >
+                            <path
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"
+                            />
+                        </svg>
+
+                        <span>Sync your data across devices</span>
+                    </li>
+                    <li class="flex flex-row space-x-3">
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke-width="1.5"
+                            stroke="white"
+                            class="w-6 h-6"
+                        >
+                            <path
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
+                            />
+                        </svg>
+                        <span>AI commit message automated suggestions</span>
+                    </li>
+                </ul>
+                <div class="mt-8">
+                    <Login {user} {api} />
+                </div>
+            </div>
+        {/if}
+    </div>
 </div>