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

Merge pull request #32 from Qortal/fix/editor-options-selected-color

Browse Source 
Fix/editor options selected color
This commit is contained in:
Phillip 2025-04-26 16:30:28 +03:00 committed by GitHub
commit be67323367
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 134 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/assets/Icons/AppsIcon.tsx
View File

@ -1,8 +1,10 @@
import { useTheme } from '@mui/material';
export const AppsIcon = ({ height = 31, width = 31 }) => {
export const AppsIcon = ({ height = 31, width = 31, color }) => {
const theme = useTheme();
const setColor = color ? color : theme.palette.text.primary;
return (
<svg
width={width}
@ -13,39 +15,39 @@ export const AppsIcon = ({ height = 31, width = 31 }) => {
>
<path
d="M3.76596 7.53192C5.84584 7.53192 7.53192 5.84584 7.53192 3.76596C7.53192 1.68608 5.84584 0 3.76596 0C1.68608 0 0 1.68608 0 3.76596C0 5.84584 1.68608 7.53192 3.76596 7.53192Z"
fill={theme.palette.text.primary}
fill={setColor}
/>
<path
d="M15 7.53192C17.0799 7.53192 18.766 5.84584 18.766 3.76596C18.766 1.68608 17.0799 0 15 0C12.9201 0 11.2341 1.68608 11.2341 3.76596C11.2341 5.84584 12.9201 7.53192 15 7.53192Z"
fill={theme.palette.text.primary}
fill={setColor}
/>
<path
d="M26.234 7.53192C28.3139 7.53192 30 5.84584 30 3.76596C30 1.68608 28.3139 0 26.234 0C24.1542 0 22.4681 1.68608 22.4681 3.76596C22.4681 5.84584 24.1542 7.53192 26.234 7.53192Z"
fill={theme.palette.text.primary}
fill={setColor}
/>
<path
d="M3.76596 30.0001C5.84584 30.0001 7.53192 28.314 7.53192 26.2341C7.53192 24.1542 5.84584 22.4681 3.76596 22.4681C1.68608 22.4681 0 24.1542 0 26.2341C0 28.314 1.68608 30.0001 3.76596 30.0001Z"
fill={theme.palette.text.primary}
fill={setColor}
/>
<path
d="M15 30.0002C17.0799 30.0002 18.766 28.3141 18.766 26.2342C18.766 24.1543 17.0799 22.4683 15 22.4683C12.9201 22.4683 11.2341 24.1543 11.2341 26.2342C11.2341 28.3141 12.9201 30.0002 15 30.0002Z"
fill={theme.palette.text.primary}
fill={setColor}
/>
<path
d="M26.234 30.0002C28.3139 30.0002 30 28.3141 30 26.2342C30 24.1543 28.3139 22.4683 26.234 22.4683C24.1542 22.4683 22.4681 24.1543 22.4681 26.2342C22.4681 28.3141 24.1542 30.0002 26.234 30.0002Z"
fill={theme.palette.text.primary}
fill={setColor}
/>
<path
d="M3.76596 18.766C5.84584 18.766 7.53192 17.08 7.53192 15.0001C7.53192 12.9202 5.84584 11.2341 3.76596 11.2341C1.68608 11.2341 0 12.9202 0 15.0001C0 17.08 1.68608 18.766 3.76596 18.766Z"
fill={theme.palette.text.primary}
fill={setColor}
/>
<path
d="M15 18.766C17.0799 18.766 18.766 17.08 18.766 15.0001C18.766 12.9202 17.0799 11.2341 15 11.2341C12.9201 11.2341 11.2341 12.9202 11.2341 15.0001C11.2341 17.08 12.9201 18.766 15 18.766Z"
fill={theme.palette.text.primary}
fill={setColor}
/>
<path
d="M26.234 18.766C28.3139 18.766 30 17.08 30 15.0001C30 12.9202 28.3139 11.2341 26.234 11.2341C24.1542 11.2341 22.4681 12.9202 22.4681 15.0001C22.4681 17.08 24.1542 18.766 26.234 18.766Z"
fill={theme.palette.text.primary}
fill={setColor}
/>
</svg>
);

5
src/assets/Icons/HomeIcon.tsx
View File

@ -1,8 +1,9 @@
import { useTheme } from '@mui/material';
export const HomeIcon = ({ height = 20, width = 23 }) => {
export const HomeIcon = ({ height = 20, width = 23, color }) => {
const theme = useTheme();
const setColor = color ? color : theme.palette.text.primary;
return (
<svg
width={width}
@ -13,7 +14,7 @@ export const HomeIcon = ({ height = 20, width = 23 }) => {
>
<path
d="M22.936 11.9842C22.8122 12.2972 22.5127 12.502 22.1801 12.5008H19.7155V19.1668C19.714 19.6263 19.3471 19.9985 18.8939 20H14.7862V14.1673C14.7862 12.3265 13.3149 10.8343 11.5 10.8343C9.68509 10.8343 8.21381 12.3265 8.21381 14.1673V20H4.10607C3.65294 19.9985 3.28596 19.6263 3.28452 19.1668V12.5008H0.819874C0.487346 12.502 0.187777 12.2972 0.0640491 11.9842C-0.0642812 11.6739 0.00375033 11.3157 0.236574 11.076L10.9167 0.243778C11.2395 -0.0812593 11.7605 -0.0812593 12.0833 0.243778L22.7634 11.076C22.9963 11.3157 23.0643 11.6739 22.936 11.9842Z"
fill={theme.palette.text.primary}
fill={setColor}
/>
</svg>
);

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

@ -363,7 +363,7 @@ export const AppsDesktop = ({
goToHome();
}}
>
<HomeIcon height={34} />
<HomeIcon height={34} color={theme.palette.text.secondary} />
</ButtonBase>
<ButtonBase
@ -372,7 +372,7 @@ export const AppsDesktop = ({
}}
>
<IconWrapper label="Apps" disableWidth>
<AppsIcon height={30} />
<AppsIcon height={30} color={theme.palette.text.primary} />
</IconWrapper>
</ButtonBase>
@ -385,7 +385,9 @@ export const AppsDesktop = ({
color={
hasUnreadDirects || hasUnreadGroups
? 'var(--unread)'
: theme.palette.text.primary
: desktopViewMode === 'chat'
? theme.palette.text.primary
: theme.palette.text.secondary
}
label="Chat"
disableWidth
@ -395,48 +397,13 @@ export const AppsDesktop = ({
color={
hasUnreadDirects || hasUnreadGroups
? 'var(--unread)'
: theme.palette.text.primary
: desktopViewMode === 'chat'
? theme.palette.text.primary
: theme.palette.text.secondary
}
/>
</IconWrapper>
</ButtonBase>
{/* <ButtonBase
onClick={() => {
setDesktopSideView("directs");
toggleSideViewDirects()
}}
>
<MessagingIcon
height={30}
color={
hasUnreadDirects
? "var(--danger)"
: isDirects
? "white"
: "rgba(250, 250, 250, 0.5)"
}
/>
</ButtonBase>
<ButtonBase
onClick={() => {
setDesktopSideView("groups");
toggleSideViewGroups()
}}
>
<HubsIcon
height={30}
color={
hasUnreadGroups
? "var(--danger)"
: isGroups
? "white"
: "rgba(250, 250, 250, 0.5)"
}
/>
</ButtonBase> */}
<Save isDesktop disableWidth myName={myName} />
{isEnabledDevMode && (
<ButtonBase

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

@ -23,7 +23,7 @@ import { AppPublish } from './AppPublish';
import { AppsLibraryDesktop } from './AppsLibraryDesktop';
import { AppsCategoryDesktop } from './AppsCategoryDesktop';
import { AppsNavBarDesktop } from './AppsNavBarDesktop';
import { Box, ButtonBase } from '@mui/material';
import { Box, ButtonBase, useTheme } from '@mui/material';
import { HomeIcon } from '../../assets/Icons/HomeIcon';
import { MessagingIcon } from '../../assets/Icons/MessagingIcon';
import { Save } from '../Save/Save';
@ -60,6 +60,7 @@ export const AppsDevMode = ({
const [isNewTabWindow, setIsNewTabWindow] = useState(false);
const [categories, setCategories] = useState([]);
const iframeRefs = useRef({});
const theme = useTheme();
useEffect(() => {
setTimeout(() => {
@ -266,7 +267,9 @@ export const AppsDevMode = ({
<HomeIcon
height={34}
color={
desktopViewMode === 'home' ? 'white' : 'rgba(250, 250, 250, 0.5)'
desktopViewMode === 'home'
? theme.palette.text.primary
: theme.palette.text.secondary
}
/>
</ButtonBase>
@ -276,13 +279,19 @@ export const AppsDevMode = ({
}}
>
<IconWrapper
color={isApps ? 'white' : 'rgba(250, 250, 250, 0.5)'}
color={
isApps ? theme.palette.text.primary : theme.palette.text.secondary
}
label="Apps"
disableWidth
>
<AppsIcon
height={30}
color={isApps ? 'white' : 'rgba(250, 250, 250, 0.5)'}
color={
isApps
? theme.palette.text.primary
: theme.palette.text.secondary
}
/>
</IconWrapper>
</ButtonBase>
@ -296,8 +305,8 @@ export const AppsDevMode = ({
hasUnreadDirects || hasUnreadGroups
? 'var(--unread)'
: desktopViewMode === 'chat'
? 'white'
: 'rgba(250, 250, 250, 0.5)'
? theme.palette.text.primary
: theme.palette.text.secondary
}
label="Chat"
disableWidth
@ -308,8 +317,8 @@ export const AppsDevMode = ({
hasUnreadDirects || hasUnreadGroups
? 'var(--unread)'
: desktopViewMode === 'chat'
? 'white'
: 'rgba(250, 250, 250, 0.5)'
? theme.palette.text.primary
: theme.palette.text.secondary
}
/>
</IconWrapper>
@ -322,14 +331,18 @@ export const AppsDevMode = ({
>
<IconWrapper
color={
desktopViewMode === 'dev' ? 'white' : 'rgba(250, 250, 250, 0.5)'
desktopViewMode === 'dev'
? theme.palette.text.primary
: theme.palette.text.secondary
}
label="Dev"
disableWidth
>
<AppsIcon
color={
desktopViewMode === 'dev' ? 'white' : 'rgba(250, 250, 250, 0.5)'
desktopViewMode === 'dev'
? theme.palette.text.primary
: theme.palette.text.secondary
}
height={30}
/>

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

@ -51,7 +51,7 @@ export const AnnouncementItem = ({
return (
<div
style={{
backgroundColor: theme.palette.background.default,
backgroundColor: theme.palette.background.paper,
borderRadius: '7px',
display: 'flex',
flexDirection: 'column',

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

@ -493,14 +493,12 @@ export default ({
>
<EditorProvider
slotBefore={
(isFocusedParent || overrideMobile) && (
<MenuBar
setEditorRef={setEditorRefFunc}
isChat={isChat}
isDisabledEditorEnter={isDisabledEditorEnter}
setIsDisabledEditorEnter={handleSetIsDisabledEditorEnter}
/>
)
<MenuBar
setEditorRef={setEditorRefFunc}
isChat={isChat}
isDisabledEditorEnter={isDisabledEditorEnter}
setIsDisabledEditorEnter={handleSetIsDisabledEditorEnter}
/>
}
extensions={[...extensionsFiltered, ...additionalExtensions]}
content={content}

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

@ -24,7 +24,7 @@ export const IconWrapper = ({
sx={{
alignItems: 'center',
backgroundColor: selected
? theme.palette.background.default
? theme.palette.action.selected
: 'transparent',
borderRadius: '50%',
color: color ? color : theme.palette.text.primary,
@ -39,7 +39,7 @@ export const IconWrapper = ({
{children}
<Typography
sx={{
color: theme.palette.text.primary,
color: color || theme.palette.text.primary,
fontFamily: 'Inter',
fontSize: '12px',
fontWeight: 500,

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

@ -1,18 +1,6 @@
import * as React from 'react';
import {
BottomNavigation,
BottomNavigationAction,
ButtonBase,
Typography,
} from '@mui/material';
import { Home, Groups, Message, ShowChart } from '@mui/icons-material';
import { ButtonBase, Typography, useTheme } from '@mui/material';
import Box from '@mui/material/Box';
import BottomLogo from '../../assets/svgs/BottomLogo5.svg';
import { CustomSvg } from '../../common/CustomSvg';
import { HubsIcon } from '../../assets/Icons/HubsIcon';
import { TradingIcon } from '../../assets/Icons/TradingIcon';
import { MessagingIcon } from '../../assets/Icons/MessagingIcon';
import { HomeIcon } from '../../assets/Icons/HomeIcon';
import { NotificationIcon2 } from '../../assets/Icons/NotificationIcon2';
import { ChatIcon } from '../../assets/Icons/ChatIcon';
import { ThreadsIcon } from '../../assets/Icons/ThreadsIcon';
@ -94,6 +82,7 @@ export const DesktopHeader = ({
isPrivate,
}) => {
const [value, setValue] = React.useState(0);
const theme = useTheme();
return (
<Box
sx={{
@ -151,10 +140,14 @@ export const DesktopHeader = ({
}}
>
<IconWrapper
color={isAnnouncement ? 'black' : 'rgba(250, 250, 250, 0.5)'}
color={
isAnnouncement
? theme.palette.text.primary
: theme.palette.text.secondary
}
label="ANN"
selected={isAnnouncement}
selectColor="#09b6e8"
selectColor={theme.palette.action.selected}
customHeight="55px"
>
<NotificationIcon2
@ -164,8 +157,8 @@ export const DesktopHeader = ({
isUnread
? 'var(--unread)'
: isAnnouncement
? 'black'
: 'rgba(250, 250, 250, 0.5)'
? theme.palette.text.primary
: theme.palette.text.secondary
}
/>
</IconWrapper>
@ -177,10 +170,12 @@ export const DesktopHeader = ({
}}
>
<IconWrapper
color={isChat ? 'black' : 'rgba(250, 250, 250, 0.5)'}
color={
isChat ? theme.palette.text.primary : theme.palette.text.secondary
}
label="Chat"
selected={isChat}
selectColor="#09b6e8"
selectColor={theme.palette.action.selected}
customHeight="55px"
>
<ChatIcon
@ -190,8 +185,8 @@ export const DesktopHeader = ({
isUnreadChat
? 'var(--unread)'
: isChat
? 'black'
: 'rgba(250, 250, 250, 0.5)'
? theme.palette.text.primary
: theme.palette.text.secondary
}
/>
</IconWrapper>
@ -203,16 +198,24 @@ export const DesktopHeader = ({
}}
>
<IconWrapper
color={isForum ? 'black' : 'rgba(250, 250, 250, 0.5)'}
color={
isForum
? theme.palette.text.primary
: theme.palette.text.secondary
}
label="Threads"
selected={isForum}
selectColor="#09b6e8"
selectColor={theme.palette.action.selected}
customHeight="55px"
>
<ThreadsIcon
height={25}
width={20}
color={isForum ? 'black' : 'rgba(250, 250, 250, 0.5)'}
color={
isForum
? theme.palette.text.primary
: theme.palette.text.secondary
}
/>
</IconWrapper>
</ButtonBase>
@ -222,7 +225,7 @@ export const DesktopHeader = ({
}}
>
<IconWrapper
color="rgba(250, 250, 250, 0.5)"
color={theme.palette.text.secondary}
label="Members"
selected={false}
customHeight="55px"
@ -230,7 +233,7 @@ export const DesktopHeader = ({
<MembersIcon
height={25}
width={20}
color={isForum ? 'white' : 'rgba(250, 250, 250, 0.5)'}
color={theme.palette.text.secondary}
/>
</IconWrapper>
</ButtonBase>
@ -242,21 +245,21 @@ export const DesktopHeader = ({
<IconWrapper
color={
groupSection === 'adminSpace'
? 'black'
: 'rgba(250, 250, 250, 0.5)'
? theme.palette.text.primary
: theme.palette.text.secondary
}
label="Admins"
selected={groupSection === 'adminSpace'}
customHeight="55px"
selectColor="#09b6e8"
selectColor={theme.palette.action.selected}
>
<AdminsIcon
height={25}
width={20}
color={
groupSection === 'adminSpace'
? 'black'
: 'rgba(250, 250, 250, 0.5)'
? theme.palette.text.primary
: theme.palette.text.secondary
}
/>
</IconWrapper>

14
src/components/DesktopSideBar.tsx
View File

@ -28,6 +28,8 @@ export const DesktopSideBar = ({
const theme = useTheme();
console.log('test', desktopViewMode === 'home');
return (
<Box
sx={{
@ -71,8 +73,6 @@ export const DesktopSideBar = ({
<ButtonBase
onClick={() => {
setDesktopViewMode('apps');
// setIsOpenSideViewDirects(false)
// setIsOpenSideViewGroups(false)
}}
>
<IconWrapper
@ -101,7 +101,9 @@ export const DesktopSideBar = ({
color={
hasUnreadDirects || hasUnreadGroups
? 'var(--unread)'
: theme.palette.text.primary
: desktopViewMode === 'chat'
? theme.palette.text.primary
: theme.palette.text.secondary
}
label="Chat"
disableWidth
@ -111,7 +113,9 @@ export const DesktopSideBar = ({
color={
hasUnreadDirects || hasUnreadGroups
? 'var(--unread)'
: theme.palette.text.primary
: desktopViewMode === 'chat'
? theme.palette.text.primary
: theme.palette.text.secondary
}
/>
</IconWrapper>
@ -134,7 +138,7 @@ export const DesktopSideBar = ({
label="Dev"
disableWidth
>
<AppsIcon height={30} />
<AppsIcon height={30} color={theme.palette.text.secondary} />
</IconWrapper>
</ButtonBase>
)}

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

@ -1679,9 +1679,6 @@ export const Group = ({
width: '100%',
flexDirection: 'column',
cursor: 'pointer',
borderColor: theme.palette.primary,
borderWidth: '1px',
borderStyle: 'solid',
padding: '2px',
borderRadius: '2px',
background:
@ -1721,6 +1718,7 @@ export const Group = ({
theme.palette.text.primary,
textWrap: 'wrap',
overflow: 'hidden',
fontSize: '16px',
},
}} // Change the color of the primary text
secondaryTypographyProps={{
@ -1781,7 +1779,7 @@ export const Group = ({
</div>
);
};
console.log('groupsProperties', groupsProperties);
const renderGroups = () => {
return (
<div
@ -1918,15 +1916,15 @@ export const Group = ({
display: 'flex',
background:
group?.groupId === selectedGroup?.groupId &&
theme.palette.background.default,
borderColor: theme.palette.primary,
theme.palette.action.selected,
borderRadius: '2px',
borderStyle: 'solid',
borderWidth: '1px',
cursor: 'pointer',
flexDirection: 'column',
padding: '2px',
width: '100%',
'&:hover': {
backgroundColor: 'action.hover', // background on hover
},
}}
>
<ContextMenu
@ -1954,6 +1952,9 @@ export const Group = ({
width: '40px',
}}
>
{/* <Avatar src={`${getBaseApiReact()}/arbitrary/THUMBNAIL/${
app?.name
}/qortal_avatar?async=true`} /> */}
<LockIcon
sx={{
color: 'var(--green)',
@ -1994,6 +1995,7 @@ export const Group = ({
color:
group?.groupId === selectedGroup?.groupId &&
theme.palette.text.primary,
fontSize: '16px',
},
}} // Change the color of the primary text
secondaryTypographyProps={{

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

@ -10,7 +10,14 @@ import {
settingsQDNLastUpdatedAtom,
sortablePinnedAppsAtom,
} from '../../atoms/global';
import { Box, Button, ButtonBase, Popover, Typography } from '@mui/material';
import {
Box,
Button,
ButtonBase,
Popover,
Typography,
useTheme,
} from '@mui/material';
import { objectToBase64 } from '../../qdn/encryption/group-encryption';
import { MyContext } from '../../App';
import { getFee } from '../../background';
@ -77,7 +84,7 @@ export const Save = ({ isDesktop, disableWidth, myName }) => {
const [oldPinnedApps, setOldPinnedApps] = useRecoilState(oldPinnedAppsAtom);
const [anchorEl, setAnchorEl] = useState(null);
const { show } = useContext(MyContext);
const theme = useTheme();
const { t } = useTranslation(['core']);
const hasChanged = useMemo(() => {
@ -229,13 +236,28 @@ export const Save = ({ isDesktop, disableWidth, myName }) => {
postProcess: 'capitalize',
})}
selected={false}
color={
hasChanged && !isLoading
? '#5EB049'
: theme.palette.text.secondary
}
>
<SaveIcon
color={hasChanged && !isLoading ? '#5EB049' : undefined}
color={
hasChanged && !isLoading
? '#5EB049'
: theme.palette.text.secondary
}
/>
</IconWrapper>
) : (
<SaveIcon color={hasChanged && !isLoading ? '#5EB049' : undefined} />
<SaveIcon
color={
hasChanged && !isLoading
? '#5EB049'
: theme.palette.text.secondary
}
/>
)}
</ButtonBase>