From 819314219c4a6617496496a3bb17e36ad4606d90 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Tue, 27 Jun 2023 21:08:03 +0100
Subject: [PATCH] feat: Styled InputLabel

---
 .../components/Settings/TeamSettings.tsx      | 51 +++++++++----------
 1 file changed, 23 insertions(+), 28 deletions(-)

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/TeamSettings.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/TeamSettings.tsx
index 504009420e..d402e8dba6 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/TeamSettings.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/TeamSettings.tsx
@@ -7,8 +7,8 @@ import Grid from "@mui/material/Grid";
 import IconButton from "@mui/material/IconButton";
 import InputLabel from "@mui/material/InputLabel";
 import MenuItem from "@mui/material/MenuItem";
+import { styled } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
-import makeStyles from "@mui/styles/makeStyles";
 import { useFormik } from "formik";
 import React from "react";
 import Input from "ui/Input";
@@ -18,30 +18,26 @@ import InputRowItem from "ui/InputRowItem";
 import OptionButton from "ui/OptionButton";
 import SelectInput from "ui/SelectInput";
 
-interface ITeam {}
+const StyledAvatar = styled(Avatar)(({ theme }) => ({
+  width: theme.spacing(8),
+  height: theme.spacing(8),
+}));
 
-export const teamStyles = makeStyles((theme) => ({
-  root: {
-    color: "currentColor",
-  },
-  avatar: {
-    width: theme.spacing(8),
-    height: theme.spacing(8),
-  },
-  grow: {
-    flexGrow: 1,
-  },
-  inputLabel: {
-    position: "absolute",
-    color: theme.palette.text.primary,
+const StyledGrid = styled(Grid)(() => ({
+  flexGrow: 1,
+}));
+
+const StyledInputLabel = styled(InputLabel)(({ theme }) => ({
+  position: "absolute",
+  color: theme.palette.text.primary,
+  [theme.breakpoints.up("xs")]: {
     fontSize: 12,
-    top: -18,
   },
+  top: -18,
 }));
 
 const TeamMember = ({ name, email, userRole }: any) => {
   const [role, setRole] = React.useState(userRole);
-  const classes = teamStyles();
   return (
     <Box mb={1.5}>
       <Grid
@@ -51,12 +47,12 @@ const TeamMember = ({ name, email, userRole }: any) => {
         alignItems="center"
       >
         <Grid item>
-          <Avatar className={classes.avatar}>{name[0]}</Avatar>
+          <StyledAvatar>{name[0]}</StyledAvatar>
         </Grid>
-        <Grid item className={classes.grow}>
+        <StyledGrid item>
           <Typography variant="h5">{name}</Typography>
           <Box fontSize="h5.fontSize">{email}</Box>
-        </Grid>
+        </StyledGrid>
         <Grid item>
           <SelectInput
             value={role}
@@ -78,8 +74,7 @@ const TeamMember = ({ name, email, userRole }: any) => {
   );
 };
 
-const Team: React.FC<ITeam> = () => {
-  const classes = teamStyles();
+const Team: React.FC = () => {
   const formik = useFormik({
     initialValues: {},
     onSubmit: (values) => {
@@ -123,16 +118,16 @@ const Team: React.FC<ITeam> = () => {
           wrap="nowrap"
         >
           <Grid item>
-            <Avatar className={classes.avatar}>
+            <StyledAvatar>
               <Add />
-            </Avatar>
+            </StyledAvatar>
           </Grid>
-          <Grid item className={classes.grow}>
+          <StyledGrid item>
             <Box position="relative">
-              <InputLabel className={classes.inputLabel}>Invite new</InputLabel>
+              <StyledInputLabel>Invite new</StyledInputLabel>
               <Input placeholder="enter new email address" fullWidth />
             </Box>
-          </Grid>
+          </StyledGrid>
           <Grid item>
             <SelectInput value="admin">
               <MenuItem value="admin">Admin</MenuItem>