diff --git a/.eslintrc.json b/.eslintrc.json index 88d583f..4743237 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -48,9 +48,7 @@ } ], - "react/function-component-definition" : [ - "warn" - ], + "react/function-component-definition" : ["off"], "no-confusing-arrow": ["off"], "no-trailing-spaces": ["off"], "no-nested-ternary": ["off"], diff --git a/package-lock.json b/package-lock.json index 1e6529d..87355b1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -36,6 +36,7 @@ "@types/styled-components": "^5.1.23", "axios": "^0.26.0", "base-64": "^1.0.0", + "body-scroll-lock": "^4.0.0-beta.0", "framer-motion": "^7.0.0", "jwt-decode": "^3.1.2", "react": "^18.2.0", @@ -60,6 +61,7 @@ "web-vitals": "^2.1.4" }, "devDependencies": { + "@types/body-scroll-lock": "^3.1.0", "@types/enzyme": "^3.10.12", "@types/jest": "^27.5.2", "@typescript-eslint/eslint-plugin": "^5.30.5", @@ -5166,6 +5168,12 @@ "@types/node": "*" } }, + "node_modules/@types/body-scroll-lock": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@types/body-scroll-lock/-/body-scroll-lock-3.1.0.tgz", + "integrity": "sha512-3owAC4iJub5WPqRhxd8INarF2bWeQq1yQHBgYhN0XLBJMpd5ED10RrJ3aKiAwlTyL5wK7RkBD4SZUQz2AAAMdA==", + "dev": true + }, "node_modules/@types/bonjour": { "version": "3.5.10", "resolved": "https://registry.npmjs.org/@types/bonjour/-/bonjour-3.5.10.tgz", @@ -7720,6 +7728,11 @@ "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" }, + "node_modules/body-scroll-lock": { + "version": "4.0.0-beta.0", + "resolved": "https://registry.npmjs.org/body-scroll-lock/-/body-scroll-lock-4.0.0-beta.0.tgz", + "integrity": "sha512-a7tP5+0Mw3YlUJcGAKUqIBkYYGlYxk2fnCasq/FUph1hadxlTRjF+gAcZksxANnaMnALjxEddmSi/H3OR8ugcQ==" + }, "node_modules/bonjour": { "version": "3.5.0", "resolved": "https://registry.npmjs.org/bonjour/-/bonjour-3.5.0.tgz", @@ -27074,6 +27087,12 @@ "@types/node": "*" } }, + "@types/body-scroll-lock": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@types/body-scroll-lock/-/body-scroll-lock-3.1.0.tgz", + "integrity": "sha512-3owAC4iJub5WPqRhxd8INarF2bWeQq1yQHBgYhN0XLBJMpd5ED10RrJ3aKiAwlTyL5wK7RkBD4SZUQz2AAAMdA==", + "dev": true + }, "@types/bonjour": { "version": "3.5.10", "resolved": "https://registry.npmjs.org/@types/bonjour/-/bonjour-3.5.10.tgz", @@ -29027,6 +29046,11 @@ } } }, + "body-scroll-lock": { + "version": "4.0.0-beta.0", + "resolved": "https://registry.npmjs.org/body-scroll-lock/-/body-scroll-lock-4.0.0-beta.0.tgz", + "integrity": "sha512-a7tP5+0Mw3YlUJcGAKUqIBkYYGlYxk2fnCasq/FUph1hadxlTRjF+gAcZksxANnaMnALjxEddmSi/H3OR8ugcQ==" + }, "bonjour": { "version": "3.5.0", "resolved": "https://registry.npmjs.org/bonjour/-/bonjour-3.5.0.tgz", diff --git a/package.json b/package.json index 0b46492..1334bc9 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "@types/styled-components": "^5.1.23", "axios": "^0.26.0", "base-64": "^1.0.0", + "body-scroll-lock": "^4.0.0-beta.0", "framer-motion": "^7.0.0", "jwt-decode": "^3.1.2", "react": "^18.2.0", @@ -81,6 +82,7 @@ ] }, "devDependencies": { + "@types/body-scroll-lock": "^3.1.0", "@types/enzyme": "^3.10.12", "@types/jest": "^27.5.2", "@typescript-eslint/eslint-plugin": "^5.30.5", diff --git a/src/components/helperComponents/navbar/navbarElemComponent.tsx b/src/components/helperComponents/navbar/navbarElemComponent.tsx deleted file mode 100644 index f3ff6b9..0000000 --- a/src/components/helperComponents/navbar/navbarElemComponent.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import React, { useState } from "react"; -import { Link } from "react-router-dom"; - -import ArrowDropUpIcon from "@mui/icons-material/ArrowDropUp"; -import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown"; - -import { NavbarElemColumn, NavbarElem, NavbarElemImg } from "src/styled/subcomponents/navbar"; - -interface NavbarElemComponentInterface { - isDropDown: boolean, - dropDownElems: { - to: string, - content: any, - callback: () => void, - }[], isLink: boolean, to: string, isImage: boolean, content: any, callback: () => void -} - -const NavbarElemComponent:React.FC = ({ - isDropDown, - dropDownElems, - isLink, to, isImage, content, callback, -}: NavbarElemComponentInterface) => { - const [isDropOpened, toggleIsDropOpened] = useState(false); - return content === "noRender" ? null : isLink ? ( - - {}}> - {isImage === true ? : content} - {isDropDown === true ? : null} - - - ) : isDropDown ? ( - - { if (callback !== undefined) callback; toggleIsDropOpened(!isDropOpened); }}> - {isImage === true ? : content} - {isDropDown === true ? isDropOpened - ? - : : null} - - { - dropDownElems.map((elem) => ( - - { if (elem.callback !== undefined) elem.callback; toggleIsDropOpened(!isDropOpened); }}> - {elem.content} - - - )) - } - - ) : ( - {}}> - {isImage === true ? : content} - - ); -}; - -export default NavbarElemComponent; diff --git a/src/components/helperComponents/navbar/navbarElemMap.tsx b/src/components/helperComponents/navbar/navbarElemMap.tsx deleted file mode 100644 index e045437..0000000 --- a/src/components/helperComponents/navbar/navbarElemMap.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from "react"; -import { Link } from "react-router-dom"; - -import ArrowDropUpIcon from "@mui/icons-material/ArrowDropUp"; -import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown"; - -import { NavbarElem, NavbarElemImg } from "src/styled/subcomponents/navbar"; -import NavbarElemComponent from "./navbarElemComponent"; - -interface NavbarElemMapInterface { - data: { isDropDown: boolean, - dropDownElems: { - to: string, - content: any, - callback: () => void, - }[], isLink: boolean, to: string, isImage: boolean, content: any, callback: () => void }[], - groupName: string -} - -const NavbarElemMap:React.FC = ({ data, groupName } : NavbarElemMapInterface) => ( - <> - {data.map((elem, ind) => elem.content !== null ? : null)} - -); - -export default NavbarElemMap; diff --git a/src/components/main.tsx b/src/components/main.tsx index a34b564..beda1c2 100644 --- a/src/components/main.tsx +++ b/src/components/main.tsx @@ -61,7 +61,7 @@ const Main: React.FC = () => { - + {/* */} } /> } /> diff --git a/src/components/subcomponents/navbar.tsx b/src/components/subcomponents/navbar.tsx index 3f5d835..cb12e95 100644 --- a/src/components/subcomponents/navbar.tsx +++ b/src/components/subcomponents/navbar.tsx @@ -1,205 +1,224 @@ -import React, { useState } from "react"; +import React, { useEffect, useRef, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import { useLocalStorage } from "usehooks-ts"; -import MenuIcon from "@mui/icons-material/Menu"; -import CloseIcon from "@mui/icons-material/Close"; +import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock"; + import LightModeIcon from "@mui/icons-material/LightMode"; import DarkModeIcon from "@mui/icons-material/DarkMode"; -import GroupIcon from "@mui/icons-material/Group"; -import LiveHelpIcon from "@mui/icons-material/LiveHelp"; -import DescriptionIcon from "@mui/icons-material/Description"; -import NotificationsActiveIcon from "@mui/icons-material/NotificationsActive"; +import AddIcon from "@mui/icons-material/Add"; import AccountCircleIcon from "@mui/icons-material/AccountCircle"; -import SettingsIcon from "@mui/icons-material/Settings"; -import ExitToAppIcon from "@mui/icons-material/ExitToApp"; - -import { - NavbarContainer, NavbarAlignGroup, RespOpeningCloseBtn, RotatingBtnElem, -} from "src/styled/subcomponents/navbar"; +import MenuIcon from "@mui/icons-material/Menu"; +import CloseIcon from "@mui/icons-material/Close"; -import NavbarElemMap from "src/components/helperComponents/navbar/navbarElemMap"; import { changeGraphicalMode, setNewToken, toggleOpeningNotifications } from "src/redux/actions/generalActions"; import { RootState } from "src/redux/mainReducer"; +import { useNavigate, Link, Navigate } from "react-router-dom"; + +import { + NavbarContainer, + NavbarItem, + NavbarItemWrapper, + NavbarItemDescription, + NavbarItemBreak, + NavbarImg, + NavbarItemButton, + NavbarExpandButton, +} from "src/styled/subcomponents/navbar"; import logout from "src/connectionFunctions/navbar/logout"; +import { AccountCircle } from "@mui/icons-material"; const NavbarLogo = require("src/assets/sparkledge_logo.webp"); -type NavbarDataType = { isDropDown: boolean, - dropDownElems: { - to: string, - content: any, - callback: () => void, - }[], - isLink: boolean, - to: string, - isImage: boolean, - content: any, - callback: () => void, -}; +const isTokenPresent = (token: string) => token !== undefined && token.length !== 0; const Navbar:React.FC = () => { - const [isOpened, toggleIsOpened] = useState(false); - const graphicalMode: number = useSelector((state:RootState) => state.generalData.graphicalMode); + const isDarkModeOn = useSelector((state: RootState) => state.generalData.graphicalMode); - const [memoryUserId, setMemoryUserId] = useLocalStorage("u", ""); - const [refreshUserId, setRefreshUserId] = useLocalStorage("u_r", ""); + const [memoryUserId, setMemoryUserId] = useLocalStorage("u", ""); + const [refreshUserId, setRefreshUserId] = useLocalStorage("u_r", ""); const dispatch = useDispatch(); - const NavbarData:NavbarDataType[][] = [ - [ - { - isDropDown: false, - dropDownElems: [], - isLink: true, - to: memoryUserId === undefined || (memoryUserId !== undefined && memoryUserId.length === 0) ? "/" : "/panel", - isImage: true, - content: NavbarLogo, - callback: () => toggleIsOpened(false), - }, - { - isDropDown: false, - dropDownElems: [], - isLink: true, - to: "/searcher", - isImage: false, - content: "Wyszukiwarka", - callback: () => toggleIsOpened(false), - }, - ], - [ - { - isDropDown: false, - dropDownElems: [], - isLink: true, - to: "/faq", - isImage: false, - content: , - callback: () => toggleIsOpened(false), - }, - { - isDropDown: false, - dropDownElems: [], - isLink: true, - to: "/about", - isImage: false, - content: , - callback: () => toggleIsOpened(false), - }, - { - isDropDown: false, - dropDownElems: [], - isLink: true, - to: memoryUserId === undefined || (memoryUserId !== undefined && memoryUserId.length === 0) ? "/signin" : "/documentUpload", - isImage: false, - content: memoryUserId === undefined || (memoryUserId !== undefined && memoryUserId.length === 0) ? "Zaloguj się" : ( - - ), - callback: () => toggleIsOpened(false), - }, - /* - { - isDropDown: false, - dropDownElems: [], - isLink: false, - to: "", - isImage: false, - content: memoryUserId !== undefined && memoryUserId.length > 0 ? ( - - ) : "noRender", - callback: () => memoryUserId !== undefined && memoryUserId.length > 0 ? dispatch(toggleOpeningNotifications()) : null, - }, */ - { - isDropDown: false, - dropDownElems: [], - isLink: true, - to: "/profile/", - isImage: false, - content: memoryUserId === undefined || (memoryUserId !== undefined && memoryUserId.length === 0) ? null : ( - - ), - callback: () => toggleIsOpened(false), - }, - /* { - isDropDown: false, - dropDownElems: [], - isLink: true, - to: "/settings/", - isImage: false, - content: memoryUserId === undefined || (memoryUserId !== undefined && memoryUserId.length === 0) ? null : ( - - ), - callback: () => toggleIsOpened(false), - }, */ - { - isDropDown: false, - dropDownElems: [], - isLink: memoryUserId === undefined || (memoryUserId !== undefined && memoryUserId.length === 0), - to: memoryUserId === undefined || (memoryUserId !== undefined && memoryUserId.length === 0) ? "/signup" : "/", - isImage: false, - content: memoryUserId === undefined || (memoryUserId !== undefined && memoryUserId.length === 0) ? "Zarejestruj się" : ( - - ), - callback: () => { - memoryUserId === undefined || (memoryUserId !== undefined && memoryUserId.length === 0) - ? toggleIsOpened(false) - : logout(memoryUserId, () => dispatch(setNewToken("")), setMemoryUserId, setRefreshUserId, toggleIsOpened); - }, - }, - { - isDropDown: false, - dropDownElems: [], - isLink: false, - to: "/", - isImage: false, - content: memoryUserId === undefined || (memoryUserId !== undefined && memoryUserId.length === 0) ? - : , - callback: () => { - dispatch(changeGraphicalMode()); - toggleIsOpened(false); - }, + const [isMenuExpanded, setIsMenuExpanded] = useState(false); + const [isUserLoggedIn, setIsUserLoggedIn] = useState(isTokenPresent(memoryUserId)); + + const navigate = useNavigate(); + + useEffect(() => { + setIsUserLoggedIn(isTokenPresent(memoryUserId)); + }, [memoryUserId]); + + const ref = useRef(null); + + const handleMenuHidden = () => { + setIsMenuExpanded(false); + // reset scroll position + if (ref && ref.current) { + ref.current.scrollTop = 0; + } + + enableBodyScroll(document.body); + }; + + const handleMenuToggled = () => { + if (isMenuExpanded) { + handleMenuHidden(); + } else { + setIsMenuExpanded(true); + disableBodyScroll(document.body); + } + }; + + const handleThemeChanged = () => { + dispatch(changeGraphicalMode()); + + // not sure about that + // handleMenuHidden(); + }; + + // last function in logout is for closing menu + // logout should be done with a hook + const handleUserLogedOut = () => { + logout( + memoryUserId, + () => dispatch(setNewToken("")), + setMemoryUserId, + setRefreshUserId, + (x) => { + handleMenuHidden(); + navigate("/"); }, - ], - ]; + ); + }; return ( - - toggleIsOpened(!isOpened)}> - - - - - - - - - - - - - + + + + + + + + {isMenuExpanded ? : } + + + + + + wyszukiwarka + + + + + + {isUserLoggedIn ? ( + <> + + + + + + dodaj dokument + + + + + + + + + + profil + + + + + + + wyloguj się + + + + ) : ( + <> + + + zarejestruj się + + + + + + zaloguj się + + + + )} + + + + {isDarkModeOn + ? ( + <> + + + tryb jasny + + + ) + : ( + <> + + + tryb ciemny + + + )} + + ); }; diff --git a/src/components/subcomponents/template.tsx b/src/components/subcomponents/template.tsx index c915ed9..c4c6b03 100644 --- a/src/components/subcomponents/template.tsx +++ b/src/components/subcomponents/template.tsx @@ -10,6 +10,7 @@ import { UserPanelDeleteNotification } from "src/styled/subpages/userpanel"; import { LandingSectionWrapper, LandingSectionFilter, EndingBlock } from "src/styled/subpages/welcome"; import HeadTags from "./headTags"; +import Navbar from "./navbar"; import UserNotifications from "./userNotifications"; const BackgroundPattern = require("../../assets/pattern_background5.webp"); @@ -47,6 +48,7 @@ const Template:React.FC = ({ return ( + {fallbackComponent !== undefined ? ( diff --git a/src/components/subpages/welcome.tsx b/src/components/subpages/welcome.tsx index a3831c4..1de1d0e 100644 --- a/src/components/subpages/welcome.tsx +++ b/src/components/subpages/welcome.tsx @@ -1,21 +1,20 @@ -import React, { Suspense } from "react"; +import React from "react"; -import { MainContainer, Preloader } from "src/styled/main"; -import HeadTags from "src/components/subcomponents/headTags"; +import { Preloader } from "src/styled/main"; +import Template from "../subcomponents/template"; const LandingComponent = React.lazy(() => import("../helperComponents/welcome/landingComponent")); const DescribeComponent = React.lazy(() => import("../helperComponents/welcome/describeComponents")); const FooterComponent = React.lazy(() => import("../helperComponents/welcome/footerComponent")); const Welcome:React.FC = () => ( - - - Ładowanie...}> - - - - - + ); export default Welcome; diff --git a/src/index.css b/src/index.css index d817ba3..5039eca 100644 --- a/src/index.css +++ b/src/index.css @@ -1,6 +1,13 @@ @import url('https://fonts.googleapis.com/css2?family=Mohave:wght@500&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Mohave:wght@700&display=swap'); +/* style reset */ +/* *, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} */ + body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', diff --git a/src/styled/main.tsx b/src/styled/main.tsx index 9af833d..d8d4592 100644 --- a/src/styled/main.tsx +++ b/src/styled/main.tsx @@ -35,6 +35,8 @@ export const LightMode = { }, gradient404: "linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%)", + hoverBgPrimary: "#e0e0e0", + navBottomBorderColor: "#cccccc", }; export const DarkMode = { @@ -59,6 +61,8 @@ export const DarkMode = { }, gradient404: "linear-gradient(90deg, rgba(0,102,212,1) 0%, rgba(0,176,212,1) 45%, rgba(0,212,255,1) 100%)", + hoverBgPrimary: "#272727", + navBottomBorderColor: "#2f2f2f", }; export const MainContainer = styled.section` diff --git a/src/styled/subcomponents/navbar.tsx b/src/styled/subcomponents/navbar.tsx index 4d02d1b..27684e3 100644 --- a/src/styled/subcomponents/navbar.tsx +++ b/src/styled/subcomponents/navbar.tsx @@ -1,132 +1,128 @@ import styled from "styled-components"; -interface NavbarAlignGroupInterface { - alignDir: string -} - -interface NavbarOpeningInterface { - isOpened?: string -} - -interface RotatingBtnElemInterface { - isrotated: string -} - -export const NavbarContainer = styled.nav` - width: calc(100% - 20px); - height: ${(props) => props.isOpened === "true" ? "100vh" : "10vh"}; - padding: 0px 10px; - background: ${(props) => props.theme.navBgColor}; - font-family: ${(props) => props.theme.fonts.main}; - color: ${(props) => props.theme.color}; - box-shadow: 0px 3px 4px rgba(0,0,0,.2); - transition: all 0.4s; - overflow-y: hidden; - position: fixed; - top: 0px; - z-index: 5; - - a{ - text-decoration: none; - color: inherit; - } - - @media screen and (min-width: 1200px){ - height: 10vh; - } +export const NavbarItemWrapper = styled.div` + box-sizing: border-box; + padding: 0.6rem 0.3rem; + + min-height: 100%; + @media screen and (max-width: 768px) { + min-height: 5rem; + border-bottom: 1px solid ${(props) => props.theme.navBottomBorderColor}; + padding: 0.6rem; + } + + &:last-child { + padding-right: 0.6rem; + } + + display: inline-flex; + flex-direction: row; + align-items: center; `; -export const NavbarAlignGroup = styled.div` - @media screen and (min-width: 1200px){ - float: ${(props) => props.alignDir} - } +export const NavbarItem = styled.div` + box-sizing: border-box; + + border-radius: 16px; + + height: 100%; + padding-inline: 1rem; + + display: inline-flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 0.5rem; + + text-decoration: none; + font-family: ${(props) => props.theme.fonts.main}; + color: ${(props) => props.theme.color}; + font-size: 1.2rem; + white-space: nowrap; + + transition: 0.2s all; + + background: transparent; + + &:hover { + background: ${(props) => props.theme.hoverBgPrimary}; + } `; -export const NavbarElemColumn = styled.div` - height: fit-content; - z-index: 9; +export const NavbarItemDescription = styled.div` + display: none; + @media screen and (max-width: 768px) { display: block; - margin: 0px auto 1vh; - - - @media screen and (min-width: 1200px){ - width: fit-content; - top: 0.5vh; - display: inline-block; - vertical-align: top; - margin: 0px 5px; - } + } `; -export const NavbarElem = styled.div` - width: calc(80% - 40px); - padding: 10px 20px; - height: calc(9vh - 20px); - line-height: calc(9vh - 20px); - position: relative; - top: 0.5vh; - display: block; - margin: 0px auto 1vh; - border-radius: 10px; - text-align: center; - font-size: 0.95em; - letter-spacing: 0.04em; - text-shadow: 3px 3px 4px rgba(0,0,0,.05); - transition: all 0.4s; - cursor: pointer; - background: ${(props) => props.theme.navElemBgColor}; - - &:hover{ - filter: brightness(70%); - } - - @media screen and (min-width: 425px){ - font-size: 0.95em; - } - - @media screen and (min-width: 1024px){ - font-size: 1.4em; - } - - @media screen and (min-width: 1200px){ - font-size: 1.1em; - width: fit-content; - top: 0.5vh; - display: inline-block; - vertical-align: top; - margin: 0px 5px; - } +export const NavbarItemButton = styled.button` + box-sizing: border-box; + border: 1px solid transparent; + + cursor: pointer; +`; + +export const NavbarExpandButton = styled.button` + box-sizing: border-box; + border: 1px solid transparent; + + cursor: pointer; + + aspect-ratio: 1/1; + + display: none; + @media screen and (max-width: 768px) { + display: flex; + margin-left: auto; + } `; -export const NavbarElemImg = styled.img` - max-height: 100%; - width: auto; +export const NavbarImg = styled.img` + box-sizing: border-box; + + height: 2rem; + margin-inline: 1rem; + scale: 1.4; `; -export const RespOpeningCloseBtn = styled.div` - width: fit-content; - position: absolute; - color: ${(props) => props.theme.color}; - right: 5px; - font-size: 4vh; - top: 3vh; - @media screen and (min-width: 425px){ - top: 3vh; - right: 10px; - font-size: 5vh; - } - - @media screen and (min-width: 1200px){ - display: none; - } +export const NavbarItemBreak = styled.div` + flex-grow: 1; + + @media screen and (max-width: 768px) { + display: none; + } `; -export const RotatingBtnElem = styled.div` - transition: all 0.4s; - width: fit-content; - height: fit-content; - transition: all 0.4s; - ${(props) => props.isrotated === "true" ? ` - transform: rotateX(90deg) scale(0); - font-size: 0;` : ""} +type NavbarProps = { + isOpened: boolean; +}; + +export const NavbarContainer = styled.div` + box-sizing: border-box; + + height: 5rem; + width: 100%; + + @media screen and (max-width: 768px) { + flex-direction: column; + height: ${(props) => props.isOpened ? "100vh" : "5rem"}; + overflow: ${(props) => props.isOpened ? "scroll" : "hidden"}; + } + + display: flex; + flex-direction: row; + + position: fixed; + top: 0; + + // this needs to change at some point + z-index: 10; + + overflow: hidden; + border-bottom: 1px solid ${(props) => props.theme.navBottomBorderColor}; + + transition: 0.2s height; + + background: ${(props) => props.theme.navBgColor}; `; diff --git a/src/styled/subpages/welcome.tsx b/src/styled/subpages/welcome.tsx index 7845d2c..c91824b 100644 --- a/src/styled/subpages/welcome.tsx +++ b/src/styled/subpages/welcome.tsx @@ -40,6 +40,7 @@ export const LandingSectionWrapper = styled.section` `; export const LandingSectionFilter = styled.section` + /* padding-top: 2rem; */ width: 100%; min-height: ${(props) => props.minheight !== undefined ? `${props.minheight}vh !important` : "inherit"}; height: fit-content;