- Use reactstrap

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

@@ -2,7 +2,9 @@ import React from 'react';
 import { GlobalHotKeys } from 'react-hotkeys';
 
 import loggerFactory from '@alias/logger';
-import Modal from 'react-bootstrap/es/Modal';
+import {
+  Modal, ModalBody,
+} from 'reactstrap';
 
 import contributors from './Contributor';
 
@@ -97,7 +99,7 @@ export default class StaffCredit extends React.Component {
         );
       });
       return (
-        <div className="text-center credit-curtain" onClick={this.deleteCredit}>
+        <div className="text-center" onClick={this.deleteCredit}>
           <div className="credit-body">
             <h1 className="staff-credit-mb-10">GROWI Contributors</h1>
             <div className="clearfix"></div>
@@ -114,10 +116,10 @@ export default class StaffCredit extends React.Component {
     const handlers = { check: (event) => { return this.check(event) } };
     return (
       <GlobalHotKeys keyMap={keyMap} handlers={handlers}>
-        <Modal show={this.state.isShown} dialogClassName="staff-credit">
-          <Modal.Body scrollable>
+        <Modal isOpen={this.state.isShown} toggle={this.deleteCredit} scrollable className="staff-credit">
+          <ModalBody className="credit-curtain">
             {this.renderContributors()}
-          </Modal.Body>
+          </ModalBody>
         </Modal>
       </GlobalHotKeys>
     );

src/client/styles/scss/_staff_credit.scss

@@ -1,25 +1,14 @@
 // Staff Credit
 .staff-credit {
-  width: 80vw;
-  height: 80vh;
-  .modal-body {
-    width: 80vw;
-    height: 80vh;
-  }
+  // .modal-dialog のスタイルを打ち消すために !important を付ける
+  width: 80vw !important;
+  height: 80vh !important;
+  max-width: initial !important;
   // see https://css-tricks.com/old-timey-terminal-styling/
   @mixin old-timey-terminal-styling() {
     text-shadow: 0 0 10px #c8c8c8;
     background-color: black;
     background-image: radial-gradient(rgba(50, 100, 100, 0.75), black 120%);
-    &::after {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100vw;
-      height: 100vh;
-      content: '';
-      background: repeating-linear-gradient(0deg, rgba(black, 0.15), rgba(black, 0.15) 2px, transparent 2px, transparent 4px);
-    }
   }
 
   font-family: 'Press Start 2P', $basefont1;
@@ -39,35 +28,21 @@
 
   // see https://css-tricks.com/old-timey-terminal-styling/
   .credit-curtain {
-    // position: fixed;
-    // top: 10vh;
-    // left: 20vh;
-    width: 80vw;
-    height: 80vh;
-    // overflow-y: hidden;
-
+    padding-top: 80vh;
     @include old-timey-terminal-styling();
+    &::-webkit-scrollbar {
+      display: none;
+    }
   }
 
   .credit-body {
     position: relative;
-    top: $credit-length;
-    animation-name: Credit;
+    top: 100%;
     // credit duration
     animation-duration: 20s;
     animation-timing-function: linear;
   }
 
-  @keyframes Credit {
-    from {
-      top: 100%;
-    }
-    to {
-      // credit length
-      top: $credit-length;
-    }
-  }
-
   h1 {
     font-size: 3em;
   }