Theme Switch

fisirc · Nov 29, 2024 · 21f949d · 21f949d
1 parent 863a819
commit 21f949d
Show file tree

Hide file tree

Showing 7 changed files with 88 additions and 37 deletions.
diff --git a/app/src/components/DarkerMode/themeSwitcher.tsx b/app/src/components/DarkerMode/themeSwitcher.tsx
@@ -0,0 +1,31 @@
+import { ActionIcon, Group } from '@mantine/core';
+import { IconSun, IconMoonStars } from '@tabler/icons-react';
+import { useMantineColorScheme } from '@mantine/core';
+
+export const ThemeSwitcher = () => {
+  const { colorScheme, toggleColorScheme } = useMantineColorScheme();
+  const dark = colorScheme === 'dark';
+
+  return (
+    <Group
+      align="center"
+      justify="center" 
+      style={{ marginRight: '1rem' }}
+    >
+      <ActionIcon
+        onClick={() => toggleColorScheme()}
+        size="lg"
+        variant="filled"
+        style={{
+            backgroundColor: dark ? 'white' : 'black', 
+            color: dark ? 'black' : 'white', 
+          }}
+        aria-label="Toggle theme"
+      >
+        {dark ? <IconSun size="1.25rem" /> : <IconMoonStars size="1.25rem" />}
+      </ActionIcon>
+    </Group>
+  );
+};
+
+export default ThemeSwitcher;
diff --git a/app/src/components/NewGalleryButton/index.tsx b/app/src/components/NewGalleryButton/index.tsx
@@ -1,37 +1,38 @@
 import { primaryIconProps } from "@/constants";
 import { NewGalleryForm } from "@/pages/Dashboard/components/NewGalleryForm";
 import { useMetagalleryStore } from "@/providers/MetagalleryProvider";
-import { Button } from "@mantine/core";
+import { Button, Group } from "@mantine/core";
 import { IconSparkles } from "@tabler/icons-react";
+import ThemeSwitcher from "../DarkerMode/themeSwitcher";
 
 export const NewGalleryButton = () => {
   return (
-    <Button
-      variant="primary"
-      onClick={() => {
-        useMetagalleryStore.getState().openModal({
-          id: 'new-gallery-modal',
-          centered: true,
-          withCloseButton: false,
-          size: 'auto',
-          overlayProps: {
-            backgroundOpacity: 0.55,
-            blur: 3,
-          },
-          style: {
-            overflow: 'hidden',
-          },
-          pos: 'relative',
-          child: (
-            <NewGalleryForm modalKey={'new-gallery-modal'} />
-          ),
-        });
-      }}
-      leftSection={(
-        <IconSparkles {...primaryIconProps} />
-      )}
-    >
-      Nueva galería
-    </Button>
+    <Group align="center">
+      <ThemeSwitcher />
+      <Button
+        variant="filled"
+        color="dark"
+        onClick={() => {
+          useMetagalleryStore.getState().openModal({
+            id: 'new-gallery-modal',
+            centered: true,
+            withCloseButton: false,
+            size: 'auto',
+            overlayProps: {
+              backgroundOpacity: 0.55,
+              blur: 3,
+            },
+            style: {
+              overflow: 'hidden',
+            },
+            pos: 'relative',
+            child: <NewGalleryForm modalKey={'new-gallery-modal'} />,
+          });
+        }}
+        leftSection={<IconSparkles {...primaryIconProps} />}
+      >
+        Nueva galería
+      </Button>
+    </Group>
   );
 };
