Qortal/Qortal-Hub
1
0
Fork 0
mirror of https://github.com/Qortal/Qortal-Hub.git synced 2025-07-22 20:26:50 +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
Download Patch File Download Diff File Expand all files Collapse all files

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>
);