user page initial commit, font changed, tabs & cards updated

dOrgTech · Dec 7, 2023 · 52e7770 · 52e7770
1 parent be4466b
commit 52e7770
Show file tree

Hide file tree

Showing 32 changed files with 265 additions and 207 deletions.
diff --git a/public/index.html b/public/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100;200;300;400;500;600;700&family=Roboto:wght@100;300;400;500;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto+Flex:wght@100;200;300;400;500;600;700&family=Roboto:wght@100;300;400;500;700&display=swap" rel="stylesheet">
     <script src="https://www.tezbridge.com/plugin.js"></script>
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />

diff --git a/src/modules/common/TitleBlock.tsx b/src/modules/common/TitleBlock.tsx
@@ -2,8 +2,6 @@ import { Grid, Link, Paper, styled, Tooltip, Typography } from "@material-ui/cor
 import React from "react"
 import { ReactElement } from "react-markdown/lib/react-markdown"
 import { InfoRounded } from "@material-ui/icons"
-import { HashLink } from "react-router-hash-link"
-import { CopyButton } from "./CopyButton"
 
 const StyledGrid = styled(Grid)({
   height: "fit-content",

diff --git a/src/modules/common/Toolbar.tsx b/src/modules/common/Toolbar.tsx
@@ -107,7 +107,7 @@ const LogoText = styled(Typography)({
   fontWeight: "bold",
   fontSize: "26px",
   cursor: "pointer",
-  fontFamily: "Roboto",
+  fontFamily: "Roboto Flex",
   letterSpacing: "initial"
 })
 

diff --git a/src/modules/creator/deployment/index.tsx b/src/modules/creator/deployment/index.tsx
@@ -55,7 +55,7 @@ const IndicatorValue = styled(Paper)(({ theme }) => ({
   userSelect: "none",
   boxShadow: "none",
   background: "inherit",
-  fontFamily: "Roboto Mono"
+  fontFamily: "Roboto Flex"
 }))
 
 const StepContentContainer = styled(Grid)({

diff --git a/src/modules/creator/deployment/steps/Config.tsx b/src/modules/creator/deployment/steps/Config.tsx
@@ -29,7 +29,7 @@ const CustomTextarea = styled(withTheme(TextareaAutosize))(props => ({
   "marginTop": 14,
   "fontWeight": 300,
   "padding": "21px 20px",
-  "fontFamily": "Roboto Mono",
+  "fontFamily": "Roboto Flex",
   "border": "none",
   "fontSize": 16,
   "color": props.theme.palette.text.secondary,

diff --git a/src/modules/creator/index.tsx b/src/modules/creator/index.tsx
@@ -65,7 +65,7 @@ const IndicatorValue = styled(Paper)(({ theme }) => ({
   userSelect: "none",
   boxShadow: "none",
   background: "inherit",
-  fontFamily: "Roboto Mono"
+  fontFamily: "Roboto Flex"
 }))
 
 const FAQClickToAction = styled(Typography)(({ theme }) => ({

diff --git a/src/modules/creator/steps/DaoSettings.tsx b/src/modules/creator/steps/DaoSettings.tsx
@@ -102,7 +102,7 @@ const CustomTextarea = styled(withTheme(TextareaAutosize))(props => ({
   "padding": "21px 20px",
   "border": "none",
   "fontSize": 16,
-  "fontFamily": "Roboto Mono",
+  "fontFamily": "Roboto Flex",
   "color": props.theme.palette.text.secondary,
   "background": "#2F3438",
   "lineHeight": "135%",

diff --git a/src/modules/creator/steps/DeploymentType.tsx b/src/modules/creator/steps/DeploymentType.tsx
@@ -43,7 +43,7 @@ const styles = makeStyles({
 const BoxTitle = styled(Typography)({
   fontSize: 18,
   fontWeight: 500,
-  fontFamily: "Roboto Mono",
+  fontFamily: "Roboto Flex",
   marginBottom: 10
 })
 

diff --git a/src/modules/creator/steps/Template.tsx b/src/modules/creator/steps/Template.tsx
@@ -50,7 +50,7 @@ const ErrorText = styled(Typography)({
 const BoxTitle = styled(Typography)({
   fontSize: 18,
   fontWeight: 500,
-  fontFamily: "Roboto Mono",
+  fontFamily: "Roboto Flex",
   marginBottom: 10
 })
 

diff --git a/src/modules/explorer/components/CodeCollapse.tsx b/src/modules/explorer/components/CodeCollapse.tsx
@@ -65,7 +65,7 @@ export const CodeCollapse: React.FC<Props> = ({ code }) => {
             padding={10}
             style={{
               minHeight: 500,
-              fontFamily: "Roboto Mono",
+              fontFamily: "Roboto Flex",
               fontSize: 14,
               fontWeight: 400,
               outlineWidth: 0

diff --git a/src/modules/explorer/components/ConfigProposalFormLambda.tsx b/src/modules/explorer/components/ConfigProposalFormLambda.tsx
@@ -45,7 +45,7 @@ const codeEditorcontainerstyles = {
 
 const codeEditorStyles = {
   minHeight: 500,
-  fontFamily: "Roboto Mono",
+  fontFamily: "Roboto Flex",
   fontSize: 14,
   fontWeight: 400,
   outlineWidth: 0

diff --git a/src/modules/explorer/components/Dropdown.tsx b/src/modules/explorer/components/Dropdown.tsx
@@ -25,7 +25,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
   option: {
     "padding": 8,
-    "fontFamily": "Roboto Mono",
+    "fontFamily": "Roboto Flex",
     "cursor": "pointer",
     "text-transform": "capitalize",
     "&:hover": {

diff --git a/src/modules/explorer/components/NavigationMenu.tsx b/src/modules/explorer/components/NavigationMenu.tsx
@@ -31,23 +31,10 @@ const Container = styled(Grid)(({ theme }) => ({
 
 const InnerContainer = styled(Grid)(({ theme }: { theme: Theme }) => ({
   width: "1000px",
+  paddingLeft: 0,
+  paddingRight: 0,
   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",

diff --git a/src/modules/explorer/components/Toolbar.tsx b/src/modules/explorer/components/Toolbar.tsx
@@ -71,7 +71,7 @@ const LogoText = styled(Typography)({
   fontWeight: "bold",
   fontSize: "26px",
   cursor: "pointer",
-  fontFamily: "Roboto",
+  fontFamily: "Roboto Flex",
   letterSpacing: "initial"
 })
 

diff --git a/src/modules/explorer/components/UserBalances.tsx b/src/modules/explorer/components/UserBalances.tsx
@@ -1,7 +1,8 @@
-import { Grid, styled, Typography, useMediaQuery, useTheme } from "@material-ui/core"
+import { Button, Grid, styled, Typography, useMediaQuery, useTheme } from "@material-ui/core"
 import React, { useMemo } from "react"
 import { useTezos } from "services/beacon/hooks/useTezos"
 import { useDAO } from "services/services/dao/hooks/useDAO"
+import CancelIcon from "@mui/icons-material/Cancel"
 
 const BalancesBox = styled(Grid)(({ theme }) => ({
   minHeight: "137px",
@@ -35,6 +36,7 @@ interface Balances {
 const BalanceHeaderText = styled(Typography)({
   paddingBottom: 10,
   fontSize: 18,
+  fontWeight: 600,
 
   ["@media (max-width:710px)"]: {
     fontSize: 16
@@ -61,7 +63,7 @@ const BalanceGrid = styled(Grid)({
 })
 
 const Balance = styled(Typography)({
-  fontSize: 36,
+  fontSize: 32,
   lineHeight: "0.9",
   fontWeight: 300,
 
@@ -70,19 +72,57 @@ const Balance = styled(Typography)({
   }
 })
 
-const BalanceToken = styled(Typography)({
-  fontSize: 21,
-  fontWeight: 300
+const OnChainTitle = styled(Typography)({
+  fontSize: 24,
+  fontWeight: 600
 })
 
-const OnChainTitle = styled(Typography)({
-  marginBottom: 16,
-  fontSize: 24
+const OnChainSubtitle = styled(Typography)({
+  fontSize: 18,
+  fontWeight: 300,
+  color: "#bfc5ca",
+  lineHeight: "160%"
+})
+
+const OnChainBox = styled(Grid)(({ theme }) => ({
+  display: "flex",
+  padding: "36px 48px 33px 48px",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "flex-start",
+  gap: 24,
+  flexShrink: 0,
+  borderRadius: 8,
+  background: theme.palette.primary.main,
+  maxWidth: "32% !important",
+  [theme.breakpoints.down("sm")]: {
+    maxWidth: "100% !important",
+    marginBottom: 12
+  }
+}))
+
+const UnstakeText = styled(Typography)({
+  marginLeft: 4,
+  fontSize: 18
 })
 
-export const UserBalances: React.FC<{ daoId: string }> = ({ daoId, children }) => {
+const UnstakeButton = styled(Button)({
+  "padding": 0,
+  "&:hover": {
+    backgroundColor: "inherit",
+    background: "inherit"
+  }
+})
+
+export const UserBalances: React.FC<{ daoId: string; canUnstakeVotes: boolean; onUnstakeFromAllProposals: any }> = ({
+  daoId,
+  children,
+  canUnstakeVotes,
+  onUnstakeFromAllProposals
+}) => {
   const { account } = useTezos()
   const { data: dao, ledger } = useDAO(daoId)
+  const symbol = dao && dao.data.token.symbol.toUpperCase()
   const theme = useTheme()
   const isExtraSmall = useMediaQuery(theme.breakpoints.down(635))
 
@@ -127,39 +167,41 @@ export const UserBalances: React.FC<{ daoId: string }> = ({ daoId, children }) =
       <Grid item container direction={isExtraSmall ? "column" : "row"} justifyContent="space-between">
         <Grid container item direction="row">
           <OnChainTitle align="center" color="textPrimary">
-            On-Chain Balances
+            On-Chain {symbol} Balances
           </OnChainTitle>
         </Grid>
-        {dao &&
-          balancesList.map(({ displayName, balance }, i) => (
-            <Grid item key={`balance-${i}`}>
-              <BalanceHeaderText color="secondary" align={isExtraSmall ? "center" : "left"}>
-                {displayName}
-              </BalanceHeaderText>
-              <BalanceGrid
-                container
-                alignItems="baseline"
-                spacing={1}
-                justifyContent={isExtraSmall ? "center" : "flex-start"}
-              >
-                <Grid item>
-                  <Balance color="textPrimary">{balance}</Balance>
-                </Grid>
-                <Grid item>
-                  <BalanceToken color="textPrimary">{balance !== "-" ? dao.data.token.symbol : ""}</BalanceToken>
-                </Grid>
-              </BalanceGrid>
-            </Grid>
-          ))}
+        <Grid style={{ marginBottom: 24 }} container item direction="row">
+          <OnChainSubtitle>These settings only affect your participation in on-chain polls</OnChainSubtitle>
+        </Grid>
+        <Grid container direction={isExtraSmall ? "column" : "row"} justifyContent="space-between">
+          {dao &&
+            balancesList.map(({ displayName, balance }, i) => (
+              <OnChainBox item xs key={`balance-${i}`}>
+                <BalanceHeaderText color="textPrimary" align={isExtraSmall ? "center" : "left"}>
+                  {displayName}
+                </BalanceHeaderText>
+                <BalanceGrid
+                  container
+                  alignItems="baseline"
+                  justifyContent={isExtraSmall ? "center" : "flex-start"}
+                  direction="row"
+                >
+                  <Grid item xs={6}>
+                    <Balance color="textPrimary">{balance}</Balance>
+                  </Grid>
+                  {i === 2 ? (
+                    <Grid item xs container direction="row" alignItems="center" justifyContent="flex-end">
+                      <UnstakeButton variant="text" disabled={!canUnstakeVotes} onClick={onUnstakeFromAllProposals}>
+                        <CancelIcon style={{ fontSize: 16 }} />
+                        <UnstakeText>Unstake</UnstakeText>
+                      </UnstakeButton>
+                    </Grid>
+                  ) : null}
+                </BalanceGrid>
+              </OnChainBox>
+            ))}
+        </Grid>
       </Grid>
     </Grid>
   )
 }
-
-export const UserBalancesBox: React.FC<{ daoId: string }> = ({ daoId }) => {
-  return (
-    <BalancesBox item>
-      <UserBalances daoId={daoId} />
-    </BalancesBox>
-  )
-}
diff --git a/src/modules/explorer/pages/DAOList/components/DAOItem.tsx b/src/modules/explorer/pages/DAOList/components/DAOItem.tsx
@@ -46,7 +46,6 @@ const SymbolText = styled(Typography)(({ theme }: { theme: Theme }) => ({
   color: "#bfc5ca",
   lineHeight: "normal",
   marginTop: 8,
-  marginLeft: "12%",
 
   [theme.breakpoints.down("md")]: {
     fontSize: 18
@@ -112,7 +111,7 @@ const Badge = styled(Grid)(({ theme, dao_type }: { theme: Theme; dao_type: strin
   "& > div": {
     height: "100%"
   },
-  "fontFamily": "Roboto Mono",
+  "fontFamily": "Roboto Flex",
   "fontWeight": 500
 }))
 
@@ -153,29 +152,16 @@ export const DAOItem: React.FC<{
         <Grid container direction="row">
           <DescriptionText>{ReactHtmlParser(dao.description)}</DescriptionText>
         </Grid>
-        {!isExtraSmall ? (
-          <Grid container direction="row" justifyContent="space-between">
-            <Grid md={5} sm={5} container item direction="row">
-              <ItemText color="textPrimary">DAO {"\n"}Token</ItemText>
-              <SymbolText>{dao?.symbol?.toUpperCase()}</SymbolText>
-            </Grid>
-            <Grid md={5} xs={5} container item direction="row" justifyContent="flex-end">
-              <ItemText color="textPrimary">Voting {"\n"}Addresses</ItemText>{" "}
-              <SymbolText>{formatNumber(new BigNumber(dao.votingAddressesCount))}</SymbolText>
-            </Grid>
+        <Grid container direction="row" justifyContent="space-between">
+          <Grid xs={6} container item direction="column">
+            <ItemTextSmall color="textPrimary">DAO {"\n"}Token</ItemTextSmall>
+            <SymbolText>{dao?.symbol?.toUpperCase()}</SymbolText>
           </Grid>
-        ) : (
-          <Grid container direction="row" justifyContent="space-between">
-            <Grid xs={6} container item direction="column">
-              <ItemTextSmall color="textPrimary">DAO {"\n"}Token</ItemTextSmall>
-              <SymbolText>{dao?.symbol?.toUpperCase()}</SymbolText>
-            </Grid>
-            <Grid xs={6} container item direction="column">
-              <ItemTextSmall color="textPrimary">Voting Addresses</ItemTextSmall>
-              <SymbolText>{formatNumber(new BigNumber(dao.votingAddressesCount))}</SymbolText>
-            </Grid>
+          <Grid xs={6} container item direction="column">
+            <ItemTextSmall color="textPrimary">Voting Addresses</ItemTextSmall>
+            <SymbolText>{formatNumber(new BigNumber(dao.votingAddressesCount))}</SymbolText>
           </Grid>
-        )}
+        </Grid>
       </Container>
     </Link>
   )

diff --git a/src/modules/explorer/pages/DAOList/index.tsx b/src/modules/explorer/pages/DAOList/index.tsx
@@ -215,12 +215,12 @@ export const DAOList: React.FC = () => {
       <Navbar disableMobileMenu />
       <PageContainer>
         <Grid container style={{ gap: 32 }} direction="column">
-          <Grid item>
+          <Grid item style={{ height: "14vh" }}>
             <Grid
               container
               justifyContent={isMobileExtraSmall ? "center" : "space-between"}
               alignItems="center"
-              style={{ gap: 42 }}
+              style={isMobileExtraSmall ? { gap: 24 } : { gap: 42 }}
             >
               <Search>
                 <SearchInput search={filterDAOs} />

diff --git a/src/modules/explorer/pages/DAOList/styles.css b/src/modules/explorer/pages/DAOList/styles.css
@@ -2,7 +2,7 @@
   display: flex;
   list-style: none;
   outline: none;
-  font-family: "Roboto Mono";
+  font-family: "Roboto Flex";
 }
 .pagination > .active > a {
   background-color: rgba(129, 254, 183, 0.2);
@@ -14,6 +14,9 @@
   outline: none;
   cursor: pointer;
   border-radius: 50%;
+  margin-left: 8px;
+  margin-right: 8px;
+  font-family: "Roboto Flex";
 }
 .pagination > .active > a,
 .pagination > .active > span,