feat(core): styling updates

packages/core/src/components/CheckboxTree/CheckboxTree.tsx

@@ -41,14 +41,32 @@ const useStyles = makeStyles((theme: Theme) =>
       '&:hover': {
         backgroundColor: 'transparent',
       },
+      '&:active' : {
+        animation: 'none',
+        transform: 'none'
+      },
     },
     nested: {
       paddingLeft: theme.spacing(5),
       height: '32px',
+      '&:hover' : {
+        backgroundColor: 'transparent',
+      },
     },
     listItemIcon: {
       minWidth: 10,
     },
+    listItem: {
+      '&:hover' : {
+        backgroundColor: 'transparent',
+      },
+    },
+    text: {
+      '& span, & svg': {
+        fontWeight: 'normal',
+        fontSize: 14
+      }
+    }
   }),
 );
 
@@ -180,6 +198,7 @@ const indexer = (
     };
   }, {});
 
+
 export const CheckboxTree = (props: CheckboxTreeProps) => {
   const { onChange } = props;
   const classes = useStyles();
@@ -206,15 +225,13 @@ export const CheckboxTree = (props: CheckboxTreeProps) => {
     <div>
       <Typography variant="button">{props.label}</Typography>
       <List className={classes.root}>
-        {Object.values(state).map(item => {
-          const labelId = `checkbox-list-label-${item?.label}`;
-
-          return (
+        {Object.values(state).map(item => 
             <div key={item.label}>
               <ListItem
+                className={classes.listItem}
                 dense
                 button
-                onClick={() =>
+                onClick={() => 
                   dispatch({
                     type: 'checkCategory',
                     payload: item.label,
@@ -228,10 +245,9 @@ export const CheckboxTree = (props: CheckboxTreeProps) => {
                     checked={item.isChecked}
                     tabIndex={-1}
                     disableRipple
-                    inputProps={{ 'aria-labelledby': labelId }}
                   />
                 </ListItemIcon>
-                <ListItemText id={labelId} primary={item.label} />
+                <ListItemText className={classes.text} primary={item.label} />
                 {Object.values(item.options).length ? (
                   <>
                     {item.isOpen ? (
@@ -270,17 +286,15 @@ export const CheckboxTree = (props: CheckboxTreeProps) => {
                           checked={option.isChecked}
                           tabIndex={-1}
                           disableRipple
-                          inputProps={{ 'aria-labelledby': labelId }}
                         />
                       </ListItemIcon>
-                      <ListItemText primary={option.label} />
+                      <ListItemText className={classes.text} primary={option.label} />
                     </ListItem>
                   ))}
                 </List>
               </Collapse>
             </div>
-          );
-        })}
+        )}
       </List>
     </div>
   );

packages/core/src/components/Table/Filters.tsx

@@ -30,7 +30,10 @@ const useSubvalueCellStyles = makeStyles<BackstageTheme>(theme => ({
     flexDirection: 'column',
     marginRight: theme.spacing(3),
   },
-  value: {},
+  value: {
+    fontWeight: 'bold',
+    fontSize: 18
+  },
   header: {
     display: 'flex',
     alignItems: 'center',
@@ -45,9 +48,6 @@ const useSubvalueCellStyles = makeStyles<BackstageTheme>(theme => ({
       marginTop: theme.spacing(2),
     },
   },
-  clear: {
-    textTransform: 'none',
-  },
 }));
 
 type Without<T, K> = Pick<T, Exclude<keyof T, K>>;
@@ -88,7 +88,7 @@ export const Filters = (props: Props) => {
     <div className={classes.root}>
       <div className={classes.header}>
         <div className={classes.value}>Filters</div>
-        <Button className={classes.clear} color="primary" onClick={handleClick}>
+        <Button color="primary" onClick={handleClick}>
           Clear all
         </Button>
       </div>

packages/core/src/components/Table/Table.tsx

@@ -133,6 +133,10 @@ const useFilterStyles = makeStyles<BackstageTheme>(() => ({
     alignItems: 'center',
     justifyContent: 'space-between',
   },
+  title: {
+    fontWeight: 'bold',
+    fontSize: 18
+  }
 }));
 
 const useTableStyles = makeStyles<BackstageTheme>(() => ({
@@ -281,7 +285,7 @@ export function Table<T extends object = {}>({
                   >
                     <FilterList />
                   </IconButton>
-                  <Typography variant="h6">
+                  <Typography className={filtersClasses.title}>
                     Filters ({selectedFiltersLength})
                   </Typography>
                 </div>