feat: Redesign direct auth redirect screen (#3639)

Redesign direct auth redirect screen.

# Changes

- Replaced Caffeine light and dark logos with yellow bg logo.
- Implement progress ring around logo.
- Update auth redirect screen to match new design.

Author: sea-snake

src/frontend/src/lib/components/ui/AuthorizeHeader.svelte

@@ -34,21 +34,10 @@
       <img
         src={dapp.logoSrc}
         alt={`${dapp.name} logo`}
-        class={[
-          "h-16 max-w-50 object-contain",
-          dapp.logoDarkSrc !== undefined && "dark:hidden",
-        ]}
+        class={["h-20 max-w-50 object-contain"]}
       />
-      {#if dapp.logoDarkSrc !== undefined}
-        <img
-          src={dapp.logoDarkSrc}
-          alt={`${dapp.name} logo`}
-          class="hidden h-16 max-w-50 object-contain dark:block"
-          aria-hidden="true"
-        />
-      {/if}
     {:else}
-      <div class="flex size-16 items-center justify-center" aria-hidden="true">
+      <div class="flex size-20 items-center justify-center" aria-hidden="true">
         <GlobeIcon class="size-6" />
       </div>
     {/if}

src/frontend/src/lib/icons/caffeine_logo.svg

@@ -649,7 +649,6 @@
       "https://dev.caffeine.ai"
     ],
     "logo": "caffeine_logo.svg",
-    "logoDark": "caffeine_logo_dark.svg",
     "certified_attributes": true
   }
 ]

src/frontend/src/lib/icons/caffeine_logo_dark.svg

@@ -49,15 +49,6 @@ export class KnownDapp {
     ] as string;
   }
 
-  public get logoDarkSrc(): string | undefined {
-    if (this.descr.logoDark === undefined) {
-      return;
-    }
-    return iconFiles[
-      `/src/frontend/src/lib/icons/${this.descr.logoDark}`
-    ] as string;
-  }
-
   public get name(): string {
     return this.descr.name;
   }

src/frontend/src/lib/legacy/flows/dappsExplorer/dapps.json

@@ -4,8 +4,6 @@
     authorizationContextStore,
     authorizationStore,
   } from "$lib/stores/authorization.store";
-  import Button from "$lib/components/ui/Button.svelte";
-  import { ArrowRightIcon } from "@lucide/svelte";
   import { getDapps } from "$lib/legacy/flows/dappsExplorer/dapps";
   import { decodeJWT, findConfig } from "$lib/utils/openID";
   import { AuthFlow } from "$lib/flows/authFlow.svelte";
@@ -25,6 +23,10 @@
     DirectOpenIdEvents,
     directOpenIdFunnel,
   } from "$lib/utils/analytics/DirectOpenIdFunnel";
+  import { draw, fade, scale } from "svelte/transition";
+  import { cubicOut } from "svelte/easing";
+  import { triggerDropWaveAnimation } from "$lib/utils/animation-dispatcher";
+  import Logo from "$lib/components/ui/Logo.svelte";
 
   const dapps = getDapps();
   const dapp = $derived(
@@ -33,6 +35,8 @@
     ),
   );
 
