From cfe0e349627c25b03a1dfce4f5db33e8ebd85f2a Mon Sep 17 00:00:00 2001
From: Fred Tingaud
 <95592999+frederic-tingaud-sonarsource@users.noreply.github.com>
Date: Fri, 28 Jan 2022 15:17:25 +0100
Subject: [PATCH] RULEAPI-729: Reduce title fonts to make the page more
 readable

---
 frontend/src/RulePage.tsx                     | 126 +++++++++++-------
 .../__snapshots__/RulePage.test.tsx.snap      |  57 +++-----
 2 files changed, 98 insertions(+), 85 deletions(-)

diff --git a/frontend/src/RulePage.tsx b/frontend/src/RulePage.tsx
index 656f1e5475..564a06aad2 100644
--- a/frontend/src/RulePage.tsx
+++ b/frontend/src/RulePage.tsx
@@ -6,7 +6,7 @@ import Typography from '@material-ui/core/Typography';
 import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
 import Box from '@material-ui/core/Box';
-import { Link } from '@material-ui/core';
+import { createMuiTheme, Link, ThemeProvider } from '@material-ui/core';
 import Highlight from 'react-highlight';
 import { Link as RouterLink, useHistory } from 'react-router-dom';
 import { RULE_STATE, useRuleCoverage } from './utils/useRuleCoverage';
@@ -15,8 +15,26 @@ import { RuleMetadata } from './types';
 
 import './hljs-humanoid-light.css';
 
