Merge pull request #681 from dOrgTech/bug-657

label added
dOrgTech · Oct 21, 2023 · 1da188f · 1da188f
2 parents 633b661 + 8149d8a
commit 1da188f
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 9 deletions.
diff --git a/src/modules/explorer/components/NavigationMenu.tsx b/src/modules/explorer/components/NavigationMenu.tsx
@@ -1,4 +1,14 @@
-import { Grid, styled, Theme, Typography, useMediaQuery, useTheme, alpha } from "@material-ui/core"
+import {
+  Grid,
+  styled,
+  Theme,
+  Typography,
+  useMediaQuery,
+  useTheme,
+  alpha,
+  withStyles,
+  makeStyles
+} from "@material-ui/core"
 import { ReactComponent as HouseIcon } from "assets/logos/home.svg"
 import { ReactComponent as VotingIcon } from "assets/logos/voting.svg"
 import { ReactComponent as TreasuryIcon } from "assets/logos/treasury.svg"
@@ -14,14 +24,32 @@ import { debounce } from "../utils/debounce"
 
 const Container = styled(Grid)(({ theme }) => ({
   width: "100%",
-  background: theme.palette.primary.main,
+  background: theme.palette.primary.dark,
   position: "sticky",
   top: "0px"
 }))
 
-const InnerContainer = styled(Grid)(({ theme }) => ({
+const InnerContainer = styled(Grid)(({ theme }: { theme: Theme }) => ({
   width: "1000px",
   margin: "auto",
+  borderRadius: 8,
+  backgroundColor: theme.palette.primary.main,
+  padding: 16,
+  alignItems: "center",
+  justifyContent: "space-between",
+
+  ["@media (max-width:1167px)"]: {
+    width: "86vw"
+  }
+}))
+
+const InnerContainerExplorer = styled(Grid)(({ theme }: { theme: Theme }) => ({
+  width: "1000px",
+  margin: "auto",
+  borderRadius: 8,
+  backgroundColor: theme.palette.primary.dark,
+  padding: 16,
+  alignItems: "center",
   justifyContent: "space-between",
 
   ["@media (max-width:1167px)"]: {
@@ -30,13 +58,16 @@ const InnerContainer = styled(Grid)(({ theme }) => ({
 }))
 
 const PageItem = styled(Grid)(({ theme, isSelected }: { theme: Theme; isSelected: boolean }) => ({
-  "height": "60px",
   "display": "flex",
   "alignItems": "center",
-  "padding": "0 8px",
   "borderTop": "2px solid transparent",
-  "borderBottom": isSelected ? "2px solid" + theme.palette.secondary.main : "2px solid transparent",
+  "backgroundColor": isSelected ? "rgba(129, 254, 183, 0.20)" : "inherit",
+  "height": 40,
+  "padding": "20px 20px",
+  "borderRadius": 8,
   "transition": isSelected ? "0s ease-in" : ".1s ease-out",
+  "width": 180,
+  "justifyContent": "center",
 
   "& > a > *": {
     height: "100%"
@@ -128,12 +159,20 @@ const getPages = (daoId: string): Page[] => [
   }
 ]
 
+const styles = makeStyles(theme => ({
+  home: {
+    backgroundColor: theme.palette.primary.main
+  },
+  explorer: {
+    backgroundColor: theme.palette.primary.dark
+  }
+}))
+
 const StyledBottomBar = styled(Grid)(({ theme }: { theme: Theme }) => ({
   position: "fixed",
   height: 55,
   width: "100%",
   bottom: /*visible ? 0 : -55*/ 0,
-  backgroundColor: theme.palette.primary.main,
   boxShadow: "0px -4px 7px -4px rgba(0,0,0,0.2)",
   zIndex: 10000,
   transition: "bottom 0.5s"
@@ -149,6 +188,8 @@ const BottomNavBar: React.FC = ({ children }) => {
   const [prevScrollPos, setPrevScrollPos] = useState(0)
   const [visible, setVisible] = useState(true)
 
+  const classes = styles()
+
   useEffect(() => {
     const handleScroll = debounce(() => {
       const currentScrollPos = window.pageYOffset
@@ -179,6 +220,8 @@ export const NavigationMenu: React.FC<{ disableMobileMenu?: boolean }> = ({ disa
   const pathId = path.pathname.split("/").slice(-1)[0]
   const theme = useTheme()
   const isMobileSmall = useMediaQuery(theme.breakpoints.down(960))
+  const classes = styles()
+  const location = useLocation()
 
   useEffect(() => {
     if (dao) {
@@ -194,7 +237,7 @@ export const NavigationMenu: React.FC<{ disableMobileMenu?: boolean }> = ({ disa
 
   return !isMobileSmall || disableMobileMenu ? (
     <Container container>
-      <InnerContainer container>
+      <InnerContainer container className={location.pathname.match("/explorer/daos") ? classes.explorer : classes.home}>
         {pages.map((page, i) => (
           <PageItem key={`page-${i}`} isSelected={pathId === page.pathId} item>
             <Link to={page.href}>

diff --git a/src/modules/explorer/components/UserBalances.tsx b/src/modules/explorer/components/UserBalances.tsx
@@ -71,10 +71,15 @@ const Balance = styled(Typography)({
 })
 
 const BalanceToken = styled(Typography)({
-  fontSize: 24,
+  fontSize: 21,
   fontWeight: 300
 })
 
+const OnChainTitle = styled(Typography)({
+  marginBottom: 16,
+  fontSize: 24
+})
+
 export const UserBalances: React.FC<{ daoId: string }> = ({ daoId, children }) => {
   const { account } = useTezos()
   const { data: dao, ledger } = useDAO(daoId)
@@ -120,6 +125,11 @@ export const UserBalances: React.FC<{ daoId: string }> = ({ daoId, children }) =
     <Grid container direction="column" style={{ gap: 40 }}>
       {children}
       <Grid item container direction={isExtraSmall ? "column" : "row"} justifyContent="space-between">
+        <Grid container item direction="row">
+          <OnChainTitle align="center" color="textPrimary">
+            On-Chain Balances
+          </OnChainTitle>
+        </Grid>
         {dao &&
           balancesList.map(({ displayName, balance }, i) => (
             <Grid item key={`balance-${i}`}>