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

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',

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>