Merge pull request #73 from galaxyproject/fran/72-brc-theme

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

Author: NoopDog

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/SectionBranding/sectionBranding.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/SectionBranding/sectionBranding.tsx

@@ -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/SectionHelp/components/Questions/questions.styles.ts

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