update table header styles

www/src/assets/icons/Extension.tsx

@@ -0,0 +1,10 @@
+import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon";
+import { mdiPuzzleOutline } from "@mdi/js";
+
+export default function Extension(props: SvgIconProps) {
+  return (
+    <SvgIcon viewBox="0 0 24 24" {...props}>
+      <path d={mdiPuzzleOutline} />
+    </SvgIcon>
+  );
+}

www/src/components/Table/TableHeader/Extensions/index.tsx

@@ -6,7 +6,7 @@ import { db } from "../../../../firebase";
 
 import { Breadcrumbs, Typography, Button } from "@material-ui/core";
 import TableHeaderButton from "../TableHeaderButton";
-import ExtensionIcon from "@material-ui/icons/ExtensionOutlined";
+import ExtensionIcon from "assets/icons/Extension";
 import Modal from "components/Modal";
 import { useFiretableContext } from "contexts/FiretableContext";
 import { useAppContext } from "contexts/AppContext";

www/src/components/Table/TableHeader/RowHeight.tsx

@@ -30,12 +30,15 @@ export default function RowHeight() {
         InputProps={{
           disableUnderline: true,
           sx: {
-            background: "transparent",
-            boxShadow: "none",
             height: 32,
-            "&:hover:not(.Mui-disabled), &:focus, &.Mui-focused": {
-              backgroundColor: theme.palette.action.hover,
+            "&:hover": {
+              backgroundColor: theme.palette.action.hover + " !important",
             },
+
+            "& .MuiSelect-select": {
+              padding: theme.spacing(0.5, 1) + " !important",
+            },
+            "& .MuiSelect-icon": { display: "none" },
           },
         }}
         InputLabelProps={{ style: { display: "none" } }}

www/src/components/Table/TableHeader/TableHeaderButton.tsx

@@ -1,6 +1,6 @@
-import { Tooltip, IconButton, IconButtonProps } from "@material-ui/core";
+import { Tooltip, Button, ButtonProps } from "@material-ui/core";
 
-export interface ITableHeaderButtonProps extends Partial<IconButtonProps> {
+export interface ITableHeaderButtonProps extends Partial<ButtonProps> {
   title: string;
   icon: React.ReactNode;
 }
@@ -12,16 +12,16 @@ export default function TableHeaderButton({
 }: ITableHeaderButtonProps) {
   return (
     <Tooltip title={title}>
-      <IconButton
-        // variant="outlined"
+      <Button
+        variant="outlined"
         color="secondary"
         size="small"
-        style={{ width: 32, height: 32 }}
+        style={{ minWidth: 40, height: 32, padding: 0 }}
         aria-label={title}
         {...props}
       >
         {icon}
-      </IconButton>
+      </Button>
     </Tooltip>
   );
 }

www/src/components/Table/TableHeader/TableLogs.tsx

@@ -57,10 +57,10 @@ const useStyles = makeStyles((theme) =>
 
       position: "absolute",
       bottom: 2,
-      right: 2,
+      right: 5,
 
-      backgroundColor: theme.palette.background.default,
-      boxShadow: `0 0 0 1px ${theme.palette.background.default}`,
+      backgroundColor: theme.palette.background.paper,
+      boxShadow: `0 0 0 1px ${theme.palette.background.paper}`,
       borderRadius: "50%",
     },
 

www/src/components/Table/TableHeader/index.tsx

@@ -26,7 +26,7 @@ const useStyles = makeStyles((theme) =>
     root: {
       width: "100%",
       margin: 0,
-      padding: theme.spacing(0, 1.5, 1.5, 0.5),
+      padding: theme.spacing(0, 2, 1.5, 1),
       height: TABLE_HEADER_HEIGHT,
 
       overflowX: "auto",