Styling improvements (#3442)

Styling improvements.

Author: sea-snake

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

@@ -14,7 +14,7 @@
   <div class="flex h-16 flex-1 items-center gap-4">
     <a href="/" class="flex items-center gap-4">
       <Logo class="text-fg-primary h-5.5" />
-      <h1 class="text-md text-text-primary hidden font-semibold sm:block">
+      <h1 class="text-text-primary hidden text-base font-semibold sm:block">
         Internet Identity
       </h1>
     </a>

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

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { HTMLAttributes } from "svelte/elements";
   import Logo from "$lib/components/ui/Logo.svelte";
+
   type Props = HTMLAttributes<HTMLElement>;
   const { children, class: className, ...props }: Props = $props();
 </script>
@@ -11,7 +12,7 @@
 >
   <div class="flex min-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 sm:block">
+    <h1 class="text-text-primary hidden text-base font-semibold sm:block">
       Internet Identity
     </h1>
   </div>

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

@@ -15,8 +15,8 @@
     {
       sm: "size-8 text-sm",
       md: "size-10 text-sm",
-      lg: "text-md size-12",
-      xl: "text-md size-14",
+      lg: "size-12 text-base",
+      xl: "size-14 text-base",
     }[size],
     className,
   ]}

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

@@ -69,8 +69,8 @@
     {
       sm: iconOnly ? "size-9" : "h-9 gap-1.5 px-3 text-sm",
       md: iconOnly ? "size-10" : "h-10 gap-1.5 px-3.5 text-sm",
-      lg: iconOnly ? "size-11" : "text-md h-11 gap-2.5 px-4",
-      xl: iconOnly ? "size-12" : "text-md h-12 gap-2.5 px-4.5",
+      lg: iconOnly ? "size-11" : "h-11 gap-2.5 px-4 text-base",
+      xl: iconOnly ? "size-12" : "h-12 gap-2.5 px-4.5 text-base",
     }[size],
     className,
   ]}

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

@@ -25,7 +25,7 @@
 
 <label
   class={[
-    "flex w-max flex-row items-start",
+    "flex w-max max-w-full flex-row items-start",
     { sm: "gap-2", md: "gap-3" }[size],
     className,
   ]}
@@ -38,7 +38,7 @@
   />
   <div
     class={[
-      "relative flex items-center justify-center rounded-sm border",
+      "relative flex shrink-0 items-center justify-center rounded-sm border",
       "border-border-primary text-fg-primary-inversed bg-bg-primary",
       "hover:bg-bg-primary_hover",
       "peer-checked:bg-bg-brand-solid peer-checked:hover:bg-bg-brand-solid_hover peer-checked:border-none",
@@ -48,6 +48,7 @@
         sm: "size-4",
         md: "size-5",
       }[size],
+      (nonNullish(label) || nonNullish(hint)) && "mt-0.5",
       className,
     ]}
   >
@@ -73,7 +74,7 @@
         <p
           class={[
             "text-text-secondary font-medium select-none",
-            { sm: "text-sm", md: "text-md" }[size],
+            { sm: "text-sm", md: "text-base" }[size],
           ]}
         >
           {label}
@@ -83,7 +84,7 @@
         <p
           class={[
             "text-text-tertiary select-none",
-            { sm: "text-sm", md: "text-md" }[size],
+            { sm: "text-sm", md: "text-base" }[size],
           ]}
         >
           {hint}

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

@@ -41,7 +41,7 @@
 </script>
 
 <div class="mb-4 flex items-center">
