From 84f62c198d18cdc461cdcedc66df2e9a9c95b0d3 Mon Sep 17 00:00:00 2001
From: Miquel de Domingo <miquelddg@gmail.com>
Date: Sun, 13 Aug 2023 17:07:10 +0200
Subject: [PATCH] feat: added dark theme in landing

---
 .eslintrc.json                                |  3 ++-
 .../components/menu/options/dark-menu.tsx     |  3 ++-
 src/apps/editor/stores/index.ts               |  1 -
 .../landing/components/dark-mode/index.tsx    | 23 +++++++++++++++++++
 src/apps/landing/components/footer/footer.tsx | 22 ++++++++++--------
 src/apps/landing/components/nav/nav.tsx       |  3 +++
 src/libs/chain/index.ts                       |  1 +
 .../stores => libs/chain}/use-theme-mode.ts   |  0
 tsconfig.json                                 |  3 ++-
 9 files changed, 46 insertions(+), 13 deletions(-)
 create mode 100644 src/apps/landing/components/dark-mode/index.tsx
 create mode 100644 src/libs/chain/index.ts
 rename src/{apps/editor/stores => libs/chain}/use-theme-mode.ts (100%)

diff --git a/.eslintrc.json b/.eslintrc.json
index bd91a0e..ebe7148 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -87,7 +87,8 @@
         "@/editor/": "./src/apps/editor",
         "@/landing/": "./src/apps/landing",
         "@/aero": "./src/libs/aero/index.ts",
