From be334390d842a3f58df87d15b8f2fbb3cb76dcbd Mon Sep 17 00:00:00 2001 From: Fran McDade Date: Mon, 9 Sep 2024 11:55:13 +1000 Subject: [PATCH] feat: add animation to hero background (#31) --- .../sectionAnalytics.styles.ts | 6 +- .../SectionBranding/components/Hero/hero.tsx | 66 ++++++++++ .../SectionBranding/sectionBranding.styles.ts | 8 ++ .../SectionBranding/sectionBranding.tsx | 10 ++ .../SectionHelp/sectionHelp.styles.ts | 6 +- .../SectionHero/sectionHero.styles.ts | 10 +- .../components/SectionHero/sectionHero.tsx | 2 +- .../SectionSubHero/sectionSubHero.styles.ts | 6 +- .../components/AppLayout/appLayout.styles.ts | 7 - .../Layout/components/Footer/footer.styles.ts | 7 + .../components/Hero/common/constants.ts | 36 ++++++ .../Layout/components/Hero/common/entities.ts | 18 +++ .../Layout/components/Hero/common/utils.ts | 101 +++++++++++++++ .../components/Defs/BlueCircle/blueCircle.tsx | 34 +++++ .../components/Defs/BlueRect/blueRect.tsx | 47 +++++++ .../Defs/CoralPinkCircle/coralPinkCircle.tsx | 36 ++++++ .../Defs/SmokeCircle/smokeCircle.tsx | 46 +++++++ .../components/Defs/SmokeRect/smokeRect.tsx | 32 +++++ .../components/Defs/YellowRect/yellowRect.tsx | 47 +++++++ .../Layout/components/Main/main.styles.ts | 3 - app/views/HomeView/homeView.tsx | 2 + pages/_app.tsx | 4 +- pages/index.tsx | 2 - public/hero/hero.svg | 122 ------------------ 24 files changed, 509 insertions(+), 149 deletions(-) create mode 100644 app/components/Home/components/Section/components/SectionBranding/components/Hero/hero.tsx create mode 100644 app/components/Home/components/Section/components/SectionBranding/sectionBranding.styles.ts create mode 100644 app/components/Home/components/Section/components/SectionBranding/sectionBranding.tsx delete mode 100644 app/components/Layout/components/AppLayout/appLayout.styles.ts create mode 100644 app/components/Layout/components/Footer/footer.styles.ts create mode 100644 app/components/Layout/components/Hero/common/constants.ts create mode 100644 app/components/Layout/components/Hero/common/entities.ts create mode 100644 app/components/Layout/components/Hero/common/utils.ts create mode 100644 app/components/Layout/components/Hero/components/Defs/BlueCircle/blueCircle.tsx create mode 100644 app/components/Layout/components/Hero/components/Defs/BlueRect/blueRect.tsx create mode 100644 app/components/Layout/components/Hero/components/Defs/CoralPinkCircle/coralPinkCircle.tsx create mode 100644 app/components/Layout/components/Hero/components/Defs/SmokeCircle/smokeCircle.tsx create mode 100644 app/components/Layout/components/Hero/components/Defs/SmokeRect/smokeRect.tsx create mode 100644 app/components/Layout/components/Hero/components/Defs/YellowRect/yellowRect.tsx delete mode 100644 public/hero/hero.svg diff --git a/app/components/Home/components/Section/components/SectionAnalytics/sectionAnalytics.styles.ts b/app/components/Home/components/Section/components/SectionAnalytics/sectionAnalytics.styles.ts index 39131c3..afff7a6 100644 --- a/app/components/Home/components/Section/components/SectionAnalytics/sectionAnalytics.styles.ts +++ b/app/components/Home/components/Section/components/SectionAnalytics/sectionAnalytics.styles.ts @@ -1,4 +1,7 @@ -import { smokeLightest } from "@databiosphere/findable-ui/lib/styles/common/mixins/colors"; +import { + smokeLightest, + smokeMain, +} from "@databiosphere/findable-ui/lib/styles/common/mixins/colors"; import styled from "@emotion/styled"; import { Section, @@ -8,6 +11,7 @@ import { export const StyledSection = styled(Section)` background-color: ${smokeLightest}; + border-top: 1px solid ${smokeMain}; overflow: hidden; `; diff --git a/app/components/Home/components/Section/components/SectionBranding/components/Hero/hero.tsx b/app/components/Home/components/Section/components/SectionBranding/components/Hero/hero.tsx new file mode 100644 index 0000000..ffd30fc --- /dev/null +++ b/app/components/Home/components/Section/components/SectionBranding/components/Hero/hero.tsx @@ -0,0 +1,66 @@ +import { Fragment } from "react"; +import { + FILL, + GRID_SIZE, +} from "../../../../../../../Layout/components/Hero/common/constants"; +import { + ELEMENT_ID, + Height, +} from "../../../../../../../Layout/components/Hero/common/entities"; +import { + getElementHref, + getFillUrl, + getViewBox, +} from "../../../../../../../Layout/components/Hero/common/utils"; +import { BlueCircle } from "../../../../../../../Layout/components/Hero/components/Defs/BlueCircle/blueCircle"; +import { BlueRect } from "../../../../../../../Layout/components/Hero/components/Defs/BlueRect/blueRect"; +import { CoralPinkCircle } from "../../../../../../../Layout/components/Hero/components/Defs/CoralPinkCircle/coralPinkCircle"; +import { SmokeCircle } from "../../../../../../../Layout/components/Hero/components/Defs/SmokeCircle/smokeCircle"; +import { SmokeRect } from "../../../../../../../Layout/components/Hero/components/Defs/SmokeRect/smokeRect"; +import { YellowRect } from "../../../../../../../Layout/components/Hero/components/Defs/YellowRect/yellowRect"; + +export interface HeroProps { + gridSize?: number; + height?: Height; +} + +export const Hero = ({ + gridSize = GRID_SIZE, + height = GRID_SIZE * 3, +}: HeroProps): JSX.Element => { + return ( + + + + + + + + {[ + ELEMENT_ID.PATTERN_SMOKE_RECT, + ELEMENT_ID.PATTERN_SMOKE_CIRCLE, + ELEMENT_ID.PATTERN_BLUE_RECT, + ELEMENT_ID.PATTERN_YELLOW_RECT, + ].map((elementId) => ( + + + + ))} + + + + ); +}; diff --git a/app/components/Home/components/Section/components/SectionBranding/sectionBranding.styles.ts b/app/components/Home/components/Section/components/SectionBranding/sectionBranding.styles.ts new file mode 100644 index 0000000..878a234 --- /dev/null +++ b/app/components/Home/components/Section/components/SectionBranding/sectionBranding.styles.ts @@ -0,0 +1,8 @@ +import { smokeLightest } from "@databiosphere/findable-ui/lib/styles/common/mixins/colors"; +import styled from "@emotion/styled"; + +export const Section = styled.section` + background-color: ${smokeLightest}; + position: fixed; + z-index: -1; +`; diff --git a/app/components/Home/components/Section/components/SectionBranding/sectionBranding.tsx b/app/components/Home/components/Section/components/SectionBranding/sectionBranding.tsx new file mode 100644 index 0000000..4f79d02 --- /dev/null +++ b/app/components/Home/components/Section/components/SectionBranding/sectionBranding.tsx @@ -0,0 +1,10 @@ +import { Hero } from "./components/Hero/hero"; +import { Section } from "./sectionBranding.styles"; + +export const SectionBranding = (): JSX.Element => { + return ( +
+ +
+ ); +}; diff --git a/app/components/Home/components/Section/components/SectionHelp/sectionHelp.styles.ts b/app/components/Home/components/Section/components/SectionHelp/sectionHelp.styles.ts index e0b310c..ad0acf4 100644 --- a/app/components/Home/components/Section/components/SectionHelp/sectionHelp.styles.ts +++ b/app/components/Home/components/Section/components/SectionHelp/sectionHelp.styles.ts @@ -1,5 +1,8 @@ import { mediaTabletUp } from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints"; -import { white } from "@databiosphere/findable-ui/lib/styles/common/mixins/colors"; +import { + smokeMain, + white, +} from "@databiosphere/findable-ui/lib/styles/common/mixins/colors"; import styled from "@emotion/styled"; import { Section, @@ -12,6 +15,7 @@ import { export const StyledSection = styled(Section)` background-color: ${white}; + border-top: 1px solid ${smokeMain}; `; export const SectionLayout = styled(DefaultLayout)` diff --git a/app/components/Home/components/Section/components/SectionHero/sectionHero.styles.ts b/app/components/Home/components/Section/components/SectionHero/sectionHero.styles.ts index 74cfd71..ed19fa1 100644 --- a/app/components/Home/components/Section/components/SectionHero/sectionHero.styles.ts +++ b/app/components/Home/components/Section/components/SectionHero/sectionHero.styles.ts @@ -2,22 +2,14 @@ import { mediaDesktopSmallUp, mediaTabletUp, } from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints"; -import { - inkLight, - smokeLightest, -} from "@databiosphere/findable-ui/lib/styles/common/mixins/colors"; +import { inkLight } from "@databiosphere/findable-ui/lib/styles/common/mixins/colors"; import { textBodyLarge400 } from "@databiosphere/findable-ui/lib/styles/common/mixins/fonts"; import styled from "@emotion/styled"; import { - Section, sectionGrid, SectionLayout as DefaultLayout, } from "../../section.styles"; -export const StyledSection = styled(Section)` - background: url("/hero/hero.svg") 0 0 repeat, ${smokeLightest}; -`; - export const SectionLayout = styled(DefaultLayout)` ${sectionGrid}; align-content: flex-end; diff --git a/app/components/Home/components/Section/components/SectionHero/sectionHero.tsx b/app/components/Home/components/Section/components/SectionHero/sectionHero.tsx index 446b42a..2d31dd3 100644 --- a/app/components/Home/components/Section/components/SectionHero/sectionHero.tsx +++ b/app/components/Home/components/Section/components/SectionHero/sectionHero.tsx @@ -1,10 +1,10 @@ import { Button } from "@mui/material"; import { ROUTES } from "../../../../../../../routes/constants"; +import { Section } from "../../section.styles"; import { Head, Headline, SectionLayout, - StyledSection as Section, Subhead, SubHeadline, SubHeadlinePositioner, diff --git a/app/components/Home/components/Section/components/SectionSubHero/sectionSubHero.styles.ts b/app/components/Home/components/Section/components/SectionSubHero/sectionSubHero.styles.ts index 1a66e71..580cc8a 100644 --- a/app/components/Home/components/Section/components/SectionSubHero/sectionSubHero.styles.ts +++ b/app/components/Home/components/Section/components/SectionSubHero/sectionSubHero.styles.ts @@ -1,4 +1,7 @@ -import { white } from "@databiosphere/findable-ui/lib/styles/common/mixins/colors"; +import { + smokeMain, + white, +} from "@databiosphere/findable-ui/lib/styles/common/mixins/colors"; import { textBodySmall500 } from "@databiosphere/findable-ui/lib/styles/common/mixins/fonts"; import styled from "@emotion/styled"; import { Chip as MChip } from "@mui/material"; @@ -10,6 +13,7 @@ import { export const StyledSection = styled(Section)` background-color: ${white}; + border-top: 1px solid ${smokeMain}; `; export const SectionLayout = styled(DefaultLayout)` diff --git a/app/components/Layout/components/AppLayout/appLayout.styles.ts b/app/components/Layout/components/AppLayout/appLayout.styles.ts deleted file mode 100644 index 672e673..0000000 --- a/app/components/Layout/components/AppLayout/appLayout.styles.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { AppLayout as DXAppLayout } from "@databiosphere/findable-ui/lib/components/Layout/components/AppLayout/appLayout.styles"; -import { smokeLightest } from "@databiosphere/findable-ui/lib/styles/common/mixins/colors"; -import styled from "@emotion/styled"; - -export const StyledAppLayout = styled(DXAppLayout)` - background-color: ${smokeLightest}; -`; diff --git a/app/components/Layout/components/Footer/footer.styles.ts b/app/components/Layout/components/Footer/footer.styles.ts new file mode 100644 index 0000000..ab65c72 --- /dev/null +++ b/app/components/Layout/components/Footer/footer.styles.ts @@ -0,0 +1,7 @@ +import { Footer } from "@databiosphere/findable-ui/lib/components/Layout/components/Footer/footer"; +import { smokeLightest } from "@databiosphere/findable-ui/lib/styles/common/mixins/colors"; +import styled from "@emotion/styled"; + +export const StyledFooter = styled(Footer)` + background-color: ${smokeLightest}; +`; diff --git a/app/components/Layout/components/Hero/common/constants.ts b/app/components/Layout/components/Hero/common/constants.ts new file mode 100644 index 0000000..62c66f2 --- /dev/null +++ b/app/components/Layout/components/Hero/common/constants.ts @@ -0,0 +1,36 @@ +export const ANIMATE_MOTION = { + begin: "1s", + dur: "40s", + repeatCount: "indefinite", +}; + +export const FILL = { + BLUE: "#28285B", + CORAL_PINK: "#FC5E60", + NONE: "none", + SMOKE: "#E1E3E5", + YELLOW: "#FEDC6E", +}; + +export const GRID_SIZE = 297; + +export const SHAPE_HEIGHT = { + BLUE_CIRCLE: 18, + BLUE_RECT: 6, + CORAL_PINK_CIRCLE: 18, + YELLOW_RECT: 49, +}; + +export const SHAPE_WIDTH = { + BLUE_CIRCLE: 18, + BLUE_RECT: 49, + YELLOW_RECT: 6, +}; + +export const X_POSITION = { + BLUE_RECT: 100, +}; + +export const Y_POSITION = { + YELLOW_RECT: 200, +}; diff --git a/app/components/Layout/components/Hero/common/entities.ts b/app/components/Layout/components/Hero/common/entities.ts new file mode 100644 index 0000000..312af3d --- /dev/null +++ b/app/components/Layout/components/Hero/common/entities.ts @@ -0,0 +1,18 @@ +export enum ELEMENT_ID { + GROUP_BLUE_CIRCLE = "groupBlueCircle", + GROUP_BLUE_RECT = "groupBlueRect", + GROUP_CORAL_PINK_CIRLCLE = "groupCoralPinkCircle", + GROUP_SMOKE_CIRCLE = "groupSmokeCircle", + GROUP_SMOKE_RECT = "groupSmokeRect", + GROUP_YELLOW_RECT = "groupYellowRect", + PATTERN_BLUE_RECT = "patternBlueRect", + PATTERN_SMOKE_CIRCLE = "patternSmokeCircle", + PATTERN_SMOKE_RECT = "patternSmokeRect", + PATTERN_YELLOW_RECT = "patternYellowRect", +} + +export type Height = number; // Should be a multiple of GRID_SIZE. + +export enum PATTERN_UNIT { + USER_SPACE_ON_USE = "userSpaceOnUse", +} diff --git a/app/components/Layout/components/Hero/common/utils.ts b/app/components/Layout/components/Hero/common/utils.ts new file mode 100644 index 0000000..55c2284 --- /dev/null +++ b/app/components/Layout/components/Hero/common/utils.ts @@ -0,0 +1,101 @@ +import { SHAPE_HEIGHT, SHAPE_WIDTH, X_POSITION, Y_POSITION } from "./constants"; + +/** + * Returns the path for the animateMotion element of the blue rectangle. + * @param gridSize - Grid size. + * @returns animate motion path. + */ +export function getAnimateMotionPathBlueRect(gridSize: number): string { + return `M 0,0 L -${X_POSITION.BLUE_RECT},0 L ${ + gridSize - X_POSITION.BLUE_RECT - SHAPE_WIDTH.BLUE_RECT + },0 L 0,0`; +} + +/** + * Returns the path for the animateMotion element of the yellow rectangle. + * @param gridSize - Grid size. + * @returns animate motion path. + */ +export function getAnimateMotionPathYellowRect(gridSize: number): string { + return `M 0,0 L 0,${ + gridSize - Y_POSITION.YELLOW_RECT - SHAPE_HEIGHT.YELLOW_RECT + } L 0,-${Y_POSITION.YELLOW_RECT} L 0,0`; +} + +/** + * Returns the transform for the animateMotion element of the blue or coral pink circle. + * @param pos - Position. + * @param gridSize - Grid size. + * @param gridShift - Grid shift. + * @returns animate motion transform. + */ +export function getAnimateMotionTransformCircle( + pos: number, + gridSize: number, + gridShift = 0 +): string { + return `${pos} ${gridSize / 2 + gridSize * gridShift} ${gridSize / 2}`; +} + +/** + * Returns the starting x position for the blue or coral pink circle. + * @param gridSize - Grid size. + * @param angle - Angle. + * @returns x position. + */ +export function calculateCircleXPosition( + gridSize: number, + angle: number +): number { + return gridSize / 2 + (gridSize / 2) * Math.cos(degreesToRadians(angle)); +} + +/** + * Returns the starting y position for the blue or coral pink circle. + * @param gridSize - Grid size. + * @param angle - Angle. + * @returns y position. + */ +export function calculateCircleYPosition( + gridSize: number, + angle: number +): number { + return gridSize / 2 - (gridSize / 2) * Math.sin(degreesToRadians(angle)); +} + +/** + * Returns radians from degrees. + * @param angle - Angle. + * @returns radians. + */ +function degreesToRadians(angle: number): number { + return (angle * Math.PI) / 180; +} + +/** + * Returns element href for the given ID. + * @param id - Element ID. + * @returns href. + */ +export function getElementHref(id: string): string { + return `#${id}`; +} + +/** + * Returns fill URL for the given ID. + * @param id - ID. + * @returns fill URL. + */ +export function getFillUrl(id: string): string { + return `url(#${id})`; +} + +/** + * Returns the viewBox attribute for an SVG element. + * @param width - SVG width. + * @param height - SVG height. + * @returns view box. + */ +export function getViewBox(width: number, height: number): string { + return `0 0 ${width} ${height}`; +} diff --git a/app/components/Layout/components/Hero/components/Defs/BlueCircle/blueCircle.tsx b/app/components/Layout/components/Hero/components/Defs/BlueCircle/blueCircle.tsx new file mode 100644 index 0000000..ab9f626 --- /dev/null +++ b/app/components/Layout/components/Hero/components/Defs/BlueCircle/blueCircle.tsx @@ -0,0 +1,34 @@ +import { ANIMATE_MOTION, FILL, SHAPE_HEIGHT } from "../../../common/constants"; +import { ELEMENT_ID } from "../../../common/entities"; +import { + calculateCircleXPosition, + calculateCircleYPosition, + getAnimateMotionTransformCircle, +} from "../../../common/utils"; + +export interface BlueCircleProps { + gridSize: number; +} + +export const BlueCircle = ({ gridSize }: BlueCircleProps): JSX.Element => { + return ( + + + + + + + + ); +}; diff --git a/app/components/Layout/components/Hero/components/Defs/BlueRect/blueRect.tsx b/app/components/Layout/components/Hero/components/Defs/BlueRect/blueRect.tsx new file mode 100644 index 0000000..00a7895 --- /dev/null +++ b/app/components/Layout/components/Hero/components/Defs/BlueRect/blueRect.tsx @@ -0,0 +1,47 @@ +import { + ANIMATE_MOTION, + FILL, + SHAPE_HEIGHT, + SHAPE_WIDTH, + X_POSITION, +} from "../../../common/constants"; +import { ELEMENT_ID, PATTERN_UNIT } from "../../../common/entities"; +import { + getAnimateMotionPathBlueRect, + getElementHref, +} from "../../../common/utils"; + +export interface BlueRectProps { + gridSize: number; +} + +export const BlueRect = ({ gridSize }: BlueRectProps): JSX.Element => { + return ( + + + + + + + + + + + ); +}; diff --git a/app/components/Layout/components/Hero/components/Defs/CoralPinkCircle/coralPinkCircle.tsx b/app/components/Layout/components/Hero/components/Defs/CoralPinkCircle/coralPinkCircle.tsx new file mode 100644 index 0000000..0cb1aa8 --- /dev/null +++ b/app/components/Layout/components/Hero/components/Defs/CoralPinkCircle/coralPinkCircle.tsx @@ -0,0 +1,36 @@ +import { ANIMATE_MOTION, FILL, SHAPE_HEIGHT } from "../../../common/constants"; +import { ELEMENT_ID } from "../../../common/entities"; +import { + calculateCircleXPosition, + calculateCircleYPosition, + getAnimateMotionTransformCircle, +} from "../../../common/utils"; + +export interface CoralPinkCircleProps { + gridSize: number; +} + +export const CoralPinkCircle = ({ + gridSize, +}: CoralPinkCircleProps): JSX.Element => { + return ( + + + + + + + + ); +}; diff --git a/app/components/Layout/components/Hero/components/Defs/SmokeCircle/smokeCircle.tsx b/app/components/Layout/components/Hero/components/Defs/SmokeCircle/smokeCircle.tsx new file mode 100644 index 0000000..da67bae --- /dev/null +++ b/app/components/Layout/components/Hero/components/Defs/SmokeCircle/smokeCircle.tsx @@ -0,0 +1,46 @@ +import { FILL } from "../../../common/constants"; +import { ELEMENT_ID, PATTERN_UNIT } from "../../../common/entities"; +import { getElementHref } from "../../../common/utils"; + +export interface SmokeCircleProps { + gridSize: number; +} + +export const SmokeCircle = ({ gridSize }: SmokeCircleProps): JSX.Element => { + return ( + + + + + + + + + + + + ); +}; diff --git a/app/components/Layout/components/Hero/components/Defs/SmokeRect/smokeRect.tsx b/app/components/Layout/components/Hero/components/Defs/SmokeRect/smokeRect.tsx new file mode 100644 index 0000000..d9b19b6 --- /dev/null +++ b/app/components/Layout/components/Hero/components/Defs/SmokeRect/smokeRect.tsx @@ -0,0 +1,32 @@ +import { FILL } from "../../../common/constants"; +import { ELEMENT_ID, PATTERN_UNIT } from "../../../common/entities"; +import { getElementHref } from "../../../common/utils"; + +export interface SmokeRectProps { + gridSize: number; +} + +export const SmokeRect = ({ gridSize }: SmokeRectProps): JSX.Element => { + return ( + + + + + + + + + ); +}; diff --git a/app/components/Layout/components/Hero/components/Defs/YellowRect/yellowRect.tsx b/app/components/Layout/components/Hero/components/Defs/YellowRect/yellowRect.tsx new file mode 100644 index 0000000..5d5b0a6 --- /dev/null +++ b/app/components/Layout/components/Hero/components/Defs/YellowRect/yellowRect.tsx @@ -0,0 +1,47 @@ +import { + ANIMATE_MOTION, + FILL, + SHAPE_HEIGHT, + SHAPE_WIDTH, + Y_POSITION, +} from "../../../common/constants"; +import { ELEMENT_ID, PATTERN_UNIT } from "../../../common/entities"; +import { + getAnimateMotionPathYellowRect, + getElementHref, +} from "../../../common/utils"; + +export interface YellowRectProps { + gridSize: number; +} + +export const YellowRect = ({ gridSize }: YellowRectProps): JSX.Element => { + return ( + + + + + + + + + + + ); +}; diff --git a/app/components/Layout/components/Main/main.styles.ts b/app/components/Layout/components/Main/main.styles.ts index 9b74b0c..714510b 100644 --- a/app/components/Layout/components/Main/main.styles.ts +++ b/app/components/Layout/components/Main/main.styles.ts @@ -1,9 +1,6 @@ import { Main as DXMain } from "@databiosphere/findable-ui/lib/components/Layout/components/Main/main"; -import { smokeMain } from "@databiosphere/findable-ui/lib/styles/common/mixins/colors"; import styled from "@emotion/styled"; export const StyledMain = styled(DXMain)` - background-color: ${smokeMain}; flex-direction: column; - gap: 1px; `; diff --git a/app/views/HomeView/homeView.tsx b/app/views/HomeView/homeView.tsx index 16b4d58..b950ff0 100644 --- a/app/views/HomeView/homeView.tsx +++ b/app/views/HomeView/homeView.tsx @@ -1,5 +1,6 @@ import { Fragment } from "react"; import { SectionAnalytics } from "../../components/Home/components/Section/components/SectionAnalytics/sectionAnalytics"; +import { SectionBranding } from "../../components/Home/components/Section/components/SectionBranding/sectionBranding"; import { SectionHelp } from "../../components/Home/components/Section/components/SectionHelp/sectionHelp"; import { SectionHero } from "../../components/Home/components/Section/components/SectionHero/sectionHero"; import { SectionSubHero } from "../../components/Home/components/Section/components/SectionSubHero/sectionSubHero"; @@ -11,6 +12,7 @@ export const HomeView = (): JSX.Element => { + ); }; diff --git a/pages/_app.tsx b/pages/_app.tsx index ed64511..dae64f9 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -5,7 +5,6 @@ import { ErrorBoundary } from "@databiosphere/findable-ui/lib/components/ErrorBo import { Head } from "@databiosphere/findable-ui/lib/components/Head/head"; import { AppLayout as DXAppLayout } from "@databiosphere/findable-ui/lib/components/Layout/components/AppLayout/appLayout.styles"; import { Floating } from "@databiosphere/findable-ui/lib/components/Layout/components/Floating/floating"; -import { Footer } from "@databiosphere/findable-ui/lib/components/Layout/components/Footer/footer"; import { Header as DXHeader } from "@databiosphere/findable-ui/lib/components/Layout/components/Header/header"; import { Main as DXMain } from "@databiosphere/findable-ui/lib/components/Layout/components/Main/main"; import { ConfigProvider as DXConfigProvider } from "@databiosphere/findable-ui/lib/providers/config"; @@ -18,6 +17,7 @@ import { ThemeProvider as EmotionThemeProvider } from "@emotion/react"; import { CssBaseline, ThemeProvider } from "@mui/material"; import { NextPage } from "next"; import type { AppProps } from "next/app"; +import { StyledFooter } from "../app/components/Layout/components/Footer/footer.styles"; import { config } from "../app/config/config"; import { mergeAppTheme } from "../app/theme/theme"; @@ -80,7 +80,7 @@ function MyApp({ Component, pageProps }: AppPropsWithComponent): JSX.Element { -