feat: header styles

tari-project · Nov 1, 2024 · 473fbda · 473fbda
1 parent 4e11445
commit 473fbda
Show file tree

Hide file tree

Showing 8 changed files with 158 additions and 164 deletions.
diff --git a/src/routes/Blocks/Block.tsx b/src/routes/Blocks/Block.tsx
@@ -20,7 +20,6 @@
 //  WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE
 //  USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
-import Container from '@mui/material/Container';
 import Grid from '@mui/material/Grid';
 import { StyledPaper } from '../../components/StyledComponents';
 import { useTheme } from '@mui/material/styles';
@@ -39,67 +38,63 @@ function Block() {
   if (isLoading || isError) {
     return (
       <Grid item xs={12} md={12} lg={12}>
-        <Container maxWidth="xl">
-          <Grid container spacing={3}>
-            <Grid item xs={12} md={12} lg={12}>
-              <StyledPaper>
-                <FetchStatusCheck
-                  isError={isError}
-                  isLoading={isLoading}
-                  errorMessage={error?.message || 'Error retrieving data'}
-                />
-              </StyledPaper>
-            </Grid>
+        <Grid container spacing={3}>
+          <Grid item xs={12} md={12} lg={12}>
+            <StyledPaper>
+              <FetchStatusCheck
+                isError={isError}
+                isLoading={isLoading}
+                errorMessage={error?.message || 'Error retrieving data'}
+              />
+            </StyledPaper>
           </Grid>
-        </Container>
+        </Grid>
       </Grid>
     );
   }
 
   return (
     <Grid item xs={12} md={12} lg={12}>
-      <Container maxWidth="xl">
-        <Grid container spacing={3}>
-          <Grid item xs={12} md={12} lg={6}>
-            <StyledPaper>
-              <BlockInfo blockHeight={blockHeight} />
-            </StyledPaper>
-          </Grid>
-          <Grid
-            item
-            xs={12}
-            md={12}
-            lg={6}
-            style={{
-              display: 'flex',
-              flexDirection: 'column',
-              gap: theme.spacing(3),
-            }}
-          >
-            <StyledPaper>
-              <BlockParts
-                blockHeight={blockHeight}
-                type="kernels"
-                itemsPerPage={5}
-              />
-            </StyledPaper>
-            <StyledPaper>
-              <BlockParts
-                blockHeight={blockHeight}
-                type="outputs"
-                itemsPerPage={5}
-              />
-            </StyledPaper>
-            <StyledPaper>
-              <BlockParts
-                blockHeight={blockHeight}
-                type="inputs"
-                itemsPerPage={5}
-              />
-            </StyledPaper>
-          </Grid>
+      <Grid container spacing={3}>
+        <Grid item xs={12} md={12} lg={6}>
+          <StyledPaper>
+            <BlockInfo blockHeight={blockHeight} />
+          </StyledPaper>
         </Grid>
-      </Container>
+        <Grid
+          item
+          xs={12}
+          md={12}
+          lg={6}
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: theme.spacing(3),
+          }}
+        >
+          <StyledPaper>
+            <BlockParts
+              blockHeight={blockHeight}
+              type="kernels"
+              itemsPerPage={5}
+            />
+          </StyledPaper>
+          <StyledPaper>
+            <BlockParts
+              blockHeight={blockHeight}
+              type="outputs"
+              itemsPerPage={5}
+            />
+          </StyledPaper>
+          <StyledPaper>
+            <BlockParts
+              blockHeight={blockHeight}
+              type="inputs"
+              itemsPerPage={5}
+            />
+          </StyledPaper>
+        </Grid>
+      </Grid>
     </Grid>
   );
 }

diff --git a/src/routes/Header/AppHeader.tsx b/src/routes/Header/AppHeader.tsx
@@ -0,0 +1,49 @@
+import Header from './Header';
+import TopBar from './TopBar';
+import { useState, useEffect } from 'react';
+import Box from '@mui/material/Box';
+
+const darkBg = 'rgb(25, 14, 43, 0.95)';
+const lightBg = 'rgba(0,0,0,0.1)';
+
+function AppHeader() {
+  const [bgColor, setBgColor] = useState(lightBg);
+  const [isScrolled, setIsScrolled] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (window.scrollY > 10) {
+        setBgColor(darkBg);
+        setIsScrolled(true);
+      } else {
+        setBgColor(lightBg);
+        setIsScrolled(false);
+      }
+    };
+
+    handleScroll();
+
+    window.addEventListener('scroll', handleScroll);
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
+  return (
+    <Box
+      style={{
+        position: 'sticky',
+        top: 0,
+        width: '100%',
+        backgroundColor: bgColor,
+        transition: 'background-color 0.3s ease',
+        zIndex: 1000,
+      }}
+    >
+      <TopBar />
+      <Header isScrolled={isScrolled} />
+    </Box>
+  );
+}
+
+export default AppHeader;
diff --git a/src/routes/Header/Header.tsx b/src/routes/Header/Header.tsx
@@ -36,7 +36,11 @@ import SearchField from './SearchField';
 import { useState } from 'react';
 import { formatHash } from '../../utils/helpers';
 
