Skip to content
This repository has been archived by the owner on Feb 25, 2024. It is now read-only.

Commit

Permalink
Update links on header and footer
Browse files Browse the repository at this point in the history
  • Loading branch information
@ayltai
ayltai committed Sep 16, 2022
1 parent c7f56f0 commit c1a5e55
Show file tree
Hide file tree
Showing 9 changed files with 136 additions and 207 deletions.
4 changes: 4 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@

Possibly the coolest way to install apps and customize your Mac!

## Introduction

This [article](https://ayltai.medium.com/install-mac-apps-and-tweaks-with-a-single-command-6b1b90c466b5) explains the motivation behind this project.

## Getting started

Try it: [https://brewmymac.sh](https://brewmymac.sh)
Expand Down
4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name" : "brew-my-mac",
"description" : "Possibly the coolest way to install apps and customize your Mac!",
"version" : "1.0.5",
"version" : "1.0.6",
"author" : {
"name" : "Alan Tai"
},
Expand Down Expand Up @@ -64,7 +64,7 @@
"@testing-library/react" : "^13.4.0",
"@tsconfig/create-react-app" : "^1.0.2",
"@types/ejs" : "^3.1.1",
"@types/jest" : "^29.0.2",
"@types/jest" : "^29.0.3",
"@types/node" : "^18.7.18",
"@types/react" : "^18.0.20",
"@types/react-dom" : "^18.0.6",
Expand Down
138 changes: 55 additions & 83 deletions src/components/ActionBar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,7 @@
import { GitHub, InfoOutlined, LinkedIn, } from '@mui/icons-material';
import { AppBar, Box, IconButton, Grid, Link, styled, Toolbar, Tooltip, } from '@mui/material';
import { GitHub, } from '@mui/icons-material';
import { AppBar, Box, IconButton, Grid, Link, styled, Toolbar, } from '@mui/material';
import { useGA4React, } from 'ga-4-react';
import React, { useState, } from 'react';
import { useTranslation, } from 'react-i18next';

import { About, } from '../screens';
import React from 'react';

const ClickableImage = styled('img')`
cursor : pointer;
Expand All @@ -25,10 +22,6 @@ export const ActionBar = ({
}) => {
const ga = useGA4React(process.env.REACT_APP_GA_TAG);

const { t, } = useTranslation();

const [ open, setOpen, ] = useState(false);

const handleHomepageClick = () => window.open('/', '_self');

const handleGitHubClick = () => {
Expand All @@ -37,82 +30,61 @@ export const ActionBar = ({
window.open('https://github.com/ayltai/BrewMyMac', '_blank');
};

const handleLinkedInClick = () => {
if (ga) ga.event('Click', 'LinkedIn', 'Referral');

window.open(t('url_linkedin'), '_blank');
};

const handleAboutClick = () => setOpen(true);

const handleClose = () => setOpen(false);

return (
<>
<AppBar
position='sticky'
color='inherit'>
<Toolbar>
<AppBar
position='sticky'
color='inherit'>
<Toolbar>
<Grid
container
width='100%'>
<Grid
item
display='flex'
flexDirection='row'
xs={3}
alignItems='center'>
<ClickableImage
width={48}
height={48}
src={require('../LogoSmall.png')}
onClick={handleHomepageClick} />
<Link
marginLeft={2}
color='inherit'
underline='none'
href='/'
fontFamily='Inconsolata'
fontWeight={600}
variant='h4'>
{title}
</Link>
<PaddedIconButton onClick={handleGitHubClick}>
<GitHub />
</PaddedIconButton>
</Grid>
<Grid
container
width='100%'>
<Grid
item
item
xs={6}
alignItems='center'
justifyContent='center'>
<Box
display='flex'
flexDirection='row'
xs={3}
alignItems='center'>
<ClickableImage
width={48}
height={48}
src={require('../LogoSmall.png')}
onClick={handleHomepageClick} />
<Link
marginLeft={2}
color='inherit'
underline='none'
href='/'
fontFamily='Inconsolata'
fontWeight={600}
variant='h4'>
{title}
</Link>
<PaddedIconButton onClick={handleGitHubClick}>
<GitHub />
</PaddedIconButton>
<PaddedIconButton onClick={handleLinkedInClick}>
<LinkedIn />
</PaddedIconButton>
<Tooltip title={t('action_about')}>
<PaddedIconButton onClick={handleAboutClick}>
<InfoOutlined />
</PaddedIconButton>
</Tooltip>
</Grid>
<Grid
item
xs={6}
alignItems='center'
justifyContent='center'>
<Box
display='flex'
flexDirection='row'>
<Box flexGrow={1} />
{centerComponent}
<Box flexGrow={1} />
</Box>
</Grid>
<Grid
item
xs={3}
alignItems='center'
justifyContent='flex-end'>
{rightComponent}
</Grid>
flexDirection='row'>
<Box flexGrow={1} />
{centerComponent}
<Box flexGrow={1} />
</Box>
</Grid>
<Grid
item
xs={3}
alignItems='center'
justifyContent='flex-end'>
{rightComponent}
</Grid>
</Toolbar>
</AppBar>
{open && <About onClose={handleClose} />}
</>
</Grid>
</Toolbar>
</AppBar>
);
};
59 changes: 59 additions & 0 deletions src/components/PopUpFooter.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import { Box, Link, styled, } from '@mui/material';
import React, { useState, } from 'react';
import { useTranslation, } from 'react-i18next';

import { About, Disclaimer, Privacy, Terms, } from '../screens';

import { Footer, } from './Footer';

const ClickableLink = styled(Link)`
cursor : pointer;
`;

export const PopUpFooter = () => {
const [ showTerms, setShowTerms, ] = useState<boolean>(false);
const [ showPrivacy, setShowPrivacy, ] = useState<boolean>(false);
const [ showDisclaimer, setShowDisclaimer, ] = useState<boolean>(false);
const [ showAbout, setShowAbout, ] = useState<boolean>(false);

const { t, } = useTranslation();

const handleShowTerms = () => setShowTerms(true);

const handleShowPrivacy = () => setShowPrivacy(true);

const handleShowDisclaimer = () => setShowDisclaimer(true);

const handleShowAbout = () => setShowAbout(true);

const handleCloseTerms = () => setShowTerms(false);

const handleClosePrivacy = () => setShowPrivacy(false);

const handleCloseDisclaimer = () => setShowDisclaimer(false);

const handleCloseAbout = () => setShowAbout(false);

return (
<>
<Footer>
<Box margin={2}>
<ClickableLink onClick={handleShowTerms}>{t('label_terms_title')}</ClickableLink>
</Box>
<Box margin={2}>
<ClickableLink onClick={handleShowPrivacy}>{t('label_privacy_title')}</ClickableLink>
</Box>
<Box margin={2}>
<ClickableLink onClick={handleShowDisclaimer}>{t('label_disclaimer_title')}</ClickableLink>
</Box>
<Box margin={2}>
<ClickableLink onClick={handleShowAbout}>{t('label_about_title')}</ClickableLink>
</Box>
</Footer>
{showTerms && <Terms onClose={handleCloseTerms} />}
{showPrivacy && <Privacy onClose={handleClosePrivacy} />}
{showDisclaimer && <Disclaimer onClose={handleCloseDisclaimer} />}
{showAbout && <About onClose={handleCloseAbout} />}
</>
);
};
42 changes: 0 additions & 42 deletions src/components/__snapshots__/ActionBar.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,48 +44,6 @@ exports[`<ActionBar /> renders correctly 1`] = `
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
<button
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-11b5pux-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
type="button"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
data-testid="LinkedInIcon"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.79M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z"
/>
</svg>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
<button
aria-label="action_about"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-11b5pux-MuiButtonBase-root-MuiIconButton-root"
data-mui-internal-clone-element="true"
tabindex="0"
type="button"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
data-testid="InfoOutlinedIcon"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
/>
</svg>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</div>
<div
class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6 css-1hhkil3-MuiGrid-root"
Expand Down
1 change: 1 addition & 0 deletions src/components/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,5 +6,6 @@ export { ItemList, } from './ItemList';
export { Loading, } from './Loading';
export { MarkdownDialog, } from './MarkdownDialog';
export { PopUpDialog, } from './PopUpDialog';
export { PopUpFooter, } from './PopUpFooter';
export { SearchBox, } from './SearchBox';
export { SelectableItem, } from './SelectableItem';
41 changes: 3 additions & 38 deletions src/screens/Home.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,23 @@
import { InstallDesktop, } from '@mui/icons-material';
import { Badge, Box, Grid, IconButton, Link, styled, ToggleButton, Tooltip, } from '@mui/material';
import { Badge, Box, Grid, IconButton, styled, ToggleButton, Tooltip, } from '@mui/material';
import { render, } from 'ejs';
import { useGA4React, } from 'ga-4-react';
import React, { useEffect, useState, } from 'react';
import { useTranslation, } from 'react-i18next';
import { v4, } from 'uuid';

import { ActionBar, FilteredItemGrid, Footer, Loading, SearchBox, } from '../components';
import { ActionBar, FilteredItemGrid, Loading, PopUpFooter, SearchBox, } from '../components';
import { useAppSelector, } from '../hooks';
import type { Session, } from '../models';

import { Disclaimer, } from './Disclaimer';
import { Privacy, } from './Privacy';
import { SessionDetail, } from './SessionDetail';
import { Terms, } from './Terms';

const FlexBox = styled(Box)`
height : 100%;
display : flex;
flex-direction : column;
`;

const ClickableLink = styled(Link)`
cursor : pointer;
`;

const RightAlignedToggleButton = styled(ToggleButton)(({ theme, }) => ({
marginLeft : theme.spacing(2),
float : 'right',
Expand All @@ -44,9 +37,6 @@ export const Home = () => {
const [ showSelected, setShowSelected, ] = useState<boolean>(false);
const [ savedSession, setSavedSession, ] = useState<Session | undefined>();
const [ showSessionDetail, setShowSessionDetail, ] = useState<boolean>(false);
const [ showTerms, setShowTerms, ] = useState<boolean>(false);
const [ showPrivacy, setShowPrivacy, ] = useState<boolean>(false);
const [ showDisclaimer, setShowDisclaimer, ] = useState<boolean>(false);

const { t, } = useTranslation();

Expand Down Expand Up @@ -86,35 +76,13 @@ export const Home = () => {
setSavedSession(undefined);
};

const handleShowTerms = () => setShowTerms(true);

const handleShowPrivacy = () => setShowPrivacy(true);

const handleShowDisclaimer = () => setShowDisclaimer(true);

const handleCloseTerms = () => setShowTerms(false);

const handleClosePrivacy = () => setShowPrivacy(false);

const handleCloseDisclaimer = () => setShowDisclaimer(false);

useEffect(() => {
if (ga) ga.pageview('/');
}, [ ga, ]);

return (
<>
<Footer>
<Box margin={2}>
<ClickableLink onClick={handleShowTerms}>{t('label_terms_title')}</ClickableLink>
</Box>
<Box margin={2}>
<ClickableLink onClick={handleShowPrivacy}>{t('label_privacy_title')}</ClickableLink>
</Box>
<Box margin={2}>
<ClickableLink onClick={handleShowDisclaimer}>{t('label_disclaimer_title')}</ClickableLink>
</Box>
</Footer>
<PopUpFooter />
<FlexBox>
<ActionBar
title={t('app_name')}
Expand Down Expand Up @@ -167,9 +135,6 @@ export const Home = () => {
onClose={handleCloseSession} />
)}
{showSessionDetail && !savedSession && <Loading />}
{showTerms && <Terms onClose={handleCloseTerms} />}
{showPrivacy && <Privacy onClose={handleClosePrivacy} />}
{showDisclaimer && <Disclaimer onClose={handleCloseDisclaimer} />}
</FlexBox>
</>
);
Expand Down
Loading

0 comments on commit c1a5e55

Please sign in to comment.