sexy input

src/App.tsx

@@ -11,10 +11,10 @@ export default function App() {
   const [fileScanInputVal, setFileScanInputVal] = useState('/Users/jamie/Downloads');
 
   return (
-    <div className="flex flex-col h-screen rounded-xl bg-gray-100 dark:bg-gray-900 overflow-hidden ">
+    <div className="flex flex-col h-screen rounded-xl bg-white dark:bg-gray-900 overflow-hidden ">
       <div
         data-tauri-drag-region
-        className="max-w bg-gray-200 dark:bg-gray-800 h-10 border-b-1 border-gray-400"
+        className="max-w bg-gray-100 dark:bg-gray-800 h-10 border-b-1 border-gray-400"
       ></div>
       <div className="p-4 ">
         <div className="flex space-x-2">

src/components/primative/Button.tsx

@@ -5,16 +5,17 @@ import clsx from 'clsx';
 
 const variants = {
   default: `
-    bg-gray-100 
+    bg-gray-50 
-    hover:bg-gray-200 
+    shadow-sm
-    active:bg-gray-200  
+    hover:bg-gray-100 
+    active:bg-gray-50  
     dark:bg-gray-800
     dark:hover:bg-gray-700
     dark:active:bg-gray-600
     
-    border-gray-200 
+    border-gray-100 
-    hover:border-gray-300
+    hover:border-gray-200
-    active:border-gray-200
+    active:border-gray-100
     dark:border-gray-700 
     dark:hover:border-gray-600
 
@@ -27,7 +28,7 @@ const variants = {
     
   `,
   primary:
-    'bg-primary border-primary-600 dark:border-primary-400 active:bg-primary-600 active:border-primary-700 hover:bg-primary-400 hover:border-primary-500'
+    'bg-primary shadow-sm border-primary-600 dark:border-primary-400 active:bg-primary-600 active:border-primary-700 hover:bg-primary-400 hover:border-primary-500'
 };
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {

src/components/primative/Input.tsx

@@ -2,8 +2,30 @@ import clsx from 'clsx';
 import React from 'react';
 
 const variants = {
-  default:
+  default: `
-    'border-gray-200 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-white dark:focus:hover:bg-gray-800 focus:border-gray-300 placeholder-gray-300 focus:ring-gray-200 dark:focus:border-gray-900 dark:focus:ring-gray-600',
+    shadow-sm
+    bg-white
+    hover:bg-white
+    focus:hover:bg-white
+    focus:bg-white
+    dark:bg-gray-800
+    dark:hover:bg-gray-700
+    dark:focus:bg-gray-800
+    dark:focus:hover:bg-gray-800
+
+    border-gray-100
+    hover:border-gray-200
+    focus:border-white
+    dark:border-gray-700
+    dark:hover:border-gray-700
+    dark:focus:border-gray-900
+
+    focus:ring-gray-100 
+    dark:focus:ring-gray-600
+
+    dark:text-white 
+    placeholder-gray-300
+  `,
   primary: ''
 };
 

src/components/primative/Toggle.tsx

@@ -11,7 +11,7 @@ export const Toggle = (props: { initialState: boolean }) => {
       checked={enabled}
       onChange={setEnabled}
       className={clsx(
-        'relative inline-flex items-center h-6 rounded-full w-11 bg-gray-300 dark:bg-gray-700',
+        'relative inline-flex items-center h-6 rounded-full w-11 bg-gray-200 dark:bg-gray-700',
         {
           'bg-primary-600': enabled
         }

tailwind.config.js

@@ -31,7 +31,7 @@ module.exports = {
         },
         gray: {
           DEFAULT: '#505468',
-          50: '#FFFFFF',
+          50: '#F1F1F4',
           100: '#E8E9ED',
           200: '#C0C2CE',
           300: '#979CAF',