feat: 'about' page changes (#92)

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

@@ -1,12 +1,5 @@
 import { mediaTabletUp } from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints";
-import { inkLight } from "@databiosphere/findable-ui/lib/styles/common/mixins/colors";
-import {
-  textBodyLarge4002Lines,
-  textBodyLarge500,
-} from "@databiosphere/findable-ui/lib/styles/common/mixins/fonts";
-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";
 
 export const Grid = styled.div`
@@ -19,28 +12,3 @@ export const Grid = styled.div`
     grid-template-columns: repeat(7, 1fr);
   }
 `;
-
-export const StyledAccordion = styled(MAccordion)`
-  box-shadow: ${elevation01} !important;
-  display: grid;
-  grid-column: 1 / -1;
-  padding: 12px 0;
-
-  .MuiAccordionSummary-root {
-    flex-direction: row;
-    min-height: 0;
-    padding: 8px 20px;
-
-    .MuiAccordionSummary-content {
-      ${textBodyLarge500};
-      margin: 0;
-    }
-  }
-
-  .MuiAccordionDetails-root {
-    ${textBodyLarge4002Lines};
-    color: ${inkLight};
-    margin: 0;
-    padding: 0 20px 8px;
-  }
-` as typeof MAccordion;

app/components/Home/components/Section/components/SectionHelp/components/Questions/questions.tsx

@@ -1,21 +1,15 @@
-import { AddIcon as DXAddIcon } from "@databiosphere/findable-ui/lib/components/common/CustomIcon/components/AddIcon/addIcon";
-import { RoundedPaper as DXRoundedPaper } from "@databiosphere/findable-ui/lib/components/common/Paper/paper.styles";
 import { Link as DXLink } from "@databiosphere/findable-ui/lib/components/Links/components/Link/link";
-import {
-  AccordionDetails as MAccordionDetails,
-  AccordionSummary as MAccordionSummary,
-} from "@mui/material";
+import { AccordionDetails as MAccordionDetails } from "@mui/material";
+import { Accordion } from "../../../../../../../common/Accordion/accordion";
+import { AccordionSummary } from "../../../../../../../common/Accordion/components/AccordionSummary/accordionSummary";
 import { URLS } from "../../../../../../common/constants";
-import { Grid, StyledAccordion } from "./questions.styles";
+import { Grid } from "./questions.styles";
 
 export const Questions = (): JSX.Element => {
-  const expandIcon = <DXAddIcon color="inkLight" fontSize="small" />;
   return (
     <Grid>
-      <StyledAccordion component={DXRoundedPaper}>
-        <MAccordionSummary expandIcon={expandIcon}>
-          What is the plan?
-        </MAccordionSummary>
+      <Accordion>
+        <AccordionSummary>What is the plan?</AccordionSummary>
         <MAccordionDetails>
           BRC Analytics is very new. Out plan is (1) establish access to
           official versions of VEuPathDB’s 785 genomes; (2) develop analytical
@@ -24,34 +18,28 @@ export const Questions = (): JSX.Element => {
           provide access to custom annotations that were previously available
           from VEuPathDB. To learn more click “Roadmap” on top.
         </MAccordionDetails>
-      </StyledAccordion>
-      <StyledAccordion component={DXRoundedPaper}>
-        <MAccordionSummary expandIcon={expandIcon}>
-          Where is the data?
-        </MAccordionSummary>
+      </Accordion>
+      <Accordion>
+        <AccordionSummary>Where is the data?</AccordionSummary>
         <MAccordionDetails>
           I used to be able to access many types of data including genomes and
           associated annotations. Where do I find it now? Data for the majority
           of VEuPathDB organisms is available by clicking the “Datasets” link at
           the top.
         </MAccordionDetails>
-      </StyledAccordion>
-      <StyledAccordion component={DXRoundedPaper}>
-        <MAccordionSummary expandIcon={expandIcon}>
-          How do I do analyses?
-        </MAccordionSummary>
+      </Accordion>
+      <Accordion>
+        <AccordionSummary>How do I do analyses?</AccordionSummary>
         <MAccordionDetails>
           I used to rely on VEuPathDB to perform my analyses. Now that it is no
           longer available, what can I do? Many types of analyses are possible
           via integration with the{" "}
           <DXLink label="Galaxy system" url={URLS.GALAXY_SYSTEM} /> while we
           continue to build this new BRC resource.
         </MAccordionDetails>
-      </StyledAccordion>
-      <StyledAccordion component={DXRoundedPaper}>
-        <MAccordionSummary expandIcon={expandIcon}>
-          How does BRC Analytics work?
-        </MAccordionSummary>
+      </Accordion>
+      <Accordion>
+        <AccordionSummary>How does BRC Analytics work?</AccordionSummary>
         <MAccordionDetails>
           BRC Analytics will provide access to genomic data and an analytical
           environment. The data will be based on the official releases provided
@@ -61,7 +49,7 @@ export const Questions = (): JSX.Element => {
           Center (<DXLink label="TACC" url={URLS.TACC} />) and{" "}
           <DXLink label="ACCESS-CI" url={URLS.ACCESS_CONSORTIUM} /> consortium.
         </MAccordionDetails>
-      </StyledAccordion>
+      </Accordion>
     </Grid>
   );
 };

app/components/Layout/components/AppLayout/components/Section/components/SectionHero/sectionHero.styles.ts

@@ -6,10 +6,9 @@ import {
 import { textBodyLarge400 } from "@databiosphere/findable-ui/lib/styles/common/mixins/fonts";
 import styled from "@emotion/styled";
 import { Section } from "../../../../../../../common/Section/section";
-import { section, sectionGrid, sectionLayout } from "../../section.styles";
+import { sectionGrid, sectionLayout } from "../../section.styles";
 
 export const StyledSection = styled(Section)`
-  ${section};
   background-color: ${smokeLightest};
   overflow: hidden;
   position: relative; /* positions svg */

app/components/Layout/components/AppLayout/components/Section/section.styles.ts

@@ -15,6 +15,10 @@ export const sectionGrid = css`
   grid-template-columns: repeat(12, 1fr);
 `;
 
+export const sectionGridAreas = css`
+  grid-template-areas: "feature feature feature feature . detail detail detail detail detail detail detail";
+`;
+
 export const sectionLayout = css`
   box-sizing: content-box;
   margin: 0 auto;
@@ -26,3 +30,32 @@ export const sectionSubHero = (props: ThemeProps) => css`
   background-color: ${white(props)};
   border-top: 1px solid ${smokeMain(props)};
 `;
+
+export const sectionWithDivider = (props: ThemeProps) => css`
+  position: relative; /* positions divider */
+  width: 100%;
+
+  > div:before {
+    background-color: ${smokeMain(props)};
+    content: "";
+    height: 1px;
+    max-width: min(1136px, calc(100vw - 32px));
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+`;
+
+export const headline = css`
+  h2 {
+    font-family: "Inter Tight", sans-serif;
+    font-size: 32px;
+    font-weight: 500;
+    line-height: 40px;
+    margin: 0;
+
+    + div {
+      margin-top: 16px; /* TODO(cc) duplication of SectionHeadline class in SubHeadline */
+    }
+  }
+`;