XS⚠️ ◾ UI - Sizing Changes req by Adam (#839)

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: joshbermanssw

src/ui/src/components/auth/IdentityServerAuthManager.tsx

@@ -71,7 +71,9 @@ export function IdentityServerAuthManager() {
   if (!status?.isAuthenticated) {
     return (
       <div className="flex items-center">
-        <Button onClick={login}>Sign In</Button>
+        <Button className="w-full" onClick={login}>
+          Sign In
+        </Button>
         {error && <span className="text-ssw-red text-xs ml-2">{error}</span>}
       </div>
     );

src/ui/src/components/layout/sidebar.tsx

@@ -31,7 +31,7 @@ export default function Sidebar() {
       <ScreenRecorder showButtonOnly={true} className="w-full justify-start" />
       <nav className="flex flex-col gap-6">
         <SidebarLink to="/">
-          <img src={YakOutline} alt="YakShaver" className="h-4 w-4" />
+          <img src={YakOutline} alt="YakShaver" className="h-5 w-5" />
           Shaves
         </SidebarLink>
         {/* TODO: Add in for https://github.com/SSWConsulting/SSW.YakShaver.Desktop/issues/816  */}

src/ui/src/components/recording/ScreenRecorder.tsx

@@ -65,14 +65,14 @@ function RecordButton({
     return (
       <Button
         className={cn(
-          "bg-ssw-red text-ssw-red-foreground hover:bg-ssw-red/90 items-center",
+          "bg-ssw-red text-xl text-ssw-red-foreground hover:bg-ssw-red/90 items-center",
           className,
         )}
         onClick={onToggleRecording}
         size="chunky"
         disabled={isDisabled}
       >
-        <CircleStopIcon />
+        <CircleStopIcon className="w-5 h-5" />
         {label}
       </Button>
     );

src/ui/src/components/settings/SettingsDialog.tsx

@@ -167,8 +167,8 @@ export function SettingsDialog() {
           className="flex items-center justify-start gap-2 text-white/60 bg-transparent hover:text-white hover:bg-white/10 transition-colors duration-300"
           aria-label="Open settings"
         >
-          <Settings className="h-4 w-4" />
-          <span>Settings</span>
+          <Settings className="h-5 w-5" />
+          <span className="text-xl">Settings</span>
         </Button>
       </DialogTrigger>
 

src/ui/src/components/shaves/NoShaves.tsx

@@ -9,14 +9,14 @@ const NO_SHAVES_STEPS: string[] = [
 export function NoShaves() {
   return (
     <Empty>
-      <EmptyHeader>
-        <EmptyTitle>You don't have any YakShaves yet!</EmptyTitle>
+      <EmptyHeader className="gap-6 items-start!">
+        <EmptyTitle>⛔️ - You don't have any YakShaves yet!</EmptyTitle>
         <EmptyDescription>Get started in 3 easy steps:</EmptyDescription>
       </EmptyHeader>
       <div className="flex flex-col gap-6">
         {NO_SHAVES_STEPS.map((step, index) => (
           <div key={step} className="flex items-center gap-3">
-            <span className="rounded-full border border-white/25 h-8 w-8 flex items-center justify-center text-sm font-medium">
+            <span className="rounded-full border border-white/25 h-8 w-8 flex items-center justify-center text-lg font-medium">
               {index + 1}
             </span>
             <span className="font-light text-muted-foreground">{step}</span>

src/ui/src/components/ui/button.tsx

@@ -25,7 +25,7 @@ const buttonVariants = cva(
         sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
         lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
         icon: "size-9",
-        chunky: "px-6 py-4"
+        chunky: "h-14 px-6 py-4"
       },
     },
     defaultVariants: {

src/ui/src/components/ui/empty.tsx

@@ -62,7 +62,7 @@ function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="empty-title"
-      className={cn("text-lg font-medium tracking-tight", className)}
+      className={cn("text-xl font-medium tracking-tight", className)}
       {...props}
     />
   )
@@ -73,7 +73,7 @@ function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
     <div
       data-slot="empty-description"
       className={cn(
-        "text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4",
+        "text-muted-foreground [&>a:hover]:text-primary text-lg/relaxed [&>a]:underline [&>a]:underline-offset-4",
         className
       )}
       {...props}

src/ui/src/components/ui/sidebar-link.tsx

@@ -12,7 +12,7 @@ export function SidebarLink({ to, children }: SidebarLinkProps) {
         to={to}
         end
         className={({ isActive }) =>
-          `flex items-center gap-2 px-6 py-4 rounded-md text-sm transition-colors duration-300 ${
+          `flex items-center gap-2 px-6 py-4 rounded-md text-xl transition-colors duration-300 ${
             isActive
               ? "bg-white/8 text-white hover:bg-white/15"
               : "text-white/60 bg-transparent hover:text-white hover:bg-white/10"