From b1121478ae2d3d156de2d36e1ab37421737d3532 Mon Sep 17 00:00:00 2001
From: Kichiyaki <dawidwysokinski000@gmail.com>
Date: Sun, 27 Dec 2020 18:02:59 +0100
Subject: [PATCH] change ModeSelector styles

---
 src/common/ModeSelector/ModeSelector.tsx         | 16 ++++++++++------
 src/features/SearchPage/SearchPage.tsx           |  4 +---
 .../EnnoblementsPage/EnnoblementsPage.tsx        |  1 +
 .../LatestSavedEnnoblements.tsx                  |  2 ++
 .../TodaysBestStatsPlayers.tsx                   |  3 ---
 .../MembersPage/components/Members/Members.tsx   |  1 +
 6 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/common/ModeSelector/ModeSelector.tsx b/src/common/ModeSelector/ModeSelector.tsx
index f5b6939..5b2a24a 100644
--- a/src/common/ModeSelector/ModeSelector.tsx
+++ b/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%',
       },
     },
diff --git a/src/features/SearchPage/SearchPage.tsx b/src/features/SearchPage/SearchPage.tsx
index 03d71ad..8a1b18a 100644
--- a/src/features/SearchPage/SearchPage.tsx
+++ b/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={[
               {
diff --git a/src/features/ServerPage/features/EnnoblementsPage/EnnoblementsPage.tsx b/src/features/ServerPage/features/EnnoblementsPage/EnnoblementsPage.tsx
index b98e3d9..59343dd 100644
--- a/src/features/ServerPage/features/EnnoblementsPage/EnnoblementsPage.tsx
+++ b/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',
diff --git a/src/features/ServerPage/features/EnnoblementsPage/components/LatestSavedEnnoblements/LatestSavedEnnoblements.tsx b/src/features/ServerPage/features/EnnoblementsPage/components/LatestSavedEnnoblements/LatestSavedEnnoblements.tsx
index bab452c..937911d 100644
--- a/src/features/ServerPage/features/EnnoblementsPage/components/LatestSavedEnnoblements/LatestSavedEnnoblements.tsx
+++ b/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%',
       },
     },
diff --git a/src/features/ServerPage/features/IndexPage/components/TodaysBestStatsPlayers/TodaysBestStatsPlayers.tsx b/src/features/ServerPage/features/IndexPage/components/TodaysBestStatsPlayers/TodaysBestStatsPlayers.tsx
index c6c0213..157a80c 100644
--- a/src/features/ServerPage/features/IndexPage/components/TodaysBestStatsPlayers/TodaysBestStatsPlayers.tsx
+++ b/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={[
           {
diff --git a/src/features/ServerPage/features/TribePage/features/MembersPage/components/Members/Members.tsx b/src/features/ServerPage/features/TribePage/features/MembersPage/components/Members/Members.tsx
index a97255e..74b2e99 100644
--- a/src/features/ServerPage/features/TribePage/features/MembersPage/components/Members/Members.tsx
+++ b/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',