From 473fbda05ec6b254773928fd9dfa52aa3bf50765 Mon Sep 17 00:00:00 2001 From: Erika Date: Fri, 1 Nov 2024 14:21:01 +0200 Subject: [PATCH] feat: header styles --- src/routes/Blocks/Block.tsx | 103 ++++++++++++++--------------- src/routes/Header/AppHeader.tsx | 49 ++++++++++++++ src/routes/Header/Header.tsx | 34 ++++++++-- src/routes/Header/StatsItem.css | 12 ---- src/routes/Header/StatsItem.tsx | 26 ++++++-- src/routes/Header/StickyHeader.tsx | 69 ------------------- src/theme/MainLayout.tsx | 9 +-- src/theme/PageLayout.tsx | 20 +++--- 8 files changed, 158 insertions(+), 164 deletions(-) create mode 100644 src/routes/Header/AppHeader.tsx delete mode 100644 src/routes/Header/StatsItem.css delete mode 100644 src/routes/Header/StickyHeader.tsx diff --git a/src/routes/Blocks/Block.tsx b/src/routes/Blocks/Block.tsx index fd7baae..ae2e6e1 100644 --- 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 ( - - - - - - - + + + + + - + ); } return ( - - - - - - - - - - - - - - - - - - + + + + + - + + + + + + + + + + + + ); } diff --git a/src/routes/Header/AppHeader.tsx b/src/routes/Header/AppHeader.tsx new file mode 100644 index 0000000..d9a5db8 --- /dev/null +++ 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 ( + + +
+ + ); +} + +export default AppHeader; diff --git a/src/routes/Header/Header.tsx b/src/routes/Header/Header.tsx index 7ec32f4..fa88f95 100644 --- 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,9 +78,9 @@ 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 ? ( @@ -84,7 +88,14 @@ function Header() { {!isExpanded && ( - + + + )} @@ -116,7 +127,14 @@ function Header() { - + + + @@ -131,6 +149,7 @@ function Header() { diff --git a/src/routes/Header/StatsItem.css b/src/routes/Header/StatsItem.css deleted file mode 100644 index 9973fdc..0000000 --- a/src/routes/Header/StatsItem.css +++ /dev/null @@ -1,12 +0,0 @@ -.topbar-item-value { - font-family: 'AvenirHeavy', sans-serif !important; - font-size: 24px !important; - color: #fff; - text-align: center; -} - -.topbar-item-label { - font-size: 12px !important; - color: #fff; - text-align: center; -} diff --git a/src/routes/Header/StatsItem.tsx b/src/routes/Header/StatsItem.tsx index 73cbc93..baf156b 100644 --- a/src/routes/Header/StatsItem.tsx +++ b/src/routes/Header/StatsItem.tsx @@ -21,15 +21,20 @@ // 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 ( {value} - {label} + + {label} + ); } diff --git a/src/routes/Header/StickyHeader.tsx b/src/routes/Header/StickyHeader.tsx deleted file mode 100644 index 0bbbfe3..0000000 --- a/src/routes/Header/StickyHeader.tsx +++ /dev/null @@ -1,69 +0,0 @@ -// Copyright 2022. The Tari Project -// -// Redistribution and use in source and binary forms, with or without modification, are permitted provided that the -// following conditions are met: -// -// 1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following -// disclaimer. -// -// 2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the -// following disclaimer in the documentation and/or other materials provided with the distribution. -// -// 3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote -// products derived from this software without specific prior written permission. -// -// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, -// INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE -// DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, -// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR -// SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, -// 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 React, { useState, useEffect } from 'react'; -import Box from '@mui/material/Box'; - -interface Props { - children: React.ReactNode; -} - -const darkBg = 'rgb(25, 14, 43, 0.95)'; -const lightBg = 'rgba(0,0,0,0.1)'; - -const StickyHeader = ({ children }: Props) => { - const [bgColor, setBgColor] = useState(lightBg); - - useEffect(() => { - const handleScroll = () => { - if (window.scrollY > 10) { - setBgColor(darkBg); - } else { - setBgColor(lightBg); - } - }; - - handleScroll(); - - window.addEventListener('scroll', handleScroll); - return () => { - window.removeEventListener('scroll', handleScroll); - }; - }, []); - - return ( - - {children} - - ); -}; - -export default StickyHeader; diff --git a/src/theme/MainLayout.tsx b/src/theme/MainLayout.tsx index 583211d..897a98e 100644 --- a/src/theme/MainLayout.tsx +++ b/src/theme/MainLayout.tsx @@ -25,10 +25,8 @@ import CssBaseline from '@mui/material/CssBaseline'; import { Outlet } from 'react-router-dom'; import Container from '@mui/material/Container'; import Grid from '@mui/material/Grid'; -import Header from '../routes/Header/Header'; -import StickyHeader from '../routes/Header/StickyHeader'; -import TopBar from '../routes/Header/TopBar'; import { darkTheme } from './themes'; +import AppHeader from '../routes/Header/AppHeader'; export default function MainLayout() { return ( @@ -36,10 +34,7 @@ export default function MainLayout() { - - -
- + diff --git a/src/theme/PageLayout.tsx b/src/theme/PageLayout.tsx index 154d076..3a970b0 100644 --- a/src/theme/PageLayout.tsx +++ b/src/theme/PageLayout.tsx @@ -25,10 +25,9 @@ import CssBaseline from '@mui/material/CssBaseline'; import { Outlet } from 'react-router-dom'; import Container from '@mui/material/Container'; import Grid from '@mui/material/Grid'; -import Header from '../routes/Header/Header'; -import StickyHeader from '../routes/Header/StickyHeader'; -import TopBar from '../routes/Header/TopBar'; +import Box from '@mui/material/Box'; import { darkTheme, lightTheme } from './themes'; +import AppHeader from '../routes/Header/AppHeader'; import HeaderTitle from '../routes/Header/HeaderTitle'; @@ -48,28 +47,25 @@ export default function PageLayout({ - - -
- + {customHeader ? ( customHeader ) : ( )} - - + - - + +