mirror of
https://github.com/Qortal/Qortal-Hub.git
synced 2025-07-23 04:36:52 +00:00
add more mobile styles
This commit is contained in:
127
src/components/Mobile/MobileFooter.tsx
Normal file
127
src/components/Mobile/MobileFooter.tsx
Normal file
@@ -0,0 +1,127 @@
|
||||
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>
|
||||
</Box>
|
||||
}
|
||||
|
||||
export const MobileFooter =({
|
||||
selectedGroup,
|
||||
groupSection,
|
||||
isUnread,
|
||||
goToAnnouncements,
|
||||
isUnreadChat,
|
||||
goToChat,
|
||||
goToThreads,
|
||||
setOpenManageMembers,
|
||||
groupChatHasUnread,
|
||||
groupsAnnHasUnread,
|
||||
directChatHasUnread,
|
||||
chatMode,
|
||||
openDrawerGroups,
|
||||
goToHome,
|
||||
setIsOpenDrawerProfile,
|
||||
mobileViewMode,
|
||||
setMobileViewMode,
|
||||
setMobileViewModeKeepOpen
|
||||
}) => {
|
||||
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={()=> {
|
||||
// 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' }} />
|
||||
|
||||
</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 }}
|
||||
>
|
||||
<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>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
186
src/components/Mobile/MobileHeader.tsx
Normal file
186
src/components/Mobile/MobileHeader.tsx
Normal file
@@ -0,0 +1,186 @@
|
||||
import React from 'react';
|
||||
import { AppBar, Toolbar, IconButton, Typography, Box, MenuItem, Select, ButtonBase } from '@mui/material';
|
||||
import { HomeIcon } from '../../assets/Icons/HomeIcon';
|
||||
import { LogoutIcon } from '../../assets/Icons/LogoutIcon';
|
||||
import { NotificationIcon } from '../../assets/Icons/NotificationIcon';
|
||||
import { ArrowDownIcon } from '../../assets/Icons/ArrowDownIcon';
|
||||
import { MessagingIcon } from '../../assets/Icons/MessagingIcon';
|
||||
|
||||
const Header = ({
|
||||
logoutFunc,
|
||||
goToHome,
|
||||
setIsOpenDrawerProfile,
|
||||
isThin,
|
||||
setMobileViewModeKeepOpen
|
||||
// selectedGroup,
|
||||
// onHomeClick,
|
||||
// onLogoutClick,
|
||||
// onGroupChange,
|
||||
// onWalletClick,
|
||||
// onNotificationClick,
|
||||
}) => {
|
||||
if(isThin){
|
||||
|
||||
|
||||
return (
|
||||
<AppBar position="static" sx={{ backgroundColor: 'background: rgba(0, 0, 0, 0.2)', boxShadow: 'none' }}>
|
||||
<Toolbar sx={{ justifyContent: 'space-between', padding: '0 16px', height: '30px', minHeight: '30px' }}>
|
||||
{/* Left Home Icon */}
|
||||
<Box sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '18px',
|
||||
width: '75px'
|
||||
}}>
|
||||
<IconButton edge="start" color="inherit" aria-label="home"
|
||||
onClick={()=> {
|
||||
setMobileViewModeKeepOpen('')
|
||||
goToHome()
|
||||
}}
|
||||
// onClick={onHomeClick}
|
||||
>
|
||||
<HomeIcon height={16} width={18} color="rgba(145, 145, 147, 1)" />
|
||||
</IconButton>
|
||||
<IconButton edge="start" color="inherit" aria-label="home"
|
||||
onClick={()=> {
|
||||
setMobileViewModeKeepOpen()
|
||||
goToHome()
|
||||
}}
|
||||
// onClick={onHomeClick}
|
||||
>
|
||||
<NotificationIcon color="rgba(145, 145, 147, 1)" />
|
||||
</IconButton>
|
||||
</Box>
|
||||
|
||||
|
||||
{/* Center Title */}
|
||||
<Typography variant="h6" sx={{ color: 'rgba(255, 255, 255, 1)', fontWeight: 700, letterSpacing: '2px' , fontSize: '13px'}}>
|
||||
QORTAL
|
||||
</Typography>
|
||||
<Box sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '18px',
|
||||
width: '75px',
|
||||
justifyContent: 'flex-end'
|
||||
}}>
|
||||
{/* Right Logout Icon */}
|
||||
|
||||
<IconButton onClick={()=> {
|
||||
setMobileViewModeKeepOpen('messaging')
|
||||
}} edge="end" color="inherit" aria-label="logout"
|
||||
|
||||
// onClick={onLogoutClick}
|
||||
>
|
||||
<MessagingIcon height={16} width={16} color="rgba(145, 145, 147, 1)" />
|
||||
</IconButton>
|
||||
<IconButton onClick={logoutFunc} edge="end" color="inherit" aria-label="logout"
|
||||
|
||||
// onClick={onLogoutClick}
|
||||
>
|
||||
<LogoutIcon height={16} width={14} color="rgba(145, 145, 147, 1)" />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<>
|
||||
{/* Main Header */}
|
||||
<AppBar position="static" sx={{ backgroundColor: 'var(--bg-primary)', boxShadow: 'none' }}>
|
||||
<Toolbar sx={{ justifyContent: 'space-between', padding: '0 16px', height: '60px' }}>
|
||||
{/* Left Home Icon */}
|
||||
<IconButton edge="start" color="inherit" aria-label="home"
|
||||
onClick={goToHome}
|
||||
// onClick={onHomeClick}
|
||||
>
|
||||
<HomeIcon color="rgba(145, 145, 147, 1)" />
|
||||
</IconButton>
|
||||
|
||||
{/* Center Title */}
|
||||
<Typography variant="h6" sx={{ color: 'rgba(255, 255, 255, 1)', fontWeight: 700, letterSpacing: '2px' , fontSize: '13px'}}>
|
||||
QORTAL
|
||||
</Typography>
|
||||
|
||||
{/* Right Logout Icon */}
|
||||
<IconButton onClick={logoutFunc} edge="end" color="inherit" aria-label="logout"
|
||||
|
||||
// onClick={onLogoutClick}
|
||||
>
|
||||
<LogoutIcon color="rgba(145, 145, 147, 1)" />
|
||||
</IconButton>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
|
||||
{/* Secondary Section */}
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'var(--bg-3)',
|
||||
padding: '8px 16px',
|
||||
position: 'relative',
|
||||
height: '27px'
|
||||
}}
|
||||
>
|
||||
|
||||
<Box sx={{
|
||||
display: 'flex',
|
||||
gap: '10px',
|
||||
alignItems: 'center',
|
||||
userSelect: 'none'
|
||||
}}>
|
||||
<Typography sx={{ color: 'rgba(255, 255, 255, 1)', fontWeight: 400, fontSize: '11px'}}>
|
||||
Palmas
|
||||
</Typography>
|
||||
{/*
|
||||
<ArrowDownIcon /> */}
|
||||
</Box>
|
||||
|
||||
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, 50%)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
zIndex: 500,
|
||||
width: '30px', // Adjust as needed
|
||||
height: '30px', // Adjust as needed
|
||||
backgroundColor: '#232428', // Circle background
|
||||
borderRadius: '50%',
|
||||
boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.3)', // Optional shadow for the circle
|
||||
}}
|
||||
>
|
||||
<IconButton color="inherit">
|
||||
<NotificationIcon color="rgba(255, 255, 255, 1)" />
|
||||
</IconButton>
|
||||
</Box>
|
||||
|
||||
{/* Right Dropdown */}
|
||||
<ButtonBase onClick={()=> {
|
||||
setIsOpenDrawerProfile(true)
|
||||
}}>
|
||||
<Box sx={{
|
||||
display: 'flex',
|
||||
gap: '10px',
|
||||
alignItems: 'center'
|
||||
}}>
|
||||
<Typography sx={{ color: 'rgba(255, 255, 255, 1)', fontWeight: 400, fontSize: '11px'}}>
|
||||
View Wallet
|
||||
</Typography>
|
||||
|
||||
<ArrowDownIcon />
|
||||
</Box>
|
||||
</ButtonBase>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
Reference in New Issue
Block a user