fix styles

packages/app/src/components/StaffCredit/StaffCredit.jsx

@@ -9,6 +9,9 @@ import { apiv3Get } from '~/client/util/apiv3-client';
 import loggerFactory from '~/utils/logger';
 
 
+import styles from './StaffCredit.module.scss';
+
+
 /**
  * Page staff credit component
  *
@@ -92,20 +95,20 @@ class StaffCredit extends React.Component {
     const contributors = res.data.contributors;
     this.setState({ contributors });
 
-    setTimeout(() => {
-      // px / sec
-      const scrollSpeed = 200;
-      const target = $('.credit-curtain');
-      const scrollTargetHeight = target.children().innerHeight();
-      const duration = scrollTargetHeight / scrollSpeed * 1000;
-      target.animate({ scrollTop: scrollTargetHeight }, duration, 'linear');
-      target.slimScroll({
-        height: target.innerHeight(),
-        // Able to scroll after automatic schooling is complete so set "bottom" to allow scrolling from the bottom.
-        start: 'bottom',
-        color: '#FFFFFF',
-      });
-    }, 10);
+    // setTimeout(() => {
+    //   // px / sec
+    //   const scrollSpeed = 200;
+    //   const target = $('.credit-curtain');
+    //   const scrollTargetHeight = target.children().innerHeight();
+    //   const duration = scrollTargetHeight / scrollSpeed * 1000;
+    //   target.animate({ scrollTop: scrollTargetHeight }, duration, 'linear');
+    //   target.slimScroll({
+    //     height: target.innerHeight(),
+    //     // Able to scroll after automatic schooling is complete so set "bottom" to allow scrolling from the bottom.
+    //     start: 'bottom',
+    //     color: '#FFFFFF',
+    //   });
+    // }, 10);
   }
 
   render() {
@@ -125,11 +128,12 @@ class StaffCredit extends React.Component {
         }}
         toggle={this.deleteCredit}
         scrollable
-        className="staff-credit"
+        className={`staff-credit ${styles['staff-credit']}`}
       >
         <ModalBody className="credit-curtain">
           {this.renderContributors()}
         </ModalBody>
+        <div className="background"></div>
       </Modal>
     );
   }

packages/app/src/styles/_staff_credit.scss → packages/app/src/components/StaffCredit/StaffCredit.module.scss

@@ -1,5 +1,5 @@
 // Staff Credit
-.staff-credit {
+.staff-credit :global {
   // attached !important for updating from .modal-dialog class style
   width: 80vw !important;
   max-width: unset !important;
@@ -17,13 +17,14 @@
     background-color: black;
     background-image: radial-gradient(rgba(50, 100, 100, 0.75), black 120%);
   }
-  &::after {
+
+  .background {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    content: '';
+    pointer-events: none;
     background: repeating-linear-gradient(0deg, rgba(black, 0.15), rgba(black, 0.15) 2px, transparent 2px, transparent 4px);
   }
 
@@ -35,7 +36,7 @@
   h6,
   .dev-position,
   .dev-name {
-    font-family: 'Press Start 2P', $font-family-for-staff-credit;
+    font-family: 'Press Start 2P', Lato, -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
     color: white;
   }
 

packages/app/src/styles/_variables.scss

@@ -9,7 +9,6 @@ $grw-marker-blue: #6cf;
 $grw-marker-cyan: #6ff;
 $grw-marker-green: #6f6;
 
-$font-family-for-staff-credit: Lato, -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif !default;
 $font-family-monospace-not-strictly: Monaco, Menlo, Consolas, 'Courier New', MeiryoKe_Gothic, monospace;
 
 //== Layout

packages/app/src/styles/style-next.scss

@@ -69,7 +69,6 @@
 @import 'tag';
 // @import 'toc';
 // @import 'user';
-// @import 'staff_credit';
 // @import 'waves';
 @import 'wiki';
 // @import 'sharelink';