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.

Sign up for GitHub

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

Make h1 hold full title while maintaining formatting #531

Merged
merged 4 commits into from
Nov 25, 2023
+72 −47
Merged

Make h1 hold full title while maintaining formatting #531

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
da5c1bb
Make h1 include full title
milofultz Nov 17, 2023
1c0b63c
desktop styling fix
xscottxbrownx Nov 19, 2023
80eec96
Tighten up heading code
milofultz Nov 21, 2023
c41cc3a
Put testid in right place for tests
milofultz Nov 24, 2023
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
29 changes: 15 additions & 14 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@
"@mui/material": "^5.12.2",
"@mui/styled-engine-sc": "^5.12.0",
"@mui/system": "^5.12.1",
"@mui/utils": "^5.14.18",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's this additional dependency? I can't find any documentation on it.

The npm repo makes it look like it may be private: https://www.npmjs.com/package/@mui/utils

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is what MUI recommended for screen-reader-only text: https://mui.com/system/screen-readers/

Turns out the dep is already in there (check out package lock), so this isn't actually much extra for the bundle

"@mui/x-data-grid": "^6.16.2",
"@mui/x-date-pickers": "^6.5.0",
"@tanstack/react-query": "^4.32.0",
Expand Down
89 changes: 56 additions & 33 deletions src/pages/Home.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import SupportIcon from '@mui/icons-material/Support';
import Typography from '@mui/material/Typography';
import useMediaQuery from '@mui/material/useMediaQuery';
import { useTheme } from '@mui/material/styles';
import { visuallyHidden } from '@mui/utils';
// Components Import
import { HomeSection, KeyFeatures } from '@components/Home';

Expand All @@ -31,32 +32,63 @@ const Home = () => {

const handleClick = () => aboutRef.current.scrollIntoView({ behavior: 'smooth' });

// Logo section elements
const heading = (
<>
PASS
{/* This is added for better screen reader experience by adding a pause
between the acronym and the expanded acronym. */}
<Box component="span" sx={visuallyHidden}>
:
</Box>
</>
);
const subheading = 'Personal Access System for Services';

const logoSection = isReallySmallScreen ? (
<Stack justifyContent="center" alignItems="center" spacing={2} mb={2}>
<Typography
variant="h1"
fontWeight="500"
fontSize="72px"
color="primary"
data-testid="testHomeH1"
>
PASS
</Typography>
<Box component="img" src="/assets/PASSLogolightmode.png" alt="PASS logo" width="50%" />
</Stack>
<Typography component="h1" color="primary">
<Stack component="span" justifyContent="center" alignItems="center" spacing={2} mb={2}>
<Typography
variant="h1"
component="span"
fontWeight="500"
fontSize="72px"
data-testid="testHomeH1"
>
{heading}
</Typography>
<Box component="img" src="/assets/PASSLogolightmode.png" alt="" width="50%" />
xscottxbrownx marked this conversation as resolved.
Show resolved Hide resolved
<Typography variant="h4" component="span" fontWeight="600" mb={8}>
{subheading}
</Typography>
</Stack>
</Typography>
) : (
<Stack direction="row" justifyContent="center" alignItems="center" spacing={4}>
<Box component="img" src="/assets/PASSLogolightmode.png" alt="PASS logo" width="150px" />
<Typography
variant="h1"
fontWeight="500"
fontSize="144px"
color="primary"
data-testid="testHomeH1"
>
PASS
</Typography>
</Stack>
<Typography component="h1" color="primary">
<Stack justifyContent="center" alignItems="center" spacing={4} mb={18}>
<Stack
component="span"
direction="row"
justifyContent="center"
alignItems="center"
spacing={4}
>
<Box component="img" src="/assets/PASSLogolightmode.png" alt="" width="150px" />
<Typography
variant="h1"
component="span"
fontWeight="500"
fontSize="144px"
data-testid="testHomeH1"
>
{heading}
</Typography>
</Stack>
<Typography variant="h3" component="span" fontWeight="600">
{subheading}
</Typography>
</Stack>
</Typography>
);

return (
Expand All @@ -81,15 +113,6 @@ const Home = () => {
alignItems="center"
>
{logoSection}
<Typography
variant={isReallySmallScreen ? 'h4' : 'h3'}
component="p"
fontWeight="600"
mb={isReallySmallScreen ? 8 : 18}
color="primary"
>
Personal Access System for Services
</Typography>
<Typography color="secondary.main" sx={{ fontSize: '24px' }}>
Learn More
</Typography>
Expand Down