From efd3624e92ed05f6b1ddbd36f1057dc75ba97470 Mon Sep 17 00:00:00 2001 From: Nicola Benaglia Date: Sat, 12 Apr 2025 15:44:03 +0200 Subject: [PATCH] Move some components into styles folder, delete duplicated themes --- src/App.tsx | 2 +- src/ExtStates/NotAuthenticated.tsx | 2 +- src/Wallets.tsx | 2 +- src/components/Apps/AppsHomeDesktop.tsx | 88 +++++++------- src/components/DesktopSideBar.tsx | 64 +++++----- src/main.tsx | 18 +-- .../Theme => styles}/ThemeContext.tsx | 25 ++-- .../Theme => styles}/ThemeSelector.tsx | 0 src/styles/theme.ts | 113 +++++++++--------- 9 files changed, 151 insertions(+), 163 deletions(-) rename src/{components/Theme => styles}/ThemeContext.tsx (51%) rename src/{components/Theme => styles}/ThemeSelector.tsx (100%) diff --git a/src/App.tsx b/src/App.tsx index 6365115..52d322c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -149,7 +149,7 @@ import { BuyQortInformation } from './components/BuyQortInformation'; import { QortPayment } from './components/QortPayment'; import { GeneralNotifications } from './components/GeneralNotifications'; import { PdfViewer } from './common/PdfViewer'; -import ThemeSelector from './components/Theme/ThemeSelector'; +import ThemeSelector from './styles/ThemeSelector.tsx'; type extStates = | 'not-authenticated' diff --git a/src/ExtStates/NotAuthenticated.tsx b/src/ExtStates/NotAuthenticated.tsx index bfb33d4..049c282 100644 --- a/src/ExtStates/NotAuthenticated.tsx +++ b/src/ExtStates/NotAuthenticated.tsx @@ -29,7 +29,7 @@ import { CustomizedSnackbars } from '../components/Snackbar/Snackbar'; import { cleanUrl, gateways } from '../background'; import { GlobalContext } from '../App'; import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip'; -import ThemeSelector from '../components/Theme/ThemeSelector'; +import ThemeSelector from '../styles/ThemeSelector'; const manifestData = { version: '0.5.3', diff --git a/src/Wallets.tsx b/src/Wallets.tsx index fa65b5a..5752639 100644 --- a/src/Wallets.tsx +++ b/src/Wallets.tsx @@ -423,7 +423,7 @@ const WalletItem = ({ wallet, updateWalletItem, idx, setSelectedWallet }) => { > { - const [qortalUrl, setQortalUrl] = useState(""); + const [qortalUrl, setQortalUrl] = useState(''); const openQortalUrl = () => { try { @@ -31,9 +31,9 @@ export const AppsHomeDesktop = ({ const res = extractComponents(qortalUrl); if (res) { const { service, name, identifier, path } = res; - executeEvent("addTab", { data: { service, name, identifier, path } }); - executeEvent("open-apps-mode", {}); - setQortalUrl("qortal://"); + executeEvent('addTab', { data: { service, name, identifier, path } }); + executeEvent('open-apps-mode', {}); + setQortalUrl('qortal://'); } } catch (error) {} }; @@ -41,12 +41,12 @@ export const AppsHomeDesktop = ({ <> Apps Dashboard @@ -57,19 +57,19 @@ export const AppsHomeDesktop = ({ { - if (e.key === "Enter" && qortalUrl) { + if (e.key === 'Enter' && qortalUrl) { openQortalUrl(); } }} @@ -108,7 +108,7 @@ export const AppsHomeDesktop = ({ openQortalUrl()}> @@ -119,18 +119,18 @@ export const AppsHomeDesktop = ({ { - setMode("library"); + setMode('library'); }} > @@ -150,7 +150,7 @@ export const AppsHomeDesktop = ({ /> - + ); }; diff --git a/src/components/DesktopSideBar.tsx b/src/components/DesktopSideBar.tsx index bd883be..08336e5 100644 --- a/src/components/DesktopSideBar.tsx +++ b/src/components/DesktopSideBar.tsx @@ -1,12 +1,12 @@ -import { Box, ButtonBase, useTheme } from "@mui/material"; -import { HomeIcon } from "../assets/Icons/HomeIcon"; -import { MessagingIcon } from "../assets/Icons/MessagingIcon"; -import { Save } from "./Save/Save"; -import { IconWrapper } from "./Desktop/DesktopFooter"; -import { useRecoilState } from "recoil"; -import { enabledDevModeAtom } from "../atoms/global"; -import { AppsIcon } from "../assets/Icons/AppsIcon"; -import ThemeSelector from "./Theme/ThemeSelector"; +import { Box, ButtonBase, useTheme } from '@mui/material'; +import { HomeIcon } from '../assets/Icons/HomeIcon'; +import { MessagingIcon } from '../assets/Icons/MessagingIcon'; +import { Save } from './Save/Save'; +import { IconWrapper } from './Desktop/DesktopFooter'; +import { useRecoilState } from 'recoil'; +import { enabledDevModeAtom } from '../atoms/global'; +import { AppsIcon } from '../assets/Icons/AppsIcon'; +import ThemeSelector from '../styles/ThemeSelector'; export const DesktopSideBar = ({ goToHome, @@ -24,25 +24,25 @@ export const DesktopSideBar = ({ }) => { const [isEnabledDevMode, setIsEnabledDevMode] = useRecoilState(enabledDevModeAtom); - + const theme = useTheme(); return ( { goToHome(); @@ -51,39 +51,39 @@ export const DesktopSideBar = ({ { - setDesktopViewMode("apps"); + setDesktopViewMode('apps'); // setIsOpenSideViewDirects(false) // setIsOpenSideViewGroups(false) }} > { - setDesktopViewMode("chat"); + setDesktopViewMode('chat'); }} > @@ -121,24 +121,22 @@ export const DesktopSideBar = ({ {isEnabledDevMode && ( { - setDesktopViewMode("dev"); + setDesktopViewMode('dev'); }} > - + )} - + ); }; diff --git a/src/main.tsx b/src/main.tsx index 881d4c1..791c63d 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,13 +1,13 @@ -import React from "react"; -import ReactDOM from "react-dom/client"; -import App from "./App.tsx"; -import "./index.css"; -import "./messaging/messagesToBackground"; -import { MessageQueueProvider } from "./MessageQueueContext.tsx"; -import { RecoilRoot } from "recoil"; -import { ThemeProvider } from "./components/Theme/ThemeContext.tsx"; +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import App from './App.tsx'; +import './index.css'; +import './messaging/messagesToBackground'; +import { MessageQueueProvider } from './MessageQueueContext.tsx'; +import { RecoilRoot } from 'recoil'; +import { ThemeProvider } from './styles/ThemeContext.tsx'; -ReactDOM.createRoot(document.getElementById("root")!).render( +ReactDOM.createRoot(document.getElementById('root')!).render( <> diff --git a/src/components/Theme/ThemeContext.tsx b/src/styles/ThemeContext.tsx similarity index 51% rename from src/components/Theme/ThemeContext.tsx rename to src/styles/ThemeContext.tsx index e21ab9f..ed52fda 100644 --- a/src/components/Theme/ThemeContext.tsx +++ b/src/styles/ThemeContext.tsx @@ -1,24 +1,19 @@ import { createContext, useContext, useState, useMemo } from 'react'; -import { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material/styles'; +import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles'; +import { darkTheme, lightTheme } from './theme'; -const darkTheme = createTheme({ - palette: { - mode: 'dark', - }, +const ThemeContext = createContext({ + themeMode: 'light', + toggleTheme: () => {}, }); -const lightTheme = createTheme({ - palette: { - mode: 'light', - }, -}); - -const ThemeContext = createContext({ themeMode: 'light', toggleTheme: () => {} }); - export const ThemeProvider = ({ children }: { children: React.ReactNode }) => { const [themeMode, setThemeMode] = useState('light'); - const theme = useMemo(() => (themeMode === 'light' ? lightTheme : darkTheme), [themeMode]); + const theme = useMemo( + () => (themeMode === 'light' ? lightTheme : darkTheme), + [themeMode] + ); const toggleTheme = () => { setThemeMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light')); @@ -31,4 +26,4 @@ export const ThemeProvider = ({ children }: { children: React.ReactNode }) => { ); }; -export const useThemeContext = () => useContext(ThemeContext); \ No newline at end of file +export const useThemeContext = () => useContext(ThemeContext); diff --git a/src/components/Theme/ThemeSelector.tsx b/src/styles/ThemeSelector.tsx similarity index 100% rename from src/components/Theme/ThemeSelector.tsx rename to src/styles/ThemeSelector.tsx diff --git a/src/styles/theme.ts b/src/styles/theme.ts index feb0367..f036fe6 100644 --- a/src/styles/theme.ts +++ b/src/styles/theme.ts @@ -1,54 +1,50 @@ -import { createTheme } from '@mui/material/styles' - +import { createTheme } from '@mui/material/styles'; // Extend the Theme interface - const commonThemeOptions = { typography: { - fontFamily: [ - 'Roboto' - ].join(','), + fontFamily: ['Roboto'].join(','), h1: { fontSize: '2rem', - fontWeight: 600 + fontWeight: 600, }, h2: { fontSize: '1.75rem', - fontWeight: 500 + fontWeight: 500, }, h3: { fontSize: '1.5rem', - fontWeight: 500 + fontWeight: 500, }, h4: { fontSize: '1.25rem', - fontWeight: 500 + fontWeight: 500, }, h5: { fontSize: '1rem', - fontWeight: 500 + fontWeight: 500, }, h6: { fontSize: '0.875rem', - fontWeight: 500 + fontWeight: 500, }, body1: { fontSize: '23px', fontWeight: 400, lineHeight: 1.5, - letterSpacing: '0.5px' + letterSpacing: '0.5px', }, body2: { fontSize: '18px', fontWeight: 400, lineHeight: 1.4, - letterSpacing: '0.2px' - } + letterSpacing: '0.2px', + }, }, spacing: 8, shape: { - borderRadius: 4 + borderRadius: 4, }, breakpoints: { values: { @@ -56,8 +52,8 @@ const commonThemeOptions = { sm: 600, md: 900, lg: 1200, - xl: 1536 - } + xl: 1536, + }, }, components: { MuiButton: { @@ -66,25 +62,24 @@ const commonThemeOptions = { backgroundColor: 'inherit', transition: 'filter 0.3s ease-in-out', '&:hover': { - filter: 'brightness(1.1)' - } - } + filter: 'brightness(1.1)', + }, + }, }, defaultProps: { disableElevation: true, - disableRipple: true - } + disableRipple: true, + }, }, MuiModal: { styleOverrides: { root: { zIndex: 50000, }, - } - - } - } -} + }, + }, + }, +}; const lightTheme = createTheme({ ...commonThemeOptions, @@ -93,19 +88,19 @@ const lightTheme = createTheme({ primary: { main: '#f4f4fb', dark: '#eaecf4', - light: '#f9f9fd' + light: '#f9f9fd', }, secondary: { - main: '#1EAAF1' + main: '#1EAAF1', }, background: { default: '#fafafa', - paper: '#f0f0f0' + paper: '#f0f0f0', }, text: { primary: '#000000', - secondary: '#525252' - } + secondary: '#525252', + }, }, components: { @@ -119,20 +114,20 @@ const lightTheme = createTheme({ '&:hover': { cursor: 'pointer', boxShadow: - 'rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;' - } - } - } + 'rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;', + }, + }, + }, }, MuiIcon: { defaultProps: { style: { - color: '#000000' - } - } - } + color: '#000000', + }, + }, + }, }, -}) +}); const darkTheme = createTheme({ ...commonThemeOptions, @@ -140,45 +135,45 @@ const darkTheme = createTheme({ mode: 'dark', primary: { main: '#2e3d60', - dark: "#1a2744", - light: "#3f4b66", + dark: '#1a2744', + light: '#3f4b66', }, secondary: { - main: '#45adff' + main: '#45adff', }, background: { default: '#313338', - paper: "#1e1e20" + paper: '#1e1e20', }, text: { primary: '#ffffff', - secondary: '#b3b3b3' - } + secondary: '#b3b3b3', + }, }, components: { MuiCard: { styleOverrides: { root: { - boxShadow: "none", + boxShadow: 'none', borderRadius: '8px', transition: 'all 0.3s ease-in-out', '&:hover': { cursor: 'pointer', boxShadow: - ' 0px 3px 4px 0px hsla(0,0%,0%,0.14), 0px 3px 3px -2px hsla(0,0%,0%,0.12), 0px 1px 8px 0px hsla(0,0%,0%,0.2);' - } - } - } + ' 0px 3px 4px 0px hsla(0,0%,0%,0.14), 0px 3px 3px -2px hsla(0,0%,0%,0.12), 0px 1px 8px 0px hsla(0,0%,0%,0.2);', + }, + }, + }, }, MuiIcon: { defaultProps: { style: { - color: '#ffffff' - } - } - } + color: '#ffffff', + }, + }, + }, }, -}) +}); -export { lightTheme, darkTheme } +export { lightTheme, darkTheme };