fix: remove header resize on scroll (#25)

tari-project · Jan 6, 2025 · 55cff4b · 55cff4b
1 parent 51e4e7c
commit 55cff4b
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 28 deletions.
diff --git a/src/routes/Header/AppHeader.tsx b/src/routes/Header/AppHeader.tsx
@@ -3,21 +3,18 @@ import TopBar from './TopBar';
 import { useState, useEffect } from 'react';
 import Box from '@mui/material/Box';
 
-const darkBg = 'rgb(25, 14, 43, 0.95)';
+const darkBg = 'rgb(20, 16, 35, 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);
       }
     };
 
@@ -36,12 +33,11 @@ function AppHeader() {
         top: 0,
         width: '100%',
         backgroundColor: bgColor,
-        transition: 'background-color 0.3s ease',
         zIndex: 1000,
       }}
     >
       <TopBar />
-      <Header isScrolled={isScrolled} />
+      <Header />
     </Box>
   );
 }

diff --git a/src/routes/Header/Header.tsx b/src/routes/Header/Header.tsx
@@ -36,11 +36,7 @@ import SearchField from './SearchField';
 import { useState } from 'react';
 import { formatHash } from '../../utils/helpers';
 
-interface HeaderProps {
-  isScrolled: boolean;
-}
-
-function Header({ isScrolled }: HeaderProps) {
+function Header() {
   const { data } = useAllBlocks();
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('md'));
@@ -78,9 +74,8 @@ function Header({ isScrolled }: HeaderProps) {
               justifyContent: 'space-between',
               alignItems: 'center',
               width: '100%',
-              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',
+              paddingTop: theme.spacing(3),
+              paddingBottom: theme.spacing(3),
             }}
           >
             {isMobile ? (
@@ -90,7 +85,7 @@ function Header({ isScrolled }: HeaderProps) {
                     <Link to="/">
                       <Box
                         style={{
-                          marginTop: isScrolled ? '0' : '10px',
+                          marginTop: '10px',
                           transition: 'margin 0.3s ease-in-out',
                         }}
                       >
@@ -129,7 +124,7 @@ function Header({ isScrolled }: HeaderProps) {
                   <Link to="/">
                     <Box
                       style={{
-                        marginTop: isScrolled ? '0' : '10px',
+                        marginTop: '10px',
                         transition: 'margin 0.3s ease-in-out',
                       }}
                     >
@@ -149,7 +144,6 @@ function Header({ isScrolled }: HeaderProps) {
                     <StatsItem
                       label="RandomX Hash Rate"
                       value={formattedMoneroHashRate}
-                      isScrolled={isScrolled}
                     />
                     <Divider
                       orientation="vertical"
@@ -159,7 +153,6 @@ function Header({ isScrolled }: HeaderProps) {
                     <StatsItem
                       label="Sha3 Hash Rate"
                       value={formattedSha3HashRate}
-                      isScrolled={isScrolled}
                     />
                     <Divider
                       orientation="vertical"
@@ -169,7 +162,6 @@ function Header({ isScrolled }: HeaderProps) {
                     <StatsItem
                       label="Avg Block Time"
                       value={formattedAverageBlockTime}
-                      isScrolled={isScrolled}
                       lowerCase
                     />
                     <Divider
@@ -180,7 +172,6 @@ function Header({ isScrolled }: HeaderProps) {
                     <StatsItem
                       label="Block Height"
                       value={formattedBlockHeight}
-                      isScrolled={isScrolled}
                     />
                   </Box>
                 </Grid>

diff --git a/src/routes/Header/StatsItem.tsx b/src/routes/Header/StatsItem.tsx
@@ -26,15 +26,9 @@ interface Props {
   label: string;
   value: string;
   lowerCase?: boolean;
-  isScrolled: boolean;
 }
 
-export default function StatsItem({
-  label,
-  value,
-  lowerCase,
-  isScrolled,
-}: Props) {
+export default function StatsItem({ label, value, lowerCase }: Props) {
   return (
     <Box
       style={{
@@ -50,7 +44,7 @@ export default function StatsItem({
         style={{
           textTransform: lowerCase ? 'lowercase' : 'uppercase',
           fontFamily: 'AvenirHeavy',
-          fontSize: isScrolled ? '18px' : '24px',
+          fontSize: '24px',
           color: '#fff',
           textAlign: 'center',
           transition: 'font-size 0.3s ease-in-out',