Move some components into styles folder, delete duplicated themes

This commit is contained in:
Nicola Benaglia 2025-04-12 15:44:03 +02:00
parent dcfa7b258e
commit efd3624e92
9 changed files with 151 additions and 163 deletions

View File

@ -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'

View File

@ -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',

View File

@ -423,7 +423,7 @@ const WalletItem = ({ wallet, updateWalletItem, idx, setSelectedWallet }) => {
>
<ListItem
sx={{
bgcolor: 'background.paper',
bgcolor: 'background.paper', // TODO: set background color
flexGrow: 1,
'&:hover': {
backgroundColor: 'secondary.main',

View File

@ -1,21 +1,21 @@
import React, { useState } from "react";
import React, { useState } from 'react';
import {
AppCircle,
AppCircleContainer,
AppCircleLabel,
AppLibrarySubTitle,
AppsContainer,
} from "./Apps-styles";
import { Box, ButtonBase, Input } from "@mui/material";
import { Add } from "@mui/icons-material";
import { isMobile } from "../../App";
import { executeEvent } from "../../utils/events";
import { Spacer } from "../../common/Spacer";
import { SortablePinnedApps } from "./SortablePinnedApps";
import { extractComponents } from "../Chat/MessageDisplay";
import ArrowOutwardIcon from "@mui/icons-material/ArrowOutward";
import { AppsPrivate } from "./AppsPrivate";
import ThemeSelector from "../Theme/ThemeSelector";
} from './Apps-styles';
import { Box, ButtonBase, Input } from '@mui/material';
import { Add } from '@mui/icons-material';
import { isMobile } from '../../App';
import { executeEvent } from '../../utils/events';
import { Spacer } from '../../common/Spacer';
import { SortablePinnedApps } from './SortablePinnedApps';
import { extractComponents } from '../Chat/MessageDisplay';
import ArrowOutwardIcon from '@mui/icons-material/ArrowOutward';
import { AppsPrivate } from './AppsPrivate';
import ThemeSelector from '../../styles/ThemeSelector';
export const AppsHomeDesktop = ({
setMode,
myApp,
@ -23,7 +23,7 @@ export const AppsHomeDesktop = ({
availableQapps,
myName,
}) => {
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 = ({
<>
<AppsContainer
sx={{
justifyContent: "flex-start",
justifyContent: 'flex-start',
}}
>
<AppLibrarySubTitle
sx={{
fontSize: "30px",
fontSize: '30px',
}}
>
Apps Dashboard
@ -57,19 +57,19 @@ export const AppsHomeDesktop = ({
<AppsContainer
sx={{
justifyContent: "flex-start",
justifyContent: 'flex-start',
}}
>
<Box
sx={{
display: "flex",
gap: "20px",
alignItems: "center",
backgroundColor: "#1f2023",
padding: "7px",
borderRadius: "20px",
width: "100%",
maxWidth: "500px",
display: 'flex',
gap: '20px',
alignItems: 'center',
backgroundColor: '#1f2023',
padding: '7px',
borderRadius: '20px',
width: '100%',
maxWidth: '500px',
}}
>
<Input
@ -83,24 +83,24 @@ export const AppsHomeDesktop = ({
autoCorrect="off"
placeholder="qortal://"
sx={{
width: "100%",
color: "white",
"& .MuiInput-input::placeholder": {
color: "rgba(84, 84, 84, 0.70) !important",
fontSize: "20px",
fontStyle: "normal",
width: '100%',
color: 'white',
'& .MuiInput-input::placeholder': {
color: 'rgba(84, 84, 84, 0.70) !important',
fontSize: '20px',
fontStyle: 'normal',
fontWeight: 400,
lineHeight: "120%", // 24px
letterSpacing: "0.15px",
lineHeight: '120%', // 24px
letterSpacing: '0.15px',
opacity: 1,
},
"&:focus": {
outline: "none",
'&:focus': {
outline: 'none',
},
// Add any additional styles for the input here
}}
onKeyDown={(e) => {
if (e.key === "Enter" && qortalUrl) {
if (e.key === 'Enter' && qortalUrl) {
openQortalUrl();
}
}}
@ -108,7 +108,7 @@ export const AppsHomeDesktop = ({
<ButtonBase onClick={() => openQortalUrl()}>
<ArrowOutwardIcon
sx={{
color: qortalUrl ? "white" : "rgba(84, 84, 84, 0.70)",
color: qortalUrl ? 'white' : 'rgba(84, 84, 84, 0.70)',
}}
/>
</ButtonBase>
@ -119,18 +119,18 @@ export const AppsHomeDesktop = ({
<AppsContainer
sx={{
gap: "50px",
justifyContent: "flex-start",
gap: '50px',
justifyContent: 'flex-start',
}}
>
<ButtonBase
onClick={() => {
setMode("library");
setMode('library');
}}
>
<AppCircleContainer
sx={{
gap: !isMobile ? "10px" : "5px",
gap: !isMobile ? '10px' : '5px',
}}
>
<AppCircle>
@ -150,7 +150,7 @@ export const AppsHomeDesktop = ({
/>
</AppsContainer>
<ThemeSelector style={{ position: "fixed", bottom: "1%", left: "0%" }} />
<ThemeSelector style={{ position: 'fixed', bottom: '1%', left: '0%' }} />
</>
);
};

View File

@ -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 (
<Box
sx={{
width: "60px",
flexDirection: "column",
height: "100vh",
alignItems: "center",
display: "flex",
gap: "25px",
width: '60px',
flexDirection: 'column',
height: '100vh',
alignItems: 'center',
display: 'flex',
gap: '25px',
}}
>
<ButtonBase
sx={{
width: "60px",
height: "60px",
paddingTop: "23px",
width: '60px',
height: '60px',
paddingTop: '23px',
}}
onClick={() => {
goToHome();
@ -51,39 +51,39 @@ export const DesktopSideBar = ({
<HomeIcon
height={34}
color={
desktopViewMode === "home" ? "white" : "rgba(250, 250, 250, 0.5)"
desktopViewMode === 'home' ? 'white' : 'rgba(250, 250, 250, 0.5)'
}
/>
</ButtonBase>
<ButtonBase
onClick={() => {
setDesktopViewMode("apps");
setDesktopViewMode('apps');
// setIsOpenSideViewDirects(false)
// setIsOpenSideViewGroups(false)
}}
>
<IconWrapper
color={isApps ? "white" : "rgba(250, 250, 250, 0.5)"}
color={isApps ? 'white' : 'rgba(250, 250, 250, 0.5)'}
label="Apps"
selected={isApps}
disableWidth
>
<AppsIcon
color={isApps ? "white" : "rgba(250, 250, 250, 0.5)"}
color={isApps ? 'white' : 'rgba(250, 250, 250, 0.5)'}
height={30}
/>
</IconWrapper>
</ButtonBase>
<ButtonBase
onClick={() => {
setDesktopViewMode("chat");
setDesktopViewMode('chat');
}}
>
<IconWrapper
color={
hasUnreadDirects || hasUnreadGroups
? "var(--unread)"
: theme.palette.text.primary
? 'var(--unread)'
: theme.palette.text.primary
}
label="Chat"
disableWidth
@ -92,7 +92,7 @@ export const DesktopSideBar = ({
height={30}
color={
hasUnreadDirects || hasUnreadGroups
? "var(--unread)"
? 'var(--unread)'
: theme.palette.text.primary
}
/>
@ -121,24 +121,22 @@ export const DesktopSideBar = ({
{isEnabledDevMode && (
<ButtonBase
onClick={() => {
setDesktopViewMode("dev");
setDesktopViewMode('dev');
}}
>
<IconWrapper
color={
desktopViewMode === "dev" ? "white" : "rgba(250, 250, 250, 0.5)"
desktopViewMode === 'dev' ? 'white' : 'rgba(250, 250, 250, 0.5)'
}
label="Dev"
disableWidth
>
<AppsIcon
height={30}
/>
<AppsIcon height={30} />
</IconWrapper>
</ButtonBase>
)}
<ThemeSelector style={{ position: "fixed", bottom: "1%" }} />
<ThemeSelector style={{ position: 'fixed', bottom: '1%' }} />
</Box>
);
};

View File

@ -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(
<>
<ThemeProvider>
<MessageQueueProvider>

View File

@ -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);
export const useThemeContext = () => useContext(ThemeContext);

View File

@ -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 };