RULEAPI-729: Reduce title fonts to make the page more readable
This commit is contained in:
Fred Tingaud
GitHub
parent
65e429879f
commit
cfe0e34962
@ -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>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
@ -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"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user