Merge pull request #52 from sitek94/development

Refactoring, improving responsiveness and fixing some issues

package.json

@@ -1,6 +1,6 @@
 {
   "name": "habit-tracker",
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0-alpha.3",
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.1.1",
@@ -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",

public/index.html

@@ -9,7 +9,6 @@
   <meta name="description" content="Web site created using create-react-app" />
   <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
   <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
   <title>Habit Tracker</title>
 </head>
 

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'));

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 (
+    <Box
+      clone
+      sx={{
+        textTransform: 'none',
+      }}
+    >
+      <Button color="inherit" component={RouterLink} to="/" disableRipple>
+        <Typography variant="h6">{process.env.REACT_APP_TITLE}</Typography>
+      </Button>
+    </Box>
+  );
+}
+
+export { AppTitle };

src/app/unathenticated-app/footer.js

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { Box } from '@material-ui/core';
+import { useMatch } from 'react-router';
+
+const landing = {
+  color: 'common.white',
+  bgColor: 'transparent',
+  opacity: 0.7,
+};
+const authentication = {
+  color: { xs: 'text.secondary', sm: 'common.white' },
+  bgcolor: { xs: 'background.paper', sm: 'transparent' },
+  opacity: { sm: 0.7 },
+};
+
+/**
+ * It changes `color` and `bgcolor` when the screen size is `xs`
+ */
+function Footer({ children }) {
+  const matches = useMatch('/');
+
+  const style = matches ? landing : authentication;
+
+  return (
+    <Box
+      component="footer"
+      sx={{
+        ...style,
+        textAlign: 'center',
+      }}
+    >
+      {children}
+    </Box>
+  );
+}
+
+export { Footer };

src/app/unathenticated-app/index.js

