Sea snake/access methods redesign

src/frontend/src/lib/components/icons/GoogleIcon.svelte

@@ -1,14 +1,10 @@
 <script lang="ts">
   import type { SVGAttributes } from "svelte/elements";
 
-  type Props = SVGAttributes<SVGSVGElement> & {
-    size?: string;
-  };
-
-  const { size = "1.25rem", ...props }: Props = $props();
+  const { class: className, ...props }: SVGAttributes<SVGSVGElement> = $props();
 </script>
 
-<svg viewBox="0 0 20 20" width={size} height={size} {...props}>
+<svg viewBox="0 0 20 20" {...props} class={["size-5", className]}>
   <path
     d="M10 .83a9.15 9.15 0 0 0-8.18 13.28c1.5 3 4.6 5.06 8.18 5.06 2.47 0 4.55-.82 6.07-2.22a8.95 8.95 0 0 0 2.73-6.74c0-.65-.06-1.28-.17-1.88H10v3.55h4.93a4.23 4.23 0 0 1-1.84 2.76 5.47 5.47 0 0 1-8.22-2.9h-.01A5.5 5.5 0 0 1 10 4.48a5 5 0 0 1 3.5 1.37l2.63-2.63A8.8 8.8 0 0 0 10 .83Z"
     class="fill-current"

src/frontend/src/lib/components/icons/PasskeyIcon.svelte

@@ -1,14 +1,10 @@
 <script lang="ts">
   import type { SVGAttributes } from "svelte/elements";
 
-  type Props = SVGAttributes<SVGSVGElement> & {
-    size?: string;
-  };
-
-  const { size = "1.25rem", ...props }: Props = $props();
+  const { class: className, ...props }: SVGAttributes<SVGSVGElement> = $props();
 </script>
 
-<svg viewBox="0 0 20 20" width={size} height={size} {...props}>
+<svg viewBox="0 0 20 20" {...props} class={["size-5", className]}>
   <path
     d="M9.32 1.63c-.93 0-1.8.36-2.44 1l-.02.01-.2.22-.01.02a3.4 3.4 0 0 0-.77 2.2c0 .92.35 1.8 1 2.44h.01l.22.21.02.02c.6.5 1.38.76 2.2.76.92 0 1.8-.35 2.43-1h.02l.2-.23.01-.02c.5-.6.77-1.37.77-2.19 0-.93-.35-1.8-1-2.44V2.6l-.23-.2-.02-.01a3.4 3.4 0 0 0-2.19-.77Zm6.88 6.13a3.2 3.2 0 0 0-2.27.94v.01l-.2.2-.01.02a3.17 3.17 0 0 0-.73 2.04 3.18 3.18 0 0 0 2.3 3.07v4.27l1.37 1.38 1.84-1.84-1.38-1.37 1.38-1.38-1.15-1.15a3.3 3.3 0 0 0 1.48-1.14 3.2 3.2 0 0 0-.36-4.1v-.03l-.21-.18-.02-.02a3.17 3.17 0 0 0-2.04-.72Zm0 1.83c.28 0 .47.08.66.27l.06.07c.14.17.2.34.2.58 0 .27-.08.47-.26.65l-.07.07a.86.86 0 0 1-.59.2.84.84 0 0 1-.65-.27l-.06-.07a.86.86 0 0 1-.2-.58c0-.27.08-.47.26-.65l.08-.07c.16-.13.34-.2.57-.2Zm-6.88.76c-.95 0-1.9.11-2.83.34h-.01l-.34.1h-.01c-.83.22-1.7.54-2.6.94-.45.22-.84.54-1.12.94v.01l-.09.13v.01c-.23.38-.34.84-.34 1.34v2.16H13.9v-1.36l-.36-.25a4.34 4.34 0 0 1-1.42-1.62l-.14-.3a4.47 4.47 0 0 1-.36-1.55l-.04-.69-.68-.09-.43-.05h-.01l-.55-.05H9.9l-.59-.01z"
     class="fill-current"

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