-
 const useStyles = makeStyles((theme) => ({
+  '@global': {
+    h1: {
+      fontSize: '1.6rem',
+      fontWeight: 500,
+      marginTop: theme.spacing(3),
+      marginBottom: theme.spacing(3)
+    },
+    h2: {
+      color: '#0B3C62',
+      fontSize: '1.2rem'
+    },
+    h3: {
+      fontSize: '1rem',
+      color: '#25699D'
+    },
+    hr: {
+      color: '#F9F9FB'
+    }
+  },
   ruleBar: {
     borderBottom: '1px solid lightgrey',
   },
@@ -24,6 +42,7 @@ const useStyles = makeStyles((theme) => ({
     textAlign: 'center',
     marginTop: theme.spacing(3),
     marginBottom: theme.spacing(3),
+    color: 'black'
   },
   ruleidLink: {
     color: 'inherit',
@@ -43,7 +62,7 @@ const useStyles = makeStyles((theme) => ({
 
   // style used to center the tabs when there too few of them to fill the container
   tabRoot: {
-    justifyContent: "center"
+    justifyContent: 'center'
   },
   tabScroller: {
     flexGrow: 0
@@ -55,7 +74,7 @@ const useStyles = makeStyles((theme) => ({
   tab: {
     display: 'flex',
 
-    "&::before": {
+    '&::before': {
       content: '""',
       display: 'block',
       width: theme.spacing(1),
@@ -69,17 +88,17 @@ const useStyles = makeStyles((theme) => ({
     }
   },
   coveredTab: {
-    "&::before": {
+    '&::before': {
       backgroundColor: RULE_STATE['covered'].color,
     }
   },
   targetedTab: {
-    "&::before": {
+    '&::before': {
       backgroundColor: RULE_STATE['targeted'].color,
     }
   },
   removedTab: {
-    "&::before": {
+    '&::before': {
       backgroundColor: RULE_STATE['removed'].color,
     }
   },
@@ -95,6 +114,8 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
+const theme = createMuiTheme({});
+
 const languageToJiraProject = new Map(Object.entries({
   'PYTHON': 'SONARPY',
   'ABAP': 'SONARABAP',
@@ -189,6 +210,11 @@ function ticketsAndImplementationPRsLinks(ruleNumber: string, title: string, lan
   }
 }
 
+function RuleThemeProvider({ children }: any) {
+  useStyles();
+  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+}
+
 export function RulePage(props: any) {
   const ruleid = props.match.params.ruleid;
   // language can be absent
@@ -283,13 +309,13 @@ export function RulePage(props: any) {
 
   return (
     <div>
-    <div className={classes.ruleBar}>
-      <Container>
-        <Typography variant="h2" classes={{root: classes.ruleid}}>
-          <Link className={classes.ruleidLink} component={RouterLink} to={`/${ruleid}`} underline="none">{ruleid}</Link>
-        </Typography>
-        <Typography variant="h4" classes={{root: classes.ruleid}}>{prLink}</Typography>
-        <Tabs
+      <div className={classes.ruleBar}>
+        <Container>
+          <Typography variant="h2" classes={{ root: classes.ruleid }}>
+            <Link className={classes.ruleidLink} component={RouterLink} to={`/${ruleid}`} underline="none">{ruleid}</Link>
+          </Typography>
+          <Typography variant="h4" classes={{ root: classes.ruleid }}>{prLink}</Typography>
+          <Tabs
             {...tabsValue}
             onChange={handleLanguageChange}
             indicatorColor="primary"
@@ -297,41 +323,43 @@ export function RulePage(props: any) {
             variant="scrollable"
             scrollButtons="auto"
             classes={{ root: classes.tabRoot, scroller: classes.tabScroller }}
-        >
-          {languagesTabs}
-        </Tabs>
-      </Container>
+          >
+            {languagesTabs}
+          </Tabs>
+        </Container>
+      </div>
+
+      <RuleThemeProvider>
+        <Container maxWidth="md">
+          <h1>{title}</h1>
+          <hr />
+          <Box className={classes.coverage}>
+            <h2>Covered Since</h2>
+            <ul>
+              {coverage}
+            </ul>
+          </Box>
+
+          <Box className={classes.coverage}>
+            <h2>Related Tickets and Pull Requests</h2>
+            <ul>
+              {specificationPRsLink}
+            </ul>
+            <ul>
+              {implementationPRsLink}
+            </ul>
+            <ul>
+              {ticketsLink}
+            </ul>
+          </Box>
+
+          <Box>
+            <Typography component={'span'} className={classes.description}>
+              {description}
+            </Typography>
+          </Box>
+        </Container>
+      </RuleThemeProvider>
     </div>
-
-    <Container maxWidth="md">
-      <Typography variant="h3" classes={{root: classes.title}}>{title}</Typography>
-      <Box className={classes.coverage}>
-        <Typography variant="h4" >Covered Since</Typography>
-        <ul>
-        {coverage}
-        </ul>
-      </Box>
-
-      <Box className={classes.coverage}>
-        <Typography variant="h4" >Related Tickets and Pull Requests</Typography>
-        <ul>
-          {specificationPRsLink}
-        </ul>
-        <ul>
-          {implementationPRsLink}
-        </ul>
-        <ul>
-          {ticketsLink}
-        </ul>
-      </Box>
-
-      <Box>
-        <Typography component={'span'} className={classes.description}>
-          {description}
-        </Typography>
-      </Box>
-    </Container>
-    </div>
-
   );
 }
diff --git a/frontend/src/__tests__/__snapshots__/RulePage.test.tsx.snap b/frontend/src/__tests__/__snapshots__/RulePage.test.tsx.snap
index c0aa697b79..f0fac6e259 100644
--- a/frontend/src/__tests__/__snapshots__/RulePage.test.tsx.snap
+++ b/frontend/src/__tests__/__snapshots__/RulePage.test.tsx.snap
@@ -113,19 +113,16 @@ exports[`renders C# version of S3457 (using GH for issues instead of Jira) 1`] =
     <div
       class="MuiContainer-root MuiContainer-maxWidthMd"
     >
-      <h3
-        class="MuiTypography-root makeStyles-title-26 MuiTypography-h3"
-      >
+      <h1>
         Composite format strings should be used correctly
-      </h3>
+      </h1>
+      <hr />
       <div
         class="MuiBox-root MuiBox-root-38 makeStyles-coverage-27"
       >
-        <h4
-          class="MuiTypography-root MuiTypography-h4"
-        >
+        <h2>
           Covered Since
-        </h4>
+        </h2>
         <ul>
           <li>
             CSH: c#1
@@ -135,11 +132,9 @@ exports[`renders C# version of S3457 (using GH for issues instead of Jira) 1`] =
       <div
         class="MuiBox-root MuiBox-root-39 makeStyles-coverage-27"
       >
-        <h4
-          class="MuiTypography-root MuiTypography-h4"
-        >
+        <h2>
           Related Tickets and Pull Requests
-        </h4>
+        </h2>
         <ul>
           <a
             class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary"
@@ -1156,19 +1151,16 @@ exports[`renders cfamily version of S1000 1`] = `
     <div
       class="MuiContainer-root MuiContainer-maxWidthMd"
     >
-      <h3
-        class="MuiTypography-root makeStyles-title-4 MuiTypography-h3"
-      >
+      <h1>
         Header files should not contain unnamed namespaces
-      </h3>
+      </h1>
+      <hr />
       <div
         class="MuiBox-root MuiBox-root-16 makeStyles-coverage-5"
       >
-        <h4
-          class="MuiTypography-root MuiTypography-h4"
-        >
+        <h2>
           Covered Since
-        </h4>
+        </h2>
         <ul>
           Not Covered
         </ul>
@@ -1176,11 +1168,9 @@ exports[`renders cfamily version of S1000 1`] = `
       <div
         class="MuiBox-root MuiBox-root-17 makeStyles-coverage-5"
       >
-        <h4
-          class="MuiTypography-root MuiTypography-h4"
-        >
+        <h2>
           Related Tickets and Pull Requests
-        </h4>
+        </h2>
         <ul>
           <a
             class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary"
@@ -2295,19 +2285,16 @@ exports[`renders generic version of S3457 1`] = `
     <div
       class="MuiContainer-root MuiContainer-maxWidthMd"
     >
-      <h3
-        class="MuiTypography-root makeStyles-title-48 MuiTypography-h3"
-      >
+      <h1>
         Composite format strings should be used correctly
-      </h3>
+      </h1>
+      <hr />
       <div
         class="MuiBox-root MuiBox-root-60 makeStyles-coverage-49"
       >
-        <h4
-          class="MuiTypography-root MuiTypography-h4"
-        >
+        <h2>
           Covered Since
-        </h4>
+        </h2>
         <ul>
           <li>
             CSH: c#1
@@ -2317,11 +2304,9 @@ exports[`renders generic version of S3457 1`] = `
       <div
         class="MuiBox-root MuiBox-root-61 makeStyles-coverage-49"
       >
-        <h4
-          class="MuiTypography-root MuiTypography-h4"
-        >
+        <h2>
           Related Tickets and Pull Requests
-        </h4>
+        </h2>
         <ul>
           <a
             class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary"