From 5d6ace4e468cbc4b8b6947295ca980e7e952146e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Tue, 24 Feb 2026 16:58:17 +0100
Subject: [PATCH] fix: old styling with new shadcn components

---
 app/(app)/pastel/batch/page.tsx              |   2 +-
 app/(app)/pastel/colorblind/page.tsx         |   2 +-
 app/(app)/pastel/contrast/page.tsx           |   2 +-
 app/(app)/pastel/distinct/page.tsx           |   2 +-
 app/(app)/pastel/harmony/page.tsx            |   2 +-
 app/(app)/pastel/names/page.tsx              |   2 +-
 app/globals.css                              | 114 -------------------
 components/layout/AppHeader.tsx              |  27 +++--
 components/layout/AppSidebar.tsx             |   9 +-
 components/pastel/tools/ExportMenu.tsx       |   2 +-
 components/units/converter/MainConverter.tsx |   6 +-
 11 files changed, 25 insertions(+), 145 deletions(-)

diff --git a/app/(app)/pastel/batch/page.tsx b/app/(app)/pastel/batch/page.tsx
index 37b5b01..455f78a 100644
--- a/app/(app)/pastel/batch/page.tsx
+++ b/app/(app)/pastel/batch/page.tsx
@@ -127,7 +127,7 @@ export default function BatchPage() {
                   value={operation}
                   onValueChange={(value) => setOperation(value as Operation)}
                 >
-                  <SelectTrigger>
+                  <SelectTrigger className="w-full">
                     <SelectValue placeholder="Select operation" />
                   </SelectTrigger>
                   <SelectContent>
diff --git a/app/(app)/pastel/colorblind/page.tsx b/app/(app)/pastel/colorblind/page.tsx
index a255791..7417ba9 100644
--- a/app/(app)/pastel/colorblind/page.tsx
+++ b/app/(app)/pastel/colorblind/page.tsx
@@ -122,7 +122,7 @@ export default function ColorBlindPage() {
                   value={blindnessType}
                   onValueChange={(value) => setBlindnessType(value as ColorBlindnessType)}
                 >
-                  <SelectTrigger>
+                  <SelectTrigger className="w-full">
                     <SelectValue placeholder="Select type" />
                   </SelectTrigger>
                   <SelectContent>
diff --git a/app/(app)/pastel/contrast/page.tsx b/app/(app)/pastel/contrast/page.tsx
index 1d71fc0..166bd5e 100644
--- a/app/(app)/pastel/contrast/page.tsx
+++ b/app/(app)/pastel/contrast/page.tsx
@@ -39,7 +39,7 @@ export default function ContrastPage() {
   }) => (
     <div className="flex items-center justify-between p-3 bg-muted rounded-lg">
       <span className="text-sm">{label}</span>
-      <Badge variant={passed ? 'secondary' : 'destructive'}>
+      <Badge variant={passed ? 'default' : 'destructive'}>
         {passed ? (
           <>
             <Check className="h-3 w-3 mr-1" />
diff --git a/app/(app)/pastel/distinct/page.tsx b/app/(app)/pastel/distinct/page.tsx
index 94ecb76..5708a9d 100644
--- a/app/(app)/pastel/distinct/page.tsx
+++ b/app/(app)/pastel/distinct/page.tsx
@@ -79,7 +79,7 @@ export default function DistinctPage() {
                   value={metric}
                   onValueChange={(value) => setMetric(value as 'cie76' | 'ciede2000')}
                 >
-                  <SelectTrigger>
+                  <SelectTrigger className="w-full">
                     <SelectValue placeholder="Select metric" />
                   </SelectTrigger>
                   <SelectContent>
diff --git a/app/(app)/pastel/harmony/page.tsx b/app/(app)/pastel/harmony/page.tsx
index 7399850..5c2fcfb 100644
--- a/app/(app)/pastel/harmony/page.tsx
+++ b/app/(app)/pastel/harmony/page.tsx
@@ -82,7 +82,7 @@ export default function HarmonyPage() {
                   value={harmonyType}
                   onValueChange={(value) => setHarmonyType(value as HarmonyType)}
                 >
-                  <SelectTrigger>
+                  <SelectTrigger className="w-full">
                     <SelectValue placeholder="Select harmony" />
                   </SelectTrigger>
                   <SelectContent>
diff --git a/app/(app)/pastel/names/page.tsx b/app/(app)/pastel/names/page.tsx
index 1238e58..497c4e5 100644
--- a/app/(app)/pastel/names/page.tsx
+++ b/app/(app)/pastel/names/page.tsx
@@ -64,7 +64,7 @@ export default function NamedColorsPage() {
           </div>
           <div className="w-full sm:w-48">
             <Select value={sortBy} onValueChange={(value) => setSortBy(value as 'name' | 'hue')}>
-              <SelectTrigger>
+              <SelectTrigger className="w-full">
                 <SelectValue placeholder="Sort by..." />
               </SelectTrigger>
               <SelectContent>
diff --git a/app/globals.css b/app/globals.css
index fbf8a5d..ba3ca3c 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,8 +1,4 @@
 @import "tailwindcss";
-@import "tw-animate-css";
-@import "shadcn/tailwind.css";
-
-@custom-variant dark (&:is(.dark *));
 
 @source "../components/*.{js,ts,jsx,tsx}";
 @source "../components/ui/*.{js,ts,jsx,tsx}";
@@ -226,113 +222,3 @@ html {
 @utility gradient-brand {
   background: linear-gradient(to right, #a78bfa, #f472b6, #22d3ee);
 }
-
-@theme inline {
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --radius-2xl: calc(var(--radius) + 8px);
-  --radius-3xl: calc(var(--radius) + 12px);
-  --radius-4xl: calc(var(--radius) + 16px);
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-}
-
-:root {
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
-}
-
-.dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
-}
\ No newline at end of file
diff --git a/components/layout/AppHeader.tsx b/components/layout/AppHeader.tsx
index 29f8268..2a10a90 100644
--- a/components/layout/AppHeader.tsx
+++ b/components/layout/AppHeader.tsx
@@ -18,20 +18,11 @@ export function AppHeader() {
   const pathSegments = pathname.split('/').filter(Boolean);
   
   return (
-    <header className="h-16 border-b border-border bg-background/10 backdrop-blur-xl sticky top-0 z-40 flex items-center justify-between px-4 lg:px-8">
+    <header className="h-16 border-b border-border bg-background/10 backdrop-blur-xl sticky top-0 z-40 flex items-center justify-between pl-8 pr-5 md:pr-9">
       <div className="flex items-center gap-4">
-        <Button 
-          variant="ghost" 
-          size="icon" 
-          className="lg:hidden text-muted-foreground hover:text-foreground"
-          onClick={toggle}
-        >
-          {isOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
-        </Button>
-        
         <nav className="flex items-center text-sm font-medium">
           <Link href="/" className="flex items-center gap-2 group">
-            <Logo size={20} className="md:hidden" />
+            <Logo size={20} className="lg:hidden" />
             <span className="font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-400 group-hover:opacity-80 transition-opacity">
               Kit
             </span>
@@ -46,8 +37,8 @@ export function AppHeader() {
                 <Link 
                   href={href}
                   className={cn(
-                    "capitalize transition-colors",
-                    isLast ? "text-foreground font-semibold" : "text-muted-foreground hover:text-foreground font-medium"
+                    "capitalize transition-colors text-foreground",
+                    isLast ? "font-semibold" : "font-medium"
                   )}
                 >
                   {segment.replace(/-/g, ' ')}
@@ -58,8 +49,16 @@ export function AppHeader() {
         </nav>
       </div>
 
-      <div className="flex items-center gap-2 sm:gap-4">
+      <div className="flex items-center gap-2">
         <ThemeToggleComponent />
+        <Button 
+          variant="ghost" 
+          size="icon" 
+          className="lg:hidden text-muted-foreground hover:text-foreground"
+          onClick={toggle}
+        >
+          {isOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
+        </Button>
       </div>
     </header>
   );
diff --git a/components/layout/AppSidebar.tsx b/components/layout/AppSidebar.tsx
index 87e0534..02cc494 100644
--- a/components/layout/AppSidebar.tsx
+++ b/components/layout/AppSidebar.tsx
@@ -148,9 +148,9 @@ export function AppSidebar() {
                         href={item.href}
                         onClick={() => { if (window.innerWidth < 1024) close(); }}
                         className={cn(
-                          "flex items-center px-3 py-2 rounded-xl text-sm font-medium transition-all duration-300 relative group/item",
+                          "flex items-center px-3 py-2 rounded-lg text-sm font-medium transition-all duration-300 relative group/item",
                           isActive
-                            ? "bg-primary/10 text-primary shadow-[0_0_15px_rgba(139,92,246,0.15)] ring-1 ring-primary/20" 
+                            ? "bg-primary/10 text-primary ring-1 ring-primary/20" 
                             : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
                           isCollapsed ? "justify-center" : "justify-between"
                         )}
@@ -172,11 +172,6 @@ export function AppSidebar() {
                             pathname.startsWith(item.href) && "rotate-90"
                           )} />
                         )}
-
-                        {/* Collapsed Active Indicator */}
-                        {isCollapsed && isActive && (
-                          <div className="absolute left-0 w-1 h-6 bg-primary rounded-r-full" />
-                        )}
                       </Link>
                       
                       {item.items && pathname.startsWith(item.href) && !isCollapsed && (
diff --git a/components/pastel/tools/ExportMenu.tsx b/components/pastel/tools/ExportMenu.tsx
index 06b121f..5ab2fa1 100644
--- a/components/pastel/tools/ExportMenu.tsx
+++ b/components/pastel/tools/ExportMenu.tsx
@@ -92,7 +92,7 @@ export function ExportMenu({ colors, className }: ExportMenuProps) {
             value={format}
             onValueChange={(value) => setFormat(value as ExportFormat)}
           >
-            <SelectTrigger>
+            <SelectTrigger className="w-full">
               <SelectValue placeholder="Select format" />
             </SelectTrigger>
             <SelectContent>
diff --git a/components/units/converter/MainConverter.tsx b/components/units/converter/MainConverter.tsx
index ead9355..13e3c69 100644
--- a/components/units/converter/MainConverter.tsx
+++ b/components/units/converter/MainConverter.tsx
@@ -136,7 +136,7 @@ export default function MainConverter() {
             onValueChange={(value) => setSelectedMeasure(value as Measure)}
           >
             <SelectTrigger
-              className="h-10 text-sm"
+              className="w-full"
               style={{
                 borderLeft: `4px solid ${getCategoryColorHex(selectedMeasure)}`,
               }}
@@ -181,7 +181,7 @@ export default function MainConverter() {
                 value={selectedUnit}
                 onValueChange={(value) => setSelectedUnit(value)}
               >
-                <SelectTrigger>
+                <SelectTrigger className="w-full">
                   <SelectValue placeholder="From" />
                 </SelectTrigger>
                 <SelectContent>
@@ -210,7 +210,7 @@ export default function MainConverter() {
                 value={targetUnit}
                 onValueChange={(value) => setTargetUnit(value)}
               >
-                <SelectTrigger>
+                <SelectTrigger className="w-full">
                   <SelectValue placeholder="To" />
                 </SelectTrigger>
                 <SelectContent>