feat(uxcore): dark mode across UX Core + layout/context fixes

next.config.js

@@ -69,7 +69,7 @@ module.exports = withBundleAnalyzer({
               "default-src 'self'",
               `script-src ${scriptSrc}`,
               "style-src 'self' 'unsafe-inline'",
-              "img-src 'self' data: blob: https://lh3.googleusercontent.com https://cdn.discordapp.com https://strapi.keepsimple.io https://staging-strapi.keepsimple.io https://www.google-analytics.com",
+              "img-src 'self' data: blob: https://lh3.googleusercontent.com https://cdn.discordapp.com https://strapi.keepsimple.io https://staging-strapi.keepsimple.io https://www.google-analytics.com https://flagcdn.com",
               "font-src 'self' data:",
               `connect-src ${connectSrc}`,
               "frame-ancestors 'none'",

src/components/LogIn/LogIn.module.scss

@@ -44,34 +44,111 @@
       justify-content: center;
       align-items: center;
       gap: 16px;
+      transition:
+        transform 0.15s ease,
+        box-shadow 0.15s ease,
+        filter 0.15s ease;
+
       svg {
         width: 24px;
         height: 24px;
       }
+
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow:
+          0px 6px 10px rgba(0, 0, 0, 0.18),
+          0px 2px 4px rgba(0, 0, 0, 0.1);
+        filter: brightness(1.05);
+      }
+
+      &:active {
+        transform: translateY(0);
+        box-shadow:
+          0px 1px 2px rgba(0, 0, 0, 0.2) inset,
+          0px 1px 1px rgba(0, 0, 0, 0.08);
+        filter: brightness(0.95);
+        transition-duration: 0.05s;
+      }
+
+      &:focus-visible {
+        outline: 2px solid #b83232;
+        outline-offset: 2px;
+      }
     }
     .googleBtn {
       background-color: #fff;
       color: #0000008a;
+
+      &:hover {
+        background-color: #f7f7f7;
+      }
     }
     .discordBtn {
       background-color: #5865f2;
       color: white;
+
+      &:hover {
+        background-color: #4854e0;
+      }
     }
     .linkedinBtn {
       background-color: #0177b5;
       color: white;
+
+      &:hover {
+        background-color: #015d8d;
+      }
     }
     .twitterBtn {
       background-color: #000;
       color: white;
+
+      &:hover {
+        background-color: #1a1a1a;
+      }
     }
     .mailruBtn {
       background-color: #168de2;
       color: white;
+
+      &:hover {
+        background-color: #1078c0;
+      }
     }
     .yandexBtn {
       background-color: #fc3f1d;
       color: white;
+
+      &:hover {
+        background-color: #e0331a;
+      }
+    }
+  }
+}
+
+// Dark theme: flip the heading / subtitle to read on the dark modal bg.
+// The brand-colored provider buttons stay as-is; only the Google button
+// (white bg + dark text) gets a slight border so it doesn't blow out
+// against the dark surface.
+:global(body.darkTheme) .container {
+  .heading h3 {
+    color: #dadada !important;
+  }
+
+  .text {
+    color: rgba(218, 218, 218, 0.75);
+  }
+
+  .errorBanner {
+    background: rgba(180, 35, 24, 0.15);
+    border-color: rgba(245, 194, 199, 0.4);
+    color: #f5c2c7;
+  }
+
+  .btnWrapper {
+    .googleBtn {
+      border: 1px solid #303338;
     }
   }
 }

src/components/LogIn/MagicLinkEmailForm/MagicLinkEmailForm.module.scss

@@ -134,3 +134,60 @@
   margin: 0;
   text-align: center;
 }
+
+// Dark theme: flip the "OR SIGN IN WITH EMAIL" divider, label, email
+// input, submit button, banner and confirmation block.
+:global(body.darkTheme) {
+  .divider {
+    color: rgba(218, 218, 218, 0.55);
+
+    &::before,
+    &::after {
+      background: #303338;
+    }
+  }
+
+  .label {
+    color: #dadada;
+  }
+
+  .input {
+    background: #151a26;
+    border-color: #303338;
+    color: #dadada;
+
+    &::placeholder {
+      color: rgba(218, 218, 218, 0.45);
+    }
+
+    &:focus {
+      border-color: #b83232;
+    }
+  }
+
+  .submit {
+    color: #dadada;
+    border-color: #303338;
+    background: transparent;
+
+    &:hover:not(:disabled) {
+      border-color: #b83232;
+      color: #ff8a8a;
+    }
+  }
+
+  .confirmation,
+  .banner {
+    background: rgba(127, 179, 213, 0.08);
+    border-color: #303338;
+    color: rgba(218, 218, 218, 0.85);
+  }
+
+  .confirmationHeading {
+    color: #dadada;
+  }
+
+  .confirmationBody {
+    color: rgba(218, 218, 218, 0.75);
+  }
+}

src/components/Modal/Modal.module.scss

@@ -36,6 +36,11 @@
     z-index: 80;
     border-radius: 4px;
     background-image: url('/keepsimple_/assets/landingPage/landing-bg.webp');
