mirror of
https://github.com/Qortal/Qortal-Hub.git
synced 2025-07-23 04:36:52 +00:00
Adapt to theme
This commit is contained in:
Nicola Benaglia
@@ -20,7 +20,7 @@ import { MessagingIcon } from "../../assets/Icons/MessagingIcon";
|
||||
import { MessagingIcon2 } from "../../assets/Icons/MessagingIcon2";
|
||||
import { HubsIcon } from "../../assets/Icons/HubsIcon";
|
||||
import { Save } from "../Save/Save";
|
||||
import CloseFullscreenIcon from '@mui/icons-material/CloseFullscreen';
|
||||
import CloseFullscreenIcon from "@mui/icons-material/CloseFullscreen";
|
||||
import { useRecoilState } from "recoil";
|
||||
import { fullScreenAtom, hasSettingsChangedAtom } from "../../atoms/global";
|
||||
import { useAppFullScreen } from "../../useAppFullscreen";
|
||||
@@ -36,12 +36,12 @@ const Header = ({
|
||||
setMobileViewMode,
|
||||
myName,
|
||||
setSelectedDirect,
|
||||
setNewChat
|
||||
setNewChat,
|
||||
}) => {
|
||||
const [anchorEl, setAnchorEl] = useState(null);
|
||||
const open = Boolean(anchorEl);
|
||||
const [fullScreen, setFullScreen] = useRecoilState(fullScreenAtom);
|
||||
const {exitFullScreen} = useAppFullScreen(setFullScreen)
|
||||
const { exitFullScreen } = useAppFullScreen(setFullScreen);
|
||||
const handleClick = (event) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
@@ -77,34 +77,39 @@ const Header = ({
|
||||
}}
|
||||
>
|
||||
<ButtonBase
|
||||
|
||||
|
||||
|
||||
onClick={() => {
|
||||
setMobileViewModeKeepOpen("");
|
||||
goToHome();
|
||||
}}
|
||||
// onClick={onHomeClick}
|
||||
>
|
||||
<HomeIcon height={20} width={27} color="rgba(145, 145, 147, 1)" />
|
||||
<HomeIcon height={20} width={27} />
|
||||
</ButtonBase>
|
||||
<ButtonBase
|
||||
|
||||
onClick={handleClick}
|
||||
>
|
||||
<NotificationIcon height={20} width={21} color={hasUnreadDirects || hasUnreadGroups ? "var(--danger)" : "rgba(145, 145, 147, 1)"} />
|
||||
<ButtonBase onClick={handleClick}>
|
||||
<NotificationIcon
|
||||
height={20}
|
||||
width={21}
|
||||
color={
|
||||
hasUnreadDirects || hasUnreadGroups
|
||||
? "var(--danger)"
|
||||
: "rgba(145, 145, 147, 1)"
|
||||
}
|
||||
/>
|
||||
</ButtonBase>
|
||||
{fullScreen && (
|
||||
<ButtonBase onClick={()=> {
|
||||
exitFullScreen()
|
||||
setFullScreen(false)
|
||||
}}>
|
||||
<CloseFullscreenIcon sx={{
|
||||
color: 'rgba(145, 145, 147, 1)'
|
||||
}} />
|
||||
</ButtonBase>
|
||||
<ButtonBase
|
||||
onClick={() => {
|
||||
exitFullScreen();
|
||||
setFullScreen(false);
|
||||
}}
|
||||
>
|
||||
<CloseFullscreenIcon
|
||||
sx={{
|
||||
color: "rgba(145, 145, 147, 1)",
|
||||
}}
|
||||
/>
|
||||
</ButtonBase>
|
||||
)}
|
||||
|
||||
</Box>
|
||||
|
||||
{/* Center Title */}
|
||||
@@ -135,14 +140,15 @@ const Header = ({
|
||||
setMobileViewModeKeepOpen("messaging");
|
||||
}}
|
||||
>
|
||||
<MessagingIcon2 height={20} color={hasUnreadDirects ? "var(--danger)" : "rgba(145, 145, 147, 1)"}
|
||||
|
||||
<MessagingIcon2
|
||||
height={20}
|
||||
color={
|
||||
hasUnreadDirects ? "var(--danger)" : "rgba(145, 145, 147, 1)"
|
||||
}
|
||||
/>
|
||||
</ButtonBase>
|
||||
<Save />
|
||||
<ButtonBase
|
||||
onClick={logoutFunc}
|
||||
>
|
||||
<ButtonBase onClick={logoutFunc}>
|
||||
<LogoutIcon
|
||||
height={20}
|
||||
width={21}
|
||||
@@ -152,83 +158,104 @@ const Header = ({
|
||||
</Box>
|
||||
</Toolbar>
|
||||
<Menu
|
||||
id="home-menu"
|
||||
anchorEl={anchorEl}
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
MenuListProps={{
|
||||
"aria-labelledby": "basic-button",
|
||||
}}
|
||||
anchorOrigin={{
|
||||
vertical: 'bottom',
|
||||
horizontal: 'center',
|
||||
|
||||
id="home-menu"
|
||||
anchorEl={anchorEl}
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
MenuListProps={{
|
||||
"aria-labelledby": "basic-button",
|
||||
}}
|
||||
anchorOrigin={{
|
||||
vertical: "bottom",
|
||||
horizontal: "center",
|
||||
}}
|
||||
transformOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'center',
|
||||
vertical: "top",
|
||||
horizontal: "center",
|
||||
}}
|
||||
slotProps={{
|
||||
paper: {
|
||||
sx: {
|
||||
backgroundColor: 'var(--bg-primary)',
|
||||
color: '#fff',
|
||||
width: '148px',
|
||||
borderRadius: '5px'
|
||||
backgroundColor: "var(--bg-primary)",
|
||||
color: "#fff",
|
||||
width: "148px",
|
||||
borderRadius: "5px",
|
||||
},
|
||||
},
|
||||
|
||||
}}
|
||||
sx={{
|
||||
marginTop: '10px'
|
||||
}}
|
||||
|
||||
>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
setSelectedDirect(null)
|
||||
setNewChat(false)
|
||||
setMobileViewMode("groups");
|
||||
setMobileViewModeKeepOpen("")
|
||||
handleClose();
|
||||
marginTop: "10px",
|
||||
}}
|
||||
>
|
||||
<ListItemIcon sx={{
|
||||
|
||||
minWidth: '24px !important'
|
||||
}}>
|
||||
<HubsIcon height={20} color={hasUnreadGroups ? "var(--danger)" :"rgba(250, 250, 250, 0.5)"} />
|
||||
</ListItemIcon>
|
||||
<ListItemText sx={{
|
||||
"& .MuiTypography-root": {
|
||||
fontSize: "12px",
|
||||
fontWeight: 600,
|
||||
color: hasUnreadGroups ? "var(--danger)" :"rgba(250, 250, 250, 0.5)"
|
||||
},
|
||||
}} primary="Groups" />
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
setMobileViewModeKeepOpen("messaging");
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
setSelectedDirect(null);
|
||||
setNewChat(false);
|
||||
setMobileViewMode("groups");
|
||||
setMobileViewModeKeepOpen("");
|
||||
handleClose();
|
||||
}}
|
||||
>
|
||||
<ListItemIcon
|
||||
sx={{
|
||||
minWidth: "24px !important",
|
||||
}}
|
||||
>
|
||||
<HubsIcon
|
||||
height={20}
|
||||
color={
|
||||
hasUnreadGroups ? "var(--danger)" : "rgba(250, 250, 250, 0.5)"
|
||||
}
|
||||
/>
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
sx={{
|
||||
"& .MuiTypography-root": {
|
||||
fontSize: "12px",
|
||||
fontWeight: 600,
|
||||
color: hasUnreadGroups
|
||||
? "var(--danger)"
|
||||
: "rgba(250, 250, 250, 0.5)",
|
||||
},
|
||||
}}
|
||||
primary="Groups"
|
||||
/>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
setMobileViewModeKeepOpen("messaging");
|
||||
|
||||
handleClose();
|
||||
}}
|
||||
>
|
||||
<ListItemIcon sx={{
|
||||
|
||||
minWidth: '24px !important'
|
||||
}}>
|
||||
<MessagingIcon height={20} color={hasUnreadDirects ? "var(--danger)" :"rgba(250, 250, 250, 0.5)"} />
|
||||
</ListItemIcon>
|
||||
<ListItemText sx={{
|
||||
"& .MuiTypography-root": {
|
||||
fontSize: "12px",
|
||||
fontWeight: 600,
|
||||
color: hasUnreadDirects ? "var(--danger)" :"rgba(250, 250, 250, 0.5)"
|
||||
},
|
||||
}} primary="Messaging" />
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
handleClose();
|
||||
}}
|
||||
>
|
||||
<ListItemIcon
|
||||
sx={{
|
||||
minWidth: "24px !important",
|
||||
}}
|
||||
>
|
||||
<MessagingIcon
|
||||
height={20}
|
||||
color={
|
||||
hasUnreadDirects
|
||||
? "var(--danger)"
|
||||
: "rgba(250, 250, 250, 0.5)"
|
||||
}
|
||||
/>
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
sx={{
|
||||
"& .MuiTypography-root": {
|
||||
fontSize: "12px",
|
||||
fontWeight: 600,
|
||||
color: hasUnreadDirects
|
||||
? "var(--danger)"
|
||||
: "rgba(250, 250, 250, 0.5)",
|
||||
},
|
||||
}}
|
||||
primary="Messaging"
|
||||
/>
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</AppBar>
|
||||
);
|
||||
}
|
||||
@@ -255,24 +282,27 @@ const Header = ({
|
||||
width: "75px",
|
||||
}}
|
||||
>
|
||||
<ButtonBase
|
||||
|
||||
onClick={goToHome}
|
||||
// onClick={onHomeClick}
|
||||
>
|
||||
<HomeIcon color="rgba(145, 145, 147, 1)" />
|
||||
</ButtonBase>
|
||||
{fullScreen && (
|
||||
<ButtonBase onClick={()=> {
|
||||
exitFullScreen()
|
||||
setFullScreen(false)
|
||||
}}>
|
||||
<CloseFullscreenIcon sx={{
|
||||
color: 'rgba(145, 145, 147, 1)'
|
||||
}} />
|
||||
</ButtonBase>
|
||||
<ButtonBase
|
||||
onClick={goToHome}
|
||||
// onClick={onHomeClick}
|
||||
>
|
||||
<HomeIcon />
|
||||
</ButtonBase>
|
||||
{fullScreen && (
|
||||
<ButtonBase
|
||||
onClick={() => {
|
||||
exitFullScreen();
|
||||
setFullScreen(false);
|
||||
}}
|
||||
>
|
||||
<CloseFullscreenIcon
|
||||
sx={{
|
||||
color: "rgba(145, 145, 147, 1)",
|
||||
}}
|
||||
/>
|
||||
</ButtonBase>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
{/* Center Title */}
|
||||
<Typography
|
||||
variant="h6"
|
||||
@@ -294,16 +324,15 @@ const Header = ({
|
||||
justifyContent: "flex-end",
|
||||
}}
|
||||
>
|
||||
{/* Right Logout Icon */}
|
||||
<Save />
|
||||
<ButtonBase
|
||||
onClick={logoutFunc}
|
||||
{/* Right Logout Icon */}
|
||||
<Save />
|
||||
<ButtonBase
|
||||
onClick={logoutFunc}
|
||||
|
||||
|
||||
// onClick={onLogoutClick}
|
||||
>
|
||||
<LogoutIcon color="rgba(145, 145, 147, 1)" />
|
||||
</ButtonBase>
|
||||
// onClick={onLogoutClick}
|
||||
>
|
||||
<LogoutIcon color="rgba(145, 145, 147, 1)" />
|
||||
</ButtonBase>
|
||||
</Box>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
@@ -357,8 +386,14 @@ const Header = ({
|
||||
boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.3)", // Optional shadow for the circle
|
||||
}}
|
||||
>
|
||||
<IconButton onClick={handleClick} color="inherit">
|
||||
<NotificationIcon color={hasUnreadDirects || hasUnreadGroups ? "var(--danger)" : "rgba(255, 255, 255, 1)"} />
|
||||
<IconButton onClick={handleClick} color="inherit">
|
||||
<NotificationIcon
|
||||
color={
|
||||
hasUnreadDirects || hasUnreadGroups
|
||||
? "var(--danger)"
|
||||
: "rgba(255, 255, 255, 1)"
|
||||
}
|
||||
/>
|
||||
</IconButton>
|
||||
</Box>
|
||||
|
||||
@@ -389,6 +424,7 @@ const Header = ({
|
||||
</Box>
|
||||
</ButtonBase> */}
|
||||
</Box>
|
||||
|
||||
<Menu
|
||||
id="home-menu"
|
||||
anchorEl={anchorEl}
|
||||
@@ -398,51 +434,60 @@ const Header = ({
|
||||
"aria-labelledby": "basic-button",
|
||||
}}
|
||||
anchorOrigin={{
|
||||
vertical: 'bottom',
|
||||
horizontal: 'center',
|
||||
|
||||
}}
|
||||
transformOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'center',
|
||||
}}
|
||||
slotProps={{
|
||||
paper: {
|
||||
sx: {
|
||||
backgroundColor: 'var(--bg-primary)',
|
||||
color: '#fff',
|
||||
width: '148px',
|
||||
borderRadius: '5px'
|
||||
},
|
||||
vertical: "bottom",
|
||||
horizontal: "center",
|
||||
}}
|
||||
transformOrigin={{
|
||||
vertical: "top",
|
||||
horizontal: "center",
|
||||
}}
|
||||
slotProps={{
|
||||
paper: {
|
||||
sx: {
|
||||
backgroundColor: "var(--bg-primary)",
|
||||
color: "#fff",
|
||||
width: "148px",
|
||||
borderRadius: "5px",
|
||||
},
|
||||
|
||||
}}
|
||||
sx={{
|
||||
marginTop: '10px'
|
||||
}}
|
||||
|
||||
},
|
||||
}}
|
||||
sx={{
|
||||
marginTop: "10px",
|
||||
}}
|
||||
>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
setMobileViewMode("groups");
|
||||
setMobileViewModeKeepOpen("")
|
||||
setMobileViewModeKeepOpen("");
|
||||
handleClose();
|
||||
}}
|
||||
>
|
||||
<ListItemIcon sx={{
|
||||
|
||||
minWidth: '24px !important'
|
||||
}}>
|
||||
<HubsIcon height={20} color={hasUnreadGroups ? "var(--danger)" :"rgba(250, 250, 250, 0.5)"} />
|
||||
<ListItemIcon
|
||||
sx={{
|
||||
minWidth: "24px !important",
|
||||
}}
|
||||
>
|
||||
<HubsIcon
|
||||
height={20}
|
||||
color={
|
||||
hasUnreadGroups ? "var(--danger)" : "rgba(250, 250, 250, 0.5)"
|
||||
}
|
||||
/>
|
||||
</ListItemIcon>
|
||||
<ListItemText sx={{
|
||||
"& .MuiTypography-root": {
|
||||
fontSize: "12px",
|
||||
fontWeight: 600,
|
||||
color: hasUnreadDirects ? "var(--danger)" :"rgba(250, 250, 250, 0.5)"
|
||||
},
|
||||
}} primary="Groups" />
|
||||
<ListItemText
|
||||
sx={{
|
||||
"& .MuiTypography-root": {
|
||||
fontSize: "12px",
|
||||
fontWeight: 600,
|
||||
color: hasUnreadDirects
|
||||
? "var(--danger)"
|
||||
: "rgba(250, 250, 250, 0.5)",
|
||||
},
|
||||
}}
|
||||
primary="Groups"
|
||||
/>
|
||||
</MenuItem>
|
||||
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
setMobileViewModeKeepOpen("messaging");
|
||||
@@ -450,21 +495,32 @@ const Header = ({
|
||||
handleClose();
|
||||
}}
|
||||
>
|
||||
<ListItemIcon sx={{
|
||||
|
||||
minWidth: '24px !important'
|
||||
}}>
|
||||
<MessagingIcon height={20} color={hasUnreadDirects ? "var(--danger)" :"rgba(250, 250, 250, 0.5)"} />
|
||||
<ListItemIcon
|
||||
sx={{
|
||||
minWidth: "24px !important",
|
||||
}}
|
||||
>
|
||||
<MessagingIcon
|
||||
height={20}
|
||||
color={
|
||||
hasUnreadDirects ? "var(--danger)" : "rgba(250, 250, 250, 0.5)"
|
||||
}
|
||||
/>
|
||||
</ListItemIcon>
|
||||
<ListItemText sx={{
|
||||
"& .MuiTypography-root": {
|
||||
fontSize: "12px",
|
||||
fontWeight: 600,
|
||||
color: hasUnreadDirects ? "var(--danger)" :"rgba(250, 250, 250, 0.5)"
|
||||
},
|
||||
}} primary="Messaging" />
|
||||
<ListItemText
|
||||
sx={{
|
||||
"& .MuiTypography-root": {
|
||||
fontSize: "12px",
|
||||
fontWeight: 600,
|
||||
color: hasUnreadDirects
|
||||
? "var(--danger)"
|
||||
: "rgba(250, 250, 250, 0.5)",
|
||||
},
|
||||
}}
|
||||
primary="Messaging"
|
||||
/>
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</Menu>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user