@@ -0,0 +1 @@
+export { UnathenticatedApp } from './unauthenticated-app';

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 (
+    <BackgroundImage>
+      <Box
+        sx={{
+          minHeight: '100vh',
+          maxWidth: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'space-between',
+        }}
+      >
+        {children}
+      </Box>
+    </BackgroundImage>
+  );
+}
+
+/**
+ * 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 (
+    <Box
+      clone
+      sx={{
+        background: `
+          linear-gradient(
+            to right bottom, 
+            ${alpha(lightRgb, 0.3)}, 
+            ${alpha(darkRgb, 0.8)}), 
+          url(${hero})`,
+        backgroundSize: 'cover',
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: 'center',
+      }}
+    >
+      {children}
+    </Box>
+  );
+}
+
+export { Layout };

src/app/unathenticated-app/main-content.js

@@ -0,0 +1,24 @@
+import { Box } from '@material-ui/core';
+
+/**
+ * Main content wrapper
+ */
+function MainContent({ children }) {
+  return (
+    <Box
+      component="main"
+      sx={{
+        height: '100%',
+        flex: '1 0 auto',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      {children}
+    </Box>
+  );
+}
+
+export { MainContent };

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 (
+    <AppBar color="inherit" position="absolute">
+      <Toolbar>{children}</Toolbar>
+    </AppBar>
+  );
+}
+
+/**
+ * Uses `margin-rigth: auto` to push other elements to the right.
+ */
+function NavbarStartItem({ children }) {
+  return <Box sx={{ marginRight: 'auto' }}>{children}</Box>;
+}
+
+/**
+ * `MuiButton` with `RouterLink` as component
+ */
+function NavbarRouterLink(props) {
+  return (
+    <Button
+      component={RouterLink}
+      color="inherit"
+      disableElevation
+      {...props}
+    />
+  );
+}
+
+export { Navbar, NavbarStartItem, NavbarRouterLink };

src/app/unathenticated-app/unauthenticated-app.js

@@ -0,0 +1,174 @@
+import * as React from 'react';
+import { Link as RouterLink, Navigate, Route, Routes } from 'react-router-dom';
+import {
+  Button,
+  ButtonGroup,
+  Hidden,
+  IconButton,
+  Toolbar,
+  Tooltip,
+  useTheme,
+} from '@material-ui/core';
+import {
+  AccountCircle as AccountCircleIcon,
+  Brightness4 as MoonIcon,
+  Brightness7 as SunIcon,
+  GitHub as GitHubIcon,
+  PersonAdd as PersonAddIcon,
+} from '@material-ui/icons';
+import {
+  MobileMenu,
+  MobileMenuItem,
+  MobileMenuProvider,
+  MobileMenuToggler,
+} from 'components/mobile-menu';
+
+import { Copyright } from 'components/copyright';
+import { LocaleSelect } from 'components/locale-select';
+import { LandingScreen } from 'screens/landing';
+import { ResetPasswordScreen } from 'screens/reset-password';
+import { SignInScreen } from 'screens/sign-in';
+import { SignUpScreen } from 'screens/sign-up';
+import { useTranslation } from 'translations';
+import { AppTitle } from './app-title';
+import { Footer } from './footer';
+import { Layout } from './layout';
+import { MainContent } from './main-content';
+import { Navbar, NavbarStartItem } from './navbar';
+
+const githubProps = {
+  target: '_blank',
+  rel: 'noopener noreferrer',
+  href: process.env.REACT_APP_GITHUB_LINK,
+};
+
+const iconButtonProps = {
+  edge: 'start',
+  color: 'inherit',
+};
+
+/**
+ * Version of the app when user is not authenticated.
+ */
+function UnathenticatedApp() {
+  const t = useTranslation();
+  const { palette, toggleDarkMode } = useTheme();
+
+  // Dark mode
+  const darkModeLabel = t('darkModeSwitch');
+  const darkModeIcon = palette.mode === 'light' ? <MoonIcon /> : <SunIcon />;
+
+  // Github
+  const githubLabel = t('githubRepo');
+
+  return (
+    <Layout>
+      {/* Navbar */}
+      <MobileMenuProvider>
+        <Navbar>
+          <NavbarStartItem>
+            <AppTitle />
+          </NavbarStartItem>
+
+          {/* Screens larger than `xs` */}
+          <Hidden smDown>
+            {/* Locale select */}
+            <LocaleSelect />
+
+            {/* Dark mode switch */}
+            <Tooltip title={darkModeLabel}>
+              <IconButton
+                aria-label={darkModeLabel}
+                onClick={toggleDarkMode}
+                {...iconButtonProps}
+              >
+                {darkModeIcon}
+              </IconButton>
+            </Tooltip>
+
+            {/* Github repo link */}
+            <Tooltip title={githubLabel}>
+              <IconButton
+                aria-label={githubLabel}
+                {...iconButtonProps}
+                {...githubProps}
+              >
+                <GitHubIcon />
+              </IconButton>
+            </Tooltip>
+
+            {/* Sign in/up */}
+            <ButtonGroup variant="outlined" color="inherit">
+              <Button component={RouterLink} to="/signin">
+                {t('signIn')}
+              </Button>
+              <Button component={RouterLink} to="/signup">
+                {t('signUp')}
+              </Button>
+            </ButtonGroup>
+          </Hidden>
+
+          <Hidden smUp>
+            {/* Toggle mobile menu */}
+            <MobileMenuToggler />
+          </Hidden>
+        </Navbar>
+        <MobileMenu>
+          {/* Sign in */}
+          <MobileMenuItem component={RouterLink} to="signin">
+            <IconButton edge="start">
+              <AccountCircleIcon />
+            </IconButton>
+            <p>{t('signIn')}</p>
+          </MobileMenuItem>
+
+          {/* Sign up */}
+          <MobileMenuItem component={RouterLink} to="signup">
+            <IconButton edge="start">
+              <PersonAddIcon />
+            </IconButton>
+            <p>{t('signUp')}</p>
+          </MobileMenuItem>
+
+          {/* Github repo link */}
+          <MobileMenuItem>
+            <IconButton edge="start">
+              <GitHubIcon />
+            </IconButton>
+            <p>{githubLabel}</p>
+          </MobileMenuItem>
+
+          {/* Locale select */}
+          <LocaleSelect variant="item" />
+
+          {/* Dark mode switch */}
+          <MobileMenuItem onClick={toggleDarkMode}>
+            <IconButton edge="start">{darkModeIcon}</IconButton>
+            <p>{t('darkModeSwitch')}</p>
+          </MobileMenuItem>
+        </MobileMenu>
+      </MobileMenuProvider>
+
+      {/* Main content */}
+      <MainContent>
+        {/* Offset for navbar */}
+        <Toolbar />
+
+        <Routes>
+          <Route path="/" element={<LandingScreen />} />
+          <Route path="/signin" element={<SignInScreen />} />
+          <Route path="/signup" element={<SignUpScreen />} />
+          <Route path="/reset-password" element={<ResetPasswordScreen />} />
+          <Route path="*" element={<Navigate to="/" />} />
+        </Routes>
+      </MainContent>
+
+      {/* Footer */}
+      <Footer>
+        <Copyright />
+      </Footer>
+    </Layout>
+  );
+}
+
+export { UnathenticatedApp };