styling PageAlertStatus

packages/app/src/components/PageStatusAlert.module.scss

@@ -0,0 +1,40 @@
+@use '~/styles/variables' as var;
+@use '~/styles/bootstrap/init' as bs;
+
+.grw-page-status-alert :global {
+  $margin-bottom: var.$grw-navbar-bottom-height + 10px;
+
+  box-shadow: 0px 2px 4px #0000004d;
+  opacity: 0.9;
+
+  @include bs.media-breakpoint-down(sm) {
+    margin: 0 10px $margin-bottom;
+
+    .grw-card-label-container {
+      text-align: center;
+    }
+    .grw-card-btn-container {
+      text-align: center;
+
+      .btn {
+        @include bs.button-size(bs.$btn-padding-y-lg, bs.$btn-padding-x-lg, bs.$btn-font-size-lg, bs.$btn-line-height-lg, bs.$btn-border-radius-lg);
+      }
+    }
+  }
+
+  @include bs.media-breakpoint-up(md) {
+    width: 700px;
+    margin: 0 auto $margin-bottom;
+
+    .card-body {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .grw-card-label-container,
+    .grw-card-btn-container {
+      margin: 0;
+    }
+  }
+}

packages/app/src/components/PageStatusAlert.tsx

@@ -11,6 +11,8 @@ import { useSWRxCurrentPage } from '~/stores/page';
 import { useRemoteRevisionBody, useRemoteRevisionId } from '~/stores/remote-latest-page';
 import { useGlobalSocket } from '~/stores/websocket';
 
+import styles from './PageStatusAlert.module.scss';
+
 type AlertComponentContents = {
   additionalClasses: string[],
   label: JSX.Element,
@@ -199,7 +201,7 @@ export const PageStatusAlert = (): JSX.Element => {
   const { additionalClasses, label, btn } = alertComponentContents;
 
   return (
-    <div className={`card grw-page-status-alert text-white fixed-bottom animated fadeInUp faster ${additionalClasses.join(' ')}`}>
+    <div className={`${styles['grw-page-status-alert']} card text-white fixed-bottom animated fadeInUp faster ${additionalClasses.join(' ')}`}>
       <div className="card-body">
         <p className="card-text grw-card-label-container">
           {label}

packages/app/src/styles/_page.scss

@@ -41,41 +41,3 @@
     line-height: 1;
   }
 }
-
-.card.grw-page-status-alert {
-  $margin-bottom: $grw-navbar-bottom-height + 10px;
-
-  box-shadow: 0px 2px 4px #0000004d;
-  opacity: 0.9;
-
-  @include media-breakpoint-down(sm) {
-    margin: 0 10px $margin-bottom;
-
-    .grw-card-label-container {
-      text-align: center;
-    }
-    .grw-card-btn-container {
-      text-align: center;
-
-      .btn {
-        @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
-      }
-    }
-  }
-
-  @include media-breakpoint-up(md) {
-    width: 700px;
-    margin: 0 auto $margin-bottom;
-
-    .card-body {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-
-    .grw-card-label-container,
-    .grw-card-btn-container {
-      margin: 0;
-    }
-  }
-}