From 98549520c010fabee2eb8849e2e92bfd90e6e3e7 Mon Sep 17 00:00:00 2001
From: trevor-anderson <T.AndersonProperty@gmail.com>
Date: Fri, 3 Mar 2023 08:23:08 -0500
Subject: [PATCH] style: add nested css selectors for legal/policy text/comps

---
 .../LegalPolicyPageLayout.tsx                 | 37 +++++++++----------
 .../LegalPolicySection.tsx                    |  2 +-
 2 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/src/layouts/LegalPolicyPageLayout/LegalPolicyPageLayout.tsx b/src/layouts/LegalPolicyPageLayout/LegalPolicyPageLayout.tsx
index 8cd43fd4..601b7752 100644
--- 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
index a53bf61c..80f4355b 100644
--- 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}