@@ -16,9 +16,9 @@
 <ButtonOrAnchor
   {...props}
   class={[
-    "flex h-10 flex-row items-center gap-3 rounded-sm px-3 py-2 text-base font-medium",
+    "flex h-10 flex-row items-center gap-3 rounded-sm px-3 py-2 text-base font-medium outline-none",
     current
-      ? "text-text-primary bg-bg-active ring-border-primary hover:bg-bg-primary_hover ring-1 ring-inset"
+      ? "text-text-primary bg-bg-active ring-border-secondary hover:bg-bg-primary_hover ring-1 ring-inset"
       : "text-text-secondary hover:bg-bg-active",
     current
       ? "[&_svg]:text-fg-primary"

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

@@ -0,0 +1,104 @@
+<script lang="ts">
+  import { getMetadataString, openIdLogo, openIdName } from "$lib/utils/openID";
+  import { EllipsisVerticalIcon, Link2OffIcon } from "@lucide/svelte";
+  import { nonNullish } from "@dfinity/utils";
+  import { nanosToMillis } from "$lib/utils/time";
+  import Select from "$lib/components/ui/Select.svelte";
+  import Button from "$lib/components/ui/Button.svelte";
+  import Tooltip from "$lib/components/ui/Tooltip.svelte";
+  import type { OpenIdCredential } from "$lib/generated/internet_identity_types";
+  import { formatDate, formatRelative, t } from "$lib/stores/locale.store";
+
+  interface Props {
+    openid: OpenIdCredential;
+    onUnlink?: () => void;
+    inUse?: boolean;
+  }
+
+  const { openid, onUnlink, inUse }: Props = $props();
+
+  const name = $derived(openIdName(openid.iss, openid.metadata));
+  const email = $derived(getMetadataString(openid.metadata, "email"));
+  const logo = $derived(openIdLogo(openid.iss, openid.metadata));
+  const options = $derived(
+    nonNullish(onUnlink)
+      ? [
+          {
+            label: $t`Unlink`,
+            icon: Link2OffIcon,
+            onClick: onUnlink,
+          },
+        ]
+      : [],
+  );
+</script>
+
+<div class="mb-3 flex h-9 flex-row items-center">
+  {#if nonNullish(logo)}
+    <div class="text-fg-primary relative size-6">
+      {@html logo}
+      {#if inUse}
+        <div
+          class="bg-bg-success-secondary border-bg-primary absolute -top-0.25 -right-0.5 size-2.5 rounded-full border-2"
+        ></div>
+      {/if}
+    </div>
+  {/if}
+  {#if options.length > 0}
+    <Select {options} align="end">
+      <Button
+        variant="tertiary"
+        size="sm"
+        iconOnly
+        class="ml-auto"
+        aria-label={$t`More options`}
+      >
+        <EllipsisVerticalIcon class="size-5" />
+      </Button>
+    </Select>
+  {/if}
+</div>
+<div class="text-text-primary mb-1 text-base font-semibold">
+  {$t`${name} account`}
+</div>
+<div class="text-text-tertiary text-sm">
+  {email ?? $t`Hidden email`}
+</div>
+<div class="border-border-tertiary my-5 border-t"></div>
+<div class="mb-4 flex flex-row">
+  <div class="flex flex-1 flex-col gap-1">
+    <div class="text-text-primary text-xs font-semibold">
+      {$t`Last used`}
+    </div>
+    <div class="text-text-primary cursor-default text-xs">
+      {#if inUse}
+        <Tooltip
+          label={$t`Currently signed in with this account`}
+          direction="up"
+          align="start"
+        >
+          <span>{$t`Right now`}</span>
+        </Tooltip>
+      {:else if nonNullish(openid.last_usage_timestamp[0])}
+        {@const date = new Date(nanosToMillis(openid.last_usage_timestamp[0]))}
+        <Tooltip
+          label={$formatDate(date, {
+            timeStyle: "short",
+            dateStyle: "medium",
+          })}
+          direction="up"
+          align="start"
+        >
+          <span>{$formatRelative(date, { style: "long" })}</span>
+        </Tooltip>
+      {:else}
+        <Tooltip label={$t`Has not been used yet`} direction="up" align="start">
+          <span>{$t`n/a`}</span>
+        </Tooltip>
+      {/if}
+    </div>
+  </div>
+</div>
+<div class="text-text-primary text-xs">
+  {$t`Sign in with your ${name} account from any device.`}
+</div>