-  <h2 class="text-text-primary text-md font-medium">{$t`Switch identity`}</h2>
+  <h2 class="text-text-primary text-base font-medium">{$t`Switch identity`}</h2>
   {#if nonNullish(onClose)}
     <Button
       onclick={onClose}

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

@@ -43,7 +43,7 @@
       bind:value
       {...restProps}
       class={[
-        "text-md bg-bg-primary text-text-primary placeholder:text-text-placeholder flex-1 rounded-lg border border-none p-0 opacity-100 ring outline-none ring-inset not-dark:shadow-xs",
+        "bg-bg-primary text-text-primary placeholder:text-text-placeholder flex-1 rounded-lg border border-none p-0 text-base opacity-100 ring outline-none ring-inset not-dark:shadow-xs",
         errorBorder ? "ring-border-error_subtle" : "ring-border-secondary",
         "focus:ring-2",
         errorBorder ? "focus:ring-border-error" : "focus:ring-border-brand",

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

@@ -11,7 +11,7 @@
 >
   <div class="mb-6 flex flex-1 items-center gap-4 px-3">
     <Logo class="text-fg-primary h-5.5" />
-    <h1 class="text-md text-text-primary font-semibold sm:block">
+    <h1 class="text-text-primary text-base font-semibold sm:block">
       Internet Identity <span class="font-medium">Hub</span>
     </h1>
   </div>

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

@@ -22,7 +22,7 @@
 
 <label
   class={[
-    "flex w-max flex-row items-start",
+    "flex w-max max-w-full flex-row items-start",
     { sm: "gap-2", md: "gap-3" }[size],
     className,
   ]}
@@ -36,11 +36,10 @@
   />
   <div
     class={[
-      "cursor-pointer rounded-full p-0.5 transition-colors duration-200",
-      "bg-bg-tertiary",
-      "peer-checked:bg-bg-brand-solid dark:peer-checked:bg-bg-quaternary",
-      "peer-checked:hover:bg-bg-brand-solid_hover dark:peer-checked:hover:bg-bg-quaternary_hover",
-      "after:block after:rounded-full after:bg-white after:shadow-sm after:transition-transform after:duration-200",
+      "shrink-0 cursor-pointer rounded-full p-0.5 transition-colors duration-200",
+      "bg-bg-tertiary dark:bg-bg-quaternary/60",
+      "peer-checked:bg-bg-brand-solid dark:peer-checked:bg-fg-tertiary",
+      "after:block after:rounded-full after:bg-white after:shadow-xs after:transition-transform after:duration-200",
       "peer-checked:after:translate-x-[100%]",
       "peer-disabled:bg-bg-disabled peer-disabled:after:bg-surface-light-50  dark:peer-disabled:after:bg-surface-dark-400",
       "peer-focus-visible:ring-focus-ring peer-focus-visible:ring-offset-bg-primary outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2",
@@ -56,7 +55,7 @@
         <p
           class={[
             "text-text-secondary font-medium select-none",
-            { sm: "text-sm", md: "text-md" }[size],
+            { sm: "text-sm", md: "text-base" }[size],
           ]}
         >
           {label}
@@ -66,7 +65,7 @@
         <p
           class={[
             "text-text-tertiary select-none",
-            { sm: "text-sm", md: "text-md" }[size],
+            { sm: "text-sm", md: "text-base" }[size],
           ]}
         >
           {hint}

src/frontend/src/lib/components/views/AuthorizeError.svelte

@@ -33,7 +33,7 @@
       <CircleAlertIcon class="size-6" />
     </FeaturedIcon>
     <h1 class="text-text-primary mb-3 text-2xl font-medium">{title}</h1>
-    <p class="text-md text-text-tertiary mb-6 font-medium">{description}</p>
+    <p class="text-text-tertiary mb-6 text-base font-medium">{description}</p>
     <Button onclick={() => window.close()} variant="secondary">
       <RotateCcwIcon class="size-4" />
       <span>{$t`Return to app`}</span>
@@ -47,7 +47,7 @@
     <h1 class="text-text-primary mb-3 text-2xl font-medium">
       {$t`Authentication successful`}
     </h1>
-    <p class="text-md text-text-tertiary mb-6 font-medium">
+    <p class="text-text-tertiary mb-6 text-base font-medium">
       {$t`You may close this page.`}
     </p>
     <Button onclick={() => window.close()} variant="secondary">