+  let animateTransitions = $state(false);
+
   const createAttributesListener =
     (issuer: string) => async (request: JsonRequest) => {
       if (request.id === undefined || request.method !== "ii_attributes") {
@@ -139,6 +143,11 @@
       if (config === undefined) {
         return;
       }
+      // Animate transitions and background
+      animateTransitions = true;
+      triggerDropWaveAnimation();
+
+      // Authenticate and respond to requests
       directOpenIdFunnel.addProperties({
         openid_issuer: config.issuer,
       });
@@ -170,57 +179,86 @@
 </script>
 
 <div class="flex min-h-[100dvh] flex-col items-center justify-center px-8">
-  {#if dapp?.logoSrc !== undefined}
-    <img
-      src={dapp.logoSrc}
-      alt={$t`${dapp.name} logo`}
-      class={[
-        "mb-10 h-16 max-w-50 object-contain",
-        dapp.logoDarkSrc !== undefined && "dark:hidden",
-      ]}
-    />
-    {#if dapp.logoDarkSrc !== undefined}
-      <img
-        src={dapp.logoDarkSrc}
-        alt={$t`${dapp.name} logo`}
-        class="mb-10 hidden h-16 max-w-50 object-contain dark:block"
-        aria-hidden="true"
-      />
-    {/if}
+  {#if animateTransitions}
+    <div
+      transition:scale={{ duration: 500, easing: cubicOut, start: 0.9 }}
+      class="flex flex-col items-center justify-center"
+    >
+      {#if dapp?.logoSrc !== undefined}
+        <div class="relative">
+          <svg viewBox="0 0 92 92" width="92" height="92" class="mb-4">
+            <path
+              d="M 46 1 H 71 A 20 20 0 0 1 91 21 V 71 A 20 20 0 0 1 71 91 H 21 A 20 20 0 0 1 1 71 V 21 A 20 20 0 0 1 21 1 H 46"
+              class="stroke-fg-primary/10 fill-none stroke-2"
+            />
+            <g
+              transition:fade|global={{
+                duration: 500,
+                easing: cubicOut,
+                delay: 500,
+              }}
+            >
+              <path
+                transition:draw|global={{
+                  duration: 6000,
+                  easing: cubicOut,
+                  delay: 500,
+                }}
+                d="M 46 1 H 71 A 20 20 0 0 1 91 21 V 71 A 20 20 0 0 1 71 91 H 21 A 20 20 0 0 1 1 71 V 21 A 20 20 0 0 1 21 1 H 46"
+                stroke-linecap="round"
+                class="stroke-fg-primary fill-none stroke-2"
+              />
+            </g>
+          </svg>
+          <img
+            src={dapp.logoSrc}
+            alt={$t`${dapp.name} logo`}
+            class="absolute inset-1 size-[84px] rounded-[18px] object-cover"
+          />
+        </div>
+      {:else}
+        <svg viewBox="0 0 92 92" width="92" height="92" class="mb-4">
+          <circle
+            cx="46"
+            cy="46"
+            r="45"
+            stroke-width="2"
+            class="stroke-fg-primary/10 fill-none stroke-2"
+          />
+          <g
+            transition:fade|global={{
+              duration: 500,
+              easing: cubicOut,
+              delay: 500,
+            }}
+          >
+            <circle
+              transition:draw|global={{
+                duration: 6000,
+                easing: cubicOut,
+                delay: 500,
+              }}
+              cx="46"
+              cy="46"
+              r="45"
+              stroke-linecap="round"
+              class="stroke-fg-primary origin-center -rotate-90 fill-none stroke-2"
+            />
+          </g>
+        </svg>
+      {/if}
+      <p class="text-text-primary mb-2 text-2xl font-medium">
+        {$t`Signing in securely`}
+      </p>
+      <a
+        href={window.location.origin}
+        target="_blank"
+        class="text-text-secondary flex flex-row items-center gap-2 text-base"
+      >
+        <span>{$t`Powered by`}</span>
+        <Logo class="text-text-secondary h-2" />
+        <span>{window.location.hostname}</span>
+      </a>
+    </div>
   {/if}
-  <p class="text-text-secondary mb-1 text-xl font-semibold">
-    {$t`Signing in securely`}
-  </p>
-  <p class="text-text-tertiary text-sm">{$t`This takes a few seconds.`}</p>
-  <div class="bg-bg-quaternary my-6 h-0.5 w-full max-w-74 rounded-full">
-    <div class="bg-fg-brand-primary animate-grow h-full rounded-full"></div>
-  </div>
-  <p class="text-text-secondary text-base">
-    {$t`Powered by Internet Identity`}
-  </p>
-  <Button
-    href={window.location.origin}
-    target="_blank"
-    variant="tertiary"
-    class="mt-10"
-    size="sm"
-  >
-    <span>{$t`How it works`}</span>
-    <ArrowRightIcon class="size-4" />
-  </Button>
 </div>
-
-<style>
-  @keyframes grow {
-    from {
-      width: 0;
-    }
-    to {
-      width: 100%;
-    }
-  }
-
-  .animate-grow {
-    animation: grow 6s ease-out forwards;
-  }
-</style>