Mirror/robosats
1
0
Fork 0
mirror of https://github.com/RoboSats/robosats.git synced 2024-12-14 03:16:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Improve navigation bottom bar

Browse Source
This commit is contained in:
Reckless_Satoshi 2022-06-19 13:51:39 -07:00
parent f1c4754868
commit d18d4b4927
No known key found for this signature in database
GPG Key ID: 9C4585B561315571
1 changed files with 60 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
frontend/src/components/BottomBar.js
View File

@ -3,9 +3,10 @@ import { withTranslation } from "react-i18next";
import { Badge, Tooltip, ListItemAvatar, Avatar,Paper, Grid, IconButton, Select, MenuItem, ListItemText, ListItem, ListItemIcon, ListItemButton } from "@mui/material"; import { Badge, Tooltip, ListItemAvatar, Avatar,Paper, Grid, IconButton, Select, MenuItem, ListItemText, ListItem, ListItemIcon, ListItemButton } from "@mui/material";
import MediaQuery from 'react-responsive' import MediaQuery from 'react-responsive'
import Flags from 'country-flag-icons/react/3x2' import Flags from 'country-flag-icons/react/3x2'
import { Link as LinkRouter } from "react-router-dom";
// Icons // Icons
import SettingsIcon from '@mui/icons-material/Settings'; import BarChartIcon from '@mui/icons-material/BarChart';
import PeopleIcon from '@mui/icons-material/People'; import PeopleIcon from '@mui/icons-material/People';
import InventoryIcon from '@mui/icons-material/Inventory'; import InventoryIcon from '@mui/icons-material/Inventory';
import SellIcon from '@mui/icons-material/Sell'; import SellIcon from '@mui/icons-material/Sell';
@ -158,7 +159,13 @@ bottomBarDesktop =()=>{
<Grid item xs={1.9}> <Grid item xs={1.9}>
<ListItem className="bottomItem"> <ListItem className="bottomItem">
<ListItemIcon size="small"> <ListItemIcon size="small">
<IconButton onClick={this.handleClickOpenExchangeSummary}><InventoryIcon/></IconButton> <IconButton
color="primary"
onClick={()=> this.props.setAppState({buyChecked: false, sellChecked: true, type:0}) && this.getInfo()}
to={`/book/`}
component={LinkRouter} >
<InventoryIcon/>
</IconButton>
</ListItemIcon> </ListItemIcon>
<ListItemText <ListItemText
primaryTypographyProps={{fontSize: '14px'}} primaryTypographyProps={{fontSize: '14px'}}
@ -171,7 +178,13 @@ bottomBarDesktop =()=>{
<Grid item xs={1.9}> <Grid item xs={1.9}>
<ListItem className="bottomItem"> <ListItem className="bottomItem">
<ListItemIcon size="small"> <ListItemIcon size="small">
<IconButton onClick={this.handleClickOpenExchangeSummary}><SellIcon/></IconButton> <IconButton
color="primary"
onClick={()=> this.props.setAppState({buyChecked: true, sellChecked: false, type:1}) && this.getInfo()}
to={`/book/`}
component={LinkRouter} >
<SellIcon/>
</IconButton>
</ListItemIcon> </ListItemIcon>
<ListItemText <ListItemText
primaryTypographyProps={{fontSize: '14px'}} primaryTypographyProps={{fontSize: '14px'}}
@ -184,7 +197,12 @@ bottomBarDesktop =()=>{
<Grid item xs={1.9}> <Grid item xs={1.9}>
<ListItem className="bottomItem"> <ListItem className="bottomItem">
<ListItemIcon size="small"> <ListItemIcon size="small">
<IconButton onClick={this.handleClickOpenExchangeSummary}><SmartToyIcon/></IconButton> <IconButton color="primary"
onClick={()=> this.getInfo()}
to={`/`}
component={LinkRouter} >
<SmartToyIcon/>
</IconButton>
</ListItemIcon> </ListItemIcon>
<ListItemText <ListItemText
primaryTypographyProps={{fontSize: '14px'}} primaryTypographyProps={{fontSize: '14px'}}
@ -197,7 +215,10 @@ bottomBarDesktop =()=>{
<Grid item xs={1.9}> <Grid item xs={1.9}>
<ListItem className="bottomItem"> <ListItem className="bottomItem">
<ListItemIcon size="small"> <ListItemIcon size="small">
<IconButton onClick={this.handleClickOpenExchangeSummary}><PriceChangeIcon/></IconButton> <IconButton color="primary"
onClick={this.handleClickOpenExchangeSummary}>
<PriceChangeIcon/>
</IconButton>
</ListItemIcon> </ListItemIcon>
<ListItemText <ListItemText
primaryTypographyProps={{fontSize: '14px'}} primaryTypographyProps={{fontSize: '14px'}}
@ -210,7 +231,10 @@ bottomBarDesktop =()=>{
<Grid item xs={1.5}> <Grid item xs={1.5}>
<ListItem className="bottomItem"> <ListItem className="bottomItem">
<ListItemIcon size="small"> <ListItemIcon size="small">
< IconButton onClick={this.handleClickOpenExchangeSummary}><PercentIcon/></IconButton> <IconButton color="primary"
onClick={this.handleClickOpenExchangeSummary}>
<PercentIcon/>
</IconButton>
</ListItemIcon> </ListItemIcon>
<ListItemText <ListItemText
primaryTypographyProps={{fontSize: '14px'}} primaryTypographyProps={{fontSize: '14px'}}
@ -239,7 +263,7 @@ bottomBarDesktop =()=>{
<IconButton color="primary" <IconButton color="primary"
aria-label="Stats for Nerds" aria-label="Stats for Nerds"
onClick={this.handleClickOpenStatsForNerds} > onClick={this.handleClickOpenStatsForNerds} >
<SettingsIcon /> <BarChartIcon />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
</Grid> </Grid>
@ -321,40 +345,52 @@ bottomBarPhone =()=>{
<Grid item xs={1.6} align="center"> <Grid item xs={1.6} align="center">
<Tooltip enterTouchDelay={300} title={t("Number of public BUY orders")}> <Tooltip enterTouchDelay={300} title={t("Number of public BUY orders")}>
<IconButton onClick={this.handleClickOpenExchangeSummary} > <IconButton
<Badge badgeContent={this.state.num_public_buy_orders} color="action"> color="primary"
<InventoryIcon /> onClick={()=> this.props.setAppState({buyChecked: false, sellChecked: true, type:0}) && this.getInfo()}
</Badge> to={`/book/`}
component={LinkRouter} >
<Badge badgeContent={this.state.num_public_buy_orders} color="action">
<InventoryIcon/>
</Badge>
</IconButton> </IconButton>
</Tooltip> </Tooltip>
</Grid> </Grid>
<Grid item xs={1.6} align="center"> <Grid item xs={1.6} align="center">
<Tooltip enterTouchDelay={300} title={t("Number of public SELL orders")}> <Tooltip enterTouchDelay={300} title={t("Number of public SELL orders")}>
<IconButton onClick={this.handleClickOpenExchangeSummary} > <IconButton
<Badge badgeContent={this.state.num_public_sell_orders} color="action"> color="primary"
<SellIcon /> onClick={()=> this.props.setAppState({buyChecked: true, sellChecked: false, type:1}) && this.getInfo()}
</Badge> to={`/book/`}
component={LinkRouter} >
<Badge badgeContent={this.state.num_public_sell_orders} color="action">
<SellIcon/>
</Badge>
</IconButton> </IconButton>
</Tooltip> </Tooltip>
</Grid> </Grid>
<Grid item xs={1.6} align="center"> <Grid item xs={1.6} align="center">
<Tooltip enterTouchDelay={300} title={t("Today active robots")}> <Tooltip enterTouchDelay={300} title={t("Today active robots")}>
<IconButton onClick={this.handleClickOpenExchangeSummary} > <IconButton color="primary"
<Badge badgeContent={this.state.active_robots_today} color="action"> onClick={()=> this.getInfo()}
<SmartToyIcon /> to={`/`}
</Badge> component={LinkRouter} >
<Badge badgeContent={this.state.active_robots_today} color="action">
<SmartToyIcon />
</Badge>
</IconButton> </IconButton>
</Tooltip> </Tooltip>
</Grid> </Grid>
<Grid item xs={1.8} align="center"> <Grid item xs={1.8} align="center">
<Tooltip enterTouchDelay={300} title={t("24h non-KYC bitcoin premium")}> <Tooltip enterTouchDelay={300} title={t("24h non-KYC bitcoin premium")}>
<IconButton onClick={this.handleClickOpenExchangeSummary} > <IconButton color="primary"
<Badge badgeContent={this.state.last_day_nonkyc_btc_premium+"%"} color="action"> onClick={this.handleClickOpenExchangeSummary} >
<PriceChangeIcon /> <Badge badgeContent={this.state.last_day_nonkyc_btc_premium+"%"} color="action">
</Badge> <PriceChangeIcon />
</Badge>
</IconButton> </IconButton>
</Tooltip> </Tooltip>
</Grid> </Grid>
@ -378,7 +414,7 @@ bottomBarPhone =()=>{
<IconButton color="primary" <IconButton color="primary"
aria-label="Stats for Nerds" aria-label="Stats for Nerds"
onClick={this.handleClickOpenStatsForNerds} > onClick={this.handleClickOpenStatsForNerds} >
<SettingsIcon /> <BarChartIcon />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
</Grid> </Grid>