dark mode

fisirc · Nov 29, 2024 · 5f33a30 · 5f33a30
1 parent 60ac3d6
commit 5f33a30
Show file tree

Hide file tree

Showing 6 changed files with 166 additions and 88 deletions.
diff --git a/app/src/pages/Dashboard/Dashboard.tsx b/app/src/pages/Dashboard/Dashboard.tsx
@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 import { Menu, Search, Plus, Layout, Edit, Copy, Check } from "lucide-react";
 import { Link, useLocation } from "wouter";
-import { Modal, useMantineTheme } from "@mantine/core";
+import { Modal, useMantineColorScheme, useMantineTheme } from "@mantine/core";
 import { NewGalleryForm } from "@/pages/Dashboard/components/NewGalleryForm";
 import { useUser } from "@/stores/useUser";
 import styles from "./GalleryDashboard.module.css";
@@ -76,6 +76,8 @@ const ShareGalleryPopup = ({
 };
 
 export const GalleryDashboard = () => {
+  const { colorScheme } = useMantineColorScheme();
+  const dark = colorScheme === 'dark';
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
   const [sharePopupOpen, setSharePopupOpen] = useState(false);
   const [currentGallerySlug, setCurrentGallerySlug] = useState("");
@@ -126,44 +128,71 @@ export const GalleryDashboard = () => {
   }
 
   return (
-    <div className={styles.container}>
+    <div className={styles.container} style={{ backgroundColor: dark ? 'black' : 'white' }}>
       {isSidebarOpen && (
-        <div className={styles.overlay} onClick={toggleSidebar} />
+        <div
+          className={styles.overlay}
+          onClick={toggleSidebar}
+          style={{
+            backgroundColor: dark ? 'rgba(0, 0, 0, 0.5)' : 'rgba(255, 255, 255, 0.5)',
+          }}
+        />
       )}
       <div
-        className={`${styles.sidebar} ${
-          isSidebarOpen ? styles.sidebarOpen : ""
-        }`}
+        className={`${styles.sidebar} ${isSidebarOpen ? styles.sidebarOpen : ""}`}
+        style={{
+          backgroundColor: dark ? 'black' : 'white',
+          color: dark ? 'white' : 'black',
+        }}
       >
         <div className={styles.sidebarContent}>
           <h2 className={styles.sidebarTitle}>Menú</h2>
           <nav className={styles.sidebarNav}>
-            <button
+          <button
               className={styles.sidebarButton}
               onClick={() => setIsModalOpen(true)}
+              style={{
+                color: showCommunityProjects ? (dark ? 'black' : 'white') : (dark ? 'white' : 'black'),
+              }}
             >
               <Plus className={styles.sidebarIcon} />
               <span>Nueva Galería</span>
             </button>
-            <button className={styles.sidebarButton}>
-              <Layout className={styles.sidebarIcon} />
+            <button
+              className={styles.sidebarButton}
+              style={{
+                color: showCommunityProjects ? (dark ? 'black' : 'white') : (dark ? 'white' : 'black'),
+              }}
+            >
+              <Layout className={styles.sidebarIcon} style={{ color: dark ? 'white' : 'black' }} />
               <span>Desplegar Galería</span>
             </button>
-            <button className={styles.sidebarButton}>
-              <Edit className={styles.sidebarIcon} />
+            <button
+              className={styles.sidebarButton}
+              style={{
+                color: showCommunityProjects ? (dark ? 'black' : 'white') : (dark ? 'white' : 'black'),
+              }}
+            >
+              <Edit className={styles.sidebarIcon} style={{ color: dark ? 'white' : 'black' }} />
               <span>Editar Galería</span>
             </button>
           </nav>
         </div>
       </div>
 
-      <header className={styles.header} style={{ backgroundColor: theme.colors.gray[0] }}>
+      <header
+        className={styles.header}
+        style={{
+          backgroundColor: dark ? 'black' : 'white',
+          color: dark ? 'white' : 'black',
+        }}
+      >
         <div className={styles.headerContent}>
           <button onClick={toggleSidebar} className={styles.menuButton}>
-            <Menu className={styles.menuIcon} />
+            <Menu className={styles.menuIcon} style={{ color: dark ? 'white' : 'black' }} />
             <span className={styles.srOnly}>Dashboard</span>
           </button>
-          <div style={{ display: "flex", gap: "24px" }}>
+          <div style={{ display: 'flex', gap: '24px' }}>
             <NewGalleryButton />
             <UserButton />
           </div>
@@ -174,27 +203,34 @@ export const GalleryDashboard = () => {
         <div className={styles.profileSection}>
           <h1 className={styles.profileName}>{user.displayname}</h1>
           <div className={styles.searchContainer}>
-            <Search className={styles.searchIcon} />
+            <Search className={styles.searchIcon} style={{ color: dark ? 'white' : 'black' }} />
             <input
               type="search"
               placeholder="¿Qué estás buscando?"
               className={styles.searchInput}
+              style={{
+                backgroundColor: dark ? 'black' : 'white',
+                color: dark ? 'white' : 'black',
+                borderColor: dark ? 'white' : 'black',
+              }}
             />
           </div>
           <div className={styles.filters}>
             <button
-              className={`${styles.filterButton} ${
-                !showCommunityProjects ? styles.active : ""
-              }`}
+              className={`${styles.filterButton} ${!showCommunityProjects ? styles.active : ''}`}
               onClick={() => setShowCommunityProjects(false)}
+              style={{
+                color: showCommunityProjects ? (dark ? 'white' : 'black') : (dark ? 'black' : 'white'),
+              }}
             >
               Mis proyectos
             </button>
             <button
-              className={`${styles.filterButton} ${
-                showCommunityProjects ? styles.active : ""
-              }`}
+              className={`${styles.filterButton} ${showCommunityProjects ? styles.active : ''}`}
               onClick={loadCommunityProjects}
+              style={{
+                color: showCommunityProjects ? (dark ? 'black' : 'white') : (dark ? 'white' : 'black'),
+              }}
             >
               Proyectos de la comunidad
             </button>
@@ -204,57 +240,75 @@ export const GalleryDashboard = () => {
         <div className={styles.galleryGrid}>
           {showCommunityProjects
             ? communityGalleries.map((gallery, index) => (
-                <div key={index} className={styles.galleryCard}>
-                  <img
-                    src={gallery.thumbnail}
-                    alt={gallery.title}
-                    className={styles.galleryImage}
-                  />
-                  <div className={styles.galleryOverlay}>
-                    <h2 className={styles.galleryTitle}>{gallery.title}</h2>
-                    <p className={styles.galleryDescription}>
-                      Creador: {gallery.ownerid}
-                    </p>
-                    <div className={styles.galleryActions}>
-                      <Link
-                        href={`/${gallery.slug}`}
-                        className={styles.openButton}
-                      >
-                        Visitar
-                      </Link>
-                    </div>
+              <div
+                key={index}
+                className={styles.galleryCard}
+                style={{
+                  backgroundColor: dark ? 'black' : 'white',
+                  color: dark ? 'white' : 'black',
+                }}
+              >
+                <img
+                  src={gallery.thumbnail}
+                  alt={gallery.title}
+                  className={styles.galleryImage}
+                />
+                <div className={styles.galleryOverlay}>
+                  <h2 className={styles.galleryTitle}>{gallery.title}</h2>
+                  <p className={styles.galleryDescription}>
+                    Creador: {gallery.ownerid}
+                  </p>
+                  <div className={styles.galleryActions}>
+                    <Link
+                      href={`/${gallery.slug}`}
+                      className={styles.openButton}
+                      style={{
+                        backgroundColor: dark ? 'black' : 'white',
+                        color: dark ? 'white' : 'black',
+                      }}
+                    >
+                      Visitar
+                    </Link>
                   </div>
                 </div>
-              ))
+              </div>
+            ))
             : galleries?.map((gallery) => (
-                <div key={gallery.id} className={styles.galleryCard}>
-                  <img
-                    src={gallery.thumbnail}
-                    alt={gallery.title}
-                    className={styles.galleryImage}
-                  />
-                  <div className={styles.galleryOverlay}>
-                    <h2 className={styles.galleryTitle}>{gallery.title}</h2>
-                    <p className={styles.galleryDescription}>
-                      {gallery.description}
-                    </p>
-                    <div className={styles.galleryActions}>
-                      <Link
-                        href={`/${gallery.slug}/edit`}
-                        className={styles.openButton}
-                      >
-                        Abrir
-                      </Link>
-                      <button
-                        onClick={() => handleShareGallery(gallery.slug)}
-                        className={styles.shareButton}
-                      >
-                        Compartir
-                      </button>
-                    </div>
+              <div
+                key={gallery.id}
+                className={styles.galleryCard}
+                style={{
+                  backgroundColor: dark ? 'black' : 'white',
+                  color: dark ? 'white' : 'black',
+                }}
+              >
+                <img
+                  src={gallery.thumbnail}
+                  alt={gallery.title}
+                  className={styles.galleryImage}
+                />
+                <div className={styles.galleryOverlay}>
+                  <h2 className={styles.galleryTitle}>{gallery.title}</h2>
+                  <p className={styles.galleryDescription}>
+                    {gallery.description}
+                  </p>
+                  <div className={styles.galleryActions}>
+                    <Link
+                      href={`/${gallery.slug}/edit`}
+                      className={styles.openButton}
+                    >
+                      Abrir
+                    </Link>
+                    <button
+                      onClick={() => handleShareGallery(gallery.slug)}
+                      className={styles.shareButton}
+                    >
+                      Compartir
+                    </button>
                   </div>
                 </div>
-              ))}
+              </div>
+            ))}
         </div>
       </main>
 
