From 575d57b2f9b58200fe5ffc527342e44d0fd0b618 Mon Sep 17 00:00:00 2001 From: sitek94 Date: Wed, 16 Dec 2020 11:50:05 +0100 Subject: [PATCH 01/12] add roboto font --- package.json | 1 + public/index.html | 1 - src/index.js | 4 ++++ yarn.lock | 5 +++++ 4 files changed, 10 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 3e0d90d..8390b8c 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "clsx": "^1.1.1", "date-fns": "^2.16.1", "firebase": "^8.0.0", + "fontsource-roboto": "^3.1.5", "history": "^5.0.0", "lodash": "^4.17.20", "mdi-material-ui": "^6.20.0", diff --git a/public/index.html b/public/index.html index b1329ed..5b6d6f8 100644 --- a/public/index.html +++ b/public/index.html @@ -9,7 +9,6 @@ - Habit Tracker diff --git a/src/index.js b/src/index.js index dd775e2..5b53a7a 100644 --- a/src/index.js +++ b/src/index.js @@ -3,6 +3,10 @@ import { render } from 'react-dom'; import { App } from 'app'; import { AppProviders } from 'context'; import reportWebVitals from './reportWebVitals'; +import 'fontsource-roboto/300.css'; +import 'fontsource-roboto/400.css'; +import 'fontsource-roboto/500.css'; +import 'fontsource-roboto/700.css'; render( diff --git a/yarn.lock b/yarn.lock index 6ec4e7e..5e2ddf8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6175,6 +6175,11 @@ follow-redirects@^1.0.0: resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.1.tgz#5f69b813376cee4fd0474a3aba835df04ab763b7" integrity sha512-SSG5xmZh1mkPGyKzjZP8zLjltIfpW32Y5QpdNJyjcfGxK3qo3NDDkZOZSFiGn1A6SclQxY9GzEwAHQ3dmYRWpg== +fontsource-roboto@^3.1.5: + version "3.1.5" + resolved "https://registry.yarnpkg.com/fontsource-roboto/-/fontsource-roboto-3.1.5.tgz#d5da8bac968db7911e20fd2fb6c227d405f86cba" + integrity sha512-DXSE7/F/6AsKcRJX4VSi3bGrEx0xiaqieeV2W7UH9JFk6tt1U86NoWwy2iNPoUzGtEyQsasilwhTrMJm7wM+Ew== + for-in@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80" From 39fb48e56cba9351fd44abf61d52ccf91521eaf6 Mon Sep 17 00:00:00 2001 From: sitek94 Date: Wed, 16 Dec 2020 16:07:29 +0100 Subject: [PATCH 02/12] refactor component --- src/components/copyright.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/copyright.js b/src/components/copyright.js index ab76ab5..15956b7 100644 --- a/src/components/copyright.js +++ b/src/components/copyright.js @@ -1,12 +1,10 @@ import * as React from 'react'; -import { Box, Typography } from '@material-ui/core'; +import { Typography } from '@material-ui/core'; function Copyright(props) { return ( - - Copyright © {new Date().getFullYear()} Maciek Sitkowski - + Copyright © 2020 Maciek Sitkowski ); } From 1fafde58bf3a037d53b43655492178081682197e Mon Sep 17 00:00:00 2001 From: sitek94 Date: Wed, 16 Dec 2020 16:32:07 +0100 Subject: [PATCH 03/12] refactor `` using compound components --- src/app/app.js | 2 +- src/app/unathenticated-app/app-title.js | 23 ++ src/app/unathenticated-app/footer.js | 23 ++ src/app/unathenticated-app/index.js | 1 + src/app/unathenticated-app/layout.js | 55 +++++ src/app/unathenticated-app/main-content.js | 24 ++ src/app/unathenticated-app/navbar.js | 37 ++++ .../unathenticated-app/unauthenticated-app.js | 174 +++++++++++++++ src/app/unauthenticated-app.js | 207 ------------------ src/components/copyright.js | 2 +- src/components/dark-mode-switch.js | 42 ---- src/components/mobile-menu.js | 108 +++++++++ src/layout/authenticated-layout.js | 1 - src/layout/unathenticated-layout.js | 74 ------- 14 files changed, 447 insertions(+), 326 deletions(-) create mode 100644 src/app/unathenticated-app/app-title.js create mode 100644 src/app/unathenticated-app/footer.js create mode 100644 src/app/unathenticated-app/index.js create mode 100644 src/app/unathenticated-app/layout.js create mode 100644 src/app/unathenticated-app/main-content.js create mode 100644 src/app/unathenticated-app/navbar.js create mode 100644 src/app/unathenticated-app/unauthenticated-app.js delete mode 100644 src/app/unauthenticated-app.js delete mode 100644 src/components/dark-mode-switch.js create mode 100644 src/components/mobile-menu.js delete mode 100644 src/layout/unathenticated-layout.js diff --git a/src/app/app.js b/src/app/app.js index 3d09e30..a790edc 100644 --- a/src/app/app.js +++ b/src/app/app.js @@ -3,7 +3,7 @@ import * as React from 'react'; import { useAuth } from 'context/auth-context'; // import { FullPageSpinner } from 'components/lib'; import AuthenticatedApp from './authenticated-app'; -import UnathenticatedApp from './unauthenticated-app'; +import { UnathenticatedApp } from './unathenticated-app'; import { AuthenticatedAppProviders } from 'context'; // const AuthenticatedApp = React.lazy(() => import('./authenticated-app')); diff --git a/src/app/unathenticated-app/app-title.js b/src/app/unathenticated-app/app-title.js new file mode 100644 index 0000000..a9ce76c --- /dev/null +++ b/src/app/unathenticated-app/app-title.js @@ -0,0 +1,23 @@ +import * as React from 'react'; +import { Box, Button, Typography } from '@material-ui/core'; +import { Link as RouterLink } from 'react-router-dom'; + +/** + * Displays app name as a link to `/` route + */ +function AppTitle() { + return ( + + + + ); +} + +export { AppTitle }; diff --git a/src/app/unathenticated-app/footer.js b/src/app/unathenticated-app/footer.js new file mode 100644 index 0000000..08a82cd --- /dev/null +++ b/src/app/unathenticated-app/footer.js @@ -0,0 +1,23 @@ +import * as React from 'react'; +import { Box } from '@material-ui/core'; + +/** + * It changes `color` and `bgcolor` when the screen size is `xs` + */ +function Footer({ children }) { + return ( + + {children} + + ); +} + +export { Footer }; diff --git a/src/app/unathenticated-app/index.js b/src/app/unathenticated-app/index.js new file mode 100644 index 0000000..98748d7 --- /dev/null +++ b/src/app/unathenticated-app/index.js @@ -0,0 +1 @@ +export { UnathenticatedApp } from './unauthenticated-app'; \ No newline at end of file diff --git a/src/app/unathenticated-app/layout.js b/src/app/unathenticated-app/layout.js new file mode 100644 index 0000000..dddf759 --- /dev/null +++ b/src/app/unathenticated-app/layout.js @@ -0,0 +1,55 @@ +import * as React from 'react'; +import { alpha, Box, hexToRgb, useTheme } from '@material-ui/core'; +import hero from 'images/hero.jpg'; + +/** + * Layout with background image + */ +function Layout({ children }) { + return ( + + + {children} + + + ); +} + +/** + * Clones child component and adds a background image styles. + */ +function BackgroundImage({ children }) { + const { light, dark } = useTheme().palette.primary; + + const lightRgb = hexToRgb(light); + const darkRgb = hexToRgb(dark); + + return ( + + {children} + + ); +} + +export { Layout }; diff --git a/src/app/unathenticated-app/main-content.js b/src/app/unathenticated-app/main-content.js new file mode 100644 index 0000000..a459df6 --- /dev/null +++ b/src/app/unathenticated-app/main-content.js @@ -0,0 +1,24 @@ +import { Box } from '@material-ui/core'; + +/** + * Main content wrapper + */ +function MainContent({ children }) { + return ( + + {children} + + ); +} + +export { MainContent }; diff --git a/src/app/unathenticated-app/navbar.js b/src/app/unathenticated-app/navbar.js new file mode 100644 index 0000000..51d8551 --- /dev/null +++ b/src/app/unathenticated-app/navbar.js @@ -0,0 +1,37 @@ +import * as React from 'react'; +import { AppBar, Box, Button, Toolbar } from '@material-ui/core'; +import { Link as RouterLink } from 'react-router-dom'; + +/** + * Navbar wrapper + */ +function Navbar({ children }) { + return ( + + {children} + + ); +} + +/** + * Pushes other elements to the right. + */ +function NavbarStartItem({ children }) { + return {children}; +} + +/** + * `MuiButton` with `RouterLink` as component + */ +function NavbarRouterLink(props) { + return ( + + + + + + + {/* Toggle mobile menu */} + + + + + {/* Sign in */} + + + + +

{t('signIn')}

+ + + {/* Sign up */} + + + + +

{t('signUp')}

+ + + {/* Github repo link */} + + + + +

{githubLabel}

+ + + {/* Locale select */} + + + {/* Dark mode switch */} + + {darkModeIcon} +

{t('darkModeSwitch')}

+ + + + + {/* Main content */} + + {/* Offset for navbar */} + + + + } /> + } /> + } /> + } /> + } /> + + + + {/* Footer */} +
+ +
+ + ); +} + +export { UnathenticatedApp }; diff --git a/src/app/unauthenticated-app.js b/src/app/unauthenticated-app.js deleted file mode 100644 index b6d6ca7..0000000 --- a/src/app/unauthenticated-app.js +++ /dev/null @@ -1,207 +0,0 @@ -import * as React from 'react'; -import Button from '@material-ui/core/Button'; -import { Link as RouterLink, Navigate, Route, Routes } from 'react-router-dom'; -import { - AccountCircle as AccountCircleIcon, - PersonAdd as PersonAddIcon, - MoreVert as MoreVertIcon, -} from '@material-ui/icons'; -import { - AppBar, - ButtonGroup, - Hidden, - IconButton, - Menu, - MenuItem, - makeStyles, - Toolbar, - Typography, - Box, -} from '@material-ui/core'; -import { FullPageImageBackground, LandingScreen } from 'screens/landing'; -import { ResetPasswordScreen } from 'screens/reset-password'; -import { SignInScreen } from 'screens/sign-in'; -import { SignUpScreen } from 'screens/sign-up'; -import { LocaleSelect } from 'components/locale-select'; -import { useTranslation } from 'translations'; -import { GithubRepoLink } from 'components/github-repo-link'; -import { DarkModeSwitch } from 'components/dark-mode-switch'; -import { Copyright } from 'components/copyright'; - -const useStyles = makeStyles((theme) => ({ - // App - container: { - height: '100vh', - width: '100%', - }, - content: { - height: '100%', - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - justifyContent: 'center', - }, - - // Nav - toolbar: { - justifyContent: 'flex-end', - color: theme.palette.text.primary, - }, - title: { - marginRight: 'auto', - textTransform: 'none', - }, - - // Button group - buttonGroup: { - marginLeft: 12, - }, -})); - -// App -function UnathenticatedApp() { - const classes = useStyles(); - - return ( -
-
- ); -} - -// Nav link -function NavButton(props) { - return ( -