+    // Constrain wrapper height so a tall children tree (e.g. Log In with
+    // six providers + email form) does not push the modal above and below
+    // the viewport. Body has `overflow: auto`, so content scrolls inside.
+    max-height: calc(100dvh - 32px);
+    overflow: hidden;
 
     .header {
       .hadBorder {
@@ -146,6 +151,26 @@
     .body {
       padding: 16px 28px;
       overflow: auto;
+      // Take remaining flex space and allow shrinking below content so
+      // overflow: auto can engage when wrapper is bounded by max-height.
+      flex: 1 1 auto;
+      min-height: 0;
+
+      // Slim scrollbar to match the rest of the site (default white/wide
+      // browser scrollbar is jarring inside the modal chrome).
+      scrollbar-width: thin;
+      scrollbar-color: rgba(40, 88, 123, 0.4) transparent;
+
+      &::-webkit-scrollbar {
+        width: 6px;
+      }
+      &::-webkit-scrollbar-track {
+        background: transparent;
+      }
+      &::-webkit-scrollbar-thumb {
+        background: rgba(40, 88, 123, 0.4);
+        border-radius: 5px;
+      }
     }
   }
 
@@ -293,3 +318,41 @@
     transform: scale(0.97) translateY(8px);
   }
 }
+
+// Dark theme: re-skin the keepsimple modal chrome (wrapper bg, title,
+// header dividers, close-icon SVGs). The wrapper carries a paper-texture
+// background image on light theme — clear it out so the dark bg reads
+// cleanly.
+:global(body.darkTheme) .overlay {
+  background-color: rgba(0, 0, 0, 0.55);
+
+  .wrapper {
+    background-color: #1b1e26;
+    background-image: none;
+    border: 1px solid #303338;
+
+    .body {
+      scrollbar-color: rgba(127, 179, 213, 0.4) transparent;
+
+      &::-webkit-scrollbar-thumb {
+        background: rgba(127, 179, 213, 0.4);
+      }
+    }
+  }
+
+  .header {
+    .title,
+    .blackTitle,
+    .grayTitle {
+      color: #dadada;
+    }
+
+    .grayTitle {
+      color: rgba(218, 218, 218, 0.55);
+    }
+  }
+
+  .hasBorder {
+    border-bottom-color: #303338;
+  }
+}

src/hooks/useGlobals.ts

@@ -36,6 +36,30 @@ const reducer = (newState: any) => {
 
 /* ACTIONS */
 
+// Cross-realm theme sync. The keepsimple side and the UX Core side each
+// ship their own copy of useGlobals (separate module state, separate
+// listener arrays). They share the same localStorage key + body class, so
+// persistence is fine — but in-memory state diverges when the user toggles
+// in one realm and navigates to the other. To keep them in lockstep
+// within a single tab we dispatch a window event on every toggle; both
+// realms subscribe and mirror the new value into their own state.
+const DARK_THEME_EVENT = 'darktheme:change';
+
+if (typeof window !== 'undefined') {
+  window.addEventListener(DARK_THEME_EVENT, (e: Event) => {
+    const next = !!(e as CustomEvent).detail?.isDarkTheme;
+    if (state.isDarkTheme !== next) {
+      // Side effects (body class, articleRef class, localStorage) are
+      // already applied by the dispatcher; we only mirror state so this
+      // realm's listeners re-render with the new value.
+      if (state.articleRef) {
+        state.articleRef.classList.toggle('darkTheme', next);
+      }
+      reducer({ isDarkTheme: next });
+    }
+  });
+}
+
 // dark theme action
 const toggleIsDarkTheme = () => {
   const newThemeState = !state.isDarkTheme;
@@ -45,6 +69,11 @@ const toggleIsDarkTheme = () => {
     state.articleRef.classList.toggle('darkTheme', newThemeState);
   }
   reducer({ isDarkTheme: newThemeState });
+  window.dispatchEvent(
+    new CustomEvent(DARK_THEME_EVENT, {
+      detail: { isDarkTheme: newThemeState },
+    }),
+  );
 };
 
 // sidebar action
@@ -130,14 +159,15 @@ const initUseGlobals = (articleRef: HTMLElement) => {
   // Init articleRef
   setArticleRef(articleRef);
 
-  // Dark theme
+  // Dark theme — apply localStorage value unconditionally (true OR false)
+  // so navigation between realms always re-syncs in-memory state.
   const isDarkTheme = localStorage.getItem('darkTheme') === 'true';
-  if (isDarkTheme) {
-    document.body.classList.add('darkTheme');
-    if (articleRef) {
-      articleRef.classList.add('darkTheme');
-    }
-    reducer({ isDarkTheme: true });
+  document.body.classList.toggle('darkTheme', isDarkTheme);
+  if (articleRef) {
+    articleRef.classList.toggle('darkTheme', isDarkTheme);
+  }
+  if (state.isDarkTheme !== isDarkTheme) {
+    reducer({ isDarkTheme });
   }
 
   window.addEventListener('resize', handleSidebarChanges);

src/pages/_app.tsx

@@ -22,7 +22,6 @@ import { LongevityProvider, useLongevity } from '../context/LongevityContext';
 import '../styles/globals.scss';
 import '../styles/vibesuite.scss';
 import '../styles/ai-atlas.css';
-import '../uxcore/styles/uxcore-fonts.scss';
 // import '../styles/tom.scss';
 
 type TApp = {
@@ -122,6 +121,19 @@ function AppContent({ Component, pageProps: { session, ...pageProps } }: TApp) {
     });
   }, []);
 
+  // Cold-load dark-theme bootstrap: not every route calls initUseGlobals
+  // on mount (e.g. /uxcore, /uxcg). Read the persisted flag once at the
+  // app root so dark theme applies on any deep-link, and dispatch the
+  // cross-realm sync event so both useGlobals stores see the value.
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    const isDarkTheme = localStorage.getItem('darkTheme') === 'true';
+    document.body.classList.toggle('darkTheme', isDarkTheme);
+    window.dispatchEvent(
+      new CustomEvent('darktheme:change', { detail: { isDarkTheme } }),
+    );
+  }, []);
+
   useEffect(() => {
     initUseMobile();