From 5e0f5f19f0ff545b91d49a30634e54034f2ee9c3 Mon Sep 17 00:00:00 2001
From: Wind-Explorer <windexplorer@outlook.com>
Date: Wed, 18 Mar 2026 01:25:32 +0800
Subject: [PATCH] welcome screen refinements

---
 src/assets/icons/trademarks/discord.svelte |  10 ++
 src/assets/icons/trademarks/google.svelte  |  10 ++
 src/routes/welcome/+page.svelte            | 103 ++++++++++++++-------
 3 files changed, 87 insertions(+), 36 deletions(-)
 create mode 100644 src/assets/icons/trademarks/discord.svelte
 create mode 100644 src/assets/icons/trademarks/google.svelte

diff --git a/src/assets/icons/trademarks/discord.svelte b/src/assets/icons/trademarks/discord.svelte
new file mode 100644
index 0000000..53a9bc4
--- /dev/null
+++ b/src/assets/icons/trademarks/discord.svelte
@@ -0,0 +1,10 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="32"
+  height="32"
+  viewBox="0 0 640 640"
+  ><path
+    fill="currentColor"
+    d="M524.5 133.8c-.2-.3-.4-.6-.8-.7c-38.1-17.5-78.4-30-119.7-37.1c-.4-.1-.8 0-1.1.1s-.6.4-.8.8c-5.5 9.9-10.5 20.2-14.9 30.6c-44.6-6.8-89.9-6.8-134.4 0c-4.5-10.5-9.5-20.7-15.1-30.6c-.2-.3-.5-.6-.8-.8s-.7-.2-1.1-.2c-41.3 7.1-81.6 19.6-119.7 37.1c-.3.1-.6.4-.8.7c-76.2 113.8-97.1 224.9-86.9 334.5c0 .3.1.5.2.8s.3.4.5.6c44.4 32.9 94 58 146.8 74.2c.4.1.8.1 1.1 0s.7-.4.9-.7c11.3-15.4 21.4-31.8 30-48.8c.1-.2.2-.5.2-.8s0-.5-.1-.8s-.2-.5-.4-.6s-.4-.3-.7-.4c-15.8-6.1-31.2-13.4-45.9-21.9c-.3-.2-.5-.4-.7-.6s-.3-.6-.3-.9s0-.6.2-.9s.3-.5.6-.7c3.1-2.3 6.2-4.7 9.1-7.1c.3-.2.6-.4.9-.4s.7 0 1 .1c96.2 43.9 200.4 43.9 295.5 0c.3-.1.7-.2 1-.2s.7.2.9.4c2.9 2.4 6 4.9 9.1 7.2c.2.2.4.4.6.7s.2.6.2.9q0 .45-.3.9t-.6.6c-14.7 8.6-30 15.9-45.9 21.8c-.2.1-.5.2-.7.4s-.3.4-.4.7s-.1.5-.1.8s.1.5.2.8c8.8 17 18.8 33.3 30 48.8c.2.3.6.6.9.7s.8.1 1.1 0c52.9-16.2 102.6-41.3 147.1-74.2c.2-.2.4-.4.5-.6s.2-.5.2-.8c12.3-126.8-20.5-236.9-86.9-334.5zm-302 267.7c-29 0-52.8-26.6-52.8-59.2s23.4-59.2 52.8-59.2c29.7 0 53.3 26.8 52.8 59.2c0 32.7-23.4 59.2-52.8 59.2m195.4 0c-29 0-52.8-26.6-52.8-59.2s23.4-59.2 52.8-59.2c29.7 0 53.3 26.8 52.8 59.2c0 32.7-23.2 59.2-52.8 59.2"
+  /></svg
+>
diff --git a/src/assets/icons/trademarks/google.svelte b/src/assets/icons/trademarks/google.svelte
new file mode 100644
index 0000000..fb76d38
--- /dev/null
+++ b/src/assets/icons/trademarks/google.svelte
@@ -0,0 +1,10 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="32"
+  height="32"
+  viewBox="0 0 640 640"
+  ><path
+    fill="currentColor"
+    d="M564 325.8C564 467.3 467.1 568 324 568C186.8 568 76 457.2 76 320S186.8 72 324 72c66.8 0 123 24.5 166.3 64.9l-67.5 64.9c-88.3-85.2-252.5-21.2-252.5 118.2c0 86.5 69.1 156.6 153.7 156.6c98.2 0 135-70.4 140.8-106.9H324v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4"
+  /></svg
+>
diff --git a/src/routes/welcome/+page.svelte b/src/routes/welcome/+page.svelte
index dda2b9b..a4d676e 100644
--- a/src/routes/welcome/+page.svelte
+++ b/src/routes/welcome/+page.svelte
@@ -4,6 +4,8 @@
   import DollPreview from "../app-menu/components/doll-preview.svelte";
   import ExternalLink from "../../assets/icons/external-link.svelte";
   import type { UnlistenFn } from "@tauri-apps/api/event";
