Replaced '+' with 'Plus' in shortcut display (#193)

Author: list-jonas

content/docs/user-manual/shortcuts.mdx

@@ -5,7 +5,7 @@ description: Enhance your Zen experience with customizable keybinds
 
 import KeyboardShortcut from '@/components/KeyboardShortcut';
 
-Zen Browser supported lots of keyboard shortcuts to help you do common tasks quicker. Access `Settings" /> > `Keyboard Shortcuts" /> and edit the available shortcuts to suit your workflow even more!
+Zen Browser supported lots of keyboard shortcuts to help you do common tasks quicker. Access `"Settings" > "Keyboard Shortcuts"` and edit the available shortcuts to suit your workflow even more!
 
 ### Change or rebind keyboard shortcuts in Zen
 
@@ -132,7 +132,7 @@ The "Toggle Split View" shortcuts currently only applicable when selecting multi
 | --------------------- | ------------------------------------------------ |
 | Toggle Mute           | <KeyboardShortcut shortcut="Ctrl + M" />         |
 | Zoom Out              | <KeyboardShortcut shortcut="Ctrl + -" />         |
-| Zoom In               | <KeyboardShortcut shortcut="Ctrl + +" />         |
+| Zoom In               | <KeyboardShortcut shortcut="Ctrl + Plus" />         |
 | Reset Zoom Level      | <KeyboardShortcut shortcut="Ctrl + 0" />         |
 | Switch Text Direction | <KeyboardShortcut shortcut="Shift + Ctrl + X" /> |
 | Take Screenshot       | <KeyboardShortcut shortcut="Shift + Ctrl + S" /> |

src/components/KeyboardShortcut.tsx

@@ -50,7 +50,11 @@ const KeyboardShortcut: React.FC<KeyboardShortcutProps> = ({
       {keys.map((key, index) => (
         <React.Fragment key={index}>
           <kbd className="px-1 py-0.5 text-xs font-semibold text-fd-foreground bg-fd-card border border-fd-border rounded-sm">
-            {key.toLowerCase() === "shift" ? "⇧" : key}
+            {key.toLowerCase() === "shift"
+              ? "⇧"
+              : key.toLowerCase() === "plus"
+              ? "+"
+              : key}
           </kbd>
           {index < keys.length - 1 && <span className="mx-1">+</span>}
         </React.Fragment>