Qortal/Qortal-Hub
1
0
Fork 0
mirror of https://github.com/Qortal/Qortal-Hub.git synced 2025-06-11 10:46:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

add css vars to theme palette

Browse Source
This commit is contained in:
PhilReact 2025-04-28 19:55:48 +03:00
parent ba9062dbcf
commit ed7b36791a
33 changed files with 149 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/App.tsx
View File

@ -3121,12 +3121,12 @@ function App() {
<DialogActions>
<Button
sx={{
backgroundColor: 'var(--green)',
backgroundColor: theme.palette.other.positive,
color: theme.palette.text.primary,
fontWeight: 'bold',
opacity: 0.7,
'&:hover': {
backgroundColor: 'var(--green)',
backgroundColor: theme.palette.other.positive,
color: 'black',
opacity: 1,
},
@ -3141,12 +3141,12 @@ function App() {
</Button>
<Button
sx={{
backgroundColor: 'var(--danger)',
backgroundColor: theme.palette.other.danger,
color: 'black',
fontWeight: 'bold',
opacity: 0.7,
'&:hover': {
backgroundColor: 'var(--danger)',
backgroundColor: theme.palette.other.danger,
color: 'black',
opacity: 1,
},
@ -3500,7 +3500,7 @@ function App() {
>
<CustomButtonAccept
color="black"
bgColor="var(--green)"
bgColor={theme.palette.other.positive}
sx={{
minWidth: '102px',
opacity:
@ -3536,7 +3536,7 @@ function App() {
</CustomButtonAccept>
<CustomButtonAccept
color="black"
bgColor="var(--danger)"
bgColor={theme.palette.other.danger}
sx={{
minWidth: '102px',
}}
@ -3593,7 +3593,7 @@ function App() {
>
<HelpIcon
sx={{
color: 'var(--unread)',
color: theme.palette.other.unread,
}}
/>
</ButtonBase>

7
src/ExtStates/NotAuthenticated.tsx
View File

@ -562,11 +562,12 @@ export const NotAuthenticated = ({
}}
sx={{
backgroundColor:
hasSeenGettingStarted === false && 'var(--green)',
hasSeenGettingStarted === false && theme.palette.other.positive,
color: hasSeenGettingStarted === false && 'black',
'&:hover': {
backgroundColor:
hasSeenGettingStarted === false && 'var(--green)',
hasSeenGettingStarted === false &&
theme.palette.other.positive,
color: hasSeenGettingStarted === false && 'black',
},
}}
@ -1077,7 +1078,7 @@ export const NotAuthenticated = ({
>
<HelpIcon
sx={{
color: 'var(--unread)',
color: theme.palette.other.unread,
}}
/>
</ButtonBase>

6
src/Wallets.tsx
View File

@ -539,12 +539,12 @@ const WalletItem = ({ wallet, updateWalletItem, idx, setSelectedWallet }) => {
</Button>
<Button
sx={{
backgroundColor: 'var(--danger)',
backgroundColor: theme.palette.other.danger,
'&:hover': {
backgroundColor: 'var(--danger)',
backgroundColor: theme.palette.other.danger,
},
'&:focus': {
backgroundColor: 'var(--danger)',
backgroundColor: theme.palette.other.danger,
},
}}
size="small"

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

@ -387,7 +387,7 @@ export const AppsDesktop = ({
<IconWrapper
color={
hasUnreadDirects || hasUnreadGroups
? 'var(--unread)'
? theme.palette.other.unread
: desktopViewMode === 'chat'
? theme.palette.text.primary
: theme.palette.text.secondary
@ -399,7 +399,7 @@ export const AppsDesktop = ({
height={30}
color={
hasUnreadDirects || hasUnreadGroups
? 'var(--unread)'
? theme.palette.other.unread
: desktopViewMode === 'chat'
? theme.palette.text.primary
: theme.palette.text.secondary

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

@ -290,7 +290,7 @@ export const AppsDevMode = ({
<IconWrapper
color={
hasUnreadDirects || hasUnreadGroups
? 'var(--unread)'
? theme.palette.other.unread
: desktopViewMode === 'chat'
? theme.palette.text.primary
: theme.palette.text.secondary
@ -302,7 +302,7 @@ export const AppsDevMode = ({
height={30}
color={
hasUnreadDirects || hasUnreadGroups
? 'var(--unread)'
? theme.palette.other.unread
: desktopViewMode === 'chat'
? theme.palette.text.primary
: theme.palette.text.secondary

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

@ -361,7 +361,7 @@ export const AppsNavBarDesktop = ({ disableBack }) => {
height={20}
sx={{
color: isSelectedAppPinned
? 'var(--danger)'
? theme.palette.other.danger
: theme.palette.text.primary,
}}
/>
@ -372,7 +372,7 @@ export const AppsNavBarDesktop = ({ disableBack }) => {
fontSize: '12px',
fontWeight: 600,
color: isSelectedAppPinned
? 'var(--danger)'
? theme.palette.other.danger
: theme.palette.text.primary,
},
}}

3
src/components/Chat/ChatDirect.tsx
View File

@ -690,7 +690,8 @@ export const ChatDirect = ({
<Typography
sx={{
fontSize: '12px',
color: messageSize > 4000 ? 'var(--danger)' : 'unset',
color:
messageSize > 4000 ? theme.palette.other.danger : 'unset',
}}
>{`Your message size is of ${messageSize} bytes out of a maximum of 4000`}</Typography>
</Box>

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

@ -1118,7 +1118,8 @@ export const ChatGroup = ({
<Typography
sx={{
fontSize: '12px',
color: messageSize > 4000 ? 'var(--danger)' : 'unset',
color:
messageSize > 4000 ? theme.palette.other.danger : 'unset',
}}
>{`Your message size is of ${messageSize} bytes out of a maximum of 4000`}</Typography>
</Box>

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

@ -390,7 +390,7 @@ export const ChatList = ({
<button
onClick={() => scrollToBottom()}
style={{
backgroundColor: 'var(--unread)',
backgroundColor: theme.palette.other.unread,
border: 'none',
borderRadius: '20px',
bottom: 20,

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

@ -714,7 +714,7 @@ export const ChatOptions = ({
mentionList?.length > 0 &&
(!lastMentionTimestamp ||
lastMentionTimestamp < mentionList[0]?.timestamp)
? 'var(--unread)'
? theme.palette.other.unread
: theme.palette.text.primary,
}}
/>

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

@ -674,7 +674,7 @@ export const GroupAnnouncements = ({
}}
style={{
alignSelf: 'center',
background: 'var(--danger)',
background: theme.palette.other.danger,
cursor: isSending ? 'default' : 'pointer',
flexShrink: 0,
fontSize: '14px',

4
src/components/Desktop/DesktopFooter.tsx
View File

@ -122,7 +122,7 @@ export const DesktopFooter = ({
height={30}
color={
hasUnreadGroups
? 'var(--danger)'
? theme.palette.other.danger
: isGroups
? theme.palette.text.primary
: theme.palette.text.secondary
@ -141,7 +141,7 @@ export const DesktopFooter = ({
height={30}
color={
hasUnreadDirects
? 'var(--danger)'
? theme.palette.other.danger
: isDirects
? theme.palette.text.primary
: theme.palette.text.secondary

8
src/components/Desktop/DesktopHeader.tsx
View File

@ -104,14 +104,14 @@ export const DesktopHeader = ({
{isPrivate && (
<LockIcon
sx={{
color: 'var(--green)',
color: theme.palette.other.positive,
}}
/>
)}
{isPrivate === false && (
<NoEncryptionGmailerrorredIcon
sx={{
color: 'var(--danger)',
color: theme.palette.other.danger,
}}
/>
)}
@ -155,7 +155,7 @@ export const DesktopHeader = ({
width={20}
color={
isUnread
? 'var(--unread)'
? theme.palette.other.unread
: isAnnouncement
? theme.palette.text.primary
: theme.palette.text.secondary
@ -183,7 +183,7 @@ export const DesktopHeader = ({
width={20}
color={
isUnreadChat
? 'var(--unread)'
? theme.palette.other.unread
: isChat
? theme.palette.text.primary
: theme.palette.text.secondary

4
src/components/DesktopSideBar.tsx
View File

@ -103,7 +103,7 @@ export const DesktopSideBar = ({
<IconWrapper
color={
hasUnreadDirects || hasUnreadGroups
? 'var(--unread)'
? theme.palette.other.unread
: desktopViewMode === 'chat'
? theme.palette.text.primary
: theme.palette.text.secondary
@ -115,7 +115,7 @@ export const DesktopSideBar = ({
height={30}
color={
hasUnreadDirects || hasUnreadGroups
? 'var(--unread)'
? theme.palette.other.unread
: desktopViewMode === 'chat'
? theme.palette.text.primary
: theme.palette.text.secondary

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

@ -225,7 +225,7 @@ export const AttachmentCard = ({
<Typography
sx={{
fontSize: '14px',
color: 'var(--danger)',
color: theme.palette.other.danger,
}}
>
{errorMsg}

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

@ -160,7 +160,7 @@ export const ImageCard = ({
<Typography
sx={{
fontSize: '14px',
color: 'var(--danger)',
color: theme.palette.other.danger,
}}
>
{errorMsg}

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

@ -220,7 +220,7 @@ export const PollCard = ({
<Typography
sx={{
fontSize: '14px',
color: 'var(--danger)',
color: theme.palette.other.danger,
}}
>
{errorMsg}

2
src/components/GeneralNotifications.tsx
View File

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

4
src/components/GlobalActions/JoinGroup.tsx
View File

@ -230,7 +230,7 @@ export const JoinGroup = ({ memberGroups }) => {
>
<CustomButtonAccept
color="black"
bgColor="var(--green)"
bgColor={theme.palette.other.positive}
sx={{
minWidth: '102px',
height: '45px',
@ -244,7 +244,7 @@ export const JoinGroup = ({ memberGroups }) => {
<CustomButtonAccept
color="black"
bgColor="var(--danger)"
bgColor={theme.palette.other.danger}
sx={{
minWidth: '102px',
height: '45px',

7
src/components/Group/AddGroupList.tsx
View File

@ -6,6 +6,7 @@ import {
Popover,
TextField,
Typography,
useTheme,
} from '@mui/material';
import {
useCallback,
@ -45,7 +46,7 @@ export const AddGroupList = ({ setInfoSnack, setOpenSnack }) => {
const [inputValue, setInputValue] = useState('');
const [filteredItems, setFilteredItems] = useState(groups);
const [isLoading, setIsLoading] = useState(false);
const theme = useTheme();
const handleFilter = useCallback(
(query) => {
if (query) {
@ -254,14 +255,14 @@ export const AddGroupList = ({ setInfoSnack, setOpenSnack }) => {
{group?.isOpen === false && (
<LockIcon
sx={{
color: 'var(--green)',
color: theme.palette.other.positive,
}}
/>
)}
{group?.isOpen === true && (
<NoEncryptionGmailerrorredIcon
sx={{
color: 'var(--danger)',
color: theme.palette.other.danger,
}}
/>
)}

12
src/components/Group/Forum/GroupMail.tsx
View File

@ -60,7 +60,7 @@ import { SortIcon } from '../../../assets/Icons/SortIcon';
import { CustomButton } from '../../../styles/App-styles';
const filterOptions = ['Recently active', 'Newest', 'Oldest'];
import CheckIcon from '@mui/icons-material/Check';
export const threadIdentifier = 'DOCUMENT';
export const GroupMail = ({
@ -606,13 +606,19 @@ export const GroupMail = ({
}}
sx={{
backgroundColor:
filterMode === filter ? 'rgba(74, 158, 244, 1)' : 'unset',
filterMode === filter
? theme.palette.action.selected
: 'unset',
}}
key={filter}
>
<InstanceListContainerRowCheck>
{filter === filterMode && (
<InstanceListContainerRowCheckIcon src={CheckSVG} />
<CheckIcon
sx={{
color: theme.palette.text.primary,
}}
/>
)}
</InstanceListContainerRowCheck>
<InstanceListContainerRowMain>

44
src/components/Group/Forum/Mail-styles.ts
View File

@ -1,16 +1,6 @@
import { Typography, Box } from '@mui/material';
import { styled } from '@mui/system';
export const InstanceContainer = styled(Box)(({ theme }) => ({
display: 'flex',
alignItems: 'center',
width: '100%',
backgroundColor: 'var(--color-instance)',
height: '59px',
flexShrink: 0,
justifyContent: 'space-between',
}));
export const MailContainer = styled(Box)(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
@ -161,24 +151,20 @@ export const InstanceP = styled(Typography)(({ theme }) => ({
fontWeight: 500,
}));
export const InstanceListParent = styled(Box)`
display: flex;
flex-direction: column;
width: 100%;
min-height: 246px;
max-height: 325px;
width: 425px;
padding: 10px 0px 7px 0px;
background-color: var(--color-instance-popover-bg);
border: 1px solid rgba(0, 0, 0, 0.1);
`;
export const InstanceListHeader = styled(Box)`
display: flex;
flex-direction: column;
width: 100%;
background-color: var(--color-instance-popover-bg);
`;
export const InstanceListParent = styled(Typography)(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
width: '425px', // only one width now
minHeight: '246px',
maxHeight: '325px',
padding: '10px 0px 7px 0px',
border: '1px solid rgba(0, 0, 0, 0.1)',
}));
export const InstanceListHeader = styled(Typography)(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
width: '100%',
}));
export const InstanceFooter = styled(Box)`
display: flex;
@ -242,7 +228,7 @@ export const InstanceListContainerRow = styled(Box)(({ theme }) => ({
cursor: 'pointer',
transition: '0.2s background',
'&:hover': {
background: 'rgba(67, 68, 72, 1)',
background: theme.palette.action.hover,
},
flexShrink: 0,
}));

26
src/components/Group/Group.tsx
View File

@ -1582,7 +1582,7 @@ export const Group = ({
<IconWrapper
color={
groupChatHasUnread || groupsAnnHasUnread
? 'var(--unread)'
? theme.palette.other.unread
: desktopSideView === 'groups'
? theme.palette.text.primary
: theme.palette.text.secondary
@ -1595,7 +1595,7 @@ export const Group = ({
height={24}
color={
groupChatHasUnread || groupsAnnHasUnread
? 'var(--unread)'
? theme.palette.other.unread
: desktopSideView === 'groups'
? theme.palette.text.primary
: theme.palette.text.secondary
@ -1612,7 +1612,7 @@ export const Group = ({
customWidth="75px"
color={
directChatHasUnread
? 'var(--unread)'
? theme.palette.other.unread
: desktopSideView === 'directs'
? theme.palette.text.primary
: theme.palette.text.secondary
@ -1624,7 +1624,7 @@ export const Group = ({
height={24}
color={
directChatHasUnread
? 'var(--unread)'
? theme.palette.other.unread
: desktopSideView === 'directs'
? theme.palette.text.primary
: theme.palette.text.secondary
@ -1745,7 +1745,7 @@ export const Group = ({
direct?.timestamp) && (
<MarkChatUnreadIcon
sx={{
color: 'var(--unread)',
color: theme.palette.other.unread,
}}
/>
)}
@ -1812,7 +1812,7 @@ export const Group = ({
<IconWrapper
color={
groupChatHasUnread || groupsAnnHasUnread
? 'var(--unread)'
? theme.palette.other.unread
: desktopSideView === 'groups'
? theme.palette.text.primary
: theme.palette.text.secondary
@ -1825,7 +1825,7 @@ export const Group = ({
height={24}
color={
groupChatHasUnread || groupsAnnHasUnread
? 'var(--unread)'
? theme.palette.other.unread
: desktopSideView === 'groups'
? theme.palette.text.primary
: theme.palette.text.secondary
@ -1842,7 +1842,7 @@ export const Group = ({
customWidth="75px"
color={
directChatHasUnread
? 'var(--unread)'
? theme.palette.other.unread
: desktopSideView === 'directs'
? theme.palette.text.primary
: theme.palette.text.secondary
@ -1854,7 +1854,7 @@ export const Group = ({
height={24}
color={
directChatHasUnread
? 'var(--unread)'
? theme.palette.other.unread
: desktopSideView === 'directs'
? theme.palette.text.primary
: theme.palette.text.secondary
@ -1959,7 +1959,7 @@ export const Group = ({
}/qortal_avatar?async=true`} /> */}
<LockIcon
sx={{
color: 'var(--green)',
color: theme.palette.other.positive,
}}
/>
</Box>
@ -1977,7 +1977,7 @@ export const Group = ({
>
<NoEncryptionGmailerrorredIcon
sx={{
color: 'var(--danger)',
color: theme.palette.other.danger,
}}
/>
</Box>
@ -2018,7 +2018,7 @@ export const Group = ({
!groupAnnouncements[group?.groupId]?.seentimestamp && (
<CampaignIcon
sx={{
color: 'var(--unread)',
color: theme.palette.other.unread,
marginRight: '5px',
}}
/>
@ -2034,7 +2034,7 @@ export const Group = ({
group?.timestamp) && (
<MarkChatUnreadIcon
sx={{
color: 'var(--unread)',
color: theme.palette.other.unread,
}}
/>
)}

4
src/components/Group/ListOfGroupPromotions.tsx
View File

@ -717,14 +717,14 @@ export const ListOfGroupPromotions = () => {
{promotion?.isOpen === false && (
<LockIcon
sx={{
color: 'var(--green)',
color: theme.palette.other.positive,
}}
/>
)}
{promotion?.isOpen === true && (
<NoEncryptionGmailerrorredIcon
sx={{
color: 'var(--danger)',
color: theme.palette.other.danger,
}}
/>
)}

12
src/components/Group/QMailMessages.tsx
View File

@ -153,7 +153,9 @@ export const QMailMessages = ({ userName, userAddress }) => {
</Typography>
<MarkEmailUnreadIcon
sx={{
color: anyUnread ? 'var(--unread)' : theme.palette.text.primary,
color: anyUnread
? theme.palette.other.unread
: theme.palette.text.primary,
}}
/>
{isExpanded ? (
@ -165,7 +167,9 @@ export const QMailMessages = ({ userName, userAddress }) => {
) : (
<ExpandMoreIcon
sx={{
color: anyUnread ? 'var(--unread)' : theme.palette.text.primary,
color: anyUnread
? theme.palette.other.unread
: theme.palette.text.primary,
marginLeft: 'auto',
}}
/>
@ -262,7 +266,7 @@ export const QMailMessages = ({ userName, userAddress }) => {
isLessThanOneWeekOld(mail?.created) ? (
<MailIcon
sx={{
color: 'var(--unread)',
color: theme.palette.other.unread,
}}
/>
) : !lastEnteredTimestamp ? (
@ -275,7 +279,7 @@ export const QMailMessages = ({ userName, userAddress }) => {
isLessThanOneWeekOld(mail?.created) ? (
<MailIcon
sx={{
color: 'var(--unread)',
color: theme.palette.other.unread,
}}
/>
) : (

7
src/components/Group/UserListOfInvites.tsx
View File

@ -5,6 +5,7 @@ import {
ListItemText,
Popover,
Typography,
useTheme,
} from '@mui/material';
import { useContext, useEffect, useRef, useState } from 'react';
import {
@ -54,7 +55,7 @@ export const UserListOfInvites = ({
const { txList, setTxList, show } = useContext(MyContext);
const [invites, setInvites] = useState<any[]>([]);
const [isLoading, setIsLoading] = useState(false);
const theme = useTheme();
const [popoverAnchor, setPopoverAnchor] = useState(null); // Track which list item the popover is anchored to
const [openPopoverIndex, setOpenPopoverIndex] = useState(null); // Track which list item has the popover open
const listRef = useRef();
@ -205,14 +206,14 @@ export const UserListOfInvites = ({
{invite?.isOpen === false && (
<LockIcon
sx={{
color: 'var(--green)',
color: theme.palette.other.positive,
}}
/>
)}
{invite?.isOpen === true && (
<NoEncryptionGmailerrorredIcon
sx={{
color: 'var(--danger)',
color: theme.palette.other.danger,
}}
/>
)}

12
src/components/Minting/Minting.tsx
View File

@ -638,14 +638,14 @@ export const Minting = ({
}}
disabled={mintingAccounts?.length > 1}
sx={{
backgroundColor: 'var(--green)',
backgroundColor: theme.palette.other.positive,
color: 'black',
fontWeight: 'bold',
opacity: 0.7,
maxWidth: '90%',
width: '200px',
'&:hover': {
backgroundColor: 'var(--green)',
backgroundColor: theme.palette.other.positive,
color: 'black',
opacity: 1,
},
@ -702,14 +702,14 @@ export const Minting = ({
<Button
size="small"
sx={{
backgroundColor: 'var(--danger)',
backgroundColor: theme.palette.other.danger,
color: theme.palette.text.primary,
fontWeight: 'bold',
maxWidth: '90%',
opacity: 0.7,
width: '200px',
'&:hover': {
backgroundColor: 'var(--danger)',
backgroundColor: theme.palette.other.danger,
color: theme.palette.text.primary,
opacity: 1,
},
@ -763,13 +763,13 @@ export const Minting = ({
<Button
size="small"
sx={{
backgroundColor: 'var(--green)',
backgroundColor: theme.palette.other.positive,
color: theme.palette.text.primary,
fontWeight: 'bold',
opacity: 0.7,
'&:hover': {
backgroundColor: 'var(--green)',
backgroundColor: theme.palette.other.positive,
color: 'black',
opacity: 1,
},

2
src/components/QMailStatus.tsx
View File

@ -43,7 +43,7 @@ export const QMailStatus = () => {
{hasNewMail && (
<div
style={{
backgroundColor: 'var(--unread)',
backgroundColor: theme.palette.other.unread,
borderRadius: '50%',
height: '15px',
outline: '1px solid white',

16
src/components/Save/Save.tsx
View File

@ -321,12 +321,12 @@ export const Save = ({ isDesktop, disableWidth, myName }) => {
}}
variant="contained"
sx={{
backgroundColor: 'var(--danger)',
backgroundColor: theme.palette.other.danger,
color: 'black',
fontWeight: 'bold',
opacity: 0.7,
'&:hover': {
backgroundColor: 'var(--danger)',
backgroundColor: theme.palette.other.danger,
color: 'black',
opacity: 1,
},
@ -393,12 +393,12 @@ export const Save = ({ isDesktop, disableWidth, myName }) => {
<LoadingButton
sx={{
backgroundColor: 'var(--green)',
backgroundColor: theme.palette.other.positive,
color: 'black',
opacity: 0.7,
fontWeight: 'bold',
'&:hover': {
backgroundColor: 'var(--green)',
backgroundColor: theme.palette.other.positive,
color: 'black',
opacity: 1,
},
@ -432,12 +432,12 @@ export const Save = ({ isDesktop, disableWidth, myName }) => {
onClick={revertChanges}
variant="contained"
sx={{
backgroundColor: 'var(--danger)',
backgroundColor: theme.palette.other.danger,
color: 'black',
fontWeight: 'bold',
opacity: 0.7,
'&:hover': {
backgroundColor: 'var(--danger)',
backgroundColor: theme.palette.other.danger,
color: 'black',
opacity: 1,
},
@ -503,12 +503,12 @@ export const Save = ({ isDesktop, disableWidth, myName }) => {
onClick={saveToQdn}
variant="contained"
sx={{
backgroundColor: 'var(--danger)',
backgroundColor: theme.palette.other.danger,
color: 'black',
fontWeight: 'bold',
opacity: 0.7,
'&:hover': {
backgroundColor: 'var(--danger)',
backgroundColor: theme.palette.other.danger,
color: 'black',
opacity: 1,
},

18
src/components/Theme/ThemeManager.tsx
View File

@ -291,6 +291,24 @@ export default function ThemeManager() {
'border.subtle',
themeDraft[currentTab]?.border?.subtle
)}
{renderColorPicker(
currentTab,
'Positive',
'other.positive',
themeDraft[currentTab]?.other?.positive
)}
{renderColorPicker(
currentTab,
'Danger',
'other.danger',
themeDraft[currentTab]?.other?.danger
)}
{renderColorPicker(
currentTab,
'Unread',
'other.unread',
themeDraft[currentTab]?.other?.unread
)}
</Box>
</DialogContent>
<DialogActions>

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

@ -26,6 +26,11 @@ export const darkThemeOptions: ThemeOptions = {
main: 'rgba(255, 255, 255, 0.12)',
subtle: 'rgba(255, 255, 255, 0.08)',
},
other: {
positive: 'rgb(94, 176, 73)',
danger: 'rgb(177, 70, 70)',
unread: 'rgb(66, 151, 226)',
},
},
components: {
MuiCard: {

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

@ -26,6 +26,11 @@ export const lightThemeOptions: ThemeOptions = {
main: 'rgba(0, 0, 0, 0.12)',
subtle: 'rgba(0, 0, 0, 0.08)',
},
other: {
positive: 'rgb(94, 176, 73)',
danger: 'rgb(177, 70, 70)',
unread: 'rgb(66, 151, 226)',
},
},
components: {
MuiCard: {

10
src/styles/theme.d.ts vendored
View File

@ -9,11 +9,21 @@ declare module '@mui/material/styles' {
main: string;
subtle: string;
};
other: {
positive: string;
danger: string;
unread: string;
};
}
interface PaletteOptions {
border?: {
main?: string;
subtle?: string;
};
other?: {
positive?: string;
danger?: string;
unread?: string;
};
}
}