+  import Google from "../../assets/icons/trademarks/google.svelte";
+  import Discord from "../../assets/icons/trademarks/discord.svelte";
 
   let activeProvider: "google" | "discord" | null = null;
   let errorMessage = "";
@@ -45,7 +47,11 @@
   const providerLabel = (provider: "google" | "discord") =>
     provider === "google" ? "Google" : "Discord";
 
-  const handleAuthFlowUpdated = ({ payload }: { payload: AuthFlowUpdatedPayload }) => {
+  const handleAuthFlowUpdated = ({
+    payload,
+  }: {
+    payload: AuthFlowUpdatedPayload;
+  }) => {
     const provider = payload.provider as "google" | "discord";
     if (activeProvider !== provider) {
       return;
@@ -62,11 +68,14 @@
       return;
     }
 
-    errorMessage = payload.message ?? `Unable to sign in with ${providerLabel(provider)}.`;
+    errorMessage =
+      payload.message ?? `Unable to sign in with ${providerLabel(provider)}.`;
   };
 
   onMount(async () => {
-    unlistenAuthFlow = await events.authFlowUpdated.listen(handleAuthFlowUpdated);
+    unlistenAuthFlow = await events.authFlowUpdated.listen(
+      handleAuthFlowUpdated,
+    );
   });
 
   onDestroy(() => {
@@ -97,44 +106,66 @@
               a cute passive socialization layer!
             </p>
           </div>
-          <div class="flex flex-col gap-3 max-w-80">
-            <button
-              class="btn btn-primary btn-xl justify-between"
-              onclick={() => startAuth("google")}
-            >
-              <span>{activeProvider === "google" ? "Restart Google sign-in" : "Continue with Google"}</span>
-              <div class="scale-70">
-                <ExternalLink />
-              </div>
-            </button>
-            <button
-              class="btn btn-outline btn-xl justify-between"
-              onclick={() => startAuth("discord")}
-            >
-              <span>{activeProvider === "discord" ? "Restart Discord sign-in" : "Continue with Discord"}</span>
-              <div class="scale-70">
-                <ExternalLink />
-              </div>
-            </button>
-            <button
-              class="btn btn-link p-0 btn-sm text-base-content w-max"
-              onclick={openClientConfig}
-            >
-              Advanced options
-            </button>
+          <div class="flex flex-col gap-3">
+            <span>Sign in with</span>
+            <div class="w-full flex flex-row gap-3">
+              <button
+                class="card relative hover:cursor-pointer items-center"
+                onclick={() => startAuth("google")}
+              >
+                <div class="size-full btn btn-primary absolute z-0"></div>
+                <div
+                  class="flex flex-row justify-start items-center z-1 h-full p-1 pr-0"
+                >
+                  <div
+                    class="bg-linear-to-t from-base-100/50 to-base-100 rounded-sm"
+                  >
+                    <div class="scale-70">
+                      <Google />
+                    </div>
+                  </div>
+                  <span class="text-xl font-semibold px-3 text-primary-content"
+                    >Google</span
+                  >
+                </div>
+              </button>
+              <button
+                class="card relative hover:cursor-pointer items-center"
+                onclick={() => startAuth("discord")}
+              >
+                <div class="size-full btn btn-primary absolute z-0"></div>
+                <div
+                  class="flex flex-row justify-start items-center z-1 h-full p-1 pr-0"
+                >
+                  <div
+                    class="bg-linear-to-t from-base-100/50 to-base-100 rounded-sm"
+                  >
+                    <div class="scale-70">
+                      <Discord />
+                    </div>
+                  </div>
+                  <span class="text-xl font-semibold px-3 text-primary-content"
+                    >Discord</span
+                  >
+                </div>
+              </button>
+            </div>
           </div>
 
           {#if errorMessage}
-            <p class="text-xs text-error max-w-72">{errorMessage}</p>
+            <p class="text-xs text-error max-w-48">{errorMessage}</p>
           {:else}
-            <p class="text-xs opacity-50 max-w-72">
-              {#if activeProvider}
-                Friendolls is waiting for the browser callback. Click either button again to restart sign-in at any time.
-              {:else}
-                Sign in through your browser, then return here once Friendolls finishes the handshake.
-              {/if}
+            <p class="text-xs opacity-70 max-w-48">
+              An account is needed to connect you with friends.
             </p>
           {/if}
+
+          <button
+            class="btn btn-link p-0 btn-sm btn-primary w-max opacity-0 hover:opacity-100 transition-opacity"
+            onclick={openClientConfig}
+          >
+            Client Configuration (Advanced)
+          </button>
         </div>
       </div>
       <div>
@@ -146,7 +177,7 @@
     class="absolute pointer-events-none bottom-6 right-6 flex flex-col gap-1 justify-between"
   >
     <div></div>
-    <div class="flex flex-col scale-200 origin-bottom-right">
+    <div class="flex flex-col scale-150 origin-bottom-right">
       <DollPreview dollColorScheme={{ body: "b7f2ff", outline: "496065" }} />
     </div>
   </div>