Fix styling on FilterSort

Author: Ligerx

src/components/filters/FilterSort.js

@@ -7,10 +7,26 @@ import Typography from '@material-ui/core/Typography';
 import Icon from '@material-ui/core/Icon';
 import FormGroup from '@material-ui/core/FormGroup';
 import ButtonBase from '@material-ui/core/ButtonBase';
+import { withStyles } from '@material-ui/core/styles';
 
-// NOTE: using name as the key, this shouldn't be a problem
+const styles = {
+  item: {
+    width: '100%',
+    padding: '8px 16px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+  },
+  formGroup: {
+    width: '100%', // lets the items be full width
+  },
+  icon: {
+    marginRight: 8,
+  },
+};
 
 type Props = {
+  classes: Object, // injected styles
   values: Array<string>,
   name: string,
   state: {
@@ -21,17 +37,23 @@ type Props = {
 };
 
 const FilterSort = ({
-  values, name, state, onChange,
+  classes, values, name, state, onChange,
 }: Props) => (
   <ExpansionPanel>
     <ExpansionPanelSummary expandIcon={<Icon>expand_more</Icon>}>
       <Typography>{name}</Typography>
     </ExpansionPanelSummary>
     <ExpansionPanelDetails>
-      <FormGroup>
+      <FormGroup className={classes.formGroup}>
         {values.map((value, nestedIndex) => (
-          <ButtonBase onClick={onChange(nestedIndex)} key={`${name} ${value}`}>
-            <Icon>{iconValue(state.index, state.ascending, nestedIndex)}</Icon>
+          <ButtonBase
+            onClick={onChange(nestedIndex)}
+            key={`${name} ${value}`}
+            className={classes.item}
+          >
+            <Icon className={classes.icon}>
+              {iconValue(state.index, state.ascending, nestedIndex)}
+            </Icon>
             <Typography>{value}</Typography>
           </ButtonBase>
         ))}
@@ -48,4 +70,4 @@ function iconValue(index: number, ascending: boolean, nestedIndex: number): stri
   return '';
 }
 
-export default FilterSort;
+export default withStyles(styles)(FilterSort);