style: add nested css selectors for legal/policy text/comps

Nerdware-LLC · Mar 3, 2023 · 9854952 · 9854952
1 parent 9d83416
commit 9854952
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 20 deletions.
diff --git a/src/layouts/LegalPolicyPageLayout/LegalPolicyPageLayout.tsx b/src/layouts/LegalPolicyPageLayout/LegalPolicyPageLayout.tsx
@@ -15,20 +15,7 @@ export const LegalPolicyPageLayout = ({
   children: React.ReactNode;
 }) => (
   <StyledLegalPolicyPageLayoutContainer>
-    <Text
-      variant="h2"
-      component="h1"
-      sx={
-        {
-          // TODO test if the responsive-font-size thing made this unnecessary:
-          //
-          // "@media (max-width: 500px)": {
-          //   fontSize: "2.5rem",
-          //   lineHeight: "2.5rem"
-          // }
-        }
-      }
-    >
+    <Text variant="h2" component="h1">
       {pageTitle}
     </Text>
     <Text variant="h4" component="h2">
@@ -39,15 +26,27 @@ export const LegalPolicyPageLayout = ({
 );
 
 const StyledLegalPolicyPageLayoutContainer = styled("div")({
-  padding: "1.5rem",
-  paddingBottom: "10rem",
-  "& a": {
-    textDecoration: "none"
-  },
+  height: "100%",
+  overflowY: "auto",
+  padding: "1rem 1.5rem 1.5rem 1.5rem",
+
   "@media (min-width: 500px)": {
     padding: "2rem"
   },
+
   "@media (min-width: 1000px)": {
     padding: "2rem clamp(2rem, 10%, 10rem)"
+  },
+
+  "& .MuiTypography-body1": {
+    margin: "1rem 0"
+  },
+
+  "& a": {
+    textDecoration: "none"
+  },
+
+  "& ul > li": {
+    listStyleType: "square"
   }
 });
diff --git a/src/layouts/LegalPolicyPageLayout/LegalPolicySection.tsx b/src/layouts/LegalPolicyPageLayout/LegalPolicySection.tsx
@@ -15,7 +15,7 @@ export const LegalPolicySection = ({
   children: React.ReactNode; // section content
 }) => (
   <div>
-    <Text id={headerID} variant="h4" component="h3">
+    <Text id={headerID} variant="h4" component="h3" style={{ margin: "1rem 0" }}>
       {sectionNumber}. {header}
     </Text>
     {children}