Update navigator styles

src/components/Navigator/Navigator.tsx

@@ -1,4 +1,4 @@
-import { Fade, Modal, Paper } from "@material-ui/core";
+import { Divider, Fade, Modal, Paper } from "@material-ui/core";
 import { APP_VERSION } from "@saleor/config";
 import useLocalStorage from "@saleor/hooks/useLocalStorage";
 import useNotifier from "@saleor/hooks/useNotifier";
@@ -111,6 +111,12 @@ const Navigator: React.FC<NavigatorProps> = ({ visible, setVisibility }) => {
     return () => hotkeys.unbind(navigatorHotkey);
   }, []);
 
+  const hasAnything =
+    hasViews(actions) ||
+    hasActions(actions) ||
+    hasCustomers(actions) ||
+    hasCatalog(actions);
+
   return (
     <Modal
       className={classes.modal}
@@ -150,6 +156,7 @@ const Navigator: React.FC<NavigatorProps> = ({ visible, setVisibility }) => {
                     })}
                     ref={input}
                   />
+                  {hasAnything && <Divider />}
                   {hasViews(actions) && (
                     <NavigatorSection
                       label={intl.formatMessage({

src/components/Navigator/NavigatorInput.tsx

@@ -1,4 +1,4 @@
-import { makeStyles } from "@saleor/macaw-ui";
+import { makeStyles, SearchLargeIcon } from "@saleor/macaw-ui";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -7,16 +7,20 @@ import { QuickSearchMode } from "./types";
 const useStyles = makeStyles(
   theme => {
     const typography = {
+      ...theme.typography.body1,
       color: theme.palette.text.primary,
-      fontSize: 24,
-      lineHeight: 1.33
+      fontWeight: 500,
+      letterSpacing: "0.02rem"
     };
 
     return {
       adornment: {
         ...typography,
+        alignSelf: "center",
         color: theme.palette.text.secondary,
-        paddingRight: theme.spacing(1)
+        marginRight: theme.spacing(1),
+        textAlign: "center",
+        width: 32
       },
       input: {
         ...typography,
@@ -27,9 +31,16 @@ const useStyles = makeStyles(
         width: "100%"
       },
       root: {
-        background: theme.palette.background.default,
+        background: theme.palette.background.paper,
         display: "flex",
-        padding: theme.spacing(2, 3)
+        padding: theme.spacing(2, 3),
+        height: 72
+      },
+      searchIcon: {
+        alignSelf: "center",
+        width: 32,
+        height: 32,
+        marginRight: theme.spacing(1)
       }
     };
   },
@@ -51,7 +62,7 @@ const NavigatorInput = React.forwardRef<HTMLInputElement, NavigatorInputProps>(
 
     return (
       <div className={classes.root}>
-        {mode !== "default" && (
+        {mode !== "default" ? (
           <span className={classes.adornment}>
             {mode === "orders"
               ? "#"
@@ -63,6 +74,8 @@ const NavigatorInput = React.forwardRef<HTMLInputElement, NavigatorInputProps>(
               ? "?"
               : ">"}
           </span>
+        ) : (
+          <SearchLargeIcon className={classes.searchIcon} />
         )}
         <input
           autoFocus

src/components/Navigator/NavigatorSection.tsx

@@ -35,8 +35,7 @@ const useStyles = makeStyles(
       "&:last-child": {
         marginBottom: 0
       },
-      margin: theme.spacing(2, 0),
-      padding: theme.spacing(0, 1)
+      margin: theme.spacing(2, 0)
     },
     spacer: {
       flex: 1
@@ -61,12 +60,11 @@ const NavigatorSection: React.FC<NavigatorSectionProps> = props => {
     <div className={classes.root}>
       <Typography
         className={classes.label}
-        variant="body2"
+        variant="caption"
         color="textSecondary"
       >
         {label}
       </Typography>
-      <Hr />
       {items.map((item, itemIndex) => {
         const index = offset + itemIndex;
         const itemProps = getItemProps({