Add padding to the ViewButton component (#718)

ral-facilities · Jul 29, 2021 · 5cae6cb · 5cae6cb
1 parent 169c806
commit 5cae6cb
Showing 1 changed file with 23 additions and 11 deletions.
diff --git a/packages/datagateway-dataview/src/page/pageContainer.component.tsx b/packages/datagateway-dataview/src/page/pageContainer.component.tsx
@@ -247,24 +247,36 @@ const NavBar = (props: {
   );
 };
 
+const viewButtonStyles = makeStyles(
+  (theme: Theme): StyleRules =>
+    createStyles({
+      root: {
+        padding: theme.spacing(1),
+      },
+    })
+);
+
 const ViewButton = (props: {
   viewCards: boolean;
   handleButtonChange: () => void;
 }): React.ReactElement => {
   const [t] = useTranslation();
+  const classes = viewButtonStyles();
 
   return (
-    <Button
-      className="tour-dataview-view-button"
-      aria-label="container-view-button"
-      variant="contained"
-      color="primary"
-      size="small"
-      endIcon={props.viewCards ? <ViewListIcon /> : <ViewAgendaIcon />}
-      onClick={() => props.handleButtonChange()}
-    >
-      {props.viewCards ? t('app.view_table') : t('app.view_cards')}
-    </Button>
+    <div className={classes.root}>
+      <Button
+        className="tour-dataview-view-button"
+        aria-label="container-view-button"
+        variant="contained"
+        color="primary"
+        size="small"
+        startIcon={props.viewCards ? <ViewListIcon /> : <ViewAgendaIcon />}
+        onClick={() => props.handleButtonChange()}
+      >
+        {props.viewCards ? t('app.view_table') : t('app.view_cards')}
+      </Button>
+    </div>
   );
 };