@@ -269,10 +323,10 @@ export const GalleryDashboard = () => {
           blur: 3,
         }}
         style={{
-          overflow: "hidden",
+          overflow: 'hidden',
         }}
       >
-        <NewGalleryForm modalKey={"new-gallery-modal"} />
+        <NewGalleryForm modalKey={'new-gallery-modal'} />
       </Modal>
 
       <ShareGalleryPopup

diff --git a/app/src/pages/Dashboard/GalleryDashboard.module.css b/app/src/pages/Dashboard/GalleryDashboard.module.css
@@ -62,7 +62,7 @@
 }
 
 .sidebarButton:hover {
-  background-color: #f3f4f6;
+  background-color: #4e4c4c;
 }
 
 .sidebarIcon {
@@ -91,7 +91,7 @@
 }
 
 .menuButton:hover {
-  background-color: #f3f4f6;
+  background-color: #4e4c4c;
   border-radius: 0.375rem;
 }
 
@@ -118,7 +118,7 @@
 }
 
 .menuButton:hover {
-  background-color: #f3f4f6;
+  background-color: #4e4c4c;
   border-radius: 0.375rem;
 }
 
@@ -227,11 +227,24 @@
   background: none;
   border: none;
   cursor: pointer;
+  transition: all 0.3s ease;
+  color: var(--button-text-color); 
 }
 
 .filterButton:hover,
 .filterButton.active {
-  background-color: #f3f4f6;
+  color: var(--button-hover-text-color); 
+  background-color: #4e4c4c; 
+}
+
+:root {
+  --button-text-color: black; 
+  --button-hover-text-color: white;
+}
+
+.dark-mode {
+  --button-text-color: white; 
+  --button-hover-text-color: black; 
 }
 
 .galleryGrid {

diff --git a/app/src/pages/Editor/components/ContentSidebar.tsx b/app/src/pages/Editor/components/ContentSidebar.tsx
@@ -8,6 +8,7 @@ import {
   TextInput,
   ScrollArea,
   FileButton,
+  useMantineColorScheme,
 } from '@mantine/core';
 import { useMediaQuery } from '@mantine/hooks';
 import { IconSearch, IconUpload } from '@tabler/icons-react';
@@ -120,6 +121,8 @@ const ContentMasonry = ({ filterInput }: { filterInput: string }) => {
 const SidebarContent = () => {
   const [filterInput, setFilterInput] = useState('');
   const queryClient = useQueryClient();
+  const { colorScheme } = useMantineColorScheme();
+  const dark = colorScheme === 'dark';
 
   const uploadFileMutation = useMutation({
     mutationFn: (data: UploadImagePayload) => {
@@ -178,7 +181,11 @@ const SidebarContent = () => {
         flex={1}
         bg="gray.1"
         p={8}
-        style={{ borderRadius: 'var(--mantine-radius-md)' }}
+        style={{
+          borderRadius: 'var(--mantine-radius-md)',
+          backgroundColor: dark ? 'black' : '#e5e5e5',
+          color: dark ? '#e5e5e5' : 'black', 
+        }}
       >
         <ContentMasonry filterInput={filterInput} />
       </ScrollArea>

diff --git a/app/src/pages/Editor/components/GalleryCanvas2D.tsx b/app/src/pages/Editor/components/GalleryCanvas2D.tsx
@@ -1,6 +1,6 @@
 import Konva from 'konva';
 import useImage from 'use-image';
-import { Box } from '@mantine/core';
+import { Box, useMantineColorScheme } from '@mantine/core';
 import { useEffect, useRef, useState } from 'react';
 import { Image, Layer, Rect, Stage } from 'react-konva';
 import { setCursor } from '@/utils';
@@ -31,6 +31,9 @@ export const GalleryCanvas2D = ({ gallery, triggerReRender }: GalleryCanvas2DPro
   const [topViewUrl, setTopViewUrl] = useState('');
   const [image,] = useImage(topViewUrl);
 
+  const { colorScheme } = useMantineColorScheme();
+  const dark = colorScheme === 'dark';
+
   const handleViewportResize = () => {
     const bounds = document.getElementById('canvas')?.getBoundingClientRect();
     if (bounds) setViewport({ x: bounds.width, y: bounds.height });
@@ -63,7 +66,7 @@ export const GalleryCanvas2D = ({ gallery, triggerReRender }: GalleryCanvas2DPro
       mb="16px"
       mih="100%"
       bd="1px solid var(--mantine-color-gray-4)"
-      bg={draggingElem ? '#d8d8d8' : '#e4e4e4'}
+      bg={draggingElem ? (dark ? '#555555' : '#d8d8d8') : (dark ? '#333333' : '#e4e4e4')}
       style={{
         borderRadius: 'var(--mantine-radius-md)',
         overflow: 'hidden',