Fix:Clean up Tosi UI

zippiehq · Dec 14, 2023 · 6fc0ed8 · 6fc0ed8
1 parent f7e77a0
commit 6fc0ed8
Show file tree

Hide file tree

Showing 11 changed files with 99 additions and 351 deletions.
diff --git a/src/components/AssetTab.tsx b/src/components/AssetTab.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { useNavigate, useParams, Link as RouterLink } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router-dom'
 
 import {
   Box,
@@ -12,7 +12,6 @@ import {
   TablePagination,
   Typography,
   Tooltip,
-  Link,
 } from '@mui/material'
 import { styled } from '@mui/system'
 
@@ -356,44 +355,6 @@ const AssetTab = () => {
                 {assets.length}
               </Typography>
             </SectionWrapper>
-
-            <SectionWrapper>
-              <Typography variant="body2" color="grey.600" mb={1}>
-                Total change
-              </Typography>
-              <Typography
-                variant="body1"
-                color="grey.900"
-                mr={0.75}
-                sx={{ fontSize: '30px', fontWeight: 600, lineHeight: 1.27 }}
-              >
-                0
-              </Typography>
-            </SectionWrapper>
-
-            <SectionWrapper>
-              <Typography variant="body2" color="grey.600" mb={1}>
-                Publisher staking
-              </Typography>
-
-              <Box sx={{ display: 'flex', alignItems: 'flex-end' }}>
-                <Typography
-                  variant="body1"
-                  color="grey.900"
-                  mr={0.75}
-                  sx={{ fontSize: '30px', fontWeight: 600, lineHeight: 1.27 }}
-                >
-                  100,000
-                </Typography>
-                <Typography
-                  variant="body1"
-                  color="grey.900"
-                  sx={{ fontSize: '20px', fontWeight: 500, lineHeight: 1.5 }}
-                >
-                  TOSI
-                </Typography>
-              </Box>
-            </SectionWrapper>
           </Box>
         </Box>
       </Box>

diff --git a/src/components/DetailsTab.tsx b/src/components/DetailsTab.tsx
@@ -1,19 +1,18 @@
 import React, { useEffect } from 'react'
 import { useParams } from 'react-router-dom'
 
-import { Box, Typography, Table, TableBody, TableRow, TableContainer, TableCell, Link } from '@mui/material'
-import { styled } from '@mui/system'
-import moment from 'moment'
+import { Box, Typography, Table, TableBody, TableRow, TableContainer } from '@mui/material'
+
 import { SectionWrapper } from './SingleAssetStyles'
 import { TableNameCell, TableValueCell, CustomLink } from './TableStyles'
 import { useTrustlessIndexingContext } from '../hooks/useTrustlessIndexing'
 import IconLocationMark from '../assets/images/icon-location-mark.svg'
-import IconDownload from '../assets/images/icon-download.svg'
+
 import { formatDate } from '../utils/timestapFormater'
 
 const DetailsTab = () => {
   const { assetContract, assetTokenId } = useParams()
-  const { isTLILoading, TLIDataSet, setTLIQuery } = useTrustlessIndexingContext()
+  const { TLIDataSet, setTLIQuery } = useTrustlessIndexingContext()
 
   useEffect(() => setTLIQuery({ assetContract, assetTokenId }), [assetContract, assetTokenId, setTLIQuery])
   const token = TLIDataSet ? TLIDataSet.token : undefined

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
-import { Link as RouterLink } from 'react-router-dom'
 
-import { Container, Box, IconButton, Typography, List, ListItem, Link } from '@mui/material'
+import { Container, Box } from '@mui/material'
 
 import TwitterIcon from '@mui/icons-material/Twitter'
 import YouTubeIcon from '@mui/icons-material/YouTube'
@@ -15,59 +14,13 @@ const Footer = () => {
   }
 
   return (
-    <Box sx={{ minHeight: '377px', paddingTop: '64px', paddingBottom: '48px', backgroundColor: 'grey.900' }}>
+    <Box sx={{ paddingTop: '64px', backgroundColor: 'grey.900' }}>
       <Container sx={{ maxWidth: { xl: '1280px' }, margin: '0 auto', paddingX: { xs: 0, xl: 4 } }}>
         <Box sx={{ paddingBottom: '64px' }}>
           <Logo style={{ width: '112px', height: '32px' }} />
-
-          <Typography variant="body1" color="grey.300" mt={4} mb={4}>
-            Explore the world’s greenest blockchain.
-          </Typography>
-
-          <List sx={{ display: 'flex', flexDirection: 'row', padding: 0 }}>
-            <ListItem disablePadding sx={{ width: 'auto', marginRight: 3 }}>
-              <Link
-                component={RouterLink}
-                to="/coming-soon"
-                sx={{ fontSize: '16px', fontWeight: 500, lineHeight: 1.5, color: 'grey.300', textDecoration: 'none' }}
-              >
-                About TOSI
-              </Link>
-            </ListItem>
-
-            <ListItem disablePadding sx={{ width: 'auto', marginRight: 3 }}>
-              <Link
-                component={RouterLink}
-                to="/coming-soon"
-                sx={{ fontSize: '16px', fontWeight: 500, lineHeight: 1.5, color: 'grey.300', textDecoration: 'none' }}
-              >
-                Publishers
-              </Link>
-            </ListItem>
-
-            <ListItem disablePadding sx={{ width: 'auto', marginRight: 3 }}>
-              <Link
-                component={RouterLink}
-                to="/coming-soon"
-                sx={{ fontSize: '16px', fontWeight: 500, lineHeight: 1.5, color: 'grey.300', textDecoration: 'none' }}
-              >
-                Cookies
-              </Link>
-            </ListItem>
-
-            <ListItem disablePadding sx={{ width: 'auto', marginRight: 3 }}>
-              <Link
-                component={RouterLink}
-                to="/coming-soon"
-                sx={{ fontSize: '16px', fontWeight: 500, lineHeight: 1.5, color: 'grey.300', textDecoration: 'none' }}
-              >
-                Privacy
-              </Link>
-            </ListItem>
-          </List>
         </Box>
 
-        <Box
+        {/* <Box
           pt={4}
           sx={{
             display: 'flex',
@@ -104,7 +57,7 @@ const Footer = () => {
               <LinkedInIcon style={{ fill: '#98a2b3' }} />
             </IconButton>
           </Box>
-        </Box>
+        </Box> */}
       </Container>
     </Box>
   )

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -3,11 +3,9 @@ import { Link as RouterLink, useLocation } from 'react-router-dom'
 
 import { AppBar, Container, Toolbar, Link, List, ListItem } from '@mui/material'
 import { styled } from '@mui/system'
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
 
 import { ReactComponent as Logo } from '../assets/images/tosiscan-logo-header.svg'
 import { ReactComponent as LogoColors } from '../assets/images/tosiscan-logo-light.svg'
-import { theme } from '../theme'
 
 const NavLink = styled(Link)(({ theme }) => ({
   paddingTop: theme.spacing(1),
@@ -45,47 +43,6 @@ const Header = () => {
                 Home
               </NavLink>
             </ListItem>
-
-            <ListItem disablePadding sx={{ width: 'auto', marginRight: 1.25 }}>
-              <NavLink component={RouterLink} to="/coming-soon" sx={{ color: isDark ? 'white' : 'grey.500' }}>
-                Digital Assets
-              </NavLink>
-            </ListItem>
-
-            <ListItem disablePadding sx={{ width: 'auto', marginRight: 1.25 }}>
-              <NavLink component={RouterLink} to="/coming-soon" sx={{ color: isDark ? 'white' : 'grey.500' }}>
-                File Verifications
-              </NavLink>
-            </ListItem>
-
-            <ListItem disablePadding sx={{ width: 'auto', marginRight: 1.25 }}>
-              <NavLink
-                component={RouterLink}
-                to="/coming-soon"
-                sx={{ display: 'flex', alignItems: 'center', color: isDark ? 'white' : 'grey.500' }}
-              >
-                Publishers
-                <KeyboardArrowDownIcon style={{ marginLeft: '8px' }} />
-              </NavLink>
-            </ListItem>
-
-            <ListItem disablePadding sx={{ width: 'auto' }}>
-              <NavLink
-                component={RouterLink}
-                to="/coming-soon"
-                sx={{
-                  paddingY: 1.25,
-                  paddingX: 2,
-                  border: '1px solid',
-                  borderColor: isDark ? '#D4EF33 #D4EF33 #00D1FF  #00D1FF  ' : ' rgba(16, 24, 40, 0.05)',
-                  borderRadius: '100px',
-                  color: isDark ? 'white' : 'grey.800',
-                  backgroundColor: isDark ? '#081010' : 'white',
-                }}
-              >
-                Become a publisher
-              </NavLink>
-            </ListItem>
           </List>
         </Toolbar>
       </Container>

diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { Box, Container, Typography } from '@mui/material'
+import { Box, Container } from '@mui/material'
 import { styled } from '@mui/system'
 
 import { ReactComponent as Logo } from '../assets/images/tosiscan-logo-center.svg'
@@ -21,11 +21,7 @@ const Hero = () => (
   <Wrapper>
     <Header />
     <Container sx={{ maxWidth: { xl: '520px' }, margin: '0 auto', paddingX: { xs: 0 }, textAlign: 'center' }}>
-      <Logo style={{ width: '236px', height: '69px', marginTop: '72px' }} />
-
-      <Typography variant="body1" color="success.50" m={1} mb={4}>
-        Explore the world’s greenest blockchain
-      </Typography>
+      <Logo style={{ width: '236px', height: '69px', marginTop: '72px', marginBottom: '32px' }} />
 
       <Search />
     </Container>