apply styles to ShortcutsModal

packages/app/src/styles/_shortcuts.scss → packages/app/src/components/ShortcutsModal.scss

@@ -1,3 +1,5 @@
+@use '~/styles/bootstrap/init' as bs;
+
 #shortcuts-modal {
   h3 {
     margin-bottom: 1em;
@@ -12,7 +14,7 @@
     }
   }
 
-  @include media-breakpoint-up(sm) {
+  @include bs.media-breakpoint-up(sm) {
     table {
       table-layout: fixed;
       th {
@@ -30,7 +32,7 @@
     margin: 0px 4px;
     /*Text Properties*/
     font: 18px/36px Helvetica, serif;
-    color: $secondary;
+    color: bs.$secondary;
     text-align: center;
     text-transform: uppercase;
     background: white;
@@ -38,7 +40,7 @@
     box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.5);
     /* SVG Properties*/
     polygon {
-      fill: $secondary;
+      fill: bs.$secondary;
     }
 
     &.key-longer {

packages/app/src/components/ShortcutsModal.tsx

@@ -6,6 +6,9 @@ import { Modal, ModalHeader, ModalBody } from 'reactstrap';
 import KeyboardReturnEnterIcon from '~/components/Icons/KeyboardReturnEnterIcon';
 import { useShortcutsModal } from '~/stores/modal';
 
+import './ShortcutsModal.scss';
+
+
 const ShortcutsModal = (): JSX.Element => {
   const { t } = useTranslation();
 
@@ -63,33 +66,33 @@ const ShortcutsModal = (): JSX.Element => {
                           {/* eslint-disable-next-line react/no-danger */}
                           <span dangerouslySetInnerHTML={{ __html: t('modal_shortcuts.global.Show Contributors') }} />:
                         </th>
-                        <td>
+                        <td className='text-nowrap'>
                           <a href="{ t('modal_shortcuts.global.konami_code_url') }" target="_blank">
                             {t('modal_shortcuts.global.Konami Code')}
                           </a>
                           <br />
                           <span className="key key-small">&uarr;</span>&nbsp;<span className="key key-small">&uarr;</span>
                           <span className="key key-small">&darr;</span>&nbsp;<span className="key key-small">&darr;</span>
-                          <span className="key key-small">&larr;</span>
                           <br />
-                          <span className="key key-small">&rarr;</span>
                           <span className="key key-small">&larr;</span>&nbsp;<span className="key key-small">&rarr;</span>
+                          <span className="key key-small">&larr;</span>&nbsp;<span className="key key-small">&rarr;</span>
+                          <br />
                           <span className="key key-small">B</span>&nbsp;<span className="key key-small">A</span>
                         </td>
                       </tr>
                       <tr>
                         <th>{t('modal_shortcuts.global.MirrorMode')}:</th>
-                        <td>
+                        <td className='text-nowrap'>
                           <a href="{ t('modal_shortcuts.global.konami_code_url') }" target="_blank">
                             {t('modal_shortcuts.global.Konami Code')}
                           </a>
                           <br />
                           <span className="key key-small">X</span>&nbsp;<span className="key key-small">X</span>
                           <span className="key key-small">B</span>&nbsp;<span className="key key-small">B</span>
-                          <span className="key key-small">A</span>
                           <br />
-                          <span className="key key-small">Y</span>
                           <span className="key key-small">A</span>&nbsp;<span className="key key-small">Y</span>
+                          <span className="key key-small">A</span>&nbsp;<span className="key key-small">Y</span>
+                          <br />
                           <span className="key key-small">&darr;</span>&nbsp;<span className="key key-small">&larr;</span>
                         </td>
                       </tr>