Qortal/Qortal-Hub
1
0
Fork 0
mirror of https://github.com/Qortal/Qortal-Hub.git synced 2025-04-27 21:37:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

fixing styles

Browse Source
This commit is contained in:
PhilReact 2025-04-27 15:38:06 +03:00
parent 6f20bdd684
commit c8e501ddee
30 changed files with 291 additions and 182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
src/App.tsx
View File

@ -30,7 +30,6 @@ import { CountdownCircleTimer } from 'react-countdown-circle-timer';
import Logo1Dark from './assets/svgs/Logo1Dark.svg';
import RefreshIcon from '@mui/icons-material/Refresh';
import DownloadIcon from '@mui/icons-material/Download';
import Copy from './assets/svgs/Copy.svg';
import ltcLogo from './assets/ltc.png';
import PersonSearchIcon from '@mui/icons-material/PersonSearch';
import qortLogo from './assets/qort.png';
@ -137,6 +136,7 @@ import ThemeSelector from './components/Theme/ThemeSelector.tsx';
import { useTranslation } from 'react-i18next';
import LanguageSelector from './components/Language/LanguageSelector.tsx';
import { DownloadWallet } from './components/Auth/DownloadWallet.tsx';
import { CopyIcon } from './assets/Icons/CopyIcon.tsx';
type extStates =
| 'not-authenticated'
@ -1297,7 +1297,8 @@ function App() {
<CopyToClipboard text={rawWallet?.ltcAddress}>
<AddressBox>
{rawWallet?.ltcAddress?.slice(0, 6)}...
{rawWallet?.ltcAddress?.slice(-4)} <img src={Copy} />
{rawWallet?.ltcAddress?.slice(-4)}{' '}
<CopyIcon color={theme.palette.text.primary} />
</AddressBox>
</CopyToClipboard>
@ -1362,7 +1363,8 @@ function App() {
<CopyToClipboard text={rawWallet?.address0}>
<AddressBox>
{rawWallet?.address0?.slice(0, 6)}...
{rawWallet?.address0?.slice(-4)} <img src={Copy} />
{rawWallet?.address0?.slice(-4)}{' '}
<CopyIcon color={theme.palette.text.primary} />
</AddressBox>
</CopyToClipboard>
<Spacer height="10px" />
@ -1519,7 +1521,11 @@ function App() {
},
}}
>
<LogoutIcon />
<LogoutIcon
sx={{
color: theme.palette.text.secondary,
}}
/>
</Tooltip>
</ButtonBase>
@ -1559,7 +1565,11 @@ function App() {
},
}}
>
<SettingsIcon />
<SettingsIcon
sx={{
color: theme.palette.text.secondary,
}}
/>
</Tooltip>
</ButtonBase>
@ -1599,7 +1609,11 @@ function App() {
},
}}
>
<PersonSearchIcon />
<PersonSearchIcon
sx={{
color: theme.palette.text.secondary,
}}
/>
</Tooltip>
</ButtonBase>
@ -1639,7 +1653,11 @@ function App() {
},
}}
>
<AccountBalanceWalletIcon />
<AccountBalanceWalletIcon
sx={{
color: theme.palette.text.secondary,
}}
/>
</Tooltip>
</ButtonBase>
@ -1681,7 +1699,10 @@ function App() {
setIsOpenDrawerProfile(true);
}}
>
<WalletIcon width="25" />
<WalletIcon
color={theme.palette.text.secondary}
width="25"
/>
</ButtonBase>
</Tooltip>
</>
@ -1787,7 +1808,11 @@ function App() {
},
}}
>
<EngineeringIcon />
<EngineeringIcon
sx={{
color: theme.palette.text.secondary,
}}
/>
</Tooltip>
</ButtonBase>
@ -1832,7 +1857,11 @@ function App() {
},
}}
>
<HelpIcon />
<HelpIcon
sx={{
color: theme.palette.text.secondary,
}}
/>
</Tooltip>
</ButtonBase>
)}
@ -1874,7 +1903,11 @@ function App() {
},
}}
>
<DownloadIcon />
<DownloadIcon
sx={{
color: theme.palette.text.secondary,
}}
/>
</Tooltip>
</ButtonBase>
<Spacer height="40px" />
@ -2165,10 +2198,10 @@ function App() {
defaultChecked={messageQortalRequest?.checkbox1?.value}
sx={{
'&.Mui-checked': {
color: 'white', // Customize the color when checked
color: theme.palette.text.secondary, // Customize the color when checked
},
'& .MuiSvgIcon-root': {
color: 'white',
color: theme.palette.text.secondary,
},
}}
/>
@ -3407,10 +3440,10 @@ function App() {
}
sx={{
'&.Mui-checked': {
color: 'white', // Customize the color when checked
color: theme.palette.text.secondary, // Customize the color when checked
},
'& .MuiSvgIcon-root': {
color: 'white',
color: theme.palette.text.secondary,
},
}}
/>
@ -3436,10 +3469,10 @@ function App() {
disableRipple
sx={{
'&.Mui-checked': {
color: 'white',
color: theme.palette.text.secondary,
},
'& .MuiSvgIcon-root': {
color: 'white',
color: theme.palette.text.secondary,
},
}}
/>

26
src/assets/Icons/ChatIcon.tsx
View File

@ -1,12 +1,18 @@
import React from 'react';
export const ChatIcon= ({ color = 'white', height = 15, width = 15 }) => {
return (
<svg width={width} height={height} viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.5 0C3.35915 0 0 3.35915 0 7.5V13.8169C0 14.4718 0.528169 15 1.1831 15H7.5C11.6408 15 15 11.6408 15 7.5C15 3.35915 11.6408 0 7.5 0ZM11.0915 10.669H3.90845C3.67606 10.669 3.48592 10.4789 3.48592 10.2465C3.48592 10.0141 3.67606 9.82394 3.90845 9.82394H11.0915C11.3239 9.82394 11.5141 10.0141 11.5141 10.2465C11.5141 10.4789 11.3239 10.669 11.0915 10.669ZM11.0915 8.34507H3.90845C3.67606 8.34507 3.48592 8.15493 3.48592 7.92254C3.48592 7.69014 3.67606 7.5 3.90845 7.5H11.0915C11.3239 7.5 11.5141 7.69014 11.5141 7.92254C11.5141 8.15493 11.3239 8.34507 11.0915 8.34507ZM11.0915 6.02113H3.90845C3.67606 6.02113 3.48592 5.83099 3.48592 5.59859C3.48592 5.3662 3.67606 5.17606 3.90845 5.17606H11.0915C11.3239 5.17606 11.5141 5.3662 11.5141 5.59859C11.5141 5.83099 11.3239 6.02113 11.0915 6.02113Z" fill={color}/>
</svg>
);
};
export const ChatIcon = ({ color = 'white', height = 15, width = 15 }) => {
return (
<svg
width={width}
height={height}
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.5 0C3.35915 0 0 3.35915 0 7.5V13.8169C0 14.4718 0.528169 15 1.1831 15H7.5C11.6408 15 15 11.6408 15 7.5C15 3.35915 11.6408 0 7.5 0ZM11.0915 10.669H3.90845C3.67606 10.669 3.48592 10.4789 3.48592 10.2465C3.48592 10.0141 3.67606 9.82394 3.90845 9.82394H11.0915C11.3239 9.82394 11.5141 10.0141 11.5141 10.2465C11.5141 10.4789 11.3239 10.669 11.0915 10.669ZM11.0915 8.34507H3.90845C3.67606 8.34507 3.48592 8.15493 3.48592 7.92254C3.48592 7.69014 3.67606 7.5 3.90845 7.5H11.0915C11.3239 7.5 11.5141 7.69014 11.5141 7.92254C11.5141 8.15493 11.3239 8.34507 11.0915 8.34507ZM11.0915 6.02113H3.90845C3.67606 6.02113 3.48592 5.83099 3.48592 5.59859C3.48592 5.3662 3.67606 5.17606 3.90845 5.17606H11.0915C11.3239 5.17606 11.5141 5.3662 11.5141 5.59859C11.5141 5.83099 11.3239 6.02113 11.0915 6.02113Z"
fill={color}
/>
</svg>
);
};

25
src/assets/Icons/CopyIcon.tsx Normal file
View File

@ -0,0 +1,25 @@
import { useTheme } from '@mui/material';
import React from 'react';
export const CopyIcon = ({ color, height = 11, width = 10 }) => {
const theme = useTheme();
const setColor = color ? color : theme.palette.text.primary;
return (
<svg
width={width}
height={height}
viewBox="0 0 10 11"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M3.92857 0.5H8.57143C9.36071 0.5 10 1.13929 10 1.92857V6.57143C10 7.36071 9.36071 8 8.57143 8H8.21429V4.42857C8.21429 3.24643 7.25357 2.28571 6.07143 2.28571H2.5V1.92857C2.5 1.13929 3.13929 0.5 3.92857 0.5ZM1.42857 3H6.07143C6.86041 3 7.5 3.63959 7.5 4.42857V9.07143C7.5 9.86041 6.86041 10.5 6.07143 10.5H1.42857C0.639593 10.5 0 9.86041 0 9.07143V4.42857C0 3.63959 0.639593 3 1.42857 3Z"
fill={setColor}
fill-opacity="0.5"
/>
</svg>
);
};

14
src/assets/Icons/MessagingIcon2.tsx
View File

@ -1,14 +0,0 @@
import React from 'react';
export const MessagingIcon2= ({ color = '#8F8F91', height = 24, width =24 }) => {
return (
<svg width={width} height={height} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M22.6636 0.00168233C22.6127 -0.000756257 22.5614 -0.000627677 22.5099 0.00261984C22.3724 0.0112798 22.2331 0.0405753 22.0969 0.093558L1.02096 8.28971C0.362343 8.54585 -0.00366118 9.18408 2.76147e-05 9.79253C0.00371641 10.401 0.377567 11.0341 1.03925 11.2822L9.02065 14.2752C9.34631 14.3974 9.60258 14.6536 9.72471 14.9793L12.7177 22.9607C12.9658 23.6224 13.5989 23.9963 14.2074 24C14.8158 24.0037 15.454 23.6376 15.7102 22.979L23.9063 1.90295C24.1182 1.35797 23.9526 0.768987 23.5917 0.408091C23.3549 0.171254 23.02 0.0187526 22.6636 0.00168233ZM18.4022 4.99812C18.5613 4.99815 18.7139 5.06138 18.8264 5.17391C18.9389 5.28643 19.0021 5.43902 19.0021 5.59813C19.0021 5.75724 18.9389 5.90983 18.8264 6.02235L13.2239 11.6244C13.1114 11.7369 12.9588 11.8001 12.7997 11.8001C12.6406 11.8001 12.488 11.7369 12.3755 11.6244C12.263 11.5119 12.1998 11.3593 12.1998 11.2002C12.1998 11.0411 12.263 10.8885 12.3755 10.776L17.9775 5.17391C18.0333 5.11813 18.0995 5.0739 18.1724 5.04374C18.2452 5.01357 18.3233 4.99807 18.4022 4.99812Z" fill={color}/>
</svg>
);
};

24
src/assets/Icons/MessagingIconFilled.tsx Normal file
View File

@ -0,0 +1,24 @@
import { useTheme } from '@mui/material';
import React from 'react';
export const MessagingIconFilled = ({ color, height = 31, width = 31 }) => {
const theme = useTheme();
const setColor = color ? color : theme.palette.text.primary;
return (
<svg
width={width}
height={height}
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M22.6636 0.00168233C22.6127 -0.000756257 22.5614 -0.000627677 22.5099 0.00261984C22.3724 0.0112798 22.2331 0.0405753 22.0969 0.093558L1.02096 8.28971C0.362343 8.54585 -0.00366118 9.18408 2.76147e-05 9.79253C0.00371641 10.401 0.377567 11.0341 1.03925 11.2822L9.02065 14.2752C9.34631 14.3974 9.60258 14.6536 9.72471 14.9793L12.7177 22.9607C12.9658 23.6224 13.5989 23.9963 14.2074 24C14.8158 24.0037 15.454 23.6376 15.7102 22.979L23.9063 1.90295C24.1182 1.35797 23.9526 0.768987 23.5917 0.408091C23.3549 0.171254 23.02 0.0187526 22.6636 0.00168233ZM18.4022 4.99812C18.5613 4.99815 18.7139 5.06138 18.8264 5.17391C18.9389 5.28643 19.0021 5.43902 19.0021 5.59813C19.0021 5.75724 18.9389 5.90983 18.8264 6.02235L13.2239 11.6244C13.1114 11.7369 12.9588 11.8001 12.7997 11.8001C12.6406 11.8001 12.488 11.7369 12.3755 11.6244C12.263 11.5119 12.1998 11.3593 12.1998 11.2002C12.1998 11.0411 12.263 10.8885 12.3755 10.776L17.9775 5.17391C18.0333 5.11813 18.0995 5.0739 18.1724 5.04374C18.2452 5.01357 18.3233 4.99807 18.4022 4.99812Z"
fill={setColor}
/>
</svg>
);
};

4
src/assets/Icons/QappDevelopText.tsx
View File

@ -14,8 +14,8 @@ export const QappDevelopText: React.FC<SVGProps> = ({
return (
<svg
{...children}
width="83"
height="40"
width="124"
height="60"
viewBox="0 0 83 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"

72
src/components/Apps/AppPublish.tsx
View File

@ -20,7 +20,13 @@ import {
PublishQAppChoseFile,
PublishQAppInfo,
} from './Apps-styles';
import { InputBase, InputLabel, MenuItem, Select } from '@mui/material';
import {
InputBase,
InputLabel,
MenuItem,
Select,
useTheme,
} from '@mui/material';
import { styled } from '@mui/system';
import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
import { Add } from '@mui/icons-material';
@ -59,11 +65,11 @@ const CustomSelect = styled(Select)({
});
const CustomMenuItem = styled(MenuItem)({
backgroundColor: '#1f1f1f', // Background for dropdown items
color: '#ccc',
'&:hover': {
backgroundColor: '#333', // Darker background on hover
},
// backgroundColor: '#1f1f1f', // Background for dropdown items
// color: '#ccc',
// '&:hover': {
// backgroundColor: '#333', // Darker background on hover
// },
});
export const AppPublish = ({ names, categories }) => {
@ -74,7 +80,7 @@ export const AppPublish = ({ names, categories }) => {
const [appType, setAppType] = useState('APP');
const [file, setFile] = useState(null);
const { show } = useContext(MyContext);
const theme = useTheme();
const [tag1, setTag1] = useState('');
const [tag2, setTag2] = useState('');
const [tag3, setTag3] = useState('');
@ -263,9 +269,7 @@ export const AppPublish = ({ names, categories }) => {
<Spacer height="18px" />
<InputLabel
sx={{ color: '#888', fontSize: '14px', marginBottom: '2px' }}
>
<InputLabel sx={{ fontSize: '14px', marginBottom: '2px' }}>
Name/App
</InputLabel>
@ -278,11 +282,11 @@ export const AppPublish = ({ names, categories }) => {
<CustomMenuItem value="">
<em
style={{
color: 'var(--50-white, #FFFFFF80)',
color: theme.palette.text.secondary,
}}
>
Select Name/App
</em>{' '}
</em>
{/* This is the placeholder item */}
</CustomMenuItem>
{names.map((name) => {
@ -292,9 +296,7 @@ export const AppPublish = ({ names, categories }) => {
<Spacer height="15px" />
<InputLabel
sx={{ color: '#888', fontSize: '14px', marginBottom: '2px' }}
>
<InputLabel sx={{ fontSize: '14px', marginBottom: '2px' }}>
App service type
</InputLabel>
@ -307,12 +309,11 @@ export const AppPublish = ({ names, categories }) => {
<CustomMenuItem value="">
<em
style={{
color: 'var(--50-white, #FFFFFF80)',
color: theme.palette.text.secondary,
}}
>
Select App Type
</em>{' '}
{/* This is the placeholder item */}
</em>
</CustomMenuItem>
<CustomMenuItem value={'APP'}>App</CustomMenuItem>
<CustomMenuItem value={'WEBSITE'}>Website</CustomMenuItem>
@ -320,9 +321,7 @@ export const AppPublish = ({ names, categories }) => {
<Spacer height="15px" />
<InputLabel
sx={{ color: '#888', fontSize: '14px', marginBottom: '2px' }}
>
<InputLabel sx={{ fontSize: '14px', marginBottom: '2px' }}>
Title
</InputLabel>
@ -330,7 +329,7 @@ export const AppPublish = ({ names, categories }) => {
value={title}
onChange={(e) => setTitle(e.target.value)}
sx={{
border: '0.5px solid var(--50-white, #FFFFFF80)',
border: `0.5px solid ${theme.palette.action.disabled}`,
padding: '0px 15px',
borderRadius: '5px',
height: '36px',
@ -347,9 +346,7 @@ export const AppPublish = ({ names, categories }) => {
<Spacer height="15px" />
<InputLabel
sx={{ color: '#888', fontSize: '14px', marginBottom: '2px' }}
>
<InputLabel sx={{ fontSize: '14px', marginBottom: '2px' }}>
Description
</InputLabel>
@ -357,7 +354,7 @@ export const AppPublish = ({ names, categories }) => {
value={description}
onChange={(e) => setDescription(e.target.value)}
sx={{
border: '0.5px solid var(--50-white, #FFFFFF80)',
border: `0.5px solid ${theme.palette.action.disabled}`,
padding: '0px 15px',
borderRadius: '5px',
height: '36px',
@ -374,9 +371,7 @@ export const AppPublish = ({ names, categories }) => {
<Spacer height="15px" />
<InputLabel
sx={{ color: '#888', fontSize: '14px', marginBottom: '2px' }}
>
<InputLabel sx={{ fontSize: '14px', marginBottom: '2px' }}>
Category
</InputLabel>
@ -389,12 +384,11 @@ export const AppPublish = ({ names, categories }) => {
<CustomMenuItem value="">
<em
style={{
color: 'var(--50-white, #FFFFFF80)',
color: theme.palette.text.secondary,
}}
>
Select Category
</em>{' '}
{/* This is the placeholder item */}
</em>
</CustomMenuItem>
{categories?.map((category) => {
return (
@ -407,9 +401,7 @@ export const AppPublish = ({ names, categories }) => {
<Spacer height="15px" />
<InputLabel
sx={{ color: '#888', fontSize: '14px', marginBottom: '2px' }}
>
<InputLabel sx={{ fontSize: '14px', marginBottom: '2px' }}>
Tags
</InputLabel>
@ -418,7 +410,7 @@ export const AppPublish = ({ names, categories }) => {
value={tag1}
onChange={(e) => setTag1(e.target.value)}
sx={{
border: '0.5px solid var(--50-white, #FFFFFF80)',
border: `0.5px solid ${theme.palette.action.disabled}`,
padding: '0px 15px',
borderRadius: '5px',
height: '36px',
@ -435,7 +427,7 @@ export const AppPublish = ({ names, categories }) => {
value={tag2}
onChange={(e) => setTag2(e.target.value)}
sx={{
border: '0.5px solid var(--50-white, #FFFFFF80)',
border: `0.5px solid ${theme.palette.action.disabled}`,
padding: '0px 15px',
borderRadius: '5px',
height: '36px',
@ -452,7 +444,7 @@ export const AppPublish = ({ names, categories }) => {
value={tag3}
onChange={(e) => setTag3(e.target.value)}
sx={{
border: '0.5px solid var(--50-white, #FFFFFF80)',
border: `0.5px solid ${theme.palette.action.disabled}`,
padding: '0px 15px',
borderRadius: '5px',
height: '36px',
@ -469,7 +461,7 @@ export const AppPublish = ({ names, categories }) => {
value={tag4}
onChange={(e) => setTag4(e.target.value)}
sx={{
border: '0.5px solid var(--50-white, #FFFFFF80)',
border: `0.5px solid ${theme.palette.action.disabled}`,
padding: '0px 15px',
borderRadius: '5px',
height: '36px',
@ -486,7 +478,7 @@ export const AppPublish = ({ names, categories }) => {
value={tag5}
onChange={(e) => setTag5(e.target.value)}
sx={{
border: '0.5px solid var(--50-white, #FFFFFF80)',
border: `0.5px solid ${theme.palette.action.disabled}`,
padding: '0px 15px',
borderRadius: '5px',
height: '36px',

4
src/components/Apps/AppViewerContainer.tsx
View File

@ -27,7 +27,7 @@ const AppViewerContainer = React.forwardRef(
}
.frame-content {
overflow: hidden;
height: '100vh';
height: 100vh;
}
`}
</style>
@ -35,7 +35,7 @@ const AppViewerContainer = React.forwardRef(
}
style={{
border: 'none',
height: '100vh',
height: customHeight || '100vh',
left: (!isSelected || hide) && '-200vw',
overflow: 'hidden',
position: (!isSelected || hide) && 'fixed',

29
src/components/Apps/Apps-styles.tsx
View File

@ -141,7 +141,7 @@ export const AppLibrarySubTitle = styled(Typography)(({ theme }) => ({
export const AppCircle = styled(Box)(({ theme }) => ({
alignItems: 'center',
backgroundColor: theme.palette.background.default,
backgroundColor: theme.palette.background.surface,
borderColor:
theme.palette.mode === 'dark'
? 'rgb(209, 209, 209)'
@ -283,7 +283,7 @@ export const TabParent = styled(Box)(({ theme }) => ({
export const PublishQAppCTAParent = styled(Box)(({ theme }) => ({
alignItems: 'center',
backgroundColor: theme.palette.background.default,
backgroundColor: theme.palette.background.paper,
color: theme.palette.text.primary,
display: 'flex',
justifyContent: 'space-between',
@ -292,7 +292,7 @@ export const PublishQAppCTAParent = styled(Box)(({ theme }) => ({
export const PublishQAppCTALeft = styled(Box)(({ theme }) => ({
alignItems: 'center',
backgroundColor: theme.palette.background.default,
backgroundColor: theme.palette.background.paper,
color: theme.palette.text.primary,
display: 'flex',
justifyContent: 'flex-start',
@ -300,7 +300,7 @@ export const PublishQAppCTALeft = styled(Box)(({ theme }) => ({
export const PublishQAppCTARight = styled(Box)(({ theme }) => ({
alignItems: 'center',
backgroundColor: theme.palette.background.default,
backgroundColor: theme.palette.background.paper,
color: theme.palette.text.primary,
display: 'flex',
justifyContent: 'flex-end',
@ -308,8 +308,8 @@ export const PublishQAppCTARight = styled(Box)(({ theme }) => ({
export const PublishQAppCTAButton = styled(ButtonBase)(({ theme }) => ({
alignItems: 'center',
backgroundColor: theme.palette.background.paper,
borderColor: theme.palette.background.default,
backgroundColor: theme.palette.background.default,
borderColor: theme.palette.text.primary,
borderRadius: '25px',
borderStyle: 'solid',
borderWidth: '1px',
@ -322,10 +322,10 @@ export const PublishQAppCTAButton = styled(ButtonBase)(({ theme }) => ({
export const PublishQAppDotsBG = styled(Box)(({ theme }) => ({
alignItems: 'center',
backgroundColor: theme.palette.background.default,
backgroundColor: theme.palette.background.paper,
color: theme.palette.text.primary,
display: 'flex',
height: '60px',
height: '80px',
justifyContent: 'center',
width: '60px',
}));
@ -333,7 +333,7 @@ export const PublishQAppDotsBG = styled(Box)(({ theme }) => ({
export const PublishQAppInfo = styled(Typography)(({ theme }) => ({
backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary,
fontSize: '10px',
fontSize: '16px',
fontStyle: 'italic',
fontWeight: 400,
lineHeight: 1.2,
@ -341,15 +341,18 @@ export const PublishQAppInfo = styled(Typography)(({ theme }) => ({
export const PublishQAppChoseFile = styled(ButtonBase)(({ theme }) => ({
alignItems: 'center',
backgroundColor: theme.palette.background.default,
backgroundColor: theme.palette.background.paper,
borderRadius: '5px',
color: theme.palette.text.primary,
display: 'flex',
fontSize: '10px',
fontSize: '16px',
fontWeight: 600,
height: '30px',
height: '40px',
justifyContent: 'center',
width: '101px',
width: '120px',
'&:hover': {
backgroundColor: 'action.hover', // background on hover
},
}));
export const AppsCategoryInfo = styled(Box)(({ theme }) => ({

5
src/components/Apps/AppsDesktop.tsx
View File

@ -24,6 +24,7 @@ import { useRecoilState } from 'recoil';
import { enabledDevModeAtom } from '../../atoms/global';
import { AppsIcon } from '../../assets/Icons/AppsIcon';
import { CoreSyncStatus } from '../CoreSyncStatus';
import { MessagingIconFilled } from '../../assets/Icons/MessagingIconFilled';
const uid = new ShortUniqueId({ length: 8 });
@ -342,6 +343,8 @@ export const AppsDesktop = ({
gap: '25px',
height: '100vh',
width: '60px',
backgroundColor: theme.palette.background.surface,
borderRight: `1px solid ${theme.palette.border.subtle}`,
}}
>
<ButtonBase
@ -392,7 +395,7 @@ export const AppsDesktop = ({
label="Chat"
disableWidth
>
<MessagingIcon
<MessagingIconFilled
height={30}
color={
hasUnreadDirects || hasUnreadGroups

21
src/components/Apps/AppsDevMode.tsx
View File

@ -1,15 +1,6 @@
import React, {
useCallback,
useContext,
useEffect,
useMemo,
useRef,
useState,
} from 'react';
import React, { useEffect, useRef, useState } from 'react';
import { AppsDevModeHome } from './AppsDevModeHome';
import { Spacer } from '../../common/Spacer';
import { MyContext, getBaseApiReact } from '../../App';
import { AppInfo } from './AppInfo';
import {
executeEvent,
@ -19,19 +10,15 @@ import {
import { AppsParent } from './Apps-styles';
import AppViewerContainer from './AppViewerContainer';
import ShortUniqueId from 'short-unique-id';
import { AppPublish } from './AppPublish';
import { AppsLibraryDesktop } from './AppsLibraryDesktop';
import { AppsCategoryDesktop } from './AppsCategoryDesktop';
import { AppsNavBarDesktop } from './AppsNavBarDesktop';
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 { HubsIcon } from '../../assets/Icons/HubsIcon';
import { AppsDevModeNavBar } from './AppsDevModeNavBar';
import { AppsIcon } from '../../assets/Icons/AppsIcon';
import { IconWrapper } from '../Desktop/DesktopFooter';
import { CoreSyncStatus } from '../CoreSyncStatus';
import { MessagingIconFilled } from '../../assets/Icons/MessagingIconFilled';
const uid = new ShortUniqueId({ length: 8 });
@ -311,7 +298,7 @@ export const AppsDevMode = ({
label="Chat"
disableWidth
>
<MessagingIcon
<MessagingIconFilled
height={30}
color={
hasUnreadDirects || hasUnreadGroups

4
src/components/Apps/AppsDevModeNavBar.tsx
View File

@ -81,7 +81,7 @@ export const AppsDevModeNavBar = () => {
sx={{
position: 'relative',
flexDirection: 'column',
width: '60px',
width: '59px',
height: 'unset',
maxHeight: '70vh',
borderRadius: '0px 30px 30px 0px',
@ -116,7 +116,7 @@ export const AppsDevModeNavBar = () => {
'& .MuiTabs-indicator': {
backgroundColor: 'white',
},
maxHeight: `320px`, // Ensure the tabs container fits within the available space
maxHeight: `275px`, // Ensure the tabs container fits within the available space
overflow: 'hidden', // Prevents overflow on small screens
}}
>

8
src/components/Apps/AppsLibraryDesktop.tsx
View File

@ -467,11 +467,13 @@ export const AppsLibraryDesktop = ({
borderRadius: '6px',
borderStyle: 'solid',
borderWidth: '4px',
boxShadow: '2px 4px 0px 0px #000000',
display: 'flex',
height: '50px',
justifyContent: 'center',
padding: '0px 20px',
'&:hover': {
backgroundColor: 'action.hover', // background on hover
},
}}
>
All
@ -495,11 +497,13 @@ export const AppsLibraryDesktop = ({
borderRadius: '6px',
borderStyle: 'solid',
borderWidth: '4px',
boxShadow: '2px 4px 0px 0px #000000',
display: 'flex',
height: '50px',
justifyContent: 'center',
padding: '0px 20px',
'&:hover': {
backgroundColor: 'action.hover', // background on hover
},
}}
>
{category?.name}

4
src/components/Apps/AppsNavBarDesktop.tsx
View File

@ -160,7 +160,7 @@ export const AppsNavBarDesktop = ({ disableBack }) => {
maxHeight: '70vh',
padding: '10px',
position: 'relative',
width: '60px',
width: '59px',
}}
>
<AppsNavBarLeft
@ -190,7 +190,7 @@ export const AppsNavBarDesktop = ({ disableBack }) => {
'& .MuiTabs-indicator': {
backgroundColor: theme.palette.background.default,
},
maxHeight: `320px`, // Ensure the tabs container fits within the available space
maxHeight: `275px`, // Ensure the tabs container fits within the available space
overflow: 'hidden', // Prevents overflow on small screens
}}
>

6
src/components/Apps/AppsPrivate.tsx
View File

@ -261,6 +261,12 @@ export const AppsPrivate = ({ myName }) => {
}}
maxWidth="md"
fullWidth={true}
PaperProps={{
style: {
backgroundColor: theme.palette.background.paper,
boxShadow: 'none',
},
}}
>
<Box>
<Tabs

8
src/components/Auth/DownloadWallet.tsx
View File

@ -184,6 +184,14 @@ export const DownloadWallet = ({
edge="start"
tabIndex={-1}
disableRipple
sx={{
'&.Mui-checked': {
color: theme.palette.text.secondary,
},
'& .MuiSvgIcon-root': {
color: theme.palette.text.secondary,
},
}}
/>
}
label={

2
src/components/Chat/ChatGroup.tsx
View File

@ -1217,7 +1217,7 @@ export const ChatGroup = ({
>
<CloseIcon
sx={{
color: 'white',
color: theme.palette.text.primary,
}}
/>
</ButtonBase>

4
src/components/Chat/ChatOptions.tsx
View File

@ -576,7 +576,7 @@ export const ChatOptions = ({
<Box
sx={{
alignItems: 'center',
backgroundColor: theme.palette.background.default,
backgroundColor: theme.palette.background.paper,
borderBottomLeftRadius: '20px',
borderTopLeftRadius: '20px',
display: 'flex',
@ -711,7 +711,7 @@ export const ChatOptions = ({
(!lastMentionTimestamp ||
lastMentionTimestamp < mentionList[0]?.timestamp)
? 'var(--unread)'
: 'white',
: theme.palette.text.primary,
}}
/>
</Tooltip>

11
src/components/Chat/TipTap.tsx
View File

@ -365,6 +365,7 @@ export default ({
membersWithNames,
enableMentions,
}) => {
const theme = useTheme();
const [isDisabledEditorEnter, setIsDisabledEditorEnter] = useRecoilState(
isDisabledEditorEnterAtom
);
@ -483,12 +484,16 @@ export default ({
}, []);
return (
<div
style={{
<Box
sx={{
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'space-between',
'--text-primary': theme.palette.text.primary,
'--text-secondary': theme.palette.text.secondary,
'--background-default': theme.palette.background.default,
'--background-secondary': theme.palette.background.paper,
}}
>
<EditorProvider
@ -537,6 +542,6 @@ export default ({
},
}}
/>
</div>
</Box>
);
};

4
src/components/DesktopSideBar.tsx
View File

@ -1,6 +1,5 @@
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';
@ -9,6 +8,7 @@ import { AppsIcon } from '../assets/Icons/AppsIcon';
import ThemeSelector from './Theme/ThemeSelector';
import { CoreSyncStatus } from './CoreSyncStatus';
import LanguageSelector from './Language/LanguageSelector';
import { MessagingIconFilled } from '../assets/Icons/MessagingIconFilled';
export const DesktopSideBar = ({
goToHome,
@ -111,7 +111,7 @@ export const DesktopSideBar = ({
label="Chat"
disableWidth
>
<MessagingIcon
<MessagingIconFilled
height={30}
color={
hasUnreadDirects || hasUnreadGroups

17
src/components/Embeds/AttachmentEmbed.tsx
View File

@ -15,6 +15,7 @@ import {
Dialog,
IconButton,
CircularProgress,
useTheme,
} from '@mui/material';
import { base64ToBlobUrl } from '../../utils/fileReading';
import { saveFileToDiskGeneric } from '../../utils/generateWallet/generateWallet';
@ -44,6 +45,7 @@ export const AttachmentCard = ({
}) => {
const [isOpen, setIsOpen] = useState(true);
const { downloadResource } = useContext(MyContext);
const theme = useTheme();
const saveToDisk = async () => {
const { name, service, identifier } = resourceData;
@ -110,7 +112,7 @@ export const AttachmentCard = ({
return (
<Card
sx={{
backgroundColor: '#1F2023',
backgroundColor: theme.palette.background.default,
height: '250px',
// height: isOpen ? "auto" : "150px",
}}
@ -132,7 +134,7 @@ export const AttachmentCard = ({
>
<AttachmentIcon
sx={{
color: 'white',
color: theme.palette.text.primary,
}}
/>
<Typography>ATTACHMENT embed</Typography>
@ -149,7 +151,7 @@ export const AttachmentCard = ({
onClick={refresh}
sx={{
fontSize: '24px',
color: 'white',
color: theme.palette.text.primary,
}}
/>
</ButtonBase>
@ -159,7 +161,7 @@ export const AttachmentCard = ({
onClick={openExternal}
sx={{
fontSize: '24px',
color: 'white',
color: theme.palette.text.primary,
}}
/>
</ButtonBase>
@ -174,7 +176,6 @@ export const AttachmentCard = ({
<Typography
sx={{
fontSize: '12px',
color: 'white',
}}
>
Created by {decodeIfEncoded(owner)}
@ -281,10 +282,10 @@ export const AttachmentCard = ({
resourceDetails?.status?.status !== 'FAILED_TO_DOWNLOAD' && (
<>
<CircularProgress
sx={{
color: 'white',
}}
size={20}
sx={{
color: theme.palette.text.primary,
}}
/>
<FileAttachmentFont>
Downloading:{' '}

17
src/components/Embeds/ImageEmbed.tsx
View File

@ -8,6 +8,7 @@ import {
Divider,
Dialog,
IconButton,
useTheme,
} from '@mui/material';
import RefreshIcon from '@mui/icons-material/Refresh';
@ -28,6 +29,7 @@ export const ImageCard = ({
errorMsg,
encryptionType,
}) => {
const theme = useTheme();
const [isOpen, setIsOpen] = useState(true);
const [height, setHeight] = useState('400px');
useEffect(() => {
@ -45,7 +47,7 @@ export const ImageCard = ({
return (
<Card
sx={{
backgroundColor: '#1F2023',
backgroundColor: theme.palette.background.default,
height: height,
transition: 'height 0.6s ease-in-out',
}}
@ -67,7 +69,7 @@ export const ImageCard = ({
>
<ImageIcon
sx={{
color: 'white',
color: theme.palette.text.primary,
}}
/>
<Typography>IMAGE embed</Typography>
@ -84,7 +86,7 @@ export const ImageCard = ({
onClick={refresh}
sx={{
fontSize: '24px',
color: 'white',
color: theme.palette.text.primary,
}}
/>
</ButtonBase>
@ -94,7 +96,7 @@ export const ImageCard = ({
onClick={openExternal}
sx={{
fontSize: '24px',
color: 'white',
color: theme.palette.text.primary,
}}
/>
</ButtonBase>
@ -109,7 +111,6 @@ export const ImageCard = ({
<Typography
sx={{
fontSize: '12px',
color: 'white',
}}
>
Created by {decodeIfEncoded(owner)}
@ -182,7 +183,7 @@ export function ImageViewer({ src, alt = '' }) {
const handleOpenFullscreen = () => setIsFullscreen(true);
const handleCloseFullscreen = () => setIsFullscreen(false);
const theme = useTheme();
return (
<>
{/* Image in container */}
@ -231,7 +232,7 @@ export function ImageViewer({ src, alt = '' }) {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#000', // Optional: dark background for fullscreen mode
backgroundColor: theme.palette.background.paper, // Optional: dark background for fullscreen mode
}}
>
{/* Close Button */}
@ -242,7 +243,7 @@ export function ImageViewer({ src, alt = '' }) {
top: 8,
right: 8,
zIndex: 10,
color: 'white',
color: theme.palette.text.primary,
}}
>
<CloseIcon />

24
src/components/Embeds/PollEmbed.tsx
View File

@ -12,6 +12,7 @@ import {
Box,
ButtonBase,
Divider,
useTheme,
} from '@mui/material';
import { getNameInfo } from '../Group/Group';
import PollIcon from '@mui/icons-material/Poll';
@ -37,6 +38,7 @@ export const PollCard = ({
const [isOpen, setIsOpen] = useState(false);
const { show, userInfo } = useContext(MyContext);
const [isLoadingSubmit, setIsLoadingSubmit] = useState(false);
const theme = useTheme();
const handleVote = async () => {
const fee = await getFee('VOTE_ON_POLL');
@ -103,7 +105,7 @@ export const PollCard = ({
return (
<Card
sx={{
backgroundColor: '#1F2023',
backgroundColor: theme.palette.background.default,
height: isOpen ? 'auto' : '150px',
}}
>
@ -124,7 +126,7 @@ export const PollCard = ({
>
<PollIcon
sx={{
color: 'white',
color: theme.palette.text.primary,
}}
/>
<Typography>POLL embed</Typography>
@ -141,7 +143,7 @@ export const PollCard = ({
onClick={refresh}
sx={{
fontSize: '24px',
color: 'white',
color: theme.palette.text.primary,
}}
/>
</ButtonBase>
@ -151,7 +153,7 @@ export const PollCard = ({
onClick={openExternal}
sx={{
fontSize: '24px',
color: 'white',
color: theme.palette.text.primary,
}}
/>
</ButtonBase>
@ -186,9 +188,6 @@ export const PollCard = ({
<Button
size="small"
variant="contained"
sx={{
backgroundColor: 'var(--green)',
}}
onClick={() => {
setIsOpen(true);
}}
@ -260,16 +259,7 @@ export const PollCard = ({
<FormControlLabel
key={index}
value={index}
control={
<Radio
sx={{
color: 'white', // Unchecked color
'&.Mui-checked': {
color: 'var(--green)', // Checked color
},
}}
/>
}
control={<Radio />}
label={option?.optionName}
sx={{
'& .MuiFormControlLabel-label': {

2
src/components/GeneralNotifications.tsx
View File

@ -77,7 +77,7 @@ export const GeneralNotifications = ({ address }) => {
sx={{
color: hasNewPayment
? 'var(--unread)'
: theme.palette.text.primary,
: theme.palette.text.secondary,
}}
/>
</Tooltip>

2
src/components/Group/GroupInvites.tsx
View File

@ -71,7 +71,7 @@ export const GroupInvites = ({ myAddress, setOpenAddGroup }) => {
fontSize: '1rem',
}}
>
{t('group:group_invites', { postProcess: 'capitalize' })}{' '}
{t('group:group.invites', { postProcess: 'capitalize' })}{' '}
{groupsWithJoinRequests?.length > 0 &&
` (${groupsWithJoinRequests?.length})`}
</Typography>

28
src/components/Group/ManageMembers.tsx
View File

@ -13,7 +13,7 @@ import { InviteMember } from './InviteMember';
import { ListOfInvites } from './ListOfInvites';
import { ListOfBans } from './ListOfBans';
import { ListOfJoinRequests } from './ListOfJoinRequests';
import { Box, ButtonBase, Card, Tab, Tabs } from '@mui/material';
import { Box, ButtonBase, Card, Tab, Tabs, useTheme } from '@mui/material';
import { CustomizedSnackbars } from '../Snackbar/Snackbar';
import { MyContext, getBaseApiReact } from '../../App';
import { getGroupMembers, getNames } from './Group';
@ -60,6 +60,7 @@ export const ManageMembers = ({
const handleChange = (event: React.SyntheticEvent, newValue: number) => {
setValue(newValue);
};
const theme = useTheme();
const { show, setTxList } = React.useContext(MyContext);
const handleClose = () => {
@ -172,9 +173,14 @@ export const ManageMembers = ({
onClose={handleClose}
TransitionComponent={Transition}
>
<AppBar sx={{ position: 'relative', bgcolor: '#232428' }}>
<AppBar
sx={{
position: 'relative',
bgcolor: theme.palette.background.default,
}}
>
<Toolbar>
<Typography sx={{ ml: 2, flex: 1 }} variant="h6" component="div">
<Typography sx={{ ml: 2, flex: 1 }} variant="h4" component="div">
Manage Members
</Typography>
<IconButton
@ -189,8 +195,8 @@ export const ManageMembers = ({
</AppBar>
<Box
sx={{
bgcolor: '#27282c',
color: 'white',
bgcolor: theme.palette.background.default,
color: theme.palette.text.primary,
flexGrow: 1,
overflowY: 'auto',
}}
@ -205,7 +211,7 @@ export const ManageMembers = ({
allowScrollButtonsMobile // Show scroll buttons on mobile as well
sx={{
'& .MuiTabs-indicator': {
backgroundColor: 'white',
backgroundColor: theme.palette.background.default,
},
maxWidth: '100%', // Ensure the tabs container fits within the available space
overflow: 'hidden', // Prevents overflow on small screens
@ -216,7 +222,7 @@ export const ManageMembers = ({
{...a11yProps(0)}
sx={{
'&.Mui-selected': {
color: 'white',
color: theme.palette.text.primary,
},
fontSize: '1rem',
}}
@ -227,7 +233,7 @@ export const ManageMembers = ({
{...a11yProps(1)}
sx={{
'&.Mui-selected': {
color: 'white',
color: theme.palette.text.primary,
},
fontSize: '1rem',
}}
@ -238,7 +244,7 @@ export const ManageMembers = ({
{...a11yProps(2)}
sx={{
'&.Mui-selected': {
color: 'white',
color: theme.palette.text.primary,
},
fontSize: '1rem',
}}
@ -249,7 +255,7 @@ export const ManageMembers = ({
{...a11yProps(3)}
sx={{
'&.Mui-selected': {
color: 'white',
color: theme.palette.text.primary,
},
fontSize: '1rem',
}}
@ -260,7 +266,7 @@ export const ManageMembers = ({
{...a11yProps(4)}
sx={{
'&.Mui-selected': {
color: 'white',
color: theme.palette.text.primary,
},
fontSize: '1rem',
}}

6
src/components/QMailStatus.tsx
View File

@ -87,7 +87,11 @@ export const QMailStatus = () => {
},
}}
>
<Mail />
<Mail
sx={{
color: theme.palette.text.secondary,
}}
/>
</Tooltip>
</ButtonBase>
);

3
src/styles/App-styles.ts
View File

@ -54,7 +54,6 @@ export const AuthenticatedContainerInnerTop = styled(Box)(({ theme }) => ({
}));
export const TextP = styled(Typography)(({ theme }) => ({
backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary,
fontFamily: 'Inter',
fontSize: '13px',
@ -62,7 +61,6 @@ export const TextP = styled(Typography)(({ theme }) => ({
}));
export const TextItalic = styled('span')(({ theme }) => ({
backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary,
fontFamily: 'Inter',
fontSize: '13px',
@ -71,7 +69,6 @@ export const TextItalic = styled('span')(({ theme }) => ({
}));
export const TextSpan = styled('span')(({ theme }) => ({
backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary,
fontFamily: 'Inter',
fontSize: '13px',

14
src/styles/theme-dark.ts
View File

@ -81,6 +81,20 @@ const darkThemeOptions: ThemeOptions = {
},
},
},
MuiDialog: {
styleOverrides: {
paper: {
backgroundImage: 'none',
},
},
},
MuiPopover: {
styleOverrides: {
paper: {
backgroundImage: 'none',
},
},
},
},
};

18
src/styles/theme-light.ts
View File

@ -19,8 +19,8 @@ const lightThemeOptions: ThemeOptions = {
surface: 'rgb(240, 240, 240)', // optional middle gray for replies, side panels
},
text: {
primary: 'rgba(0, 0, 0, 1)',
secondary: 'rgba(82, 82, 82, 1)',
primary: 'rgba(0, 0, 0, 0.87)', // 87% black (slightly softened)
secondary: 'rgba(0, 0, 0, 0.6)', // 60% black
},
border: {
main: 'rgba(0, 0, 0, 0.12)',
@ -82,6 +82,20 @@ const lightThemeOptions: ThemeOptions = {
},
},
},
MuiDialog: {
styleOverrides: {
paper: {
backgroundImage: 'none',
},
},
},
MuiPopover: {
styleOverrides: {
paper: {
backgroundImage: 'none',
},
},
},
},
};