From 7246aa0255badcc510a6867e53fdb07c0b9f6a35 Mon Sep 17 00:00:00 2001 From: Seve Badajoz Date: Thu, 9 Nov 2023 17:26:18 -0500 Subject: [PATCH 1/2] fix(header): increase height on mobile friendly header --- frontend/src/components/Layout/index.tsx | 2 +- .../{LandingHeader => MobileFriendlyHeader}/index.tsx | 0 .../components/{LandingHeader => MobileFriendlyHeader}/style.ts | 2 +- frontend/src/pages/sitemap.tsx | 2 +- frontend/src/views/CellGuide/components/LandingPage/index.tsx | 2 +- frontend/src/views/CellGuide/components/LandingPage/style.ts | 2 +- .../src/views/WheresMyGeneV2/components/GeneSearchBar/style.ts | 2 +- 7 files changed, 6 insertions(+), 6 deletions(-) rename frontend/src/components/{LandingHeader => MobileFriendlyHeader}/index.tsx (100%) rename frontend/src/components/{LandingHeader => MobileFriendlyHeader}/style.ts (98%) diff --git a/frontend/src/components/Layout/index.tsx b/frontend/src/components/Layout/index.tsx index f6f67f06b9f12..60708930234ac 100644 --- a/frontend/src/components/Layout/index.tsx +++ b/frontend/src/components/Layout/index.tsx @@ -3,7 +3,7 @@ import { ReactNode } from "react"; import { ROUTES } from "src/common/constants/routes"; import Header from "../Header"; import LandingFooter from "../LandingFooter"; -import LandingHeader from "../LandingHeader"; +import LandingHeader from "../MobileFriendlyHeader"; import { Wrapper } from "./style"; interface Props { diff --git a/frontend/src/components/LandingHeader/index.tsx b/frontend/src/components/MobileFriendlyHeader/index.tsx similarity index 100% rename from frontend/src/components/LandingHeader/index.tsx rename to frontend/src/components/MobileFriendlyHeader/index.tsx diff --git a/frontend/src/components/LandingHeader/style.ts b/frontend/src/components/MobileFriendlyHeader/style.ts similarity index 98% rename from frontend/src/components/LandingHeader/style.ts rename to frontend/src/components/MobileFriendlyHeader/style.ts index fac301bed8880..b2cb3c308c2c3 100644 --- a/frontend/src/components/LandingHeader/style.ts +++ b/frontend/src/components/MobileFriendlyHeader/style.ts @@ -4,8 +4,8 @@ import Nav from "src/components/Header/components/Nav"; import { NavDivider } from "src/components/Header/components/Nav/components/NavDivider/style"; import { spacesL, spacesXl } from "src/common/theme"; import { fontHeaderM } from "@czi-sds/components"; +import { HEADER_HEIGHT_PX } from "../Header/style"; -export const HEADER_HEIGHT_PX = 48; export const MAX_WIDTH_BREAKPOINT_PX = 768; export const Wrapper = styled.div` diff --git a/frontend/src/pages/sitemap.tsx b/frontend/src/pages/sitemap.tsx index cd95c43f093e3..01d0bfd159102 100644 --- a/frontend/src/pages/sitemap.tsx +++ b/frontend/src/pages/sitemap.tsx @@ -10,7 +10,7 @@ import { } from "src/common/queries/cellGuide"; import { useMemo, useState, useEffect } from "react"; import { fontWeightSemibold } from "src/common/theme"; -import { MAX_WIDTH_BREAKPOINT_PX } from "src/components/LandingHeader/style"; +import { MAX_WIDTH_BREAKPOINT_PX } from "src/components/MobileFriendlyHeader/style"; const DOC_SITE_FOLDER_NAME = "doc-site"; diff --git a/frontend/src/views/CellGuide/components/LandingPage/index.tsx b/frontend/src/views/CellGuide/components/LandingPage/index.tsx index 79805bab54008..e8bc9755a6722 100644 --- a/frontend/src/views/CellGuide/components/LandingPage/index.tsx +++ b/frontend/src/views/CellGuide/components/LandingPage/index.tsx @@ -6,7 +6,7 @@ import { LANDING_PAGE_HEADER } from "src/views/CellGuide/components/LandingPage/ import CellGuideMobileHeader from "../CellGuideMobileHeader"; import { useCallback, useEffect, useMemo, useState } from "react"; import { throttle } from "lodash"; -import { MAX_WIDTH_BREAKPOINT_PX } from "src/components/LandingHeader/style"; +import { MAX_WIDTH_BREAKPOINT_PX } from "src/components/MobileFriendlyHeader/style"; const TITLE = "CellGuide Cell Types and Cell Tissues - CZ CELLxGENE"; diff --git a/frontend/src/views/CellGuide/components/LandingPage/style.ts b/frontend/src/views/CellGuide/components/LandingPage/style.ts index 18a85d5854dfc..3a21afa41ce0c 100644 --- a/frontend/src/views/CellGuide/components/LandingPage/style.ts +++ b/frontend/src/views/CellGuide/components/LandingPage/style.ts @@ -4,7 +4,7 @@ import { fontHeaderL, fontHeaderXl, } from "@czi-sds/components"; -import { MAX_WIDTH_BREAKPOINT_PX } from "src/components/LandingHeader/style"; +import { MAX_WIDTH_BREAKPOINT_PX } from "src/components/MobileFriendlyHeader/style"; interface WrapperProps extends CommonThemeProps { searchBarOpen: boolean; diff --git a/frontend/src/views/WheresMyGeneV2/components/GeneSearchBar/style.ts b/frontend/src/views/WheresMyGeneV2/components/GeneSearchBar/style.ts index a2159f9ec86fd..aef69bf72b6e5 100644 --- a/frontend/src/views/WheresMyGeneV2/components/GeneSearchBar/style.ts +++ b/frontend/src/views/WheresMyGeneV2/components/GeneSearchBar/style.ts @@ -2,7 +2,7 @@ import styled from "@emotion/styled"; import { fontBodyXxs } from "@czi-sds/components"; import { gray500 } from "src/common/theme"; import { Button } from "@czi-sds/components"; -import { HEADER_HEIGHT_PX } from "src/components/LandingHeader/style"; +import { HEADER_HEIGHT_PX } from "src/components/MobileFriendlyHeader/style"; import { CONTENT_WRAPPER_LEFT_RIGHT_PADDING_PX, CONTENT_WRAPPER_TOP_BOTTOM_PADDING_PX, From b2c96ebe7387037e89a991b304c612e876bec48c Mon Sep 17 00:00:00 2001 From: Seve Badajoz Date: Tue, 14 Nov 2023 10:26:57 -0800 Subject: [PATCH 2/2] lint --- .../src/views/WheresMyGeneV2/components/GeneSearchBar/style.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/views/WheresMyGeneV2/components/GeneSearchBar/style.ts b/frontend/src/views/WheresMyGeneV2/components/GeneSearchBar/style.ts index aef69bf72b6e5..dc39b80c569c4 100644 --- a/frontend/src/views/WheresMyGeneV2/components/GeneSearchBar/style.ts +++ b/frontend/src/views/WheresMyGeneV2/components/GeneSearchBar/style.ts @@ -2,7 +2,6 @@ import styled from "@emotion/styled"; import { fontBodyXxs } from "@czi-sds/components"; import { gray500 } from "src/common/theme"; import { Button } from "@czi-sds/components"; -import { HEADER_HEIGHT_PX } from "src/components/MobileFriendlyHeader/style"; import { CONTENT_WRAPPER_LEFT_RIGHT_PADDING_PX, CONTENT_WRAPPER_TOP_BOTTOM_PADDING_PX, @@ -10,6 +9,7 @@ import { import { LEGEND_HEIGHT_PX } from "src/views/WheresMyGeneV2/components/InfoPanel/components/Legend/style"; import { Y_AXIS_CHART_WIDTH_PX } from "src/views/WheresMyGeneV2/components/HeatMap/utils"; import { GENE_SEARCH_BAR_HEIGHT_PX } from "src/views/WheresMyGeneV2/common/constants"; +import { HEADER_HEIGHT_PX } from "src/components/Header/style"; interface ContainerProps { sidebarWidth: number;