💄 UI Tweaks (#1673)

.windsurfrules

@@ -37,3 +37,5 @@ t("menu", { defaultValue: "Menu" });
 25. i18nKeys should describe the message in camelCase. Ex. "lastUpdated": "Last Updated"
 26. Keep i18nKeys up to 25 characters
 27. If the i18nKey is not intended to be reused, prefix it with the component name in camelCase
+28. Always use kebab-case for file names
+29. Prefer double quotes for strings over single quotes

apps/web/src/app/components/page-icons.tsx

@@ -29,10 +29,10 @@ const pageIconVariants = cva("inline-flex items-center justify-center", {
       purple: "bg-purple-500 text-white",
     },
     size: {
-      sm: "size-6 [&_svg]:size-3 rounded-md",
+      sm: "p-1 size-6 [&_svg]:size-3 rounded-md",
-      md: "size-7 [&_svg]:size-4 rounded-lg",
+      md: "p-2 size-8 [&_svg]:size-5 rounded-lg",
-      lg: "size-9 [&_svg]:size-5 rounded-xl",
+      lg: "p-3 size-9 [&_svg]:size-5 rounded-xl",
-      xl: "size-10 [&_svg]:size-5 rounded-xl",
+      xl: "p-4 size-10 [&_svg]:size-5 rounded-xl",
     },
   },
   defaultVariants: {
@@ -95,9 +95,9 @@ export function TeamsPageIcon() {
     </PageIcon>
   );
 }
-export function HomePageIcon() {
+export function HomePageIcon(props: PageIconVariantProps) {
   return (
-    <PageIcon color="darkGray" size="md">
+    <PageIcon color="darkGray" size="md" {...props}>
       <HomeIcon />
     </PageIcon>
   );
@@ -118,33 +118,33 @@ export function PollPageIcon(props: PageIconVariantProps) {
   );
 }
 
-export function EventPageIcon() {
+export function EventPageIcon(props: PageIconVariantProps) {
   return (
-    <PageIcon color="rose" size="md">
+    <PageIcon color="rose" size="md" {...props}>
       <CalendarIcon />
     </PageIcon>
   );
 }
 
-export function ProfilePageIcon() {
+export function ProfilePageIcon(props: PageIconVariantProps) {
   return (
-    <PageIcon color="gray" size="md">
+    <PageIcon color="gray" size="md" {...props}>
       <UserIcon />
     </PageIcon>
   );
 }
 
-export function PreferencesPageIcon() {
+export function PreferencesPageIcon(props: PageIconVariantProps) {
   return (
-    <PageIcon color="gray" size="md">
+    <PageIcon color="gray" size="md" {...props}>
       <Settings2Icon />
     </PageIcon>
   );
 }
 
-export function BillingPageIcon() {
+export function BillingPageIcon(props: PageIconVariantProps) {
   return (
-    <PageIcon color="gray" size="md">
+    <PageIcon color="gray" size="md" {...props}>
       <CreditCardIcon />
     </PageIcon>
   );

apps/web/src/app/components/page-layout.tsx

@@ -22,7 +22,7 @@ export function PageTitle({
   return (
     <h1
       className={cn(
-        "text-foreground flex gap-3 truncate text-xl font-bold tracking-tight",
+        "text-foreground flex items-center gap-3 truncate text-xl font-bold leading-none tracking-tight",
         className,
       )}
     >

apps/web/src/components/participant-avatar-bar.tsx

@@ -37,7 +37,7 @@ export const ParticipantAvatarBar = ({
   return (
     <ul className="flex cursor-default items-center -space-x-1 rounded-full bg-white p-0.5">
       {visibleParticipants.map((participant, index) => (
-        <Tooltip key={index}>
+        <Tooltip delayDuration={100} key={index}>
           <TooltipTrigger asChild>
             <li className="z-10 inline-flex items-center justify-center rounded-full ring-2 ring-white">
               <OptimizedAvatarImage

apps/web/src/features/navigation/command-menu/command-menu.tsx

@@ -64,7 +64,7 @@ export function CommandMenu() {
           </CommandEmpty>
           <CommandGroup heading={<Trans i18nKey="polls" defaults="Actions" />}>
             <CommandItem onSelect={() => handleSelect("/new")}>
-              <PageIcon>
+              <PageIcon size="sm">
                 <PlusIcon />
               </PageIcon>
               <Trans i18nKey="create" defaults="Create" />
@@ -72,15 +72,15 @@ export function CommandMenu() {
           </CommandGroup>
           <CommandGroup heading="Navigation">
             <CommandItem onSelect={() => handleSelect("/")}>
-              <HomePageIcon />
+              <HomePageIcon size="sm" />
               <Trans i18nKey="home" defaults="Home" />
             </CommandItem>
             <CommandItem onSelect={() => handleSelect("/polls")}>
-              <PollPageIcon />
+              <PollPageIcon size="sm" />
               <Trans i18nKey="polls" defaults="Polls" />
             </CommandItem>
             <CommandItem onSelect={() => handleSelect("/events")}>
-              <EventPageIcon />
+              <EventPageIcon size="sm" />
               <Trans i18nKey="events" defaults="Events" />
             </CommandItem>
             {/* <CommandItem onSelect={() => handleSelect("/teams")}>
@@ -96,15 +96,15 @@ export function CommandMenu() {
             heading={<Trans i18nKey="account" defaults="Account" />}
           >
             <CommandItem onSelect={() => handleSelect("/settings/profile")}>
-              <ProfilePageIcon />
+              <ProfilePageIcon size="sm" />
               <Trans i18nKey="profile" defaults="Profile" />
             </CommandItem>
             <CommandItem onSelect={() => handleSelect("/settings/preferences")}>
-              <PreferencesPageIcon />
+              <PreferencesPageIcon size="sm" />
               <Trans i18nKey="preferences" defaults="Preferences" />
             </CommandItem>
             <CommandItem onSelect={() => handleSelect("/settings/billing")}>
-              <BillingPageIcon />
+              <BillingPageIcon size="sm" />
               <Trans i18nKey="billing" defaults="Billing" />
             </CommandItem>
           </CommandGroup>

packages/ui/src/badge.tsx

@@ -4,12 +4,12 @@ import * as React from "react";
 import { cn } from "./lib/utils";
 
 const badgeVariants = cva(
-  "inline-flex group whitespace-nowrap items-center rounded-full justify-center font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "inline-flex group whitespace-nowrap items-center rounded-full justify-center transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
     variants: {
       variant: {
         primary: "bg-primary text-primary-50",
-        default: "bg-gray-50 border text-muted-foreground",
+        default: "bg-gray-50 border",
         destructive: "bg-destructive text-destructive-foreground",
         outline: "text-foreground",
         green: "bg-green-600 text-white",

packages/ui/src/button.tsx

@@ -10,18 +10,18 @@ import { cn } from "./lib/utils";
 const buttonVariants = cva(
   cn(
     "inline-flex border text-shadow font-medium disabled:pointer-events-none select-none disabled:opacity-50 items-center justify-center whitespace-nowrap border",
-    "focus:shadow-none focus-visible:ring-2 focus-visible:ring-ring",
+    "focus-visible:shadow-none",
   ),
   {
     variants: {
       variant: {
         primary:
-          "focus:ring-offset-1 border-primary bg-primary hover:bg-primary-500 disabled:bg-gray-400 disabled:border-transparent text-white shadow-sm",
+          "focus-visible:ring-offset-1 border-primary bg-primary hover:bg-primary-500 disabled:bg-gray-400 disabled:border-transparent text-white",
         destructive:
-          "focus:ring-offset-1 bg-destructive shadow-sm text-destructive-foreground active:bg-destructive border-destructive hover:bg-destructive/90",
+          "focus-visible:ring-offset-1 bg-destructive shadow-sm text-destructive-foreground active:bg-destructive border-destructive hover:bg-destructive/90",
-        default: "focus:ring-offset-1 hover:bg-gray-50 bg-white",
+        default: "focus-visible:ring-offset-1 hover:bg-gray-50 bg-white",
         secondary:
-          "focus:ring-offset-1 border-secondary bg-secondary hover:bg-secondary/80 text-secondary-foreground",
+          "focus-visible:ring-offset-1 border-secondary bg-secondary hover:bg-secondary/80 text-secondary-foreground",
         ghost:
           "border-transparent bg-transparent data-[state=open]:bg-gray-500/20 text-gray-800 hover:bg-gray-500/10 active:bg-gray-500/20",
         actionBar: