From d9315ecf7df78485c2db7e1b532a085901826b3c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Mon, 23 Feb 2026 07:56:16 +0100
Subject: [PATCH] style: streamline inputs and selects with more visible
 borders

- Increase --border opacity in both light and dark modes
- Harmonize Input and Select components with consistent rounded-lg corners
- Replace native selects in MainConverter with styled Select component
---
 app/globals.css                              |  4 ++--
 components/ui/Input.tsx                      |  2 +-
 components/units/converter/MainConverter.tsx | 10 ++++------
 3 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index cdd252b..a549d0d 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -128,7 +128,7 @@
   --accent-foreground: #ffffff;
   --destructive: #ef4444;
   --destructive-foreground: #ffffff;
-  --border: rgba(255, 255, 255, 0.08);
+  --border: rgba(255, 255, 255, 0.15);
   --input: rgba(255, 255, 255, 0.05);
   --ring: rgba(139, 92, 246, 0.5);
   --radius: 1rem;
@@ -153,7 +153,7 @@
   --accent-foreground: oklch(15% 0.05 255);
   --destructive: oklch(60% 0.2 25);
   --destructive-foreground: oklch(100% 0 0);
-  --border: rgba(0, 0, 0, 0.06);
+  --border: rgba(0, 0, 0, 0.12);
   --input: rgba(0, 0, 0, 0.01);
   --ring: rgba(139, 92, 246, 0.2);
 }
diff --git a/components/ui/Input.tsx b/components/ui/Input.tsx
index f660b18..4bd295a 100644
--- a/components/ui/Input.tsx
+++ b/components/ui/Input.tsx
@@ -9,7 +9,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          'flex h-10 w-full rounded-xl border border-border bg-input px-4 py-2',
+          'flex h-10 w-full rounded-lg border border-border bg-input px-4 py-2',
           'text-sm ring-offset-background file:border-0 file:bg-transparent',
           'file:text-sm file:font-medium placeholder:text-muted-foreground',
           'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:border-primary/50',
diff --git a/components/units/converter/MainConverter.tsx b/components/units/converter/MainConverter.tsx
index 9e8f9ff..6dd7984 100644
--- a/components/units/converter/MainConverter.tsx
+++ b/components/units/converter/MainConverter.tsx
@@ -161,17 +161,16 @@ export default function MainConverter() {
             </div>
             <div className="w-40">
               <label className="text-sm font-medium mb-2 block">From</label>
-              <select
+              <Select
                 value={selectedUnit}
                 onChange={(e) => setSelectedUnit(e.target.value)}
-                className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
               >
                 {units.map((unit) => (
                   <option key={unit} value={unit}>
                     {unit}
                   </option>
                 ))}
-              </select>
+              </Select>
             </div>
             <Button
               variant="outline"
@@ -184,17 +183,16 @@ export default function MainConverter() {
             </Button>
             <div className="w-40">
               <label className="text-sm font-medium mb-2 block">To</label>
-              <select
+              <Select
                 value={targetUnit}
                 onChange={(e) => setTargetUnit(e.target.value)}
-                className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
               >
                 {units.map((unit) => (
                   <option key={unit} value={unit}>
                     {unit}
                   </option>
                 ))}
-              </select>
+              </Select>
             </div>
           </div>