fix: kbd style

Signed-off-by: Innei <i@innei.in>
RSSNext · Jul 27, 2024 · 839b636 · 839b636
1 parent f6e72df
commit 839b636
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 25 deletions.
diff --git a/src/renderer/src/components/ui/button/variants.tsx b/src/renderer/src/components/ui/button/variants.tsx
@@ -20,7 +20,7 @@ export const buttonVariants = cva(
           "border border-input bg-theme-background hover:bg-accent hover:text-accent-foreground",
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-zinc-500/10 dark:hover:bg-neutral-400/15 px-1.5",
+        ghost: "hover:bg-theme-button-hover px-1.5",
         link: "text-primary underline-offset-4 hover:underline",
       },
     },

diff --git a/src/renderer/src/components/ui/kbd/Kbd.tsx b/src/renderer/src/components/ui/kbd/Kbd.tsx
@@ -1,71 +1,105 @@
 import { cn, getOS } from "@renderer/lib/utils"
 import type { FC } from "react"
 import { Fragment, memo } from "react"
+import * as React from "react"
 
+const SharedKeys = {
+  backspace: "⌫",
+  space: "␣",
+}
 const SpecialKeys = {
   Windows: {
     meta: "⊞",
     ctrl: "Ctrl",
     alt: "Alt",
     shift: "Shift",
-    backspace: "⌫",
-    space: "␣",
   },
   macOS: {
     meta: "⌘",
     ctrl: "⌃",
     alt: "⌥",
     shift: "⇧",
-    backspace: "⌫",
-    space: "␣",
   },
   Linux: {
     meta: "Super",
     ctrl: "Ctrl",
     alt: "Alt",
     shift: "Shift",
-    backspace: "⌫",
-    space: "␣",
   },
 }
+// @ts-ignore
+SpecialKeys.iOS = SpecialKeys.macOS
+// @ts-ignore
+SpecialKeys.Android = SpecialKeys.Linux
+
+// const allSpecialKeys = new Set(
+//   [
+//     SpecialKeys.Windows,
+//     SpecialKeys.macOS,
+//     SpecialKeys.Linux,
+//     SharedKeys,
+//   ].flatMap((element) => Object.values(element)),
+// )
 
+const os = getOS()
 export const KbdCombined: FC<{
   children: string
   className?: string
   joint?: boolean
 }> = ({ children, joint, className }) => {
-  const specialKeys = SpecialKeys[getOS()] as Record<string, string>
-  let key = children
-  for (const [k, v] of Object.entries(specialKeys)) {
-    key = key.replaceAll(new RegExp(k, "gi"), v)
-  }
-
+  const keys = children.split(",")
   return (
     <div className="flex items-center gap-1">
-      {key.split(",").map((k, i) => (
+      {keys.map((k, i) => (
         <Fragment key={k}>
           {joint ? (
-            <Kbd className={className}>{k.replaceAll("+", " ")}</Kbd>
+            <Kbd className={className}>{k}</Kbd>
           ) : (
             <div className="flex items-center gap-1">
-              {k.split("+").map((key, index) => (
-                <Kbd key={index} className={className}>
+              {k.split("+").map((key) => (
+                <Kbd key={key} className={className}>
                   {key}
                 </Kbd>
               ))}
             </div>
           )}
-          {i !== key.split(",").length - 1 && " / "}
+          {i !== keys.length - 1 && " / "}
         </Fragment>
       ))}
     </div>
   )
 }
 
 export const Kbd: FC<{ children: string, className?: string }> = memo(
-  ({ children, className }) => (
-    <kbd className={cn("kbd h-4 font-mono text-[0.7rem]", className)}>
-      {children}
-    </kbd>
-  ),
+  ({ children, className }) => {
+    let specialKeys = (SpecialKeys as any)[os] as Record<string, string>
+    specialKeys = { ...SharedKeys, ...specialKeys }
+
+    return (
+      <kbd className={cn("kbd h-4 space-x-1 font-mono text-[0.7rem]", className)}>
+        {children.split("+").map((key_) => {
+          let key: string = key_.toLowerCase()
+          for (const [k, v] of Object.entries(specialKeys)) {
+            key = key.replace(k, v)
+          }
+
+          switch (key) {
+            case SharedKeys.space: {
+              return (
+                <i className="i-mingcute-space-line" key={key} />
+              )
+            }
+
+            default: {
+              return (
+                <span className="capitalize" key={key}>
+                  {key}
+                </span>
+              )
+            }
+          }
+        })}
+      </kbd>
+    )
+  },
 )
diff --git a/src/renderer/src/constants/shortcuts.ts b/src/renderer/src/constants/shortcuts.ts
@@ -82,4 +82,11 @@ export const shortcuts = {
       key: "Meta+Alt+S",
     },
   },
+
+  audio: {
+    "play/pause": {
+      name: "Play/Pause",
+      key: "Space",
+    },
+  },
 } as const
diff --git a/src/renderer/src/modules/feed-column/corner-player.tsx b/src/renderer/src/modules/feed-column/corner-player.tsx
@@ -237,13 +237,13 @@ const ActionIcon = ({
     <TooltipTrigger>
       <button
         type="button"
-        className="center size-6 rounded-md text-zinc-500 hover:bg-theme-item-hover"
+        className="center size-6 rounded-md text-zinc-500 hover:bg-theme-button-hover"
         onClick={onClick}
       >
         {children || <i className={className} />}
       </button>
     </TooltipTrigger>
-    <TooltipContent>{label}</TooltipContent>
+    <TooltipContent className="bg-theme-modal-background">{label}</TooltipContent>
   </Tooltip>
 )
 

diff --git a/src/renderer/src/styles/colors.css b/src/renderer/src/styles/colors.css
@@ -19,6 +19,8 @@
   --fo-modal-background-opaque: theme(colors.zinc.50);
 
   --fo-text-primary-hover: 0, 0%, 14.9%;
+
+  --fo-button-hover: theme(colors.zinc.500/0.1);
 }
 
 [data-theme="dark"] {
@@ -41,4 +43,6 @@
   --fo-modal-background-opaque: theme(colors.neutral.900);
 
   --fo-text-primary-hover: 240, 4.9%, 83.9%;
+
+  --fo-button-hover: theme(colors.neutral.400/0.15);
 }
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -112,6 +112,9 @@ export default resolveConfig({
             "background": "var(--fo-modal-background)",
             "background-opaque": "var(--fo-modal-background-opaque)",
           },
+          "button": {
+            hover: "var(--fo-button-hover)",
+          },
         },
       },
       borderRadius: {