resolving conversations about typography and responsiveness of ClaimView

AletheiaFact · Jan 8, 2025 · bce4733 · bce4733
1 parent dff2f70
commit bce4733
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 19 deletions.
diff --git a/src/components/Claim/ClaimView.tsx b/src/components/Claim/ClaimView.tsx
@@ -135,7 +135,7 @@ const ClaimView = ({ personality, claim, href, hideDescriptions }) => {
                             </Grid>
                             {sources.length > 0 && (
                                 <>
-                                    <Typography variant="h6" style={{fontFamily:"initial", fontWeight: 700}}>
+                                    <Typography variant="h4" style={{fontSize: 24, fontFamily:"initial", fontWeight: 700}}>
                                         {t("claim:sourceSectionTitle")}
                                     </Typography>
                                     <ClaimSourceList

diff --git a/src/components/CodeOfConduct/CodeOfConduct.tsx b/src/components/CodeOfConduct/CodeOfConduct.tsx
@@ -14,6 +14,14 @@ const CodeOfConductStyle = styled(Grid)`
     padding: 20px;
 
     .title-conduct{
+        font-size: 32px;
+        margin: 20px 0;
+        font-Family: serif; 
+        font-Weight: 600;
+    }
+
+    .subtitle-conduct{
+        font-size: 25px;
         margin: 20px 0;
         font-Family: serif; 
         font-Weight: 600;
@@ -24,28 +32,28 @@ const CodeOfConduct = () => {
     const { t } = useTranslation();
     return (
         <CodeOfConductStyle item>
-            <Typography style={{ fontSize:40,textAlign:"center", fontFamily: "initial", fontWeight:600}} variant="h4">
+            <Typography style={{ fontSize:40,textAlign:"center", fontFamily: "initial", fontWeight:600}} variant="h1">
                 {t("codeOfConduct:title")}
             </Typography>            
-            <Typography className="title-conduct" variant="h4">
+            <Typography className="title-conduct" variant="h2">
                 {t("codeOfConduct:introductionSection")}
             </Typography>
             <Paragraph>
                 {t("codeOfConduct:introductionSectionFirstParagraph")}
             </Paragraph>
-            <Typography className="title-conduct" variant="h4">
+            <Typography className="title-conduct" variant="h2">
                 {t("codeOfConduct:principlesSection")}
             </Typography>
             <Paragraph>
                 {t("codeOfConduct:principlesSectionFirstParagraph")}
             </Paragraph>
-            <Typography className="title-conduct" variant="h4">
+            <Typography className="title-conduct" variant="h2">
                 {t("codeOfConduct:dutiesSection")}
             </Typography>
             <Paragraph>
                 {t("codeOfConduct:dutiesSectionFirstParagraph")}
             </Paragraph>
-            <Typography className="title-conduct" variant="h4">
+            <Typography className="title-conduct" variant="h2">
                 {t("codeOfConduct:methodologySection")}
             </Typography>
             <Paragraph>
@@ -65,66 +73,66 @@ const CodeOfConduct = () => {
             <Paragraph>
                 {t("codeOfConduct:methodologySectionSecondParagraph")}
             </Paragraph>
-            <Typography className="title-conduct" variant="h4">
+            <Typography className="title-conduct" variant="h2">
                 {t("codeOfConduct:expectedBehaviorSection")}
             </Typography>
             <Paragraph>
                 {t("codeOfConduct:expectedBehaviorSectionFirstParagraph")}
             </Paragraph>
-            <Typography className="title-conduct" variant="h5">
+            <Typography className="subtitle-conduct" variant="h3">
                 {t("codeOfConduct:expectedBehaviorSubSection1")}
             </Typography>
             <Paragraph>
                 {t("codeOfConduct:expectedBehaviorSubSection1FirstParagraph")}
             </Paragraph>
-            <Typography className="title-conduct" variant="h5">
+            <Typography className="subtitle-conduct" variant="h3">
                 {t("codeOfConduct:expectedBehaviorSubSection2")}
             </Typography>
             <Paragraph>
                 {t("codeOfConduct:expectedBehaviorSubSection2FirstParagraph")}
             </Paragraph>
-            <Typography className="title-conduct" variant="h4">
+            <Typography className="title-conduct" variant="h2">
                 {t("codeOfConduct:unacceptableBehaviorSection")}
             </Typography>
             <Paragraph>
                 {t("codeOfConduct:unacceptableBehaviorSectionFirstParagraph")}
             </Paragraph>
-            <Typography className="title-conduct" variant="h5">
+            <Typography className="subtitle-conduct" variant="h3">
                 {t("codeOfConduct:unacceptableBehaviorSubSection1")}
             </Typography>
             <Paragraph>
                 {t(
                     "codeOfConduct:unacceptableBehaviorSubSection1FirstParagraph"
                 )}
             </Paragraph>
-            <Typography className="title-conduct" variant="h5">
+            <Typography className="subtitle-conduct" variant="h3">
                 {t("codeOfConduct:unacceptableBehaviorSubSection2")}
             </Typography>
             <Paragraph>
                 {t(
                     "codeOfConduct:unacceptableBehaviorSubSection2FirstParagraph"
                 )}
             </Paragraph>
-            <Typography className="title-conduct" variant="h5">
+            <Typography className="subtitle-conduct" variant="h3">
                 {t("codeOfConduct:unacceptableBehaviorSubSection3")}
             </Typography>
             <Paragraph>
                 {t(
                     "codeOfConduct:unacceptableBehaviorSubSection3FirstParagraph"
                 )}
             </Paragraph>
-            <Typography className="title-conduct" variant="h4">
+            <Typography className="title-conduct" variant="h2">
                 {t("codeOfConduct:responsibilitiesSection")}
             </Typography>
-            <Typography className="title-conduct" variant="h5">
+            <Typography className="subtitle-conduct" variant="h3">
                 {t("codeOfConduct:responsibilitiesSectionSubSection1")}
             </Typography>
             <Paragraph>
                 {t(
                     "codeOfConduct:responsibilitiesSectionSubSection1FirstParagraph"
                 )}
             </Paragraph>
-            <Typography className="title-conduct" variant="h5">
+            <Typography className="subtitle-conduct" variant="h3">
                 {t("codeOfConduct:responsibilitiesSectionSubSection2")}
             </Typography>
             <Paragraph>

diff --git a/src/components/Personality/MorePersonalities.tsx b/src/components/Personality/MorePersonalities.tsx
@@ -22,16 +22,16 @@ const MorePersonalities = ({ personalities, href, title }) => {
                 justifyContent: "center",
             }}
         >
-            <Grid item xs={isLoggedIn || vw?.md ? 9 : 6}>
+            <Grid item xs={isLoggedIn || vw?.lg ? 9 : 6}>
                 <PersonalitiesGrid
                     personalities={personalities}
                     title={title}
                 />
             </Grid>
 
             <Grid item
-                xs={isLoggedIn || vw?.md ? 12 : 3}
-                style={{    paddingLeft: vw?.md ? 0 : 20}} 
+                xs={isLoggedIn || vw?.lg ? 11 : 3}
+                style={{    paddingLeft: vw?.lg ? 0 : 20}} 
             >
                 {!isLoggedIn && (
                     <>