Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: Update font sizes to linear numbers #1925

Merged
merged 1 commit into from
Jul 6, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions editor.planx.uk/src/@planx/components/Confirmation/Public.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -91,10 +91,10 @@ export default function ConfirmationComponent(props: Props) {

{props.nextSteps && Boolean(props.nextSteps?.length) && (
<Box pt={3}>
<Typography variant="h3" component="h2" mb={2}>
<Typography variant="h2" mb={2}>
What happens next?
</Typography>
<NumberedList items={props.nextSteps} heading="h3" />
<NumberedList items={props.nextSteps} heading="h2" />
</Box>
)}

Expand All @@ -110,7 +110,9 @@ export default function ConfirmationComponent(props: Props) {
{props.contactInfo && (
<>
<Box py={1} color="primary.main">
<Typography variant="h3">Contact us</Typography>
<Typography variant="h2" component="h3">
Contact us
</Typography>
<ReactMarkdownOrHtml source={props.contactInfo} />
</Box>
</>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,7 @@ function Component(props: Props) {
padding: "1.5em 0 1em",
}}
>
<Typography variant="h4" component="h2">
<Typography variant="h3" component="h2">
{`${capitalize(fileListCategory)} files`}
</Typography>
</ListSubheader>,
Expand All @@ -181,7 +181,7 @@ function Component(props: Props) {
</List>
</DropzoneContainer>
{Boolean(slots.length) && (
<Typography variant="h4" component="h3" mb={2}>
<Typography variant="h3" mb={2}>
Your uploaded files
</Typography>
)}
Expand Down
4 changes: 1 addition & 3 deletions editor.planx.uk/src/@planx/components/Notice/Public.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -87,9 +87,7 @@ const NoticeComponent: React.FC<Props> = (props) => {
<Content>
<TitleWrap>
<ErrorOutline sx={{ width: 34, height: 34 }} />
<Title component="h3" variant="h4">
{props.title}
</Title>
<Title variant="h3">{props.title}</Title>
</TitleWrap>
<Box mt={2}>
<ReactMarkdownOrHtml
Expand Down
8 changes: 4 additions & 4 deletions editor.planx.uk/src/@planx/components/Pay/Public/Confirm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ const PayBody: React.FC<PayBodyProps> = (props) => {
<Card>
<PayText>
<Typography
variant="h3"
variant="h2"
component={props.hideFeeBanner ? "h2" : "h3"}
>
{props.instructionsTitle || "How to pay"}
Expand Down Expand Up @@ -107,7 +107,7 @@ const PayBody: React.FC<PayBodyProps> = (props) => {
) : (
<Card handleSubmit={props.onConfirm} isValid>
<ErrorSummary role="status" data-testid="error-summary">
<Typography variant="h5" component="h3" gutterBottom>
<Typography variant="h4" component="h3" gutterBottom>
{props.error}
</Typography>
<Typography variant="body2">
Expand Down Expand Up @@ -147,7 +147,7 @@ export default function Confirm(props: Props) {
<Box textAlign="left" width="100%">
<>
<Container maxWidth="md">
<Typography variant="h3" component="h1" align="left" pb={3}>
<Typography variant="h2" component="h1" align="left" pb={3}>
{page === "Pay" ? props.title : props.secondaryPageTitle}
</Typography>
</Container>
Expand All @@ -160,7 +160,7 @@ export default function Confirm(props: Props) {
>
<Container maxWidth="md">
<Typography
variant="h4"
variant="h3"
gutterBottom
className="marginBottom"
component="h2"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -154,9 +154,7 @@ const InviteToPayForm: React.FC<InviteToPayFormProps> = ({
) : (
<Card>
<StyledForm onSubmit={formik.handleSubmit}>
<Typography variant="h3" component="h2">
{nomineeTitle}
</Typography>
<Typography variant="h2">{nomineeTitle}</Typography>
{nomineeDescription && (
<Typography variant="body2">
<ReactMarkdownOrHtml
Expand Down Expand Up @@ -209,7 +207,7 @@ const InviteToPayForm: React.FC<InviteToPayFormProps> = ({
}}
/>
</InputLabel>
<Typography variant="h3" component="h2" pt={2}>
<Typography variant="h2" pt={2}>
{yourDetailsTitle}
</Typography>
{yourDetailsDescription && (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,7 @@ function ConstraintListItem({ children, ...props }: ConstraintListItemProps) {
<Collapse in={showConstraintData}>
<Box py={1.5} px={2}>
<>
<Typography variant="h4" component="h4" gutterBottom>
<Typography variant="h3" component="h4" gutterBottom>
{`This property ${props?.content}`}
</Typography>
{Boolean(props.data?.length) && (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -255,7 +255,7 @@ export function PlanningConstraintsContent(
)}
{positiveConstraints.length > 0 && (
<>
<Typography variant="h4" component="h2" gutterBottom>
<Typography variant="h3" component="h2" gutterBottom>
These are the planning constraints we think apply to this property
</Typography>
<ConstraintsList data={positiveConstraints} metadata={metadata} />
Expand All @@ -275,7 +275,7 @@ export function PlanningConstraintsContent(
)}
{positiveConstraints.length === 0 && negativeConstraints.length > 0 && (
<>
<Typography variant="h4" component="h2">
<Typography variant="h3" component="h2">
It looks like there are no constraints on this property
</Typography>
<Typography variant="body2">
Expand Down Expand Up @@ -319,7 +319,7 @@ interface ConstraintsFetchErrorProps {

const ConstraintsFetchError = (props: ConstraintsFetchErrorProps) => (
<ErrorSummaryContainer role="status" data-testid="error-summary-no-info">
<Typography variant="h5" component="h2" gutterBottom>
<Typography variant="h4" component="h2" gutterBottom>
No information available
</Typography>
{props.error &&
Expand Down Expand Up @@ -353,7 +353,7 @@ const ConstraintsGraphError = (props: ConstraintsGraphErrorProps) => (
role="status"
data-testid="error-summary-invalid-graph"
>
<Typography variant="h5" component="h2" gutterBottom>
<Typography variant="h4" component="h2" gutterBottom>
Invalid graph
</Typography>
<Typography variant="body2">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ function Component(props: PublicProps<PropertyInformation>) {
role="status"
data-testid="error-summary-invalid-graph"
>
<Typography variant="h5" component="h2" gutterBottom>
<Typography variant="h4" component="h2" gutterBottom>
Invalid graph
</Typography>
<Typography variant="body2">
Expand Down
6 changes: 4 additions & 2 deletions editor.planx.uk/src/@planx/components/Result/Editor.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ const ResultComponent: React.FC<Result> = (props) => {
<ModalSection>
<ModalSectionContent title="Result" Icon={ICONS[TYPES.Result]}>
<InputRow>
<Typography variant="h6">
<Typography variant="h5" component="h6">
<label htmlFor="result-flagSet">Flag set</label>
</Typography>
<select
Expand All @@ -116,7 +116,9 @@ const ResultComponent: React.FC<Result> = (props) => {
</InputRow>

<Box mt={2}>
<Typography variant="h6">Flag Text Overrides (optional)</Typography>
<Typography variant="h5" component="h6">
Flag Text Overrides (optional)
</Typography>
<Typography variant="body2">
The overrides you set here will change what is displayed to the
user upon arriving at this result. If you provide no overrides,
Expand Down
4 changes: 2 additions & 2 deletions editor.planx.uk/src/@planx/components/Result/Public/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ const Result: React.FC<Props> = ({
isValid
>
<Box mt={4} mb={3}>
<Typography variant="h3" component="h2" gutterBottom>
<Typography variant="h2" gutterBottom>
{reasonsTitle}
</Typography>
</Box>
Expand Down Expand Up @@ -164,7 +164,7 @@ const Result: React.FC<Props> = ({
<Box ml={1}>
<Box display="flex" alignItems="center">
<DisclaimerHeading
variant="h6"
variant="h5"
component="h3"
color="text.primary"
>
Expand Down
2 changes: 1 addition & 1 deletion editor.planx.uk/src/@planx/components/Section/Public.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export default function Component(props: Props) {
<Card isValid handleSubmit={props.handleSubmit}>
<QuestionHeader title={flowName} />
<Box>
<Typography variant="h4" component="h2" pb="0.15em">
<Typography variant="h3" component="h2" pb="0.15em">
Application incomplete.
</Typography>
<Typography variant="subtitle2" component="h3">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const MoreInfoSection: React.FC<IMoreInfoSection> = ({ title, children }) => {
return (
<Root className="MoreInfoSection-root" pb={3}>
{title && (
<Typography mb={4} variant="h3" component="h2">
<Typography mb={4} variant="h2">
{title}
</Typography>
)}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ const QuestionHeader: React.FC<IQuestionHeader> = ({
{title && (
<Box mr={1} pt={0.5}>
<Typography
variant="h3"
variant="h2"
role="heading"
aria-level={1}
component="h1"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,7 @@ function SummaryListsBySections(props: SummaryListsBySectionsProps) {
<Box sx={{ display: "flex", justifyContent: "space-between" }}>
<Typography
component={props.sectionComponent || "h2"}
variant="h5"
variant="h4"
>
{props.flow[`${Object.keys(sections[i])[0]}`]?.data?.title}
</Typography>
Expand Down
2 changes: 1 addition & 1 deletion editor.planx.uk/src/components/ErrorFallback.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ function ErrorFallback(props: { error: Error }) {
return (
<Card>
<ErrorSummaryContainer role="alert">
<Typography variant="h5" component="h1" gutterBottom>
<Typography variant="h4" component="h1" gutterBottom>
Something went wrong
</Typography>
<Typography>
Expand Down
2 changes: 1 addition & 1 deletion editor.planx.uk/src/components/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -362,7 +362,7 @@ const ServiceTitle: React.FC = () => {

return (
<ServiceTitleRoot data-testid="service-title">
<Typography component="span" variant="h5">
<Typography component="span" variant="h4">
{flowName}
</Typography>
</ServiceTitleRoot>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const DataManagerSettings = () => {
return (
<form onSubmit={formik.handleSubmit}>
<Box pb={3}>
<Typography variant="h3" gutterBottom>
<Typography variant="h2" component="h3" gutterBottom>
<strong>Data Manager</strong>
</Typography>
<Typography variant="body1">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,9 @@ const TextInput: React.FC<{
<Box mb={2} width="100%">
<Box my={2} display="flex" alignItems="center">
<Switch {...switchProps} color="primary" />
<Typography variant="h5">{title}</Typography>
<Typography variant="h4" component="h5">
{title}
</Typography>
</Box>
<Box mb={2}>
{description && <Typography variant="body2">{description}</Typography>}
Expand Down Expand Up @@ -62,7 +64,7 @@ const DesignSettings: React.FC = () => {
return (
<form onSubmit={formik.handleSubmit}>
<Box pb={3} borderBottom={1}>
<Typography variant="h3" gutterBottom>
<Typography variant="h2" component="h3" gutterBottom>
<strong>Design</strong>
</Typography>
<Typography variant="body1">
Expand All @@ -83,7 +85,9 @@ const DesignSettings: React.FC = () => {
<InputGroup>
<InputRow>
<InputRowLabel>
<Typography variant="h5">Background</Typography>
<Typography variant="h4" component="h5">
Background
</Typography>
</InputRowLabel>
<InputRowItem width="70%">
<ColorPicker
Expand All @@ -95,7 +99,9 @@ const DesignSettings: React.FC = () => {
</InputRow>
<InputRow>
<InputRowLabel>
<Typography variant="h5">Logo</Typography>
<Typography variant="h4" component="h5">
Logo
</Typography>
</InputRowLabel>
<InputRowItem width={50}>
<PublicFileUploadButton />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ const ServiceFlags: React.FC<IServiceFlags> = ({ flagSets }) => {
return (
<form onSubmit={formik.handleSubmit}>
<Box pb={3} borderBottom={1}>
<Typography variant="h3" gutterBottom>
<Typography variant="h2" component="h3" gutterBottom>
<strong>Service flags</strong>
</Typography>
<Typography variant="body1">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,9 @@ const TextInput: React.FC<{
<Box mb={2} width="100%">
<Box my={2} display="flex" alignItems="center">
<Switch {...switchProps} color="primary" />
<Typography variant="h5">{title}</Typography>
<Typography variant="h4" component="h5">
{title}
</Typography>
</Box>
<Box mb={2}>
{description && <Typography variant="body2">{description}</Typography>}
Expand Down Expand Up @@ -97,7 +99,7 @@ const ServiceSettings: React.FC = () => {
return (
<form onSubmit={formik.handleSubmit}>
<Box py={3} borderBottom={1}>
<Typography variant="h3" gutterBottom>
<Typography variant="h2" component="h3" gutterBottom>
<strong>Elements</strong>
</Typography>
<Typography variant="body1">
Expand Down Expand Up @@ -126,7 +128,7 @@ const ServiceSettings: React.FC = () => {
/>
</Box>
<Box pt={2}>
<Typography variant="h4">
<Typography variant="h3" component="h4">
<strong>Footer Links</strong>
</Typography>
<InputGroup>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,9 @@ const TeamMember = ({ name, email, userRole }: any) => {
<StyledAvatar>{name[0]}</StyledAvatar>
</Grid>
<StyledGrid item>
<Typography variant="h5">{name}</Typography>
<Typography variant="h4" component="h5">
{name}
</Typography>
<Box fontSize="h5.fontSize">{email}</Box>
</StyledGrid>
<Grid item>
Expand Down Expand Up @@ -85,7 +87,7 @@ const Team: React.FC = () => {
return (
<form onSubmit={formik.handleSubmit}>
<Box pb={3} borderBottom={1}>
<Typography variant="h3" gutterBottom>
<Typography variant="h2" component="h3" gutterBottom>
<strong>Team</strong>
</Typography>
<Typography variant="body1">
Expand Down Expand Up @@ -141,7 +143,7 @@ const Team: React.FC = () => {
</Grid>
</Box>
<Box py={3}>
<Typography variant="h3" gutterBottom>
<Typography variant="h2" component="h3" gutterBottom>
<strong>Sharing</strong>
</Typography>
<Typography variant="body1" gutterBottom>
Expand Down
2 changes: 1 addition & 1 deletion editor.planx.uk/src/pages/GlobalSettings.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ function Component() {
<Typography variant="h1">Global Settings</Typography>
<Box mb={2}>
<Box py={3} borderBottom={1}>
<Typography variant="h3" gutterBottom>
<Typography variant="h2" component="h3" gutterBottom>
<strong>Footer Elements</strong>
</Typography>
<Typography variant="body1">
Expand Down
4 changes: 2 additions & 2 deletions editor.planx.uk/src/pages/Pay/InviteToPay.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ const InviteToPay: React.FC<PaymentRequest> = ({ createdAt }) => {
</Typography>
</Banner>
<Container maxWidth="md" sx={{ py: 4 }}>
<Typography variant="h3" component="h2" pb={2}>
<Typography variant="h2" pb={2}>
You will be contacted
</Typography>
<List>
Expand All @@ -51,7 +51,7 @@ const InviteToPay: React.FC<PaymentRequest> = ({ createdAt }) => {
<li>to inform you whether a certificate has been granted or not</li>
</List>
<Divider sx={{ pt: 2 }} />
<Typography variant="h3" component="h2" pt={4} pb={2}>
<Typography variant="h2" pt={4} pb={2}>
Contact us
</Typography>
<List>
Expand Down
Loading
Loading