Fix styling of hotkeys modal

app/gabsocial/features/ui/components/hotkeys_modal.js

@@ -21,12 +21,11 @@ class HotkeysModal extends ImmutablePureComponent {
 
     return (
       <div className='modal-root__modal hotkeys-modal'>
-        <div className='keyboard-shortcuts'>
+        <div className='compose-modal__header'>
-          <div className='keyboard-shortcuts__header'>
+          <h3 className='compose-modal__header__title'><FormattedMessage id='keyboard_shortcuts.heading' defaultMessage='Keyboard shortcuts' /></h3>
-            <h3 className='keyboard-shortcuts__header__title'><FormattedMessage id='keyboard_shortcuts.heading' defaultMessage='Keyboard shortcuts' /></h3>
+          <IconButton className='compose-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={20} />
-            <IconButton className='keyboard-shortcuts__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={20} />
         </div>
-          <div className='keyboard-shortcuts__content'>
+        <div className='compose-modal__content'>
           <table>
             <thead>
               <tr>
@@ -164,7 +163,6 @@ class HotkeysModal extends ImmutablePureComponent {
           </table>
         </div>
       </div>
-      </div>
     );
   }
 

app/styles/application.scss

@@ -31,6 +31,7 @@
 @import 'gabsocial/components/group-form';
 @import 'gabsocial/components/group-sidebar-panel';
 @import 'gabsocial/components/sidebar-menu';
+@import 'gabsocial/components/hotkeys-modal';
 
 @import 'gabsocial/polls';
 @import 'gabsocial/introduction';

app/styles/gabsocial/components.scss

@@ -2114,84 +2114,6 @@ a.account__display-name {
 	}
 }
 
-.keyboard-shortcuts {
-	padding: 8px 0 0;
-	overflow: hidden;
-	background-color: $classic-base-color;
-	border-radius: 6px;
-
-	@media screen and (max-width: 960px) {
-		height: 90vh;
-	}
-
-	&__header {
-		display: block;
-		position: relative;
-		border-bottom: 1px solid lighten($classic-base-color, 8%);
-		border-radius: 6px 6px 0 0;
-		padding-top: 12px;
-		padding-bottom: 12px;
-
-		&__title {
-			display: block;
-			width: 80%;
-			margin: 0 auto;
-			font-size: 18px;
-			font-weight: bold;
-			line-height: 24px;
-			color: $primary-text-color;
-			text-align: center;
-		}
-	}
-
-	&__close {
-	position: absolute;
-	right: 10px;
-	top: 10px;
-	}
-
-	&__content {
-		display: flex;
-		flex-direction: row;
-		padding: 15px;
-
-		@media screen and (max-width: 960px) {
-			flex-direction: column;
-			overflow: hidden;
-		overflow-y: scroll;
-		height: calc(100% - 80px);
-			-webkit-overflow-scrolling: touch;
-		}
-	}
-
-	table {
-		thead {
-			display: block;
-			padding-left: 10px;
-			margin-bottom: 10px;
-			color: $primary-text-color;
-			font-size: 16px;
-			font-weight: 600;
-		}
-
-		tr {
-			font-size: 12px;
-		}
-
-		td {
-			padding: 0 10px 8px;
-		}
-
-		kbd {
-			display: inline-block;
-			padding: 2px 8px;
-			background-color: lighten($ui-base-color, 8%);
-			border: 1px solid darken($ui-base-color, 4%);
-			border-radius: 4px;
-		}
-	}
-}
-
 .setting-text {
 	color: $darker-text-color;
 	background: transparent;

app/styles/gabsocial/components/hotkeys-modal.scss

@@ -0,0 +1,51 @@
+.hotkeys-modal {
+  padding: 8px 0 0;
+  overflow: hidden;
+  background-color: $classic-base-color;
+  border-radius: 6px;
+  flex-direction: column;
+
+  @media screen and (max-width: 960px) {
+    height: 90vh;
+  }
+
+  .compose-modal__content {
+    background-color: $gab-background-base-light;
+    margin: 5px;
+
+    @media screen and (max-width: 960px) {
+      flex-direction: column;
+      overflow: hidden;
+      overflow-y: scroll;
+      height: calc(100% - 80px);
+      -webkit-overflow-scrolling: touch;
+    }
+  }
+
+  table {
+    thead {
+      display: block;
+      padding-left: 10px;
+      margin-bottom: 10px;
+      color: $primary-text-color;
+      font-size: 16px;
+      font-weight: 600;
+    }
+
+    tr {
+      font-size: 12px;
+    }
+
+    td {
+      padding: 0 10px 8px;
+    }
+
+    kbd {
+      display: inline-block;
+      padding: 2px 8px;
+      background-color: lighten($ui-base-color, 8%);
+      border: 1px solid darken($ui-base-color, 4%);
+      border-radius: 4px;
+    }
+  }
+}