Merge pull request #5 from oslabs-beta/topbarStyles

Search bar and topBar styles

Author: astholden

app/assets/search.svg

@@ -11,6 +11,8 @@ import {
   Button,
   Typography,
 } from '@material-ui/core';
+import { spacing } from '@material-ui/system';
+
 import { Theme, makeStyles } from '@material-ui/core/styles';
 import { BaseCSSProperties } from '@material-ui/core/styles/withStyles';
 
@@ -20,7 +22,7 @@ import AddCircleOutlineTwoToneIcon from '@material-ui/icons/AddCircleOutlineTwoT
 import DeleteForeverOutlinedIcon from '@material-ui/icons/DeleteForeverOutlined';
 import HighlightOffIcon from '@material-ui/icons/HighlightOff';
 import ListIcon from '@material-ui/icons/List';
-import SearchIcon from '@material-ui/icons/Search';
+import SearchIcon from '@material-ui/icons/SearchSharp';
 import DashboardIcon from '@material-ui/icons/Dashboard';
 import NotificationsIcon from '@material-ui/icons/Notifications';
 import Badge from '@material-ui/core/Badge';
@@ -30,6 +32,7 @@ import UpdateIcon from '@material-ui/icons/Update';
 import AddModal from '../modals/AddModal';
 import AddsModal from '../modals/AddsModal';
 import ServicesModal from '../modals/ServicesModal';
+import Search from '../components/icons/Search';
 
 // STYLESHEETS
 // import '../stylesheets/Occupied.scss';
@@ -222,30 +225,35 @@ const Occupied = React.memo(() => {
                   type="text"
                   name="search"
                 />
+                {/* <SearchIcon className="icon" id="searchIcon" /> */}
+                {/* <img src="../assets/search.svg" /> */}
+                <Search />
                 <hr />
               </label>
-              <button className="form" id="submitBtn" type="submit">
-                <SearchIcon className="icon" id="searchIcon" />
-              </button>
             </form>
-            <div className="dashboardIconArea">
-              <span className="dashboardTooltip">
-                You have {applications.length} active databases
-              </span>
-              <DashboardIcon className="navIcon" id="dashboardIcon" />
-            </div>
-            {/* onClick={updateNotification} */}
-            <div className="notificationsIconArea">
-              <span className="notificationsTooltip">
-                You have {notification ? notification.length : 0} new alerts
-              </span>
-              <NotificationsIcon className="navIcon" id="notificationsIcon" />
-              <Badge badgeContent={notification ? notification.length : 0} color="secondary" />
+
+            <div className="dashboardIconWrapper">
+              <div className="dashboardIconArea">
+                <span className="dashboardTooltip">
+                  You have {applications.length} active databases
+                </span>
+                <DashboardIcon className="navIcon" id="dashboardIcon" />
+              </div>
+              {/* onClick={updateNotification} */}
+              <div className="notificationsIconArea">
+                <span className="notificationsTooltip">
+                  You have {notification ? notification.length : 0} new alerts
+                </span>
+                <NotificationsIcon className="navIcon" id="notificationsIcon" />
+                <Badge badgeContent={notification ? notification.length : 0} color="secondary" />
+              </div>
+              <div className="personIconArea">
+                <Button className="personTooltip" onClick={() => setAddsOpen(true)}>
+                  <PersonIcon className="navIcon" id="personIcon" />
+                  Logged In
+                </Button>
+              </div>
             </div>
-            <Button className="personTooltip" onClick={() => setAddsOpen(true)}>
-              Logged In
-              <PersonIcon className="navIcon" id="personIcon" />
-            </Button>
           </section>
         </header>
 

app/components/Occupied.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function Search(props) {
+  return (
+    <svg class="searchIconSvg" focusable="false" viewBox="0 0 20 20" aria-hidden="true">
+      <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>
+    </svg>
+  );
+}

app/components/icons/Search.jsx

@@ -28,10 +28,11 @@
 
 #rightHeader {
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
+  width: 100%;
   align-items: center;
   margin: 0;
-  margin-top: 20px;
+  margin-top: 33px;
 }
 
 #listIcon {
@@ -64,7 +65,7 @@
   vertical-align: middle;
   text-align: center;
   color: $icon;
-  background-color: $background;
+  // background-color: $background;
   box-sizing: content-box;
   border-radius: 50%;
   box-shadow: $boxshadow1;
@@ -102,7 +103,7 @@
 }
 
 #searchIcon {
-  background-color: $background;
+  // background-color: $background;
   font-size: 26px;
   font-weight: 400px;
   padding: 8px;
@@ -118,6 +119,7 @@
 
 // Dashboard Icon
 #dashboardIcon {
+  margin-top: 4px;
   margin-left: -35px;
   font-size: 26px;
   padding: 8px;
@@ -146,12 +148,12 @@
   color: $ggreen;
   text-align: center;
   border-radius: 6px;
-  padding: 5px 0;
+  // padding: 5px 0;
   font-size: 12px;
   /* Position the tooltip */
   position: absolute;
   z-index: 1;
-  top: 63px;
+  top: 30px;
   right: -14px;
 }
 
@@ -167,9 +169,10 @@
 
 // Notification Icon
 #notificationsIcon {
+  margin-top: 4px;
   margin-left: 2px;
   font-size: 26px;
-  padding: 8px;
+  // padding: 8px;
   &:hover {
     cursor: pointer;
     box-shadow: $boxshadow3;
@@ -216,10 +219,10 @@
 
 // Person Icon
 #personIcon {
-  margin-right: 30px;
+  margin-top: 4px;
   margin-left: 2px;
   font-size: 26px;
-  padding: 8px;
+  // padding: 8px;
   &:hover {
     cursor: pointer;
     box-shadow: $boxshadow3;
@@ -239,29 +242,33 @@
 }
 
 .personIconArea .personTooltip {
-  visibility: hidden;
-  width: 80px;
-  background-color: $background;
+  // visibility: hidden;
+  // width: 80px;
+  // background-color: $background;
   color: $gyellow;
   text-align: center;
-  border-radius: 6px;
-  padding: 5px 0;
-  font-size: 12px;
-  /* Position the tooltip */
-  position: absolute;
-  z-index: 1;
-  top: 63px;
-  right: 10px;
-}
-
-.personIconArea .personTooltip::after {
-  content: '';
-  position: absolute;
-  bottom: 37px;
-  left: 35px;
-  border-width: 5px;
-  border-style: solid;
-  border-color: transparent transparent $background transparent;
+  // border-radius: 6px;
+  // padding: 5px 0 !important;
+  // font-size: 12px;
+  // /* Position the tooltip */
+  // position: absolute;
+  // z-index: 1;
+  // top: 63px;
+  // right: 10px;
+}
+
+// .personIconArea .personTooltip::after {
+//   content: '';
+//   position: absolute;
+//   bottom: 37px;
+//   left: 35px;
+//   border-width: 5px;
+//   border-style: solid;
+//   border-color: transparent transparent $background transparent;
+// }
+
+.dashboardIconWrapper {
+  margin-right: 37px;
 }
 
 button {
@@ -307,6 +314,11 @@ button {
   position: relative;
   display: flex;
   flex-direction: column;
+  .searchIconSvg {
+    transform: scale(0.1) translate(758.9px, -720px);
+    position: absolute;
+    fill: white;
+  }
 }
 
 #textInput {