Fixed an issue that would caused empty dashboard shortcuts to not hide properly. (#610)

src/components/menus/dashboard/shortcuts/buttons/ShortcutButtons.tsx

@@ -24,36 +24,60 @@ const ShortcutButton = ({ shortcut, ...props }: ShortcutButtonProps): JSX.Elemen
 };
 
 export const LeftShortcut1 = (): JSX.Element => {
+    if (!hasCommand(left.shortcut1)) {
+        return <box />;
+    }
+
     return (
         <ShortcutButton
             shortcut={left.shortcut1}
-            className={`dashboard-button top-button ${hasCommand(left.shortcut1) ? 'paired' : ''}`}
+            className={`dashboard-button top-button ${hasCommand(left.shortcut2) ? 'paired' : ''}`}
         />
     );
 };
 
 export const LeftShortcut2 = (): JSX.Element => {
+    if (!hasCommand(left.shortcut2)) {
+        return <box />;
+    }
+
     return <ShortcutButton shortcut={left.shortcut2} className={`dashboard-button`} />;
 };
 
 export const LeftShortcut3 = (): JSX.Element => {
+    if (!hasCommand(left.shortcut3)) {
+        return <box />;
+    }
+
     return (
         <ShortcutButton
             shortcut={left.shortcut3}
-            className={`dashboard-button top-button ${hasCommand(left.shortcut3) ? 'paired' : ''}`}
+            className={`dashboard-button top-button ${hasCommand(left.shortcut4) ? 'paired' : ''}`}
         />
     );
 };
 
 export const LeftShortcut4 = (): JSX.Element => {
+    if (!hasCommand(left.shortcut4)) {
+        return <box />;
+    }
+
     return <ShortcutButton shortcut={left.shortcut4} className={`dashboard-button `} />;
 };
 
 export const RightShortcut1 = (): JSX.Element => {
+    if (!hasCommand(right.shortcut1)) {
+        return <box />;
+    }
+
     return <ShortcutButton shortcut={right.shortcut1} className={`dashboard-button top-button paired`} />;
 };
 
 export const RightShortcut3 = (): JSX.Element => {
+    if (!hasCommand(right.shortcut3)) {
+        return <box />;
+    }
+
     return <ShortcutButton shortcut={right.shortcut3} className={`dashboard-button top-button paired`} />;
 };