Merge pull request #16 from oslabs-beta/victor/sidebar

UI: change nav to black

Author: dentonwong

app/src/components/top/NavBar.tsx

@@ -1,22 +1,25 @@
 import React, { useState } from 'react';
+
 import Avatar from '@mui/material/Avatar';
+import Button from '@mui/material/Button';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import NavBarButtons from './NavBarButtons';
 import NavbarDropDown from './NavBarButtons';
+import NewExportButton from './NewExportButton';
 import { RootState } from '../../redux/store';
 import logo from '../../public/icons/win/logo.png';
-import NewExportButton from './NewExportButton';
 import { useSelector } from 'react-redux';
-import Button from '@mui/material/Button';
-import MoreVertIcon from '@mui/icons-material/MoreVert';
-import NavBarButtons from './NavBarButtons';
 
 const NavBar = () => {
   const [dropMenu, setDropMenu] = useState(false);
-  const isDarkMode = useSelector((state: RootState) => state.darkMode.isDarkMode);
+  const isDarkMode = useSelector(
+    (state: RootState) => state.darkMode.isDarkMode
+  );
 
   const buttonContainerStyle = {
     display: 'flex',
     alignItems: 'center',
-    justifyContent: 'flex-start',
+    justifyContent: 'flex-start'
   };
 
   const buttonStyle = {
@@ -27,30 +30,39 @@ const NavBar = () => {
     padding: '8px 12px',
     cursor: 'pointer',
     marginRight: '10px',
-    marginLeft: '5px', 
-    borderRadius: '4px',
+    marginLeft: '5px',
+    borderRadius: '4px'
   };
 
   const moreVertButtonStyle = {
     backgroundColor: '#333',
     border: '1px solid #333',
     padding: '0',
     cursor: 'pointer',
-    display: 'flex', 
-    alignItems: 'center', 
-    justifyContent: 'flex-start', 
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
     borderRadius: '4px',
-    width: '30px', 
+    width: '30px',
     minWidth: '20px',
-    marginLeft: '0px', 
-    marginRight: '10px',
+    marginLeft: '0px',
+    marginRight: '10px'
   };
 
   return (
-    <nav className="main-navbar" style={isDarkMode ? { backgroundColor: '#013365' } : { backgroundColor: 'white' }}>
+    <nav
+      className="main-navbar"
+      style={
+        isDarkMode
+          ? { backgroundColor: '#013365' }
+          : { backgroundColor: '#151515' }
+      }
+    >
       <div className="main-logo">
         <Avatar src={logo}></Avatar>
-        <h1 style={isDarkMode ? { color: 'white' } : { color: '#013365' }}>ReacType</h1>
+        <h1 style={isDarkMode ? { color: 'white' } : { color: 'white' }}>
+          ReacType
+        </h1>
       </div>
       <div style={buttonContainerStyle}>
         <button style={buttonStyle}>Share</button>
@@ -63,7 +75,11 @@ const NavBar = () => {
         >
           <MoreVertIcon style={{ color: 'white' }} />
         </Button>
-        <NavBarButtons dropMenu={dropMenu} setDropMenu={setDropMenu} style={{ color: 'white' }} />
+        <NavBarButtons
+          dropMenu={dropMenu}
+          setDropMenu={setDropMenu}
+          style={{ color: 'white' }}
+        />
       </div>
     </nav>
   );