diff --git a/app/src/pages/Dashboard/Dashboard.tsx b/app/src/pages/Dashboard/Dashboard.tsx
@@ -157,7 +157,7 @@ export const GalleryDashboard = () => {
         </div>
       </div>
 
-      <header className={styles.header} style={{ backgroundColor: theme.white }}>
+      <header className={styles.header} style={{ backgroundColor: theme.colors.gray[0] }}>
         <div className={styles.headerContent}>
           <button onClick={toggleSidebar} className={styles.menuButton}>
             <Menu className={styles.menuIcon} />

diff --git a/app/src/pages/Editor/components/ContentSidebar.tsx b/app/src/pages/Editor/components/ContentSidebar.tsx
@@ -192,6 +192,11 @@ const SidebarContent = () => {
               size="sm"
               leftSection={<IconUpload {...primaryIconProps} />}
               {...props}
+              variant="outline"
+              style={{
+                color: 'var(--mantine-color-white-7)',
+                borderColor: 'var(--mantine-color-black-7)',
+              }}
             >
               Añadir contenido
             </Button>

diff --git a/app/src/pages/Editor/components/MainButtons.tsx b/app/src/pages/Editor/components/MainButtons.tsx
@@ -3,6 +3,7 @@ import { Group, Button } from '@mantine/core';
 import { IconShare, IconPlayerPlay, IconPlayerStop } from '@tabler/icons-react';
 import { primaryIconProps } from '@/constants';
 import { DeployModal } from './modals/DeployModal';
+import ThemeSwitcher from '@/components/DarkerMode/themeSwitcher';
 
 type Props = { onPreviewButton: () => void; closePreviewButton: () => void; isPreviewing: boolean };
 
@@ -17,11 +18,11 @@ export const MainButtons = ({ onPreviewButton, closePreviewButton, isPreviewing
     try {
       // const response = await fetch('/api/deploy', { method: 'POST' });
       //if (response.ok) {
-        setModalOpen(false);
-        // confetti(); 
+      setModalOpen(false);
+      // confetti(); 
       //} else {
-        //const errorData = await response.json();
-        //setError(errorData.message || 'Error al desplegar');
+      //const errorData = await response.json();
+      //setError(errorData.message || 'Error al desplegar');
       //}
     } catch (e) {
       setError('No se pudo conectar con el servidor');
@@ -33,9 +34,13 @@ export const MainButtons = ({ onPreviewButton, closePreviewButton, isPreviewing
   return (
     <>
       <Group gap="xs" wrap="nowrap">
+        <ThemeSwitcher />
         <Button
           leftSection={<IconShare {...primaryIconProps} />}
           onClick={() => setModalOpen(true)}
+          color="blue"
+          variant="outline"
+          style={{ color: 'var(--mantine-color-black-7)', borderColor: 'var(--mantine-color-black-7)' }}
         >
           Deploy
         </Button>
@@ -50,7 +55,11 @@ export const MainButtons = ({ onPreviewButton, closePreviewButton, isPreviewing
           </Button>
         ) : (
           <Button
-            variant="primary"
+            variant="outline"
+            style={{
+              color: 'var(--mantine-color-white-7)',
+              borderColor: 'var(--mantine-color-black-7)',
+            }}
             onClick={onPreviewButton}
             leftSection={<IconPlayerPlay {...primaryIconProps} />}
           >

diff --git a/app/src/pages/Home/components/Header.tsx b/app/src/pages/Home/components/Header.tsx
@@ -7,6 +7,7 @@ import { useUser } from '@/stores/useUser';
 import { useMetagalleryStore } from '@/providers/MetagalleryProvider';
 import { useTranslation, Trans } from 'react-i18next';
 import { Grab } from 'lucide-react';
+import ThemeSwitcher from '@/components/DarkerMode/themeSwitcher';
 
 export const Header = () => {
   const { t } = useTranslation();

diff --git a/app/src/pages/Home/index.tsx b/app/src/pages/Home/index.tsx
@@ -2,13 +2,17 @@ import { Footer } from "@/components/Footer/Footer";
 import { Header } from "./components/Header";
 import PricingSection from "./components/PricingCardSection";
 import Switcher from './components/Switcher';
-import { Stack } from '@mantine/core';
+import { Group, Stack } from '@mantine/core';
+import ThemeSwitcher from "@/components/DarkerMode/themeSwitcher";
 
 export const Home = () => (
   <>
     <main>
-      <div style={{ marginTop: '2rem' }}> {/* Espaciado antes del Switcher */}
-        <Switcher />
+    <div style={{ marginTop: '2rem', justifyContent: 'flex-end', display: 'flex',}}>
+        <Group >
+          <Switcher />
+          <ThemeSwitcher />
+        </Group>
       </div>
       <Header />
       <PricingSection />