change ModeSelector styles

src/common/ModeSelector/ModeSelector.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { makeStyles } from '@material-ui/core/styles';
-import { Button, ButtonProps } from '@material-ui/core';
+import { Button, ButtonProps, Toolbar } from '@material-ui/core';
 
 export type Mode = {
   name: string;
@@ -20,11 +20,13 @@ function ModeSelector({ modes, onSelect, buttonProps = {}, style }: Props) {
   const classes = useStyles();
 
   return (
-    <div className={classes.container} style={style}>
+    <Toolbar className={classes.container} style={style}>
       {modes.map(m => {
         return (
           <div key={m.name}>
             <Button
+              size="small"
+              fullWidth
               {...buttonProps}
               variant={m.selected ? 'contained' : 'outlined'}
               onClick={() => {
@@ -32,21 +34,21 @@ function ModeSelector({ modes, onSelect, buttonProps = {}, style }: Props) {
                   onSelect(m);
                 }
               }}
-              size="small"
-              fullWidth
             >
               {m.label ?? m.name}
             </Button>
           </div>
         );
       })}
-    </div>
+    </Toolbar>
   );
 }
 
 const useStyles = makeStyles(theme => ({
   container: {
-    padding: theme.spacing(1, 0),
+    paddingTop: theme.spacing(1),
+    paddingBottom: theme.spacing(1),
+    minHeight: 'auto',
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
@@ -58,6 +60,8 @@ const useStyles = makeStyles(theme => ({
     [theme.breakpoints.down('xs')]: {
       flexDirection: 'column',
       '& > *': {
+        paddingLeft: 0,
+        paddingRight: 0,
         width: '100%',
       },
     },

src/features/SearchPage/SearchPage.tsx

@@ -61,9 +61,7 @@ function SearchPage() {
       <Container>
         <Paper>
           <ModeSelector
-            buttonProps={{
-              variant: 'outlined',
-            }}
+            buttonProps={{ size: 'medium' }}
             onSelect={m => setQuery({ mode: m.name, page: 0, limit: LIMIT })}
             modes={[
               {

src/features/ServerPage/features/EnnoblementsPage/EnnoblementsPage.tsx

@@ -27,6 +27,7 @@ function EnnoblementsPage() {
         <Paper>
           <ModeSelector
             onSelect={m => setQuery({ mode: m.name })}
+            buttonProps={{ size: 'medium' }}
             modes={[
               {
                 name: 'live',

src/features/ServerPage/features/EnnoblementsPage/components/LatestSavedEnnoblements/LatestSavedEnnoblements.tsx

@@ -110,6 +110,8 @@ const useStyles = makeStyles(theme => ({
     '& > *': {
       margin: theme.spacing(0.5),
       [theme.breakpoints.down('xs')]: {
+        marginLeft: 0,
+        marginRight: 0,
         width: '100%',
       },
     },

src/features/ServerPage/features/IndexPage/components/TodaysBestStatsPlayers/TodaysBestStatsPlayers.tsx

@@ -56,9 +56,6 @@ function TodaysBestStatsPlayers({ server, t }: Props) {
         </Typography>
       </TableToolbar>
       <ModeSelector
-        buttonProps={{
-          variant: 'outlined',
-        }}
         onSelect={m => setMode(m.name as Mode)}
         modes={[
           {

src/features/ServerPage/features/TribePage/features/MembersPage/components/Members/Members.tsx

@@ -122,6 +122,7 @@ function Members({ t, server, tribeID }: Props) {
     <Paper>
       <ModeSelector
         onSelect={m => setMode(m.name as Mode)}
+        buttonProps={{ size: 'medium' }}
         modes={[
           {
             name: 'points',