Docs: New version modal modularise CSS

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/11004
GitOrigin-RevId: 2b28dcbe295765e228caec4e573886fb051cb0da

docs/src/components/NewVersionModal/NewVersionModal.module.css

@@ -1,4 +1,4 @@
-.new-version-modal {
+.newVersionModal {
     position: fixed;
     top: 0;
     left: 0;
@@ -8,50 +8,52 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    z-index: 9999; /* Ensure it appears above other elements */
+    z-index: 9999;
 }
 
-.display-block {
+.displayNone {
-    display: flex; /* Change to flex to use flex properties */
-}
-
-.display-none {
     display: none;
 }
 
-.new-version-modal .modal-main {
+.modalMain {
+    position: relative;
     background: white;
     padding: 50px;
     border-radius: 8px;
     max-width: 500px;
     width: 100%;
     text-align: center;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow for better visibility */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
 
 @media (max-width: 600px) {
-    .new-version-modal .modal-main {
+    .modalMain {
         max-width: 90%;
     }
 }
 
-.close-icon {
+.closeIcon {
+    position: absolute;
+    top: 25px;
+    left: 25px;
     cursor: pointer;
-    position: relative;
-    top: -25px;
-    left: -20px;
 }
 
-.monsta-image {
+.monstaImage {
 
 }
 
-.above-headline {
+.aboveHeadline {
     margin-top: 1.3rem;
     font-weight: bold;
     color: var(--ifm-link-color);;
 }
 
+[data-theme='dark'] .bodyText {
+    color: #141c22;
+}
+
+
 .headline {
     display: block;
     font-size: 1.6rem;
@@ -61,15 +63,32 @@
 }
 
 
-.body-text {
+[data-theme='dark'] .headline {
-font-size: .95rem;
+    color: #141c22;
+}
+
+.subhead {
+
+}
+
+[data-theme='dark'] .subhead {
+    color: #141c22;
+}
+
+.bodyText {
+    font-size: .95rem;
     margin-top: 2rem;
     margin-bottom: 2rem;
 }
 
-.cta-thing {
+
+[data-theme='dark'] .bodyText {
+    color: #141c22;
+}
+
+.ctaThing {
     display: block;
- background-color: #21c45c;
+    background-color: #21c45c;
     color: white;
     padding: 10px 20px;
     border-radius: 5px;
@@ -77,20 +96,8 @@ font-size: .95rem;
     margin: 0 auto;
 }
 
-.cta-thing a {
+.ctaThing a {
     color: white;
     font-weight: bold;
     text-decoration: none;
-}
+}
-
-html[data-theme='dark'] {
-    .headline {
-        color: #141c22;
-    }
-    .subhead {
-        color: #141c22;
-    }
-    .body-text {
-        color: #141c22;
-    }
-}

docs/src/components/NewVersionModal/NewVersionModal.tsx

@@ -1,12 +1,13 @@
 import React, { useEffect, useState } from 'react';
-import './NewVersionModal.css';
+import styles from './NewVersionModal.module.css';
 import { useLocalStorage } from 'usehooks-ts';
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+// @ts-ignore
 import monsta from './monsta.png';
 
 export const NewVersionModal = () => {
   const {
-    siteConfig: { customFields },
+    siteConfig: {customFields},
   } = useDocusaurusContext();
 
   const [lastClosed, setLastClosed] = useLocalStorage<number | null>(
@@ -19,7 +20,7 @@ export const NewVersionModal = () => {
   useEffect(() => {
     const currentTime = Date.now();
     const oneWeek = 7 * 24 * 60 * 60 * 1000; // One week in milliseconds
-    // const oneWeek = 60 * 1000; // Temp one minute in milliseconds (for testing)
+    // const oneWeek = 10 * 1000; // Temp 10 seconds in milliseconds (for testing)
 
     if (!lastClosed || (currentTime - lastClosed > oneWeek)) {
       setShowModal(true);
@@ -31,23 +32,23 @@ export const NewVersionModal = () => {
     setShowModal(false);
   };
 
-  const showHideClassName = showModal ? "new-version-modal display-block" : "new-new-version-modal display-none";
-
   return (
-    <div className={showHideClassName} onClick={handleClose}>
+    <div className={showModal ? styles.newVersionModal : styles.displayNone} onClick={handleClose}>
-      <div className="modal-main" onClick={e => e.stopPropagation()}>
+      <div className={styles.modalMain} onClick={e => e.stopPropagation()}>
-        <div className="close-icon" onClick={handleClose}>
+        <div className={styles.closeIcon} onClick={handleClose}>
           <CloseButton/>
         </div>
-        <img className="monsta-image" src={monsta} alt="Hasura Logo"/>
+        <img className={styles.monstaImage} src={monsta} alt="Hasura Logo"/>
-        <p className="above-headline">INTRODUCING</p>
+        <p className={styles.aboveHeadline}>INTRODUCING</p>
-        <h1 className="headline">Hasura Data Delivery Network</h1>
+        <h1 className={styles.headline}>Hasura Data Delivery Network</h1>
-        <h5 className="subhead">The next-generation Hasura platform is here!</h5>
+        <h5 className={styles.subhead}>The next-generation Hasura platform is here!</h5>
-        <p className="body-text">Powerful v3 engine. Reimagined console. Multi-team federation. Simplified custom logic
+        <p className={styles.bodyText}>
-          integration. Enhanced developer experience. And so much more to love!</p>
+          Powerful v3 engine. Reimagined console. Multi-team federation. Simplified custom logic integration. Enhanced developer experience. And so much more to love!</p>
-        <div className="cta-thing"><a target="_blank" rel="noopener noreferrer" href="https://hasura.io/docs/3.0/index/">Check
+        <div className={styles.ctaThing}>
-          out Hasura DDN
+          <a target="_blank" rel="noopener noreferrer" href="https://hasura.io/docs/3.0/index/">
-          docs</a></div>
+            Check out Hasura DDN docs
+          </a>
+        </div>
       </div>
     </div>
   );
@@ -57,8 +58,8 @@ const CloseButton = () => {
   return (
     <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
       <rect width="32" height="32" rx="16" fill="#F3F4F6"></rect>
-      <path d="M21.714 10.286 10.285 21.714m0-11.428 11.429 11.428" stroke="#1F2A37" stroke-width="2"
+      <path d="M21.714 10.286 10.285 21.714m0-11.428 11.429 11.428" stroke="#1F2A37" strokeWidth="2"
-            stroke-linecap="round" stroke-linejoin="round"></path>
+            strokeLinecap="round" strokeLinejoin="round"></path>
     </svg>
   )
 }