Merge pull request #187 from dzcode-io/163-navbar-General-UI-UX-changes

163 Header UI/UX changes

Author: souhaib-benbouzid

data/.eslintignore

@@ -5,3 +5,4 @@ dist
 !*.ts
 !*.js
 !*.json
+*.svg

data/.prettierignore

@@ -1,4 +1,4 @@
 node_modules/
 dist
-*.eslintignore
+*.prettierignore
 *.tsbuildinfo

data/eslint.eslintignore renamed to data/eslint.prettierignore

@@ -1,9 +1,10 @@
 node_modules/
 dist
 .*
-*.eslintignore
+*.prettierignore
 *.tsbuildinfo
 *.tsx
 *.ts
 *.js
 *.json
+*.svg

data/package.json

@@ -5,8 +5,8 @@
   "scripts": {
     "eslint:check": "eslint \"**/*.*\" --report-unused-disable-directives",
     "eslint:fix": "eslint \"**/*.*\" --quiet --fix",
-    "prettier:check": "prettier \"**/*.*\" --check --ignore-path ./eslint.eslintignore",
-    "prettier:fix": "prettier \"**/*.*\" --write --ignore-path ./eslint.eslintignore",
+    "prettier:check": "prettier \"**/*.*\" --check --ignore-path ./eslint.prettierignore",
+    "prettier:fix": "prettier \"**/*.*\" --write --ignore-path ./eslint.prettierignore",
     "build": "tsc",
     "generate": "node dist/build.js",
     "build:watch": "tsc --watch",

frontend/.eslintignore

@@ -5,3 +5,4 @@ firebase
 !*.ts
 !*.js
 !*.json
+*.svg

frontend/.prettierignore

@@ -1,5 +1,5 @@
 firebase
 node_modules/
 dist
-*.eslintignore
+*.prettierignore
 *.tsbuildinfo

frontend/eslint.eslintignore renamed to frontend/eslint.prettierignore

@@ -5,12 +5,14 @@ dist
 # images
 *.jpeg
 *.png
+*.svg
 *.ico
 
 
-*.eslintignore
+*.prettierignore
 *.tsbuildinfo
 *.tsx
 *.ts
 *.js
 *.json
+

frontend/package.json

@@ -7,8 +7,8 @@
     "dev": "yarn clear && cross-env NODE_ENV=development webpack-dev-server --config ./webpack.config.js -wd --hot",
     "eslint:check": "eslint \"**/*.*\" --report-unused-disable-directives",
     "eslint:fix": "eslint \"**/*.*\" --quiet --fix",
-    "prettier:check": "prettier \"**/*.*\" --check --ignore-path ./eslint.eslintignore",
-    "prettier:fix": "prettier \"**/*.*\" --write --ignore-path ./eslint.eslintignore",
+    "prettier:check": "prettier \"**/*.*\" --check --ignore-path ./eslint.prettierignore",
+    "prettier:fix": "prettier \"**/*.*\" --write --ignore-path ./eslint.prettierignore",
     "test": "echo 0",
     "build": "yarn clear cross-env && NODE_ENV=production webpack --config ./webpack.config.js --display-error-details",
     "generate:sitemap": "node src/build/sitemap.js"

frontend/src/apps/main/assets/svg/scrum-board.svg

@@ -4,6 +4,7 @@ import { animated, useSpring } from "react-spring";
 import { useDispatch, useSelector } from "react-redux";
 import FormControlLabel from "@material-ui/core/FormControlLabel";
 import Grid from "@material-ui/core/Grid";
+import Hidden from "@material-ui/core/Hidden";
 import IconButton from "@material-ui/core/IconButton";
 import IosSwitch from "./ios-switch";
 import { LinkV2 } from "src/components/link-v2";
@@ -27,17 +28,27 @@ const useStyles = makeStyles((theme: Theme) =>
       zIndex: 100,
       width: "100%",
     },
+    TopBar: {
+      background: theme.palette.background.default,
+      borderBottom: `1px solid ${theme.palette.background.paper}`,
+      margin: 0,
+      padding: " 5px 0",
 
+      display: "flex",
+      justifyContent: "flex-end",
+      [theme.breakpoints.down("sm")]: {
+        padding: " 0 20px",
+      },
+    },
+    switch: {
+      marginLeft: "auto",
+    },
     icon: {
       color: theme.palette.grey[100],
     },
     button: {
       color: theme.palette.grey[100],
     },
-    toolbar: {
-      borderBottom: `1px solid ${theme.palette.background.paper}`,
-      background: theme.palette.background.default,
-    },
     toolbarContainer: {
       maxWidth: theme.breakpoints.values.lg,
       margin: "auto",
@@ -48,17 +59,27 @@ const useStyles = makeStyles((theme: Theme) =>
       borderBottom: `1px solid ${theme.palette.background.paper}`,
     },
     toolbarTitle: {
-      flex: 1,
+      marginRight: "auto",
     },
     toolbarLink: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
       color: theme.palette.text.primary,
-      padding: theme.spacing(1),
+      fontSize: "16px",
+      fontWeight: "revert",
+      padding: theme.spacing(4),
+      paddingTop: 0,
+      paddingBottom: 0,
       flexShrink: 0,
       textDecoration: "none",
       "&:hover": {
         textDecoration: "none",
         color: theme.palette.primary.main,
       },
+      [theme.breakpoints.down("sm")]: {
+        padding: "5px",
+      },
     },
     logo: {
       display: "flex",
@@ -124,17 +145,8 @@ export const Navbar: React.FC = () => {
 
   return (
     <animated.header className={classes.root} style={props}>
-      <Toolbar className={classes.toolbar}>
-        <Grid
-          container
-          item
-          xs={12}
-          lg={10}
-          className={classes.toolbarContainer}
-        >
-          <IconButton>
-            <SearchIcon className={classes.search} />
-          </IconButton>
+      <div className={`${classes.toolbarContainer} ${classes.TopBar} `}>
+        <Hidden mdUp>
           <Typography
             component="h2"
             variant="h5"
@@ -147,19 +159,19 @@ export const Navbar: React.FC = () => {
               <img src={logo} alt="logo" className={classes.logoImg} />
             </LinkV2>
           </Typography>
-          <FormControlLabel
-            control={
-              <IosSwitch
-                checked={darkMode ? true : false}
-                onChange={toggleDarkMode}
-                name="darkMode"
-              />
-            }
-            label={darkMode ? "🌙" : "🌞"}
-          />
-        </Grid>
-      </Toolbar>
-
+        </Hidden>
+        <FormControlLabel
+          className={classes.switch}
+          control={
+            <IosSwitch
+              checked={darkMode ? true : false}
+              onChange={toggleDarkMode}
+              name="darkMode"
+            />
+          }
+          label={darkMode ? "🌙" : "🌞"}
+        />
+      </div>
       <Toolbar
         component="nav"
         variant="dense"
@@ -173,6 +185,21 @@ export const Navbar: React.FC = () => {
           className={classes.toolbarContainer}
           style={{ flexFlow: "nowrap", overflowX: "auto" }}
         >
+          <Hidden smDown>
+            <Typography
+              component="h2"
+              variant="h5"
+              color="inherit"
+              align="center"
+              noWrap
+              className={classes.toolbarTitle}
+            >
+              <LinkV2 href="/" className={classes.logo}>
+                <img src={logo} alt="logo" className={classes.logoImg} />
+              </LinkV2>
+            </Typography>
+          </Hidden>
+
           {sections
             ? sections.map((section) => (
                 <LinkV2
@@ -185,6 +212,10 @@ export const Navbar: React.FC = () => {
                 </LinkV2>
               ))
             : null}
+
+          <IconButton>
+            <SearchIcon className={classes.search} />
+          </IconButton>
         </Grid>
       </Toolbar>
     </animated.header>