add reset button

src/App.css

@@ -1,27 +1,37 @@
 @import "tailwindcss";
 
-/* @font-face {
-  src: url("/src/assets/fonts/ShortStack-Regular.ttf");
-  font-family: 'Short Stack';
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-} */
+@theme {
+  --color-text: #0f0f0f;
+  --color-background: #fbfbfb;
+  --color-logo-primary: #FAA2CA;
+  --color-logo-stroke: #382731;
+  --color-text-stroke: #f6f6f6;
+  --color-mid-gray: #808080;
+}
 
 :root {
-  /* font-family: 'Short Stack', sans-serif; */
+  /* Typography */
   font-size: 16px;
   line-height: 24px;
   font-weight: 400;
 
-  color: #0f0f0f;
-  background-color: #fbfbfb;
+  /* Colors - Light Theme */
+  /* --color-text: #0f0f0f;
+  --color-background: #fbfbfb;
+  --color-logo-primary: #FAA2CA;
+  --color-logo-stroke: #382731;
+  --color-text-stroke: #f6f6f6; */
 
+  /* Typography settings */
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -webkit-text-size-adjust: 100%;
+
+  /* Apply colors */
+  color: var(--color-text);
+  background-color: var(--color-background);
 }
 
 .container {
@@ -35,13 +45,26 @@
 
 @media (prefers-color-scheme: dark) {
   :root {
-    color: #fbfbfb;
-    background-color: #2c2b29;
+    /* Colors - Dark Theme */
+    --color-text: #fbfbfb;
+    --color-background: #2c2b29;
+    --color-logo-primary: #F28CBB;
+    --color-logo-stroke: #FAD1ED;
   }
 }
 
 @layer utilities {
   .text-stroke {
-    -webkit-text-stroke: 2px #f6f6f6;
+    -webkit-text-stroke: 2px var(--color-text-stroke);
   }
+}
+
+.logo-primary {
+  fill: var(--color-logo-primary);
+}
+
+.logo-stroke {
+  fill: var(--color-logo-stroke);
+  stroke: var(--color-logo-stroke);
+  stroke-width: 1;
 }

src/components/icons/HandyTextLogo.tsx

@@ -15,30 +15,6 @@ const HandyTextLogo = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <style>
-        {`
-          .logo-primary {
-            fill: #FAA2CA;
-          }
-
-          .logo-stroke {
-            fill: #382731;
-            stroke: #382731;
-            stroke-width: 1;
-          }
-
-          @media (prefers-color-scheme: dark) {
-            .logo-stroke {
-              fill: #FAD1ED;
-              stroke: #FAD1ED;
-            }
-
-            .logo-primary {
-              fill: #F28CBB;
-            }
-          }
-        `}
-      </style>
       <path
         fillRule="evenodd"
         clipRule="evenodd"

src/components/icons/ResetIcon.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+const ResetIcon = ({ className = "" }: { className?: string }) => {
+  return (
+    <svg
+      height="20"
+      viewBox="0 0 20 20"
+      width="20"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path d="M6 6c0 .55-.45 1-1 1H1c-.55 0-1-.45-1-1V2c0-.55.45-1 1-1s1 .45 1 1v2.05C3.82 1.6 6.71 0 10 0c5.52 0 10 4.48 10 10s-4.48 10-10 10S0 15.52 0 10c0-.55.45-1 1-1s1 .45 1 1c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8C7.47 2 5.23 3.17 3.76 5H5c.55 0 1 .45 1 1" />
+    </svg>
+  );
+};
+
+export default ResetIcon;

src/components/settings/KeyboardShortcuts.tsx

@@ -8,6 +8,7 @@ import {
 } from "../../lib/types";
 import { invoke } from "@tauri-apps/api/core";
 import keycode from "keycode";
+import ResetIcon from "../icons/ResetIcon";
 
 export const KeyboardShortcuts: React.FC = () => {
   const [bindings, setBindings] = React.useState<ShortcutBindingsMap>({});
@@ -148,7 +149,7 @@ export const KeyboardShortcuts: React.FC = () => {
       {Object.entries(bindings).map(([id, binding]) => (
         <div
           key={id}
-          className="flex items-center justify-between p-4 rounded-lg border border-[#808080]/20 "
+          className="flex items-center justify-between p-4 rounded-lg border border-mid-gray/20 "
         >
           <div>
             <h3 className="text-sm font-medium ">{binding.name}</h3>
@@ -158,20 +159,20 @@ export const KeyboardShortcuts: React.FC = () => {
             {editingShortcutId === id ? (
               <div
                 ref={(ref) => setShortcutRef(id, ref)}
-                className="px-2 py-1 text-sm font-semibold border border-[#FAA2CA] bg-[#FAA2CA]/30 rounded min-w-[100px] text-center"
+                className="px-2 py-1 text-sm font-semibold border border-logo-primary bg-logo-primary/30 rounded min-w-[100px] text-center"
               >
                 {formatCurrentKeys()}
               </div>
             ) : (
               <div
-                className="px-2 py-1 text-sm font-semibold bg-[#808080]/10 border border-gray-200 hover:bg-[#FAA2CA]/10 rounded cursor-pointer hover:border-[#FAA2CA]"
+                className="px-2 py-1 text-sm font-semibold bg-mid-gray/10 border  border-mid-gray/80 hover:bg-logo-primary/10 rounded cursor-pointer hover:border-logo-primary"
                 onClick={() => startRecording(id)}
               >
                 {binding.current_binding}
               </div>
             )}
             <button
-              className="px-2 py-1 text-sm font-semibold border bg-[#808080]/10 hover:bg-[#FAA2CA]/10 border-gray-200 rounded"
+              className="px-2 py-1 hover:bg-logo-primary/30 active:bg-logo-primary/50 active:scale-95 rounded fill-text hover:cursor-pointer hover:border-logo-primary border border-transparent transition-all duration-150"
               onClick={() => {
                 invoke("reset_binding", { id }).then((b) => {
                   console.log("reset");
@@ -188,7 +189,7 @@ export const KeyboardShortcuts: React.FC = () => {
                 });
               }}
             >
-              reset
+              <ResetIcon className="" />
             </button>
           </div>
         </div>

tailwind.config.js

@@ -5,7 +5,15 @@ export default {
     "./src/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        text: 'var(--color-text)',
+        background: 'var(--color-background)',
+        'logo-primary': 'var(--color-logo-primary)',
+        'logo-stroke': 'var(--color-logo-stroke)',
+        'text-stroke': 'var(--color-text-stroke)',
+      },
+    },
   },
   plugins: [],
 }