Update design based on feedback. (#3123)

* Update design based on feedback.

* Undo irrelevant changes

* Debug build hash

* Use style tag instead

* Updated based on PR feedback

* Updated based on PR feedback

* Updated based on PR feedback

Author: sea-snake

package-lock.json

@@ -1,5 +1,7 @@
 <script lang="ts">
   import type { HTMLAttributes } from "svelte/elements";
+  import { fly } from "svelte/transition";
+  import { page, navigating } from "$app/state";
 
   type Props = HTMLAttributes<HTMLDivElement>;
 
@@ -9,11 +11,23 @@
 <div
   {...props}
   class={[
-    "flex w-full flex-col rounded-xl px-4 pt-5 pb-6",
+    "grid w-full flex-col overflow-hidden rounded-xl px-4 pt-5 pb-8",
     "max-sm:flex-1",
-    "sm:bg-bg-secondary sm:border-border-secondary sm:max-w-100 sm:border sm:px-6",
+    "sm:bg-bg-secondary sm:border-border-secondary sm:border sm:px-6",
     className,
   ]}
 >
-  {@render children?.()}
+  {#if !("disableNavigationAnimation" in page.state)}
+    {#key page.route.id}
+      <div
+        class="col-start-1 row-start-1 flex flex-col max-sm:flex-1"
+        in:fly={{ x: 200 * (navigating.delta ?? 1), duration: 200, delay: 80 }}
+        out:fly={{ x: -160 * (navigating.delta ?? 1), duration: 160 }}
+      >
+        {@render children?.()}
+      </div>
+    {/key}
+  {:else}
+    {@render children?.()}
+  {/if}
 </div>

src/frontend/src/lib/components/layout/AuthPanel.svelte

@@ -14,9 +14,23 @@
     className,
   ]}
 >
-  <div class="text-text-tertiary text-sm font-medium">© Internet Identity</div>
-  <nav class="text-text-primary flex gap-4 text-sm font-semibold">
-    <a href={SUPPORT_URL} target="_blank" rel="noopener">Support</a>
-    <a href={SOURCE_CODE_URL} target="_blank" rel="noopener">Source code</a>
+  <div class="text-text-tertiary text-xs font-medium">© Internet Identity</div>
+  <nav class="text-text-primary flex gap-4 text-xs font-semibold">
+    <a
+      href={SUPPORT_URL}
+      target="_blank"
+      rel="noopener"
+      class="outline-0 focus-visible:underline"
+    >
+      Support
+    </a>
+    <a
+      href={SOURCE_CODE_URL}
+      target="_blank"
+      rel="noopener"
+      class="outline-0 focus-visible:underline"
+    >
+      Source code
+    </a>
   </nav>
 </footer>

src/frontend/src/lib/components/layout/Footer.svelte

@@ -1,21 +1,92 @@
 <script lang="ts">
   import type { HTMLAttributes } from "svelte/elements";
   import Logo from "$lib/components/ui/Logo.svelte";
+  import { lastUsedIdentitiesStore } from "$lib/stores/last-used-identities.store";
+  import { nonNullish } from "@dfinity/utils";
+  import { ChevronDownIcon } from "@lucide/svelte";
+  import Button from "$lib/components/ui/Button.svelte";
+  import Popover from "$lib/components/ui/Popover.svelte";
+  import { goto } from "$app/navigation";
+  import Dialog from "$lib/components/ui/Dialog.svelte";
+  import UseAnotherIdentity from "$lib/components/views/UseAnotherIdentity.svelte";
+  import IdentitySwitcher from "$lib/components/ui/IdentitySwitcher.svelte";
+  import { authenticationStore } from "$lib/stores/authentication.store";
 
   type Props = HTMLAttributes<HTMLHeadElement>;
 
   const { children, class: className, ...props }: Props = $props();
+
+  const lastUsedIdentities = $derived(
+    Object.values($lastUsedIdentitiesStore.identities)
+      .sort((a, b) => b.lastUsedTimestampMillis - a.lastUsedTimestampMillis)
+      .slice(0, 5),
+  );
+  const selectedIdentity = $derived($lastUsedIdentitiesStore.selected);
+
+  let identityButtonRef = $state<HTMLElement>();
+  let isIdentityPopoverOpen = $state(false);
+  let isSignInDialogOpen = $state(false);
 </script>
 
 <header
   {...props}
-  class={["flex h-14 items-center px-4 py-3 md:px-6 lg:px-8", className]}
+  class={["flex items-center px-3 md:px-6 lg:px-8", className]}
 >
   <!-- TODO: Revert to anchor tag when we create the landing page -->
-  <div class="flex h-14 items-center gap-4">
+  <div class="flex h-16 flex-1 items-center gap-4">
     <Logo class="text-fg-primary h-5.5" />
-    <h1 class="text-md text-text-primary hidden font-semibold md:block">
+    <h1 class="text-md text-text-primary hidden font-semibold sm:block">
       Internet Identity
     </h1>
+    {#if nonNullish(selectedIdentity)}
+      <Button
+        bind:element={identityButtonRef}
+        onclick={() => (isIdentityPopoverOpen = true)}
+        variant="tertiary"
+        class="ml-auto gap-2.5 pr-3 md:-mr-3"
+      >
+        <span>{selectedIdentity.name ?? selectedIdentity.identityNumber}</span>
+        <ChevronDownIcon size="1rem" />
+      </Button>
+
+      {#if isIdentityPopoverOpen}
+        <Popover
+          anchor={identityButtonRef}
+          onClose={() => (isIdentityPopoverOpen = false)}
+          direction="down"
+          align="end"
+          distance="0.75rem"
+        >
+          <IdentitySwitcher
+            selected={selectedIdentity.identityNumber}
+            identities={lastUsedIdentities}
+            switchIdentity={(identityNumber) => {
+              authenticationStore.reset();
+              lastUsedIdentitiesStore.selectIdentity(identityNumber);
+              isIdentityPopoverOpen = false;
+            }}
+            useAnotherIdentity={() => (isSignInDialogOpen = true)}
+            onClose={() => (isIdentityPopoverOpen = false)}
+          />
+        </Popover>
+      {/if}
+
+      {#if isSignInDialogOpen}
+        <Dialog onClose={() => (isSignInDialogOpen = false)}>
+          <UseAnotherIdentity
+            onCancel={() => (isSignInDialogOpen = false)}
+            onSuccess={(identityNumber) => {
+              isSignInDialogOpen = false;
+              lastUsedIdentitiesStore.selectIdentity(identityNumber);
+              goto("/authorize/account", {
+                replaceState: true,
+                invalidateAll: true,
+                state: { disableNavigationAnimation: true },
+              });
+            }}
+          />
+        </Dialog>
+      {/if}
+    {/if}
   </div>
 </header>

src/frontend/src/lib/components/layout/Header.svelte

@@ -18,13 +18,11 @@
 </script>
 
 <div {...props} class={["flex flex-1 flex-col", className]}>
-  <div
-    class="flex flex-1 flex-col items-center justify-center pb-3 [@media(min-height:648px)]:py-8"
-  >
+  <div class="flex flex-1 flex-col items-center justify-center pt-5 pb-6">
     <div
       aria-hidden="true"
       class={[
-        "mb-4 flex shrink-0 items-center justify-center overflow-hidden rounded-2xl",
+        "mb-6 flex shrink-0 items-center justify-center overflow-hidden rounded-2xl",
         isNullish(dapp?.logoSrc) &&
           "border-border-tertiary text-fg-primary bg-bg-primary border",
       ]}
@@ -41,13 +39,4 @@
       <Ellipsis text={hostname} position="middle" />
     </Badge>
   </div>
-  <h1 class="text-text-primary mb-2 self-start text-2xl font-medium">
-    Sign in
-  </h1>
-  <p class="text-text-secondary self-start text-sm">
-    {#if nonNullish(dapp?.name)}
-      <span>to <b>{dapp.name}</b></span>
-    {/if}
-    <span>with Internet Identity</span>
-  </p>
 </div>

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

@@ -11,13 +11,14 @@
 <div
   {...props}
   class={[
-    "bg-bg-tertiary border-border-secondary text-fg-disabled flex shrink-0 items-center justify-center rounded-full border font-semibold",
+    "bg-bg-secondary border-border-secondary text-fg-disabled flex shrink-0 items-center justify-center rounded-full border font-semibold",
     {
       sm: "size-8 text-sm",
       md: "size-10 text-sm",
       lg: "text-md size-12",
       xl: "text-md size-14",
     }[size],
+    className,
   ]}
 >
   {@render children?.()}

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

@@ -31,7 +31,7 @@
   bind:element
   {...props}
   class={[
-    "box-border flex items-center justify-center justify-self-start rounded-md font-semibold whitespace-nowrap opacity-100",
+    "box-border flex cursor-pointer items-center justify-center justify-self-start rounded-md font-semibold whitespace-nowrap opacity-100",
     {
       primary: [
         "bg-bg-brand-solid text-text-primary-inversed",

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

@@ -3,34 +3,26 @@
     HTMLAnchorAttributes,
     HTMLButtonAttributes,
   } from "svelte/elements";
-  import Checkbox from "$lib/components/ui/Checkbox.svelte";
   import ButtonOrAnchor from "$lib/components/utils/ButtonOrAnchor.svelte";
 
   type Props = HTMLButtonAttributes &
     HTMLAnchorAttributes & {
       element?: HTMLElement;
-      checked?: boolean;
-      checkIcon?: boolean;
     };
 
   let {
     children,
     element = $bindable(),
     class: className,
-    checked,
-    checkIcon,
     ...props
   }: Props = $props();
 </script>
 
 <ButtonOrAnchor
   bind:element
-  role="radio"
-  aria-checked={checked}
   {...props}
   class={[
     "bg-bg-primary ring-border-secondary text-text-primary not-disabled:hover:bg-bg-primary_hover relative flex items-center justify-start gap-3 rounded-md p-3 text-sm font-semibold ring-1 outline-none ring-inset not-dark:shadow-xs",
-    checked && "!ring-border-brand ring-2",
     "disabled:ring-border-disabled disabled:text-text-disabled",
     className,
   ]}
@@ -39,13 +31,4 @@
     class="in-focus-visible:ring-focus-ring in-focus-visible:ring-offset-bg-primary pointer-events-none absolute inset-0 rounded-md in-focus-visible:ring-2 in-focus-visible:ring-offset-2"
   ></div>
   {@render children?.()}
-  {#if checked && checkIcon}
-    <Checkbox
-      checked
-      size="md"
-      class="pointer-events-none mr-1 !rounded-full"
-      tabindex={-1}
-      aria-hidden="true"
-    />
-  {/if}
 </ButtonOrAnchor>

src/frontend/src/lib/components/ui/RadioCard.svelte renamed to src/frontend/src/lib/components/ui/ButtonCard.svelte

@@ -8,7 +8,6 @@
 
   type Props = HTMLAttributes<HTMLDialogElement> & {
     onClose?: () => void;
-    title?: string;
     closeOnOutsideClick?: boolean;
     showCloseButton?: boolean;
     backdrop?: boolean;
@@ -17,7 +16,6 @@
   const {
     children,
     onClose,
-    title,
     class: className,
     closeOnOutsideClick = true,
     showCloseButton = true,
@@ -100,7 +98,7 @@
     backdrop && "[&[data-visible]]:backdrop:opacity-80",
   ]}
   style="--keyboard-inset-height: env(keyboard-inset-height);"
-  transition:transitionFn
+  transition:transitionFn|global
   onoutrostart={fadeOutBackDrop}
   {...props}
 >