From cebd63701f46a0a8a853e52eebe94a686e7e504c Mon Sep 17 00:00:00 2001 From: Peyton Lee Date: Wed, 6 Mar 2024 13:58:10 -0800 Subject: [PATCH 01/11] refactor: Moved logo components into a new file --- src/Viewer.module.css | 11 -------- src/Viewer.tsx | 23 ++------------- src/assets/AICS-logo-and-name.svg | 2 +- src/components/Header/AppHeader.tsx | 44 +++++++++++++++++++++++++++++ 4 files changed, 47 insertions(+), 33 deletions(-) create mode 100644 src/components/Header/AppHeader.tsx diff --git a/src/Viewer.module.css b/src/Viewer.module.css index d3f62b0ec..7a8dc26d8 100644 --- a/src/Viewer.module.css +++ b/src/Viewer.module.css @@ -26,22 +26,11 @@ align-items: center; } -.headerLeft { - gap: 20px; -} - .header h2 { margin: 0; line-height: normal; } -.verticalDivider { - height: var(--header-content-height); - width: 1px; - background-color: var(--color-dividers); - display: inline-block; -} - .mainContent { margin: 8px 30px; } diff --git a/src/Viewer.tsx b/src/Viewer.tsx index d64a1b13f..1a5945f74 100644 --- a/src/Viewer.tsx +++ b/src/Viewer.tsx @@ -9,9 +9,7 @@ import { import { Checkbox, notification, Slider, Tabs } from "antd"; import { NotificationConfig } from "antd/es/notification/interface"; import React, { ReactElement, useCallback, useContext, useEffect, useMemo, useReducer, useRef, useState } from "react"; -import styled from "styled-components"; -import { AicsLogoSVG } from "./assets"; import { ColorizeCanvas, Dataset, Track } from "./colorizer"; import { DEFAULT_CATEGORICAL_PALETTE_ID, DEFAULT_CATEGORICAL_PALETTES } from "./colorizer/colors/categorical_palettes"; import { DEFAULT_COLOR_RAMP_ID, DEFAULT_COLOR_RAMPS } from "./colorizer/colors/color_ramps"; @@ -42,6 +40,7 @@ import ColorRampDropdown from "./components/Dropdowns/ColorRampDropdown"; import HelpDropdown from "./components/Dropdowns/HelpDropdown"; import SelectionDropdown from "./components/Dropdowns/SelectionDropdown"; import Export from "./components/Export"; +import { HeaderLogo } from "./components/Header/AppHeader"; import HoverTooltip from "./components/HoverTooltip"; import IconButton from "./components/IconButton"; import LabeledRangeSlider from "./components/LabeledRangeSlider"; @@ -53,18 +52,6 @@ import { FeatureThresholdsTab, PlotTab, ScatterPlotTab, SettingsTab } from "./co // TODO: Refactor with styled-components import styles from "./Viewer.module.css"; -const AicsLogoLink = styled.a` - position: relative; - width: 180px; - height: 46px; -`; - -const StyledAicsLogo = styled(AicsLogoSVG)` - left: 0; - top: 0; - position: absolute; -`; - function Viewer(): ReactElement { // STATE INITIALIZATION ///////////////////////////////////////////////////////// const theme = useContext(AppThemeContext); @@ -707,13 +694,7 @@ function Viewer(): ReactElement { {/* Header bar: Contains dataset, feature, color ramp, and other top-level functionality. */} {/* TODO: Split into its own component? */}
-
- - - - -

Timelapse Colorizer

-
+ {/*

Dataset Name

*/} diff --git a/src/assets/AICS-logo-and-name.svg b/src/assets/AICS-logo-and-name.svg index bd975ee28..60a595f94 100644 --- a/src/assets/AICS-logo-and-name.svg +++ b/src/assets/AICS-logo-and-name.svg @@ -1 +1 @@ -Asset 5 \ No newline at end of file +Allen Institute for Cell Science \ No newline at end of file diff --git a/src/components/Header/AppHeader.tsx b/src/components/Header/AppHeader.tsx new file mode 100644 index 000000000..8c5794f5e --- /dev/null +++ b/src/components/Header/AppHeader.tsx @@ -0,0 +1,44 @@ +import React, { PropsWithChildren, ReactElement } from "react"; +import styled from "styled-components"; + +import { AicsLogoSVG } from "../../assets"; +import { FlexRowAlignCenter } from "../../styles/utils"; + +type AppHeaderProps = {}; +const defaultProps: Partial = {}; + +const AicsLogoLink = styled.a` + position: relative; + width: 180px; + height: 46px; +`; + +const StyledAicsLogo = styled(AicsLogoSVG)` + left: 0; + top: 0; + position: absolute; +`; + +const VerticalDivider = styled.div` + height: 24px; + width: 1px; + background-color: var(--color-dividers); + display: inline-block; +`; + +export default function AppHeader(inputProps: PropsWithChildren): ReactElement { + const props = { ...defaultProps, ...inputProps } as PropsWithChildren>; + return <>{props.children}; +} + +export function HeaderLogo(): ReactElement { + return ( + + + + + +

Timelapse Colorizer

{" "} + + ); +} From cdf5096a88bdf4da77ec4a6f75c026404fb29a19 Mon Sep 17 00:00:00 2001 From: Peyton Lee Date: Wed, 6 Mar 2024 14:00:50 -0800 Subject: [PATCH 02/11] refactor: Moved header bar styling to a styled component --- src/Viewer.module.css | 33 ----------------------------- src/Viewer.tsx | 6 +++--- src/components/Header/AppHeader.tsx | 28 +++++++++++++++++------- 3 files changed, 23 insertions(+), 44 deletions(-) diff --git a/src/Viewer.module.css b/src/Viewer.module.css index 7a8dc26d8..4ca75a700 100644 --- a/src/Viewer.module.css +++ b/src/Viewer.module.css @@ -1,36 +1,3 @@ -.header { - --header-content-height: 24px; - - display: flex; - flex-direction: row; - flex-wrap: wrap; - align-items: center; - justify-content: space-between; - width: auto; - height: fit-content; - min-height: var(--header-content-height); - padding: 12px 30px; - border-bottom: 1px solid var(--color-borders); - gap: 10px; - position: sticky; - background-color: var(--color-background); - z-index: 100; - top: 0; - left: 0; -} - -.header > div { - display: flex; - flex-direction: row; - flex-wrap: wrap; - align-items: center; -} - -.header h2 { - margin: 0; - line-height: normal; -} - .mainContent { margin: 8px 30px; } diff --git a/src/Viewer.tsx b/src/Viewer.tsx index 1a5945f74..4852f9dd5 100644 --- a/src/Viewer.tsx +++ b/src/Viewer.tsx @@ -40,7 +40,7 @@ import ColorRampDropdown from "./components/Dropdowns/ColorRampDropdown"; import HelpDropdown from "./components/Dropdowns/HelpDropdown"; import SelectionDropdown from "./components/Dropdowns/SelectionDropdown"; import Export from "./components/Export"; -import { HeaderLogo } from "./components/Header/AppHeader"; +import { AppHeader, HeaderLogo } from "./components/Header/AppHeader"; import HoverTooltip from "./components/HoverTooltip"; import IconButton from "./components/IconButton"; import LabeledRangeSlider from "./components/LabeledRangeSlider"; @@ -693,7 +693,7 @@ function Viewer(): ReactElement { {/* Header bar: Contains dataset, feature, color ramp, and other top-level functionality. */} {/* TODO: Split into its own component? */} -
+ {/*

Dataset Name

*/} @@ -717,7 +717,7 @@ function Viewer(): ReactElement { -
+ {/** Main Content: Contains canvas and plot, ramp controls, time controls, etc. */}
diff --git a/src/components/Header/AppHeader.tsx b/src/components/Header/AppHeader.tsx index 8c5794f5e..89c115bdf 100644 --- a/src/components/Header/AppHeader.tsx +++ b/src/components/Header/AppHeader.tsx @@ -1,12 +1,9 @@ -import React, { PropsWithChildren, ReactElement } from "react"; +import React, { ReactElement } from "react"; import styled from "styled-components"; import { AicsLogoSVG } from "../../assets"; import { FlexRowAlignCenter } from "../../styles/utils"; -type AppHeaderProps = {}; -const defaultProps: Partial = {}; - const AicsLogoLink = styled.a` position: relative; width: 180px; @@ -26,10 +23,25 @@ const VerticalDivider = styled.div` display: inline-block; `; -export default function AppHeader(inputProps: PropsWithChildren): ReactElement { - const props = { ...defaultProps, ...inputProps } as PropsWithChildren>; - return <>{props.children}; -} +/** Top title bar for the app */ +export const AppHeader = styled.div` + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + width: auto; + height: fit-content; + min-height: var(--header-content-height); + padding: 12px 30px; + border-bottom: 1px solid var(--color-borders); + gap: 10px; + position: sticky; + background-color: var(--color-background); + z-index: 100; + top: 0; + left: 0; +`; export function HeaderLogo(): ReactElement { return ( From 21dc3881af2ba115c3aca3094bf81c1d9a3b1a60 Mon Sep 17 00:00:00 2001 From: Peyton Lee Date: Thu, 7 Mar 2024 09:10:28 -0800 Subject: [PATCH 03/11] fix: Fix missing basename for routing --- src/main.tsx | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/src/main.tsx b/src/main.tsx index 3202e386f..b2422acc3 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -8,13 +8,20 @@ import Viewer from "./Viewer"; // Set up react router -const router = createBrowserRouter([ +const router = createBrowserRouter( + [ + { + path: "/", + element: , + errorElement: , + }, + ], { - path: "/", - element: , - errorElement: , - }, -]); + // Base path is the --base option passed to vite. This ensures that builds + // work correctly when deployed to subpages. + basename: import.meta.env.BASE_URL, + } +); // Render React component const container = document.getElementById("root"); From 0c4540e21bb040da11608ba06a520c23e003d24b Mon Sep 17 00:00:00 2001 From: Peyton Lee Date: Thu, 7 Mar 2024 14:42:58 -0800 Subject: [PATCH 04/11] refactor: Reorganized header components --- src/Viewer.tsx | 6 ++-- src/components/Header/AppHeader.tsx | 42 ++++---------------------- src/components/Header/HeaderLogo.tsx | 44 ++++++++++++++++++++++++++++ src/components/Header/index.tsx | 4 +++ 4 files changed, 57 insertions(+), 39 deletions(-) create mode 100644 src/components/Header/HeaderLogo.tsx create mode 100644 src/components/Header/index.tsx diff --git a/src/Viewer.tsx b/src/Viewer.tsx index 4852f9dd5..1861ce1df 100644 --- a/src/Viewer.tsx +++ b/src/Viewer.tsx @@ -40,7 +40,7 @@ import ColorRampDropdown from "./components/Dropdowns/ColorRampDropdown"; import HelpDropdown from "./components/Dropdowns/HelpDropdown"; import SelectionDropdown from "./components/Dropdowns/SelectionDropdown"; import Export from "./components/Export"; -import { AppHeader, HeaderLogo } from "./components/Header/AppHeader"; +import { Header, HeaderLogo } from "./components/Header"; import HoverTooltip from "./components/HoverTooltip"; import IconButton from "./components/IconButton"; import LabeledRangeSlider from "./components/LabeledRangeSlider"; @@ -693,7 +693,7 @@ function Viewer(): ReactElement { {/* Header bar: Contains dataset, feature, color ramp, and other top-level functionality. */} {/* TODO: Split into its own component? */} - +
{/*

Dataset Name

*/} @@ -717,7 +717,7 @@ function Viewer(): ReactElement { - +
{/** Main Content: Contains canvas and plot, ramp controls, time controls, etc. */}
diff --git a/src/components/Header/AppHeader.tsx b/src/components/Header/AppHeader.tsx index 89c115bdf..aeff85268 100644 --- a/src/components/Header/AppHeader.tsx +++ b/src/components/Header/AppHeader.tsx @@ -1,30 +1,10 @@ -import React, { ReactElement } from "react"; import styled from "styled-components"; -import { AicsLogoSVG } from "../../assets"; -import { FlexRowAlignCenter } from "../../styles/utils"; - -const AicsLogoLink = styled.a` - position: relative; - width: 180px; - height: 46px; -`; - -const StyledAicsLogo = styled(AicsLogoSVG)` - left: 0; - top: 0; - position: absolute; -`; - -const VerticalDivider = styled.div` - height: 24px; - width: 1px; - background-color: var(--color-dividers); - display: inline-block; -`; - -/** Top title bar for the app */ -export const AppHeader = styled.div` +/** + * Top title bar for the app, which will stick to the top of the page. + * Child components will be spaced apart evenly. + * */ +const Header = styled.div` display: flex; flex-direction: row; flex-wrap: wrap; @@ -43,14 +23,4 @@ export const AppHeader = styled.div` left: 0; `; -export function HeaderLogo(): ReactElement { - return ( - - - - - -

Timelapse Colorizer

{" "} - - ); -} +export default Header; diff --git a/src/components/Header/HeaderLogo.tsx b/src/components/Header/HeaderLogo.tsx new file mode 100644 index 000000000..48190d1bc --- /dev/null +++ b/src/components/Header/HeaderLogo.tsx @@ -0,0 +1,44 @@ +import React, { ReactElement } from "react"; +import { Link } from "react-router-dom"; +import styled from "styled-components"; + +import { AicsLogoSVG } from "../../assets"; +import { FlexRowAlignCenter, VisuallyHidden } from "../../styles/utils"; + +const AicsLogoLink = styled.a` + position: relative; + width: 180px; + height: 46px; +`; + +const StyledAicsLogo = styled(AicsLogoSVG)` + left: 0; + top: 0; + position: absolute; +`; + +const VerticalDivider = styled.div` + height: 24px; + width: 1px; + background-color: var(--color-dividers); + display: inline-block; +`; + +/** + * The logo for the header, with links for the + * @returns + */ +export default function HeaderLogo(): ReactElement { + return ( + + + + + + +

Timelapse Colorizer

+ (go to home page) + + + ); +} diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx new file mode 100644 index 000000000..48d6302dd --- /dev/null +++ b/src/components/Header/index.tsx @@ -0,0 +1,4 @@ +import Header from "./AppHeader"; +import HeaderLogo from "./HeaderLogo"; + +export { HeaderLogo, Header }; From 277ee21c340c8247be3cdf96fa5f426af145705d Mon Sep 17 00:00:00 2001 From: Peyton Lee Date: Thu, 7 Mar 2024 14:50:49 -0800 Subject: [PATCH 05/11] refactor: Header file rename --- src/components/Header/{AppHeader.tsx => Header.tsx} | 0 src/components/Header/index.tsx | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename src/components/Header/{AppHeader.tsx => Header.tsx} (100%) diff --git a/src/components/Header/AppHeader.tsx b/src/components/Header/Header.tsx similarity index 100% rename from src/components/Header/AppHeader.tsx rename to src/components/Header/Header.tsx diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index 48d6302dd..c243d665f 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -1,4 +1,4 @@ -import Header from "./AppHeader"; +import Header from "./Header"; import HeaderLogo from "./HeaderLogo"; export { HeaderLogo, Header }; From e0e8f427231ab96f26482e5404e2edae3ee4148d Mon Sep 17 00:00:00 2001 From: Peyton Lee Date: Thu, 7 Mar 2024 17:24:53 -0800 Subject: [PATCH 06/11] feat: Added header to error page --- src/routes/ErrorPage.tsx | 23 +++++++++++++++-------- 1 file changed, 15 insertions(+), 8 deletions(-) diff --git a/src/routes/ErrorPage.tsx b/src/routes/ErrorPage.tsx index ab39bad0e..65868967a 100644 --- a/src/routes/ErrorPage.tsx +++ b/src/routes/ErrorPage.tsx @@ -4,6 +4,8 @@ import { ErrorResponse, Link, useRouteError } from "react-router-dom"; import { FlexColumnAlignCenter } from "../styles/utils"; +import { Header, HeaderLogo } from "../components/Header"; + const isErrorResponse = (error: unknown): error is ErrorResponse => { return (error as ErrorResponse).status !== undefined && (error as ErrorResponse).statusText !== undefined; }; @@ -21,13 +23,18 @@ export default function ErrorPage(): ReactElement { } return ( - -

{errorMessage}

-

Sorry, something went wrong.

-
- - - - +
+
+ +
+ +

{errorMessage}

+

Sorry, something went wrong.

+
+ + + + +
); } From bbf27fd69e59c5464318e8378471ada78bc5ecef Mon Sep 17 00:00:00 2001 From: Peyton Lee Date: Thu, 7 Mar 2024 17:26:59 -0800 Subject: [PATCH 07/11] fix: Changed AICS logo to open website in new tab --- src/components/Header/HeaderLogo.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Header/HeaderLogo.tsx b/src/components/Header/HeaderLogo.tsx index 48190d1bc..195716731 100644 --- a/src/components/Header/HeaderLogo.tsx +++ b/src/components/Header/HeaderLogo.tsx @@ -31,7 +31,7 @@ const VerticalDivider = styled.div` export default function HeaderLogo(): ReactElement { return ( - + From 8afd81e0d401e5c54a4f5b0aa15fb6143014d19a Mon Sep 17 00:00:00 2001 From: Peyton Lee Date: Fri, 8 Mar 2024 08:58:16 -0800 Subject: [PATCH 08/11] fix: Removed basename to fix GitHub page loading as empty --- src/main.tsx | 19 ++++++------------- 1 file changed, 6 insertions(+), 13 deletions(-) diff --git a/src/main.tsx b/src/main.tsx index 08e640e45..1d70b64d9 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -8,20 +8,13 @@ import Viewer from "./Viewer"; // Set up react router -const router = createHashRouter( - [ - { - path: "/", - element: , - errorElement: , - }, - ], +const router = createHashRouter([ { - // Base path is the --base option passed to vite. This ensures that builds - // work correctly when deployed to subpages. - basename: import.meta.env.BASE_URL, - } -); + path: "/", + element: , + errorElement: , + }, +]); // Render React component const container = document.getElementById("root"); From 2d496534570d224ab8292e616bfc76e55f129707 Mon Sep 17 00:00:00 2001 From: Peyton Lee Date: Fri, 8 Mar 2024 12:06:53 -0800 Subject: [PATCH 09/11] refactor: Code cleanup --- src/components/Header/HeaderLogo.tsx | 4 ++-- src/main.tsx | 3 ++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/Header/HeaderLogo.tsx b/src/components/Header/HeaderLogo.tsx index 195716731..36dd7917c 100644 --- a/src/components/Header/HeaderLogo.tsx +++ b/src/components/Header/HeaderLogo.tsx @@ -25,8 +25,8 @@ const VerticalDivider = styled.div` `; /** - * The logo for the header, with links for the - * @returns + * The logo and title of the app, to be used with the Header component. + * Both the logo and app title are links that can be used for navigation. */ export default function HeaderLogo(): ReactElement { return ( diff --git a/src/main.tsx b/src/main.tsx index 1d70b64d9..f65b92e6f 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -7,7 +7,8 @@ import ErrorPage from "./routes/ErrorPage"; import Viewer from "./Viewer"; // Set up react router - +// Use HashRouter for GitHub Pages support, so additional paths are routed to +// the base app instead of trying to open pages that don't exist. const router = createHashRouter([ { path: "/", From f16e37bad268536f27a4d7d1f97ce8a5386baff3 Mon Sep 17 00:00:00 2001 From: Peyton Lee Date: Fri, 8 Mar 2024 12:13:18 -0800 Subject: [PATCH 10/11] refactor: Code cleanup --- src/Viewer.tsx | 2 -- src/components/Header/HeaderLogo.tsx | 5 ++--- src/components/Header/index.tsx | 2 +- 3 files changed, 3 insertions(+), 6 deletions(-) diff --git a/src/Viewer.tsx b/src/Viewer.tsx index 515f9a249..2dec0a75e 100644 --- a/src/Viewer.tsx +++ b/src/Viewer.tsx @@ -695,8 +695,6 @@ function Viewer(): ReactElement {
{notificationContextHolder}
- {/* Header bar: Contains dataset, feature, color ramp, and other top-level functionality. */} - {/* TODO: Split into its own component? */}
{/*

Dataset Name

*/} diff --git a/src/components/Header/HeaderLogo.tsx b/src/components/Header/HeaderLogo.tsx index 36dd7917c..dc95cb1cf 100644 --- a/src/components/Header/HeaderLogo.tsx +++ b/src/components/Header/HeaderLogo.tsx @@ -3,7 +3,7 @@ import { Link } from "react-router-dom"; import styled from "styled-components"; import { AicsLogoSVG } from "../../assets"; -import { FlexRowAlignCenter, VisuallyHidden } from "../../styles/utils"; +import { FlexRowAlignCenter } from "../../styles/utils"; const AicsLogoLink = styled.a` position: relative; @@ -35,9 +35,8 @@ export default function HeaderLogo(): ReactElement { - +

Timelapse Colorizer

- (go to home page) ); diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index c243d665f..cb0fe58ba 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -1,4 +1,4 @@ import Header from "./Header"; import HeaderLogo from "./HeaderLogo"; -export { HeaderLogo, Header }; +export { Header, HeaderLogo }; From 2aa87974fe60e27bed0e4e03ae0621fccc75153a Mon Sep 17 00:00:00 2001 From: Peyton Lee Date: Wed, 13 Mar 2024 15:31:21 -0700 Subject: [PATCH 11/11] refactor: Merged Header content back into single styled header file --- src/Viewer.tsx | 3 +- .../{Header/HeaderLogo.tsx => Header.tsx} | 40 +++++++++++++++++-- src/components/Header/Header.tsx | 26 ------------ src/components/Header/index.tsx | 4 -- src/routes/ErrorPage.tsx | 6 +-- 5 files changed, 39 insertions(+), 40 deletions(-) rename src/components/{Header/HeaderLogo.tsx => Header.tsx} (51%) delete mode 100644 src/components/Header/Header.tsx delete mode 100644 src/components/Header/index.tsx diff --git a/src/Viewer.tsx b/src/Viewer.tsx index 2dec0a75e..653a0ed27 100644 --- a/src/Viewer.tsx +++ b/src/Viewer.tsx @@ -44,7 +44,7 @@ import ColorRampDropdown from "./components/Dropdowns/ColorRampDropdown"; import HelpDropdown from "./components/Dropdowns/HelpDropdown"; import SelectionDropdown from "./components/Dropdowns/SelectionDropdown"; import Export from "./components/Export"; -import { Header, HeaderLogo } from "./components/Header"; +import Header from "./components/Header"; import HoverTooltip from "./components/HoverTooltip"; import IconButton from "./components/IconButton"; import LabeledRangeSlider from "./components/LabeledRangeSlider"; @@ -696,7 +696,6 @@ function Viewer(): ReactElement {
{notificationContextHolder}
- {/*

Dataset Name

*/} diff --git a/src/components/Header/HeaderLogo.tsx b/src/components/Header.tsx similarity index 51% rename from src/components/Header/HeaderLogo.tsx rename to src/components/Header.tsx index dc95cb1cf..ee2c5040f 100644 --- a/src/components/Header/HeaderLogo.tsx +++ b/src/components/Header.tsx @@ -1,9 +1,9 @@ -import React, { ReactElement } from "react"; +import React, { PropsWithChildren, ReactElement } from "react"; import { Link } from "react-router-dom"; import styled from "styled-components"; -import { AicsLogoSVG } from "../../assets"; -import { FlexRowAlignCenter } from "../../styles/utils"; +import { AicsLogoSVG } from "../assets"; +import { FlexRowAlignCenter } from "../styles/utils"; const AicsLogoLink = styled.a` position: relative; @@ -28,7 +28,7 @@ const VerticalDivider = styled.div` * The logo and title of the app, to be used with the Header component. * Both the logo and app title are links that can be used for navigation. */ -export default function HeaderLogo(): ReactElement { +function HeaderLogo(): ReactElement { return ( @@ -41,3 +41,35 @@ export default function HeaderLogo(): ReactElement { ); } + +/** + * Top title bar for the app, which will stick to the top of the page. + * Child components will be spaced apart evenly. + * */ +const HeaderContainer = styled.div` + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + width: auto; + height: fit-content; + min-height: var(--header-content-height); + padding: 12px 30px; + border-bottom: 1px solid var(--color-borders); + gap: 10px; + position: sticky; + background-color: var(--color-background); + z-index: 100; + top: 0; + left: 0; +`; + +export default function Header(props: PropsWithChildren): ReactElement { + return ( + + + {props.children} + + ); +} diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx deleted file mode 100644 index aeff85268..000000000 --- a/src/components/Header/Header.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import styled from "styled-components"; - -/** - * Top title bar for the app, which will stick to the top of the page. - * Child components will be spaced apart evenly. - * */ -const Header = styled.div` - display: flex; - flex-direction: row; - flex-wrap: wrap; - align-items: center; - justify-content: space-between; - width: auto; - height: fit-content; - min-height: var(--header-content-height); - padding: 12px 30px; - border-bottom: 1px solid var(--color-borders); - gap: 10px; - position: sticky; - background-color: var(--color-background); - z-index: 100; - top: 0; - left: 0; -`; - -export default Header; diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx deleted file mode 100644 index cb0fe58ba..000000000 --- a/src/components/Header/index.tsx +++ /dev/null @@ -1,4 +0,0 @@ -import Header from "./Header"; -import HeaderLogo from "./HeaderLogo"; - -export { Header, HeaderLogo }; diff --git a/src/routes/ErrorPage.tsx b/src/routes/ErrorPage.tsx index 0c84a092f..bcef42eb0 100644 --- a/src/routes/ErrorPage.tsx +++ b/src/routes/ErrorPage.tsx @@ -4,7 +4,7 @@ import { ErrorResponse, Link, useRouteError } from "react-router-dom"; import { FlexColumnAlignCenter } from "../styles/utils"; -import { Header, HeaderLogo } from "../components/Header"; +import Header from "../components/Header"; const isErrorResponse = (error: unknown): error is ErrorResponse => { return typeof (error as ErrorResponse).status === "number" && typeof (error as ErrorResponse).statusText === "string"; @@ -24,9 +24,7 @@ export default function ErrorPage(): ReactElement { return (
-
- -
+

{errorMessage}

Sorry, something went wrong.