-function Header() {
+interface HeaderProps {
+  isScrolled: boolean;
+}
+
+function Header({ isScrolled }: HeaderProps) {
   const { data } = useAllBlocks();
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('md'));
@@ -74,17 +78,24 @@ function Header() {
               justifyContent: 'space-between',
               alignItems: 'center',
               width: '100%',
-              paddingTop: theme.spacing(3),
-              paddingBottom: theme.spacing(3),
-              minHeight: '100px',
+              paddingTop: isScrolled ? theme.spacing(1) : theme.spacing(3),
+              paddingBottom: isScrolled ? theme.spacing(0) : theme.spacing(3),
+              transition: 'padding 0.3s ease-in-out, height 0.3s ease-in-out',
             }}
           >
             {isMobile ? (
               <>
                 {!isExpanded && (
                   <Fade in={!isExpanded}>
                     <Link to="/">
-                      <TariLogo fill={theme.palette.text.primary} />
+                      <Box
+                        style={{
+                          marginTop: isScrolled ? '0' : '10px',
+                          transition: 'margin 0.3s ease-in-out',
+                        }}
+                      >
+                        <TariLogo fill={theme.palette.text.primary} />
+                      </Box>
                     </Link>
                   </Fade>
                 )}
@@ -116,7 +127,14 @@ function Header() {
               <Grid container spacing={3}>
                 <Grid item xs={10} md={3} lg={3}>
                   <Link to="/">
-                    <TariLogo fill={theme.palette.text.primary} />
+                    <Box
+                      style={{
+                        marginTop: isScrolled ? '0' : '10px',
+                        transition: 'margin 0.3s ease-in-out',
+                      }}
+                    >
+                      <TariLogo fill={theme.palette.text.primary} />
+                    </Box>
                   </Link>
                 </Grid>
                 <Grid item xs={12} md={9} lg={9}>
@@ -131,6 +149,7 @@ function Header() {
                     <StatsItem
                       label="RandomX Hash Rate"
                       value={formattedMoneroHashRate}
+                      isScrolled={isScrolled}
                     />
                     <Divider
                       orientation="vertical"
@@ -140,6 +159,7 @@ function Header() {
                     <StatsItem
                       label="Sha3 Hash Rate"
                       value={formattedSha3HashRate}
+                      isScrolled={isScrolled}
                     />
                     <Divider
                       orientation="vertical"
@@ -149,6 +169,7 @@ function Header() {
                     <StatsItem
                       label="Avg Block Time"
                       value={formattedAverageBlockTime}
+                      isScrolled={isScrolled}
                       lowerCase
                     />
                     <Divider
@@ -159,6 +180,7 @@ function Header() {
                     <StatsItem
                       label="Block Height"
                       value={formattedBlockHeight}
+                      isScrolled={isScrolled}
                     />
                   </Box>
                 </Grid>

diff --git a/src/routes/Header/StatsItem.css b/src/routes/Header/StatsItem.css
diff --git a/src/routes/Header/StatsItem.tsx b/src/routes/Header/StatsItem.tsx
@@ -21,34 +21,52 @@
 //  USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
 import { Box, Typography } from '@mui/material';
-import './StatsItem.css';
 
 interface Props {
   label: string;
   value: string;
   lowerCase?: boolean;
+  isScrolled: boolean;
 }
 
-export default function StatsItem({ label, value, lowerCase }: Props) {
+export default function StatsItem({
+  label,
+  value,
+  lowerCase,
+  isScrolled,
+}: Props) {
   return (
     <Box
       style={{
         display: 'flex',
         flexDirection: 'column',
         alignItems: 'center',
         gap: 0,
+        minWidth: '108px',
       }}
     >
       <Typography
         variant="body1"
-        className="topbar-item-value"
         style={{
           textTransform: lowerCase ? 'lowercase' : 'uppercase',
+          fontFamily: 'AvenirHeavy',
+          fontSize: isScrolled ? '18px' : '24px',
+          color: '#fff',
+          textAlign: 'center',
+          transition: 'font-size 0.3s ease-in-out',
         }}
       >
         {value}
       </Typography>
-      <Typography className="topbar-item-label">{label}</Typography>
+      <Typography
+        style={{
+          fontSize: '12px',
+          color: '#fff',
+          textAlign: 'center',
+        }}
+      >
+        {label}
+      </Typography>
     </Box>
   );
 }