Style Icon Button Hover State

ui/components/Button.tsx

@@ -44,4 +44,16 @@ const Button = styled(UnstyledButton)`
   }
 `;
 
+export const IconButton = styled(UnstyledButton)`
+  &.MuiButton-root {
+    border-radius: 50%;
+    min-width: 48px;
+    height: 48px;
+    padding: 0;
+  }
+  &.MuiButton-text {
+    padding: 0;
+  }
+`;
+
 export default Button;

ui/components/ChipGroup.tsx

@@ -32,4 +32,5 @@ export default styled(ChipGroup).attrs({ className: ChipGroup.name })`
   .MuiChip-root {
     margin-right: ${(props) => props.theme.spacing.xxs};
   }
+  margin: 4px 0px;
 `;

ui/components/FilterableTable.tsx

@@ -1,6 +1,7 @@
 import _ from "lodash";
 import * as React from "react";
 import styled from "styled-components";
+import { IconButton } from "./Button";
 import ChipGroup from "./ChipGroup";
 import DataTable, { Field } from "./DataTable";
 import FilterDialog, {
@@ -9,8 +10,8 @@ import FilterDialog, {
   formStateToFilters,
   initialFormState,
 } from "./FilterDialog";
-import FilterDialogButton from "./FilterDialogButton";
 import Flex from "./Flex";
+import Icon, { IconType } from "./Icon";
 import { computeReady } from "./KubeStatusIndicator";
 import SearchField from "./SearchField";
 import Spacer from "./Spacer";
@@ -195,18 +196,22 @@ function FilterableTable({
 
   return (
     <Flex className={className} wide tall column>
-      <Flex wide>
+      <Flex wide align>
         <ChipGroup
           chips={chips}
           onChipRemove={handleChipRemove}
           onClearAll={handleClearAll}
         />
         <Flex align wide end>
           <SearchField onSubmit={handleTextSearchSubmit} />
-          <FilterDialogButton
-            dialogOpen={filterDialogOpen}
+          <IconButton
             onClick={() => setFilterDialogOpen(!filterDialogOpen)}
-          />
+            className={className}
+            variant={filterDialogOpen ? "contained" : "text"}
+            color="inherit"
+          >
+            <Icon type={IconType.FilterIcon} size="medium" color="neutral30" />
+          </IconButton>
           <Spacer padding="xs" />
         </Flex>
       </Flex>

ui/components/SearchField.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import styled from "styled-components";
-import { Button } from "..";
+import { IconButton } from "./Button";
 import Flex from "./Flex";
 import Icon, { IconType } from "./Icon";
 import Input from "./Input";
@@ -15,7 +15,7 @@ const Expander = styled(({ expanded, className, children }) => (
 ))`
   width: 0px;
   transition: width 0.3s ease-in-out;
-
+  margin-left: 4px;
   &.expanded {
     width: 200px;
   }
@@ -46,7 +46,7 @@ function SearchField({ className, onSubmit }: Props) {
 
   return (
     <Flex align className={className}>
-      <Button
+      <IconButton
         onClick={handleExpand}
         className={className}
         variant="text"
@@ -57,7 +57,7 @@ function SearchField({ className, onSubmit }: Props) {
           size="medium"
           color={expanded ? "primary" : "neutral30"}
         />
-      </Button>
+      </IconButton>
       <Expander expanded={expanded}>
         <form onSubmit={handleSubmit}>
           <Input

ui/components/SourcesTable.tsx

@@ -160,7 +160,4 @@ export default styled(SourcesTable).attrs({ className: SourcesTable.name })`
   table {
     table-layout: fixed;
   }
-  ${FilterableTable} {
-    margin-top: ${(props) => props.theme.spacing.small};
-  }
 `;

ui/pages/v2/Automations.tsx

@@ -25,8 +25,4 @@ function Automations({ className }: Props) {
 
 export default styled(Automations).attrs({
   className: Automations.name,
-})`
-  ${AutomationsTable} {
-    margin-top: ${(props) => props.theme.spacing.small};
-  }
-`;
+})``;