-        "@/pulse": "./src/libs/pulse/index.ts"
+        "@/pulse": "./src/libs/pulse/index.ts",
+        "@/chain": "./src/libs/chain/index.ts"
       },
       "node": {
         "extensions": [".ts", ".tsx"],
diff --git a/src/apps/editor/components/menu/options/dark-menu.tsx b/src/apps/editor/components/menu/options/dark-menu.tsx
index c29896f..483acc4 100644
--- a/src/apps/editor/components/menu/options/dark-menu.tsx
+++ b/src/apps/editor/components/menu/options/dark-menu.tsx
@@ -2,7 +2,8 @@ import { MoonIcon } from '@primer/octicons-react';
 import React, { useEffect } from 'react';
 
 import { IconButton } from '@/aero';
-import { useFeatureSwitch, useThemeMode } from '@/editor/stores';
+import { useThemeMode } from '@/chain';
+import { useFeatureSwitch } from '@/editor/stores';
 
 export const DarkThemeMenuOption: React.FC = () => {
   const { fsDarkTheme } = useFeatureSwitch('fsDarkTheme');
diff --git a/src/apps/editor/stores/index.ts b/src/apps/editor/stores/index.ts
index 4dfdaf0..c048035 100644
--- a/src/apps/editor/stores/index.ts
+++ b/src/apps/editor/stores/index.ts
@@ -1,3 +1,2 @@
 export * from './global-state';
 export * from './use-horizontal-notifier';
-export * from './use-theme-mode';
diff --git a/src/apps/landing/components/dark-mode/index.tsx b/src/apps/landing/components/dark-mode/index.tsx
new file mode 100644
index 0000000..29847eb
--- /dev/null
+++ b/src/apps/landing/components/dark-mode/index.tsx
@@ -0,0 +1,23 @@
+import { MoonIcon } from '@primer/octicons-react';
+import React from 'react';
+
+import { IconButton } from '@/aero';
+import { useThemeMode } from '@/chain';
+
+export const DarkModeToggler = () => {
+  const { mode, onToggleMode } = useThemeMode();
+
+  const handleOnClick = () => {
+    onToggleMode();
+  };
+
+  return (
+    <IconButton
+      className="!p-2 ml-auto"
+      selected={mode === 'dark'}
+      onClick={handleOnClick}
+    >
+      <MoonIcon />
+    </IconButton>
+  );
+};
diff --git a/src/apps/landing/components/footer/footer.tsx b/src/apps/landing/components/footer/footer.tsx
index ac995fe..e32a5f2 100644
--- a/src/apps/landing/components/footer/footer.tsx
+++ b/src/apps/landing/components/footer/footer.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { Grid, VCol } from '@/aero';
 
 const Link = ({ text, href }: { text: string; href: string }) => (
-  <p className="text-primary-foreground">
+  <p className="text-mutedforeground">
     <a className="hover:underline" href={href}>
       {text}
     </a>
@@ -11,12 +11,16 @@ const Link = ({ text, href }: { text: string; href: string }) => (
 );
 
 export const Footer: React.FC = () => (
-  <footer className="bg-primary mt-4 md:mt-12 px-12 py-8">
-    <Grid container size={12} className="w-full mb-12 md:mb-16">
-      <Grid item columns={1} />
-      <Grid item columns={5} md={4}>
+  <footer className="bg-muted mt-4 md:mt-12 px-12 py-8">
+    <Grid
+      container
+      size={12}
+      className="w-full max-w-5xl mx-auto mb-12 md:mb-16"
+      rowGap="lg"
+    >
+      <Grid item columns={12} sm={6} md={4}>
         <VCol variant="sm">
-          <h4 className="text-primary-foreground font-semibold text-lg mb-2">
+          <h4 className="text-mutedforeground font-semibold text-lg mb-2">
             Links
           </h4>
           <Link text="Github @mikededo" href="https://github.com/mikededo" />
@@ -26,9 +30,9 @@ export const Footer: React.FC = () => (
           />
         </VCol>
       </Grid>
-      <Grid item columns={5} md={4}>
+      <Grid item columns={12} sm={6} md={4}>
         <VCol variant="sm">
-          <h4 className="text-primary-foreground font-semibold text-lg mb-2">
+          <h4 className="text-mutedforeground font-semibold text-lg mb-2">
             Special thanks
           </h4>
           <Link text="Vercel" href="https://vercel.com" />
@@ -37,7 +41,7 @@ export const Footer: React.FC = () => (
         </VCol>
       </Grid>
     </Grid>
-    <p className="text-primary-foreground text-center w-full">
+    <p className="text-mutedforeground text-center w-full">
       Miquel de Domingo @mikededo {new Date().getFullYear()}
     </p>
   </footer>
diff --git a/src/apps/landing/components/nav/nav.tsx b/src/apps/landing/components/nav/nav.tsx
index 8d8f007..ed00b66 100644
--- a/src/apps/landing/components/nav/nav.tsx
+++ b/src/apps/landing/components/nav/nav.tsx
@@ -2,6 +2,8 @@ import React from 'react';
 
 import { Row } from '@/aero';
 
+import { DarkModeToggler } from '../dark-mode';
+
 export const Nav: React.FC = () => (
   <Row
     as="nav"
@@ -17,5 +19,6 @@ export const Nav: React.FC = () => (
     <p className="self-center text-sm uppercase font-semibold">
       🚧 This page is still under construction 🚧
     </p>
+    <DarkModeToggler />
   </Row>
 );
diff --git a/src/libs/chain/index.ts b/src/libs/chain/index.ts
new file mode 100644
index 0000000..392ce56
--- /dev/null
+++ b/src/libs/chain/index.ts
@@ -0,0 +1 @@
+export { useThemeMode } from './use-theme-mode';
diff --git a/src/apps/editor/stores/use-theme-mode.ts b/src/libs/chain/use-theme-mode.ts
similarity index 100%
rename from src/apps/editor/stores/use-theme-mode.ts
rename to src/libs/chain/use-theme-mode.ts
diff --git a/tsconfig.json b/tsconfig.json
index ca7f1aa..34dd10e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -24,7 +24,8 @@
       "@/editor/*": ["./src/apps/editor/*"],
       "@/landing/*": ["./src/apps/landing/*"],
       "@/aero": ["./src/libs/aero/index.ts"],
-      "@/pulse": ["./src/libs/pulse/index.ts"]
+      "@/pulse": ["./src/libs/pulse/index.ts"],
+      "@/chain": ["./src/libs/chain/index.ts"]
     },
     "allowJs": true,
     "forceConsistentCasingInFileNames": true,