From dab5dca61530c0742161bee3304766c4ff7bbf1b Mon Sep 17 00:00:00 2001
From: dominik-zeglen <flesz3@o2.pl>
Date: Fri, 20 Dec 2019 17:03:20 +0100
Subject: [PATCH] Visual improvements

---
 src/components/Filter/Filter.tsx       |  9 +-----
 src/components/FilterBar/FilterBar.tsx | 43 ++++++++++++++------------
 src/components/SearchBar/SearchBar.tsx | 43 ++++++++++++++------------
 3 files changed, 47 insertions(+), 48 deletions(-)

diff --git a/src/components/Filter/Filter.tsx b/src/components/Filter/Filter.tsx
index dbe8cd1e4..fd49209f1 100644
--- a/src/components/Filter/Filter.tsx
+++ b/src/components/Filter/Filter.tsx
@@ -4,7 +4,6 @@ import Popper from "@material-ui/core/Popper";
 import { makeStyles } from "@material-ui/core/styles";
 import { fade } from "@material-ui/core/styles/colorManipulator";
 import Typography from "@material-ui/core/Typography";
-import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
 import classNames from "classnames";
 import React from "react";
 import { FormattedMessage } from "react-intl";
@@ -97,14 +96,8 @@ const Filter: React.FC<FilterProps> = props => {
         onClick={() => setFilterMenuOpened(!isFilterMenuOpened)}
       >
         <Typography className={classes.addFilterText}>
-          <FormattedMessage defaultMessage="Add Filter" description="button" />
+          <FormattedMessage defaultMessage="Filters" description="button" />
         </Typography>
-        <ArrowDropDownIcon
-          color="primary"
-          className={classNames(classes.addFilterIcon, {
-            [classes.rotate]: isFilterMenuOpened
-          })}
-        />
       </ButtonBase>
       <Popper
         className={classes.popover}
diff --git a/src/components/FilterBar/FilterBar.tsx b/src/components/FilterBar/FilterBar.tsx
index 54ed13792..db4f6445e 100644
--- a/src/components/FilterBar/FilterBar.tsx
+++ b/src/components/FilterBar/FilterBar.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import makeStyles from "@material-ui/core/styles/makeStyles";
+import Button from "@material-ui/core/Button";
 
 import { FilterProps } from "../../types";
 import { IFilter } from "../Filter/types";
@@ -8,8 +9,6 @@ import FilterTabs, { FilterTab } from "../TableFilter";
 import { SearchBarProps } from "../SearchBar";
 import SearchInput from "../SearchBar/SearchInput";
 import Filter from "../Filter";
-import Link from "../Link";
-import Hr from "../Hr";
 
 export interface FilterBarProps<TKeys extends string = string>
   extends FilterProps<TKeys>,
@@ -20,14 +19,15 @@ export interface FilterBarProps<TKeys extends string = string>
 const useStyles = makeStyles(
   theme => ({
     root: {
+      borderBottom: `1px solid ${theme.palette.divider}`,
       display: "flex",
       flexWrap: "wrap",
       padding: theme.spacing(1, 3)
     },
-    tabActions: {
-      borderBottom: `1px solid ${theme.palette.divider}`,
-      padding: theme.spacing(1, 3, 2),
-      textAlign: "right"
+    tabActionButton: {
+      marginLeft: theme.spacing(2),
+      paddingLeft: theme.spacing(3),
+      paddingRight: theme.spacing(3)
     }
   }),
   {
@@ -93,30 +93,33 @@ const FilterBar: React.FC<FilterBarProps> = props => {
           placeholder={searchPlaceholder}
           onSearchChange={onSearchChange}
         />
-      </div>
-      {displayTabAction === null ? (
-        <Hr />
-      ) : (
-        <div className={classes.tabActions}>
-          {displayTabAction === "save" ? (
-            <Link onClick={onTabSave}>
+        {displayTabAction &&
+          (displayTabAction === "save" ? (
+            <Button
+              className={classes.tabActionButton}
+              color="primary"
+              onClick={onTabSave}
+            >
               <FormattedMessage
-                defaultMessage="Save Custom Search"
+                defaultMessage="Save Search"
                 description="button"
               />
-            </Link>
+            </Button>
           ) : (
             displayTabAction === "delete" && (
-              <Link onClick={onTabDelete}>
+              <Button
+                className={classes.tabActionButton}
+                color="primary"
+                onClick={onTabDelete}
+              >
                 <FormattedMessage
                   defaultMessage="Delete Search"
                   description="button"
                 />
-              </Link>
+              </Button>
             )
-          )}
-        </div>
-      )}
+          ))}
+      </div>
     </>
   );
 };
diff --git a/src/components/SearchBar/SearchBar.tsx b/src/components/SearchBar/SearchBar.tsx
index 9636c5ac0..17c66b4bb 100644
--- a/src/components/SearchBar/SearchBar.tsx
+++ b/src/components/SearchBar/SearchBar.tsx
@@ -1,11 +1,10 @@
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import makeStyles from "@material-ui/core/styles/makeStyles";
+import Button from "@material-ui/core/Button";
 
 import { SearchPageProps, TabPageProps } from "@saleor/types";
 import FilterTabs, { FilterTab } from "../TableFilter";
-import Link from "../Link";
-import Hr from "../Hr";
 import SearchInput from "./SearchInput";
 
 export interface SearchBarProps extends SearchPageProps, TabPageProps {
@@ -16,14 +15,15 @@ export interface SearchBarProps extends SearchPageProps, TabPageProps {
 const useStyles = makeStyles(
   theme => ({
     root: {
+      borderBottom: `1px solid ${theme.palette.divider}`,
       display: "flex",
       flexWrap: "wrap",
       padding: theme.spacing(1, 3)
     },
-    tabActions: {
-      borderBottom: `1px solid ${theme.palette.divider}`,
-      padding: theme.spacing(1, 3, 2),
-      textAlign: "right"
+    tabActionButton: {
+      marginLeft: theme.spacing(2),
+      paddingLeft: theme.spacing(3),
+      paddingRight: theme.spacing(3)
     }
   }),
   {
@@ -81,30 +81,33 @@ const SearchBar: React.FC<SearchBarProps> = props => {
           placeholder={searchPlaceholder}
           onSearchChange={onSearchChange}
         />
-      </div>
-      {displayTabAction === null ? (
-        <Hr />
-      ) : (
-        <div className={classes.tabActions}>
-          {displayTabAction === "save" ? (
-            <Link onClick={onTabSave}>
+        {displayTabAction &&
+          (displayTabAction === "save" ? (
+            <Button
+              className={classes.tabActionButton}
+              color="primary"
+              onClick={onTabSave}
+            >
               <FormattedMessage
-                defaultMessage="Save Custom Search"
+                defaultMessage="Save Search"
                 description="button"
               />
-            </Link>
+            </Button>
           ) : (
             displayTabAction === "delete" && (
-              <Link onClick={onTabDelete}>
+              <Button
+                className={classes.tabActionButton}
+                color="primary"
+                onClick={onTabDelete}
+              >
                 <FormattedMessage
                   defaultMessage="Delete Search"
                   description="button"
                 />
-              </Link>
+              </Button>
             )
-          )}
-        </div>
-      )}
+          ))}
+      </div>
     </>
   );
 };