mirror of
https://github.com/Qortal/Qortal-Hub.git
synced 2025-07-23 04:36:52 +00:00
mobile new design
This commit is contained in:
@@ -1,35 +1,46 @@
|
||||
import * as React from 'react';
|
||||
import { BottomNavigation, BottomNavigationAction, Typography } from '@mui/material';
|
||||
import { Home, Groups, Message, ShowChart } from '@mui/icons-material';
|
||||
import Box from '@mui/material/Box';
|
||||
import BottomLogo from '../../assets/svgs/BottomLogo5.svg'
|
||||
import { CustomSvg } from '../../common/CustomSvg';
|
||||
import { WalletIcon } from '../../assets/Icons/WalletIcon';
|
||||
import { HubsIcon } from '../../assets/Icons/HubsIcon';
|
||||
import { TradingIcon } from '../../assets/Icons/TradingIcon';
|
||||
import { MessagingIcon } from '../../assets/Icons/MessagingIcon';
|
||||
import * as React from "react";
|
||||
import {
|
||||
BottomNavigation,
|
||||
BottomNavigationAction,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
import { Home, Groups, Message, ShowChart } from "@mui/icons-material";
|
||||
import Box from "@mui/material/Box";
|
||||
import BottomLogo from "../../assets/svgs/BottomLogo5.svg";
|
||||
import { CustomSvg } from "../../common/CustomSvg";
|
||||
import { WalletIcon } from "../../assets/Icons/WalletIcon";
|
||||
import { HubsIcon } from "../../assets/Icons/HubsIcon";
|
||||
import { TradingIcon } from "../../assets/Icons/TradingIcon";
|
||||
import { MessagingIcon } from "../../assets/Icons/MessagingIcon";
|
||||
|
||||
const IconWrapper = ({children, label, color})=> {
|
||||
|
||||
return <Box sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
gap: '5px',
|
||||
flexDirection: 'column'
|
||||
}}>
|
||||
{children}
|
||||
<Typography sx={{
|
||||
fontFamily: "Inter",
|
||||
fontSize: "12px",
|
||||
fontWeight: 500,
|
||||
color: color
|
||||
}}>{label}</Typography>
|
||||
const IconWrapper = ({ children, label, color }) => {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
gap: "5px",
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
<Typography
|
||||
sx={{
|
||||
fontFamily: "Inter",
|
||||
fontSize: "12px",
|
||||
fontWeight: 500,
|
||||
color: color,
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</Typography>
|
||||
</Box>
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export const MobileFooter =({
|
||||
selectedGroup,
|
||||
export const MobileFooter = ({
|
||||
selectedGroup,
|
||||
groupSection,
|
||||
isUnread,
|
||||
goToAnnouncements,
|
||||
@@ -44,84 +55,131 @@ selectedGroup,
|
||||
openDrawerGroups,
|
||||
goToHome,
|
||||
setIsOpenDrawerProfile,
|
||||
mobileViewMode,
|
||||
mobileViewMode,
|
||||
setMobileViewMode,
|
||||
setMobileViewModeKeepOpen
|
||||
setMobileViewModeKeepOpen,
|
||||
hasUnreadGroups,
|
||||
hasUnreadDirects
|
||||
}) => {
|
||||
const [value, setValue] = React.useState(0);
|
||||
return (
|
||||
<Box sx={{
|
||||
width: '100%',
|
||||
position: 'fixed',
|
||||
bottom: 0,
|
||||
backgroundColor: 'var(--bg-primary)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
height: '67px', // Footer height
|
||||
const [value, setValue] = React.useState(0);
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
position: "fixed",
|
||||
bottom: 0,
|
||||
backgroundColor: "var(--bg-primary)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
height: "67px", // Footer height
|
||||
zIndex: 1,
|
||||
borderTopRightRadius: '25px',
|
||||
borderTopLeftRadius: '25px'
|
||||
|
||||
}}>
|
||||
<BottomNavigation
|
||||
showLabels
|
||||
value={value}
|
||||
onChange={(event, newValue) => setValue(newValue)}
|
||||
sx={{ backgroundColor: 'transparent', flexGrow: 1 }}
|
||||
>
|
||||
<BottomNavigationAction onClick={()=> {
|
||||
borderTopRightRadius: "25px",
|
||||
borderTopLeftRadius: "25px",
|
||||
boxShadow: '0px -2px 10px rgba(0, 0, 0, 0.1)',
|
||||
}}
|
||||
>
|
||||
<BottomNavigation
|
||||
showLabels
|
||||
value={value}
|
||||
onChange={(event, newValue) => setValue(newValue)}
|
||||
sx={{ backgroundColor: "transparent", flexGrow: 1 }}
|
||||
>
|
||||
<BottomNavigationAction
|
||||
onClick={() => {
|
||||
// setMobileViewMode('wallet')
|
||||
setIsOpenDrawerProfile(true)
|
||||
}} icon={<IconWrapper color="rgba(250, 250, 250, 0.5)" label="Wallet"><WalletIcon color="rgba(250, 250, 250, 0.5)" /></IconWrapper>} sx={{ color: value === 0 ? 'white' : 'gray', padding: '0px 10px' }} />
|
||||
<BottomNavigationAction onClick={()=> {
|
||||
setMobileViewMode('groups')
|
||||
}} icon={<IconWrapper color="rgba(250, 250, 250, 0.5)" label="Hubs"><HubsIcon color="rgba(250, 250, 250, 0.5)" /></IconWrapper>} sx={{ color: value === 0 ? 'white' : 'gray', paddingLeft: '10px', paddingRight: '42px' }} />
|
||||
setIsOpenDrawerProfile(true);
|
||||
}}
|
||||
icon={
|
||||
<IconWrapper color="rgba(250, 250, 250, 0.5)" label="Wallet">
|
||||
<WalletIcon color="rgba(250, 250, 250, 0.5)" />
|
||||
</IconWrapper>
|
||||
}
|
||||
sx={{ color: value === 0 ? "white" : "gray", padding: "0px 10px" }}
|
||||
/>
|
||||
<BottomNavigationAction
|
||||
onClick={() => {
|
||||
setMobileViewMode("groups");
|
||||
}}
|
||||
icon={
|
||||
<IconWrapper color="rgba(250, 250, 250, 0.5)" label="Hubs">
|
||||
<HubsIcon color={hasUnreadGroups ? "var(--unread)" : "rgba(250, 250, 250, 0.5)"} />
|
||||
</IconWrapper>
|
||||
}
|
||||
sx={{
|
||||
color: value === 0 ? "white" : "gray",
|
||||
paddingLeft: "10px",
|
||||
paddingRight: "42px",
|
||||
}}
|
||||
/>
|
||||
</BottomNavigation>
|
||||
|
||||
</BottomNavigation>
|
||||
|
||||
{/* Floating Center Button */}
|
||||
<Box sx={{
|
||||
position: 'absolute',
|
||||
bottom: '34px', // Adjusted to float properly based on footer height
|
||||
left: '50%',
|
||||
transform: 'translateX(-50%)', // Center horizontally
|
||||
width: '59px',
|
||||
height: '59px',
|
||||
backgroundColor: 'var(--bg-primary)',
|
||||
borderRadius: '50%',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
boxShadow: '0 4px 10px rgba(0, 0, 0, 0.3)', // Subtle shadow for the floating effect
|
||||
zIndex: 3,
|
||||
}}>
|
||||
<Box sx={{
|
||||
width: '49px', // Slightly smaller inner circle
|
||||
height: '49px',
|
||||
backgroundColor: 'var(--bg-primary)',
|
||||
borderRadius: '50%',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}}>
|
||||
{/* Custom Center Icon */}
|
||||
<img src={BottomLogo} alt="center-icon" />
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<BottomNavigation
|
||||
showLabels
|
||||
value={value}
|
||||
onChange={(event, newValue) => setValue(newValue)}
|
||||
sx={{ backgroundColor: 'transparent', flexGrow: 1 }}
|
||||
{/* Floating Center Button */}
|
||||
<Box
|
||||
sx={{
|
||||
position: "absolute",
|
||||
bottom: "34px", // Adjusted to float properly based on footer height
|
||||
left: "50%",
|
||||
transform: "translateX(-50%)", // Center horizontally
|
||||
width: "59px",
|
||||
height: "59px",
|
||||
backgroundColor: "var(--bg-primary)",
|
||||
borderRadius: "50%",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
boxShadow: "0 4px 10px rgba(0, 0, 0, 0.3)", // Subtle shadow for the floating effect
|
||||
zIndex: 3,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: "49px", // Slightly smaller inner circle
|
||||
height: "49px",
|
||||
backgroundColor: "var(--bg-primary)",
|
||||
borderRadius: "50%",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<BottomNavigationAction onClick={()=> {
|
||||
setMobileViewModeKeepOpen('messaging')
|
||||
}} icon={<IconWrapper label="Messaging" color="rgba(250, 250, 250, 0.5)"><MessagingIcon color="rgba(250, 250, 250, 0.5)" /></IconWrapper>} sx={{ color: value === 2 ? 'white' : 'gray', paddingLeft: '55px', paddingRight: '10px' }} />
|
||||
<BottomNavigationAction onClick={() => {
|
||||
chrome.tabs.create({ url: "https://www.qort.trade", active: true });
|
||||
}} icon={<IconWrapper label="Trading" color="rgba(250, 250, 250, 0.5)"><TradingIcon color="rgba(250, 250, 250, 0.5)" /></IconWrapper>} sx={{ color: value === 3 ? 'white' : 'gray' , padding: '0px 10px'}} />
|
||||
</BottomNavigation>
|
||||
{/* Custom Center Icon */}
|
||||
<img src={BottomLogo} alt="center-icon" />
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
<BottomNavigation
|
||||
showLabels
|
||||
value={value}
|
||||
onChange={(event, newValue) => setValue(newValue)}
|
||||
sx={{ backgroundColor: "transparent", flexGrow: 1 }}
|
||||
>
|
||||
<BottomNavigationAction
|
||||
onClick={() => {
|
||||
setMobileViewModeKeepOpen("messaging");
|
||||
}}
|
||||
icon={
|
||||
<IconWrapper label="Messaging" color="rgba(250, 250, 250, 0.5)">
|
||||
<MessagingIcon color={hasUnreadDirects ? "var(--unread)" :"rgba(250, 250, 250, 0.5)"} />
|
||||
</IconWrapper>
|
||||
}
|
||||
sx={{
|
||||
color: value === 2 ? "white" : "gray",
|
||||
paddingLeft: "55px",
|
||||
paddingRight: "10px",
|
||||
}}
|
||||
/>
|
||||
<BottomNavigationAction
|
||||
onClick={() => {
|
||||
chrome.tabs.create({ url: "https://www.qort.trade", active: true });
|
||||
}}
|
||||
icon={
|
||||
<IconWrapper label="Trading" color="rgba(250, 250, 250, 0.5)">
|
||||
<TradingIcon color="rgba(250, 250, 250, 0.5)" />
|
||||
</IconWrapper>
|
||||
}
|
||||
sx={{ color: value === 3 ? "white" : "gray", padding: "0px 10px" }}
|
||||
/>
|
||||
</BottomNavigation>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user