change focused input label color, disable input borderBottom transfor…

…mation
InseeFr · Apr 13, 2021 · bbc2110 · bbc2110
1 parent 51f490c
commit bbc2110
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 5 deletions.
diff --git a/src/components/common/palette.js b/src/components/common/palette.js
@@ -10,6 +10,10 @@ const useStyles = makeStyles(theme => ({
     backgroundColor: theme.palette.primary.dark,
     height: '5em',
   },
+  primaryDarker: {
+    backgroundColor: theme.palette.primary.darker,
+    height: '5em',
+  },
   primaryLight: {
     backgroundColor: theme.palette.primary.light,
     height: '5em',
@@ -45,14 +49,21 @@ const Palette = () => {
 
   return (
     <>
+      <Paper className={classes.primaryDarker}>
+        <Typography color="textPrimary">Primary.darker text.primary</Typography>
+        <Typography color="textSecondary">Primary.darker text.secondary</Typography>
+      </Paper>
       <Paper className={classes.primaryDark}>
-        <Typography>Primary.dark</Typography>
+        <Typography color="textPrimary">Primary.dark text.primary</Typography>
+        <Typography color="textSecondary">Primary.dark text.secondary</Typography>
       </Paper>
       <Paper className={classes.primaryMain}>
-        <Typography>Primary.main</Typography>
+        <Typography color="textPrimary">Primary.main text.primary</Typography>
+        <Typography color="textSecondary">Primary.main text.secondary</Typography>
       </Paper>
       <Paper className={classes.primaryLight}>
-        <Typography>Primary.light</Typography>
+        <Typography color="textPrimary">Primary.light text.primary</Typography>
+        <Typography color="textSecondary">Primary.light text.secondary</Typography>
       </Paper>
       <Paper className={classes.secondaryDark}>
         <Typography>Secondary.dark</Typography>

diff --git a/src/components/panel-body/UEpage/forms/addressForm.js b/src/components/panel-body/UEpage/forms/addressForm.js
@@ -96,6 +96,7 @@ const Form = ({ closeModal, save, previousValue }) => {
         id="deliveryPoint"
         name="deliveryPoint"
         label={D.addressName}
+        InputLabelProps={{ color: 'secondary' }}
         type="text"
         fullWidth
         defaultValue={deliveryPoint}
@@ -106,6 +107,7 @@ const Form = ({ closeModal, save, previousValue }) => {
         id="streetType"
         name="streetType"
         label={D.addressFullAddress}
+        InputLabelProps={{ color: 'secondary' }}
         type="text"
         fullWidth
         defaultValue={streetType}
@@ -116,6 +118,7 @@ const Form = ({ closeModal, save, previousValue }) => {
         id="postcode"
         name="postcode"
         label={D.addressCity}
+        InputLabelProps={{ color: 'secondary' }}
         type="text"
         fullWidth
         defaultValue={postcode}
@@ -126,6 +129,7 @@ const Form = ({ closeModal, save, previousValue }) => {
         id="city"
         name="city"
         label={D.addressCountry}
+        InputLabelProps={{ color: 'secondary' }}
         type="text"
         fullWidth
         defaultValue={city}

diff --git a/src/components/panel-body/UEpage/forms/mailForm.js b/src/components/panel-body/UEpage/forms/mailForm.js
@@ -36,6 +36,7 @@ const Form = ({ closeModal, save, previousValue }) => {
         id="email"
         name="email"
         label={D.surveyUnitEmail}
+        InputLabelProps={{ color: 'secondary' }}
         type="text"
         fullWidth
         defaultValue={email || ''}

diff --git a/src/components/panel-body/UEpage/forms/phoneForm.js b/src/components/panel-body/UEpage/forms/phoneForm.js
@@ -51,6 +51,7 @@ const Form = ({ closeModal, save, previousValue }) => {
               id={`phone-${phoneNumber.order}`}
               name={`phone-${phoneNumber.order}`}
               label={`#${phoneNumber.order + 1}`}
+              InputLabelProps={{ color: 'secondary' }}
               type="text"
               fullWidth
               defaultValue={phoneNumber.value}

diff --git a/src/components/panel-body/UEpage/forms/userForm.js b/src/components/panel-body/UEpage/forms/userForm.js
@@ -45,6 +45,7 @@ const Form = ({ closeModal, previousValue, save }) => {
         id="lastName"
         name="lastName"
         label={D.surveyUnitLastName}
+        InputLabelProps={{ color: 'secondary' }}
         type="text"
         fullWidth
         defaultValue={lastName || ''}
@@ -55,6 +56,7 @@ const Form = ({ closeModal, previousValue, save }) => {
         id="firstName"
         name="firstName"
         label={D.surveyUnitFirstName}
+        InputLabelProps={{ color: 'secondary' }}
         type="text"
         fullWidth
         defaultValue={firstName || ''}

diff --git a/src/theme.js b/src/theme.js
@@ -3,6 +3,7 @@ import { createMuiTheme } from '@material-ui/core/styles';
 const theme = createMuiTheme({
   palette: {
     primary: {
+      light: '#eeeeee',
       main: '#ffffff',
       dark: '#cdcdcd',
       darker: '#666666',
@@ -16,8 +17,14 @@ const theme = createMuiTheme({
       default: '#ffffff',
     },
   },
-  typography: {
-    // fontSize: '16',
+  overrides: {
+    MuiInput: {
+      underline: {
+        '&:after,.Mui-focused&:after': {
+          transform: 'scaleX(0)',
+        },
+      },
+    },
   },
 });
 export default theme;