Merge branch 'imprv/23-24-change-staff-credit-to-on-bootstrap-modal' into imprv/imprv/23-24-change-staff-credit-to-on-bootstrap-modal-for-bootstra4

src/client/js/components/StaffCredit/StaffCredit.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { GlobalHotKeys } from 'react-hotkeys';
 
 import loggerFactory from '@alias/logger';
+import Modal from 'react-bootstrap/es/Modal';
 
 import contributors from './Contributor';
 
@@ -113,7 +114,11 @@ export default class StaffCredit extends React.Component {
     const handlers = { check: (event) => { return this.check(event) } };
     return (
       <GlobalHotKeys keyMap={keyMap} handlers={handlers}>
-        {this.renderContributors()}
+        <Modal show={this.state.isShown} dialogClassName="staff-credit">
+          <Modal.Body scrollable>
+            {this.renderContributors()}
+          </Modal.Body>
+        </Modal>
       </GlobalHotKeys>
     );
   }

src/client/styles/scss/_staff_credit.scss

@@ -1,5 +1,11 @@
 // Staff Credit
-#staff-credit {
+.staff-credit {
+  width: 80vw;
+  height: 80vh;
+  .modal-body {
+    width: 80vw;
+    height: 80vh;
+  }
   // see https://css-tricks.com/old-timey-terminal-styling/
   @mixin old-timey-terminal-styling() {
     text-shadow: 0 0 10px #c8c8c8;
@@ -33,12 +39,12 @@
 
   // see https://css-tricks.com/old-timey-terminal-styling/
   .credit-curtain {
-    position: fixed;
-    top: 10vh;
-    left: 20vh;
+    // position: fixed;
+    // top: 10vh;
+    // left: 20vh;
     width: 80vw;
     height: 80vh;
-    overflow-y: hidden;
+    // overflow-y: hidden;
 
     @include old-timey-terminal-styling();
   }