Refactor Navbar (add logo + font)

Author: Jay Chen

public/index.html

@@ -10,7 +10,7 @@
       content="Web site created using create-react-app"
     />
     <link
-      href="https://fonts.googleapis.com/css?family=Roboto:100,400,500&display=swap"
+      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
       rel="stylesheet"
     />
     <link rel="apple-touch-icon" href="logo192.png" />

src/components/Navbar.js

@@ -1,13 +1,20 @@
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 import Slider from 'rc-slider';
+import logo from '../logo.svg';
 import { IconButton, MenuItem, Select, Snackbar } from '@material-ui/core';
 import CloseIcon from '@material-ui/icons/Close';
-import useStyles from './styles/NavbarStyles';
+import { withStyles } from '@material-ui/styles';
+import styles from './styles/NavbarStyles';
 import 'rc-slider/assets/index.css';
 
-function Navbar({ level, showingAllColors, changeLevel, changeFormat }) {
-  const classes = useStyles();
+function Navbar({
+  classes,
+  level,
+  showingAllColors,
+  changeLevel,
+  changeFormat
+}) {
   const [format, setFormat] = useState('hex');
   const [open, setOpen] = useState(false);
 
@@ -21,12 +28,21 @@ function Navbar({ level, showingAllColors, changeLevel, changeFormat }) {
 
   return (
     <header className={classes.Navbar}>
-      <div className={classes.logo}>
-        <Link to="/">react palette</Link>
-      </div>
+      <Link to="/" className={classes.logo}>
+        <img
+          src={logo}
+          alt="logo"
+          width="30"
+          height="30"
+          style={{ marginLeft: '0.5rem', marginRight: '0.5rem' }}
+        />
+        <span className={classes.siteName}>React Palette</span>
+      </Link>
       {showingAllColors && (
         <div>
-          <span>Level: {level}</span>
+          <span style={{ fontFamily: 'Montserrat', marginLeft: '1rem' }}>
+            Level: {level}
+          </span>
           <Slider
             defaultValue={level}
             min={100}
@@ -39,9 +55,9 @@ function Navbar({ level, showingAllColors, changeLevel, changeFormat }) {
       )}
       <div className={classes.selectContainer}>
         <Select value={format} onChange={handleFormatChange}>
-          <MenuItem value="hex">HEX - #ffffff</MenuItem>
-          <MenuItem value="rgb">RGB - rgb(255, 255, 255)</MenuItem>
-          <MenuItem value="rgba">RGBA - rgba(255, 255, 255, 1.0)</MenuItem>
+          <MenuItem value="hex">HEX</MenuItem>
+          <MenuItem value="rgb">RGB</MenuItem>
+          <MenuItem value="rgba">RGBA</MenuItem>
         </Select>
       </div>
       <Snackbar
@@ -68,4 +84,4 @@ function Navbar({ level, showingAllColors, changeLevel, changeFormat }) {
   );
 }
 
-export default Navbar;
+export default withStyles(styles)(Navbar);

src/components/styles/NavbarStyles.js

@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import sizes from './sizes';
 
-export default makeStyles({
+export default {
   Navbar: {
     height: '5%',
     display: 'flex',
@@ -9,20 +9,21 @@ export default makeStyles({
   },
   logo: {
     height: '100%',
-    marginRight: ' 15px',
-    padding: '0 13px',
-    background: '#eceff1',
-    display: ' flex',
-    alignItems: ' center',
-    fontFamily: ' Roboto',
-    fontSize: ' 22px',
-    '& a': {
-      color: 'black',
-      textDecoration: 'none'
+    display: 'flex',
+    alignItems: 'center',
+    fontFamily: 'Montserrat',
+    fontSize: '22px',
+    fontWeight: '600',
+    color: 'black',
+    textDecoration: 'none'
+  },
+  siteName: {
+    [sizes.down('sm')]: {
+      display: props => (props.showingAllColors ? 'none' : '')
     }
   },
   slider: {
-    width: '340px',
+    width: '300px',
     margin: '0 10px',
     display: 'inline-block',
     '& .rc-slider-track': {
@@ -31,10 +32,16 @@ export default makeStyles({
     '& .rc-slider-handle, .rc-slider-handle:active, .rc-slider-handle:focus, .rc-slider-handle:hover': {
       outline: 'none',
       boxShadow: 'none'
+    },
+    [sizes.down('sm')]: {
+      width: '200px'
     }
   },
   selectContainer: {
     marginLeft: 'auto',
     marginRight: '1rem'
+  },
+  [sizes.down('sm')]: {
+    display: 'none'
   }
-});
+};