fix(ui): refactor tooltip, breadcrumbs, sidebar, and component styles to improve consistency and simplify layout

Author: maartenbode

.gitignore

@@ -32,6 +32,7 @@ yarn-error.log
 CLAUDE.md
 /.cursor
 boost.json
+/.interface-design/system.md
 
 # VitePress
 docs/.vitepress/dist

.prettierignore

@@ -1,3 +1,2 @@
-resources/js/components/ui/*
 resources/views/mail/*
 resources/types/generated.d.ts

app/Domains/Organization/Http/Controllers/OrganizationController.php

@@ -61,6 +61,6 @@ public function store(StoreOrganizationRequest $request): RedirectResponse
         );
 
         return redirect()->route('organizations.show', $organization->slug)
-            ->with('success', 'Organization created successfully.');
+            ->with('status', 'Organization created successfully.');
     }
 }

app/Http/Middleware/HandleInertiaRequests.php

@@ -3,7 +3,6 @@
 namespace App\Http\Middleware;
 
 use App\Domains\Organization\Contracts\Data\OrganizationData;
-use Illuminate\Foundation\Inspiring;
 use Illuminate\Http\Request;
 use Inertia\Middleware;
 
@@ -37,12 +36,9 @@ public function version(Request $request): ?string
      */
     public function share(Request $request): array
     {
-        [$message, $author] = str(Inspiring::quotes()->random())->explode('-');
-
         return [
             ...parent::share($request),
             'name' => config('app.name'),
-            'quote' => ['message' => trim($message ?? ''), 'author' => trim($author ?? '')],
             'auth' => [
                 'user' => $request->user(),
                 'organizations' => $request->user()

docs/.vitepress/config.ts

@@ -6,18 +6,6 @@ export default defineConfig({
 
   head: [
     ['link', { rel: 'icon', href: '/favicon.svg', type: 'image/svg+xml' }],
-    ['link', { rel: 'preconnect', href: 'https://fonts.googleapis.com' }],
-    [
-      'link',
-      { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' },
-    ],
-    [
-      'link',
-      {
-        href: 'https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&display=swap',
-        rel: 'stylesheet',
-      },
-    ],
   ],
 
   themeConfig: {

docs/.vitepress/theme/style.css

@@ -1,7 +1,7 @@
 /* Custom theme overrides */
 
 :root {
-  --vp-font-family-base: 'Hanken Grotesk', sans-serif;
+  --vp-font-family-base: 'Inter', ui-sans-serif, system-ui, sans-serif;
   --vp-font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco,
     Consolas, 'Liberation Mono', 'Courier New', monospace;
   --vp-c-brand-1: #f03f03;

resources/css/app.css

@@ -9,7 +9,7 @@
 
 @theme {
     --font-sans:
-        'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif,
+        'InterVariable', 'Inter', ui-sans-serif, system-ui, sans-serif,
         'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
         'Noto Color Emoji';
 
@@ -100,15 +100,15 @@
     --destructive-foreground: oklch(0.55 0.22 25);
 
     /* Button depth styling */
-    --button-primary-from: oklch(0.68 0.20 35);
+    --button-primary-from: oklch(0.68 0.2 35);
     --button-primary-to: oklch(0.58 0.22 35);
-    --button-primary-border: oklch(0.52 0.20 35);
-    --button-secondary-from: oklch(0.99 0.002 90);
-    --button-secondary-to: oklch(0.91 0.004 90);
-    --button-secondary-border: oklch(0.82 0.005 90);
-    --button-destructive-from: oklch(0.60 0.20 25);
-    --button-destructive-to: oklch(0.50 0.22 25);
-    --button-destructive-border: oklch(0.45 0.20 25);
+    --button-primary-border: oklch(0.52 0.2 35);
+    --button-secondary-from: oklch(0.995 0.001 90);
+    --button-secondary-to: oklch(0.97 0.002 90);
+    --button-secondary-border: oklch(0.87 0.004 90);
+    --button-destructive-from: oklch(0.6 0.2 25);
+    --button-destructive-to: oklch(0.5 0.22 25);
+    --button-destructive-border: oklch(0.45 0.2 25);
     --border: oklch(0.93 0.003 90);
     --input: oklch(0.93 0.003 90);
     --ring: oklch(0.88 0.005 90);
@@ -150,8 +150,8 @@
     --button-primary-from: oklch(0.98 0 0);
     --button-primary-to: oklch(0.88 0 0);
     --button-primary-border: oklch(0.75 0 0);
-    --button-secondary-from: oklch(0.32 0.01 260);
-    --button-secondary-to: oklch(0.22 0.01 260);
+    --button-secondary-from: oklch(0.30 0.01 260);
+    --button-secondary-to: oklch(0.25 0.01 260);
     --button-secondary-border: oklch(0.38 0.01 260);
     --button-destructive-from: oklch(0.52 0.18 25);
     --button-destructive-to: oklch(0.42 0.18 25);
@@ -184,6 +184,7 @@
     }
 
     html {
+        font-size: 12px;
         scrollbar-gutter: stable;
     }
 }

resources/js/components/add-repository-dialog.tsx

@@ -185,7 +185,7 @@ export default function AddRepositoryDialog({
                 >
                     {({ processing, errors, wasSuccessful }) => (
                         <>
-                            <div className="space-y-2">
+                            <div className="grid space-y-2">
                                 <Label htmlFor="provider">
                                     Git Provider{' '}
                                     <span className="text-red-500">*</span>
@@ -215,7 +215,7 @@ export default function AddRepositoryDialog({
                                 {errors.provider &&
                                     !processing &&
                                     !wasSuccessful && (
-                                        <p className="text-sm text-destructive">
+                                        <p className="text-destructive">
                                             {errors.provider}
                                         </p>
                                     )}
@@ -232,13 +232,13 @@ export default function AddRepositoryDialog({
                                 </p>
                             </div>
 
-                            <div className="space-y-2">
+                            <div className="grid space-y-2">
                                 <Label htmlFor="repo_identifier">
                                     Repository{' '}
                                     <span className="text-red-500">*</span>
                                 </Label>
                                 {loadingRepos && provider === 'github' ? (
-                                    <div className="flex items-center gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm">
+                                    <div className="flex items-center gap-2 rounded-md border border-input bg-transparent px-3 py-2">
                                         <Spinner className="size-4" />
                                         <span className="text-muted-foreground">
                                             Loading repositories...
@@ -369,7 +369,7 @@ export default function AddRepositoryDialog({
                                                         },
                                                     )
                                                 ) : (
-                                                    <div className="px-2 py-4 text-center text-sm text-muted-foreground">
+                                                    <div className="px-2 py-4 text-center text-muted-foreground">
                                                         No repositories found
                                                     </div>
                                                 )}
@@ -385,7 +385,7 @@ export default function AddRepositoryDialog({
                                 ) : provider === 'github' &&
                                   repositories.length === 0 ? (
                                     <>
-                                        <div className="rounded-md border border-destructive bg-destructive/10 p-3 text-sm text-destructive">
+                                        <div className="rounded-md border border-destructive bg-destructive/10 p-3 text-destructive">
                                             No repositories found. Please
                                             configure GitHub credentials in
                                             settings.
@@ -434,13 +434,13 @@ export default function AddRepositoryDialog({
                                 {errors.repo_identifier &&
                                     !processing &&
                                     !wasSuccessful && (
-                                        <p className="text-sm text-destructive">
+                                        <p className="text-destructive">
                                             {errors.repo_identifier}
                                         </p>
                                     )}
                             </div>
 
-                            <div className="space-y-2">
+                            <div className="grid space-y-2">
                                 <Label htmlFor="default_branch">
                                     Default Branch (optional)
                                 </Label>
@@ -452,7 +452,7 @@ export default function AddRepositoryDialog({
                                 {errors.default_branch &&
                                     !processing &&
                                     !wasSuccessful && (
-                                        <p className="text-sm text-destructive">
+                                        <p className="text-destructive">
                                             {errors.default_branch}
                                         </p>
                                     )}
@@ -466,7 +466,7 @@ export default function AddRepositoryDialog({
                             <DialogFooter>
                                 <Button
                                     type="button"
-                                    variant="outline"
+                                    variant="secondary"
                                     onClick={handleClose}
                                 >
                                     Cancel

resources/js/components/alert-error.tsx

@@ -13,7 +13,7 @@ export default function AlertError({
             <AlertCircleIcon />
             <AlertTitle>{title || 'Something went wrong.'}</AlertTitle>
             <AlertDescription>
-                <ul className="list-inside list-disc text-sm">
+                <ul className="list-inside list-disc">
                     {Array.from(new Set(errors)).map((error, index) => (
                         <li key={index}>{error}</li>
                     ))}

resources/js/components/app-header.tsx

@@ -95,7 +95,7 @@ export function AppHeader({ breadcrumbs = [] }: AppHeaderProps) {
                                     <AppLogoIcon className="h-6 w-6 fill-current text-black dark:text-white" />
                                 </SheetHeader>
                                 <div className="flex h-full flex-1 flex-col space-y-4 p-4">
-                                    <div className="flex h-full flex-col justify-between text-sm">
+                                    <div className="flex h-full flex-col justify-between">
                                         <div className="flex flex-col space-y-4">
                                             {mainNavItems.map((item) => (
                                                 <Link
@@ -204,7 +204,7 @@ export function AppHeader({ breadcrumbs = [] }: AppHeaderProps) {
                                                     href={resolveUrl(item.href)}
                                                     target="_blank"
                                                     rel="noopener noreferrer"
-                                                    className="group ml-1 inline-flex h-9 w-9 items-center justify-center rounded-md bg-transparent p-0 text-sm font-medium text-accent-foreground ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
+                                                    className="group ml-1 inline-flex h-9 w-9 items-center justify-center rounded-md bg-transparent p-0 font-medium text-accent-foreground ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
                                                 >
                                                     <span className="sr-only">
                                                         {item.title}