fix: fix brc theme and page styles (#72)

app/components/About/components/Section/components/SectionAbout/sectionAbout.styles.ts

@@ -1,7 +1,12 @@
 import styled from "@emotion/styled";
-import { SectionLayout } from "../../section.styles";
+import {
+  sectionGrid,
+  sectionLayout,
+} from "../../../../../Layout/components/AppLayout/components/Section/section.styles";
 
-export const StyledSectionLayout = styled(SectionLayout)`
+export const SectionLayout = styled.div`
+  ${sectionLayout};
+  ${sectionGrid};
   grid-template-columns: 1fr;
   padding: 98px 16px;
 

app/components/About/components/Section/components/SectionAbout/sectionAbout.tsx

@@ -1,13 +1,13 @@
 import { AboutContent } from "../../../../content";
 import { Section } from "../../section.styles";
-import { StyledSectionLayout } from "./sectionAbout.styles";
+import { SectionLayout } from "./sectionAbout.styles";
 
 export const SectionAbout = (): JSX.Element => {
   return (
     <Section>
-      <StyledSectionLayout>
+      <SectionLayout>
         <AboutContent />
-      </StyledSectionLayout>
+      </SectionLayout>
     </Section>
   );
 };

app/components/About/components/Section/section.styles.ts

@@ -1,46 +1,6 @@
-import { mediaTabletUp } from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints";
-import { white } from "@databiosphere/findable-ui/lib/styles/common/mixins/colors";
 import styled from "@emotion/styled";
-import {
-  sectionGrid,
-  SectionLayout as DefaultLayout,
-} from "../../../Layout/components/AppLayout/components/Section/section.styles";
+import { sectionSubHero } from "../../../Layout/components/AppLayout/components/Section/section.styles";
 
 export const Section = styled.section`
-  background-color: ${white};
-  position: relative;
-  width: 100%;
-  z-index: 1;
-`;
-
-export const SectionLayout = styled(DefaultLayout)`
-  ${sectionGrid};
-`;
-
-export const SubHeadline = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  grid-column: 1 / -1;
-
-  ${mediaTabletUp} {
-    grid-column: 1 / 6;
-  }
-`;
-
-export const Subhead = styled.h2`
-  font-size: 40px;
-  font-weight: 500;
-  grid-column: 1 / -1;
-  letter-spacing: -0.4px;
-  line-height: 48px;
-  margin: 0;
-`;
-
-export const SectionContent = styled.div`
-  grid-column: 1 / -1;
-
-  ${mediaTabletUp} {
-    grid-column: 7 / -1;
-  }
+  ${sectionSubHero};
 `;

app/components/Home/components/Section/components/SectionAnalytics/components/AnalyticsTools/analyticsTools.styles.ts

@@ -55,6 +55,11 @@ export const StyledCardActions = styled.div`
   .MuiLink-root {
     ${textBody500};
     color: #035c94;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
   }
 `;
 

app/components/Home/components/Section/components/SectionAnalytics/sectionAnalytics.styles.ts

@@ -3,7 +3,7 @@ import {
   smokeMain,
 } from "@databiosphere/findable-ui/lib/styles/common/mixins/colors";
 import styled from "@emotion/styled";
-import { SectionLayout as DefaultLayout } from "../../../../../Layout/components/AppLayout/components/Section/section.styles";
+import { sectionLayout } from "../../../../../Layout/components/AppLayout/components/Section/section.styles";
 import { SectionHeadline } from "../../section.styles";
 
 export const Section = styled.section`
@@ -13,7 +13,8 @@ export const Section = styled.section`
   width: 100%;
 `;
 
-export const SectionLayout = styled(DefaultLayout)`
+export const SectionLayout = styled.div`
+  ${sectionLayout};
   display: flex;
   flex-direction: column;
   gap: 48px 16px;

app/components/Home/components/Section/components/SectionHelp/components/Questions/questions.styles.ts

@@ -8,6 +8,7 @@ import { elevation01 } from "@databiosphere/findable-ui/lib/theme/common/shadows
 import styled from "@emotion/styled";
 import { Accordion as MAccordion } from "@mui/material";
 import { sectionGrid } from "../../../../../../../Layout/components/AppLayout/components/Section/section.styles";
+import { muiLink } from "../../../../section.styles";
 
 export const Grid = styled.div`
   ${sectionGrid};
@@ -21,6 +22,7 @@ export const Grid = styled.div`
 `;
 
 export const StyledAccordion = styled(MAccordion)`
+  ${muiLink};
   box-shadow: ${elevation01} !important;
   display: grid;
   grid-column: 1 / -1;
@@ -42,14 +44,5 @@ export const StyledAccordion = styled(MAccordion)`
     color: ${inkLight};
     margin: 0;
     padding: 0 20px 8px;
-
-    .MuiLink-root {
-      color: #28285b;
-      text-decoration: underline;
-
-      &:hover {
-        text-decoration: none;
-      }
-    }
   }
 ` as typeof MAccordion;

app/components/Home/components/Section/components/SectionHelp/sectionHelp.styles.ts

@@ -6,9 +6,10 @@ import {
 import styled from "@emotion/styled";
 import {
   sectionGrid,
-  SectionLayout as DefaultLayout,
+  sectionLayout,
 } from "../../../../../Layout/components/AppLayout/components/Section/section.styles";
 import {
+  muiLink,
   SectionHeadline,
   SectionSubtitle,
   SectionTitle,
@@ -20,7 +21,8 @@ export const Section = styled.section`
   width: 100%;
 `;
 
-export const SectionLayout = styled(DefaultLayout)`
+export const SectionLayout = styled.div`
+  ${sectionLayout};
   ${sectionGrid};
   padding: 85px 16px 150px;
 `;
@@ -41,14 +43,6 @@ export const StyledSectionTitle = styled(SectionTitle)`
 `;
 
 export const StyledSectionSubTitle = styled(SectionSubtitle)`
+  ${muiLink};
   line-height: 28px;
-
-  .MuiLink-root {
-    color: #28285b;
-    text-decoration: underline;
-
-    &:hover {
-      text-decoration: none;
-    }
-  }
 `;

app/components/Home/components/Section/components/SectionHero/components/Hero/hero.styles.ts

@@ -0,0 +1,6 @@
+import styled from "@emotion/styled";
+
+export const SVG = styled.svg`
+  position: absolute;
+  z-index: -1;
+`;

app/components/Home/components/Section/components/SectionBranding/components/Hero/hero.tsx → app/components/Home/components/Section/components/SectionHero/components/Hero/hero.tsx

@@ -18,6 +18,7 @@ import { CoralPinkCircle } from "../../../../../../../Layout/components/Hero/com
 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";
+import { SVG } from "./hero.styles";
 
 export interface HeroProps {
   gridSize?: number;
@@ -29,7 +30,7 @@ export const Hero = ({
   height = GRID_SIZE * 3,
 }: HeroProps): JSX.Element => {
   return (
-    <svg
+    <SVG
       fill={FILL.NONE}
       height={height}
       preserveAspectRatio="xMinYMin meet"
@@ -61,6 +62,6 @@ export const Hero = ({
       ))}
       {/*<use href={getElementHref(ELEMENT_ID.GROUP_BLUE_CIRCLE)} x={0} />*/}
       <use href={getElementHref(ELEMENT_ID.GROUP_CORAL_PINK_CIRLCLE)} />
-    </svg>
+    </SVG>
   );
 };

app/components/Home/components/Section/components/SectionHero/sectionHero.styles.ts

@@ -2,15 +2,28 @@ import {
   mediaDesktopSmallUp,
   mediaTabletUp,
 } from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints";
-import { inkLight } from "@databiosphere/findable-ui/lib/styles/common/mixins/colors";
+import {
+  inkLight,
+  smokeLightest,
+} 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,
+  sectionLayout,
 } from "../../../../../Layout/components/AppLayout/components/Section/section.styles";
 
-export const SectionLayout = styled(DefaultLayout)`
+export const Section = styled.section`
+  ${section};
+  background-color: ${smokeLightest};
+  overflow: hidden;
+  position: relative; /* positions svg */
+  z-index: 0; /* section content above svg */
+`;
+
+export const SectionLayout = styled.div`
+  ${sectionLayout};
   ${sectionGrid};
   align-content: flex-end;
   min-height: 400px;

app/components/Home/components/Section/components/SectionHero/sectionHero.tsx

@@ -1,9 +1,10 @@
 import { ANCHOR_TARGET } from "@databiosphere/findable-ui/lib/components/Links/common/entities";
 import { Button } from "@mui/material";
-import { Section } from "../../../../../Layout/components/AppLayout/components/Section/section.styles";
+import { Hero } from "./components/Hero/hero";
 import {
   Head,
   Headline,
+  Section,
   SectionLayout,
   Subhead,
   SubHeadline,
@@ -13,6 +14,7 @@ import {
 export const SectionHero = (): JSX.Element => {
   return (
     <Section>
+      <Hero />
       <SectionLayout>
         <Headline>
           <Head>

app/components/Home/components/Section/components/SectionSubHero/sectionSubHero.styles.ts

@@ -5,7 +5,7 @@ import {
 import styled from "@emotion/styled";
 import {
   sectionGrid,
-  SectionLayout as DefaultLayout,
+  sectionLayout,
 } from "../../../../../Layout/components/AppLayout/components/Section/section.styles";
 
 export const Section = styled.section`
@@ -14,7 +14,8 @@ export const Section = styled.section`
   width: 100%;
 `;
 
-export const SectionLayout = styled(DefaultLayout)`
+export const SectionLayout = styled.div`
+  ${sectionLayout};
   ${sectionGrid};
   grid-template-columns: 1fr;
   justify-items: center;

app/components/Home/components/Section/section.styles.ts

@@ -1,7 +1,19 @@
 import { inkLight } from "@databiosphere/findable-ui/lib/styles/common/mixins/colors";
 import { textBodyLarge400 } from "@databiosphere/findable-ui/lib/styles/common/mixins/fonts";
+import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 
+export const muiLink = css`
+  .MuiLink-root {
+    color: #28285b;
+    text-decoration: underline;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+`;
+
 export const SectionHeadline = styled.div`
   display: grid;
   gap: 16px;

app/components/Layout/components/AppLayout/components/Section/components/SectionHero/components/Hero/hero.styles.ts

@@ -0,0 +1,6 @@
+import styled from "@emotion/styled";
+
+export const SVG = styled.svg`
+  position: absolute;
+  z-index: -1;
+`;

app/components/Layout/components/AppLayout/components/Section/components/SectionBranding/components/Hero/hero.tsx → app/components/Layout/components/AppLayout/components/Section/components/SectionHero/components/Hero/hero.tsx

@@ -10,6 +10,7 @@ import { CoralPinkCircle } from "../../../../../../../Hero/components/Defs/Coral
 import { SmokeCircle } from "../../../../../../../Hero/components/Defs/SmokeCircle/smokeCircle";
 import { SmokeRect } from "../../../../../../../Hero/components/Defs/SmokeRect/smokeRect";
 import { YellowRect } from "../../../../../../../Hero/components/Defs/YellowRect/yellowRect";
+import { SVG } from "./hero.styles";
 
 export interface HeroProps {
   gridSize?: number;
@@ -21,7 +22,7 @@ export const Hero = ({
   height = GRID_SIZE * 1.5,
 }: HeroProps): JSX.Element => {
   return (
-    <svg
+    <SVG
       fill={FILL.NONE}
       height={height}
       preserveAspectRatio="xMinYMin meet"
@@ -49,6 +50,6 @@ export const Hero = ({
         </Fragment>
       ))}
       <use href={getElementHref(ELEMENT_ID.GROUP_CORAL_PINK_CIRLCLE)} />
-    </svg>
+    </SVG>
   );
 };