ishangsf/rspec
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

RULEAPI-729: Reduce title fonts to make the page more readable

Browse Source
This commit is contained in:
Fred Tingaud 2022-01-28 15:17:25 +01:00 committed by GitHub
parent 65e429879f
commit cfe0e34962
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 98 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
frontend/src/RulePage.tsx
View File

@ -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
@ -303,17 +329,19 @@ export function RulePage(props: any) {
</Container>
</div>
<RuleThemeProvider>
<Container maxWidth="md">
<Typography variant="h3" classes={{root: classes.title}}>{title}</Typography>
<h1>{title}</h1>
<hr />
<Box className={classes.coverage}>
<Typography variant="h4" >Covered Since</Typography>
<h2>Covered Since</h2>
<ul>
{coverage}
</ul>
</Box>
<Box className={classes.coverage}>
<Typography variant="h4" >Related Tickets and Pull Requests</Typography>
<h2>Related Tickets and Pull Requests</h2>
<ul>
{specificationPRsLink}
</ul>
@ -331,7 +359,7 @@ export function RulePage(props: any) {
</Typography>
</Box>
</Container>
</RuleThemeProvider>
</div>
);
}

57
frontend/src/__tests__/__snapshots__/RulePage.test.tsx.snap
View File

@ -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"