UserPage toolbar re-design (#69)

* replaced brand png icons with svg counterparts

* comps to use svg counterpart of graphics

* revert qr-logo back to png version

* theme changes

* revamp dialog to create link

* basic revamped user page layout

* refactor tool bar components for less coupling

* decoupled, revamped, responsify toolbar comps

* refactor and revamp url table

* change app margins to a hook, and hover row fix

* set a different top margin for user page header

* improve contract of table cell bottom border

* minor tweak in table for mobile view

* add back table cells for empty table row indicator

* removed filter adornment since logic is not impl

* improve gracefulness of toolbar collapse

* improve const var name

* eslint changes

package.json

@@ -26,6 +26,7 @@
     "@material-ui/core": "^4.9.7",
     "@sentry/browser": "^5.15.4",
     "@types/classnames": "^2.2.10",
+    "@types/lodash": "^4.14.150",
     "@types/node": "^10.14.5",
     "@types/react-redux": "^7.1.7",
     "@types/react-router-dom": "^5.1.4",

src/client/components/AppMargins/index.jsx

@@ -2,35 +2,21 @@ import React from 'react'
 import classNames from 'classnames'
 import { createStyles, makeStyles } from '@material-ui/core'
 
-function fetchAppMargins(theme, leftMultiplier, rightMultiplier) {
-  return {
-    marginLeft: theme.spacing(4 * leftMultiplier),
-    marginRight: theme.spacing(4 * rightMultiplier),
-    [theme.breakpoints.up('sm')]: {
-      marginLeft: theme.spacing(8 * leftMultiplier),
-      marginRight: theme.spacing(8 * rightMultiplier),
-    },
-    [theme.breakpoints.up('md')]: {
-      marginLeft: theme.spacing(12 * leftMultiplier),
-      marginRight: theme.spacing(12 * rightMultiplier),
-    },
-    [theme.breakpoints.up('lg')]: {
-      marginLeft: theme.spacing(16 * leftMultiplier),
-      marginRight: theme.spacing(16 * rightMultiplier),
-    },
-  }
-}
+import useAppMargins from './useAppMargins'
 
-const useStyles = makeStyles((theme) =>
+const useStyles = makeStyles(() =>
   createStyles({
     applyAppMarginsContainer: {
-      ...fetchAppMargins(theme, 1, 1),
+      marginLeft: (props) => props.appMargins,
+      marginRight: (props) => props.appMargins,
     },
     ignoreAppMarginsContainer: {
-      ...fetchAppMargins(theme, -1, -1),
+      marginLeft: (props) => -props.appMargins,
+      marginRight: (props) => -props.appMargins,
     },
     ignoreAppRightMarginsContainer: {
-      ...fetchAppMargins(theme, 0, -1),
+      marginLeft: 0,
+      marginRight: (props) => -props.appMargins,
     },
     layout: {
       flexGrow: 1,
@@ -39,7 +25,8 @@ const useStyles = makeStyles((theme) =>
 )
 
 export const ApplyAppMargins = ({ className, children }) => {
-  const classes = useStyles()
+  const appMargins = useAppMargins()
+  const classes = useStyles({ appMargins })
   return (
     <div className={classNames(className, classes.applyAppMarginsContainer)}>
       {children}
@@ -48,7 +35,8 @@ export const ApplyAppMargins = ({ className, children }) => {
 }
 
 export const IgnoreAppMargins = ({ className, children }) => {
-  const classes = useStyles()
+  const appMargins = useAppMargins()
+  const classes = useStyles({ appMargins })
   return (
     <div className={classNames(className, classes.ignoreAppMarginsContainer)}>
       {children}
@@ -57,7 +45,8 @@ export const IgnoreAppMargins = ({ className, children }) => {
 }
 
 export const IgnoreAppRightMargins = ({ className, children }) => {
-  const classes = useStyles()
+  const appMargins = useAppMargins()
+  const classes = useStyles({ appMargins })
   return (
     <div
       className={classNames(className, classes.ignoreAppRightMarginsContainer)}

src/client/components/AppMargins/useAppMargins.js

@@ -0,0 +1,21 @@
+import { useMediaQuery, useTheme } from '@material-ui/core'
+
+const useAppMargins = () => {
+  const theme = useTheme()
+  const xsWidth = useMediaQuery(theme.breakpoints.only('xs'))
+  const smWidth = useMediaQuery(theme.breakpoints.only('sm'))
+  const mdWidth = useMediaQuery(theme.breakpoints.only('md'))
+
+  if (xsWidth) {
+    return theme.spacing(4)
+  }
+  if (smWidth) {
+    return theme.spacing(8)
+  }
+  if (mdWidth) {
+    return theme.spacing(12)
+  }
+  return theme.spacing(16)
+}
+
+export default useAppMargins

src/client/components/BaseLayout/BaseLayoutHeader.jsx

@@ -23,10 +23,12 @@ const useStyles = makeStyles((theme) =>
       paddingTop: theme.spacing(2),
       paddingBottom: theme.spacing(2),
       [theme.breakpoints.up('md')]: {
-        paddingTop: theme.spacing(4),
+        paddingTop: (props) =>
+          props.isLoggedIn ? theme.spacing(2) : theme.spacing(4),
       },
       [theme.breakpoints.up('lg')]: {
-        paddingTop: theme.spacing(6),
+        paddingTop: (props) =>
+          props.isLoggedIn ? theme.spacing(2) : theme.spacing(6),
       },
     },
     toolbar: {
@@ -67,7 +69,7 @@ const mapDispatchToProps = (dispatch) => ({
 })
 
 const BaseLayoutHeader = ({ backgroundType, isLoggedIn, logout }) => {
-  const classes = useStyles()
+  const classes = useStyles({ isLoggedIn })
 
   const headers = [
     {

src/client/components/BaseLayout/index.jsx

@@ -6,25 +6,6 @@ import Masthead from './Masthead'
 import BaseLayoutHeader from './BaseLayoutHeader'
 import BaseLayoutFooter from './BaseLayoutFooter'
 
-export const fetchAppMargins = (theme, multiplier = 1) => {
-  return {
-    marginLeft: theme.spacing(4 * multiplier),
-    marginRight: theme.spacing(4 * multiplier),
-    [theme.breakpoints.up('sm')]: {
-      marginLeft: theme.spacing(6 * multiplier),
-      marginRight: theme.spacing(6 * multiplier),
-    },
-    [theme.breakpoints.up('md')]: {
-      marginLeft: theme.spacing(8 * multiplier),
-      marginRight: theme.spacing(8 * multiplier),
-    },
-    [theme.breakpoints.up('lg')]: {
-      marginLeft: theme.spacing(12 * multiplier),
-      marginRight: theme.spacing(12 * multiplier),
-    },
-  }
-}
-
 const useStyles = makeStyles(() =>
   createStyles({
     '@global': {

src/client/components/RootPage/index.jsx

@@ -26,11 +26,11 @@ import {
   USER_PAGE,
   snackbarVariants,
 } from '~/util/types'
-import theme from '~/styles/theme'
+import theme from '../../theme'
 
 const snackbars = Object.values(snackbarVariants).map((variant) => (
   <MessageSnackbar key={variant} variant={variant} />
-)) // eslint-disable-line max-len
+))
 const Root = ({ store }) => (
   <Provider store={store}>
     <MuiThemeProvider theme={theme}>

src/client/components/UserPage/Modals/CreateUrlModal/CreateLinkForm.jsx

@@ -18,10 +18,12 @@ import {
 import ModalMargins from '../ModalMargins'
 
 // Height of the text field in the create link dialog.
-const textFieldHeight = 44
+const TEXT_FIELD_HEIGHT = 44
 
 const FormStartAdorment = ({ children }) => {
-  const classes = useCreateLinkFormStyles({ textFieldHeight })
+  const classes = useCreateLinkFormStyles({
+    textFieldHeight: TEXT_FIELD_HEIGHT,
+  })
   return (
     <InputAdornment className={classes.startAdorment} position="start">
       <Typography className={classes.startAdormentText} color="textSecondary">
@@ -39,7 +41,9 @@ export default function CreateLinkForm({
   setLongUrl,
   setRandomShortUrl,
 }) {
-  const classes = useCreateLinkFormStyles({ textFieldHeight })
+  const classes = useCreateLinkFormStyles({
+    textFieldHeight: TEXT_FIELD_HEIGHT,
+  })
   return (
     <>
       <Divider />