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

fix colors for selected items

Browse Source
This commit is contained in:
PhilReact
2025-04-26 15:42:54 +03:00
parent d220c0753a
commit 1dbcd01492
10 changed files with 128 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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>