From 71e39078187079fef9b8fb680731cd9ede079dcc Mon Sep 17 00:00:00 2001
From: Adel LAKHDAR <alakhdar@grandlyon.com>
Date: Tue, 12 Mar 2024 12:24:48 +0000
Subject: [PATCH] feat(UI): Use MaterialUI components for input fields
---
.vscode/settings.json | 1 +
.../EPGLConnect/FormLogin/FormLogin.tsx | 17 +-
.../Connection/SGEConnect/SgeConnect.scss | 17 +-
.../Connection/SGEConnect/StepAddress.tsx | 19 +-
.../SGEConnect/StepIdentityAndPdl.tsx | 18 +-
.../SgeConnectView.spec.tsx.snap | 163 +++++++++++++++---
.../__snapshots__/StepAddress.spec.tsx.snap | 133 +++++++++++---
.../StepIdentityAndPdl.spec.tsx.snap | 163 +++++++++++++++---
.../Options/ReportOptions/ReportOptions.tsx | 8 +-
.../ProfileTypeFormNumber.tsx | 5 +-
.../ProfileTypeFormNumberSelection.tsx | 11 +-
.../ProfileType/profileTypeForm.scss | 5 +
src/components/theme.ts | 2 +
src/styles/index.scss | 8 +
14 files changed, 452 insertions(+), 118 deletions(-)
diff --git a/.vscode/settings.json b/.vscode/settings.json
index dcb2207f4..471272b31 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -106,6 +106,7 @@
"l'ADEME",
"L’embouage",
"lastname",
+ "Lato",
"legalnotice",
"llle",
"Lugdunum",
diff --git a/src/components/Connection/EPGLConnect/FormLogin/FormLogin.tsx b/src/components/Connection/EPGLConnect/FormLogin/FormLogin.tsx
index 68ca5f4fb..1996f265d 100644
--- a/src/components/Connection/EPGLConnect/FormLogin/FormLogin.tsx
+++ b/src/components/Connection/EPGLConnect/FormLogin/FormLogin.tsx
@@ -1,4 +1,4 @@
-import Button from '@material-ui/core/Button'
+import { Button, TextField } from '@material-ui/core'
import * as Sentry from '@sentry/react'
import TrailingIcon from 'assets/icons/ico/trailing-icon.svg'
import EglLogo from 'assets/icons/visu/egl-logo.svg'
@@ -91,26 +91,25 @@ const FormLogin = () => {
return (
<form>
<div className="form-group">
- <input
+ <TextField
+ variant="outlined"
id={'idFieldLogin' + fluidName}
- type="number"
+ type="tel"
className={classNames('inputText', { error: error !== '' })}
- aria-label={t(`auth.${konnectorSlug}.connect_form.login`)}
- placeholder={t(`auth.${konnectorSlug}.connect_form.login`)}
+ label={t(`auth.${konnectorSlug}.connect_form.login`)}
name="login"
onChange={e => changeLogin(e.target.value)}
value={login}
- inputMode="numeric"
/>
</div>
<div className="form-group">
- <input
+ <TextField
+ variant="outlined"
id={'idFieldPassword' + fluidName}
name="password"
type={showPassword ? 'text' : 'password'}
className={classNames('inputText', { error: error !== '' })}
- aria-label={t(`auth.${konnectorSlug}.connect_form.password`)}
- placeholder={t(`auth.${konnectorSlug}.connect_form.password`)}
+ label={t(`auth.${konnectorSlug}.connect_form.password`)}
onChange={e => changePassword(e.target.value)}
value={password}
/>
diff --git a/src/components/Connection/SGEConnect/SgeConnect.scss b/src/components/Connection/SGEConnect/SgeConnect.scss
index feb9ac3bc..72ae02f97 100644
--- a/src/components/Connection/SGEConnect/SgeConnect.scss
+++ b/src/components/Connection/SGEConnect/SgeConnect.scss
@@ -24,7 +24,7 @@
.head {
margin-top: 1rem;
}
- label {
+ .inline {
display: flex;
flex-direction: column;
align-items: flex-start;
@@ -36,6 +36,21 @@
}
cursor: pointer;
+
+ span span {
+ color: $gold-shadow;
+ }
+ }
+
+ label {
+ &.inline {
+ flex-direction: row;
+ align-items: center;
+ gap: 0.5rem;
+ }
+ cursor: pointer;
+
+
span span {
color: $gold-shadow;
}
diff --git a/src/components/Connection/SGEConnect/StepAddress.tsx b/src/components/Connection/SGEConnect/StepAddress.tsx
index 0f5ef8712..a6a97accc 100644
--- a/src/components/Connection/SGEConnect/StepAddress.tsx
+++ b/src/components/Connection/SGEConnect/StepAddress.tsx
@@ -2,6 +2,7 @@ import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { SgeStore } from 'models'
import React from 'react'
import { SGEKeysForm } from './SgeConnectView'
+import { TextField } from '@material-ui/core'
interface StepAddressProps {
sgeState: SgeStore
@@ -16,8 +17,9 @@ const StepAddress = ({ sgeState, onChange }: StepAddressProps) => {
{t('auth.enedissgegrandlyon.addressTitle')}
</div>
<label htmlFor="address" className="text-16-normal">
- {t('auth.enedissgegrandlyon.address')}
- <input
+ <TextField
+ label={t('auth.enedissgegrandlyon.address')}
+ variant="outlined"
type="text"
id="address"
name="address"
@@ -27,21 +29,22 @@ const StepAddress = ({ sgeState, onChange }: StepAddressProps) => {
/>
</label>
<label htmlFor="zipCode" className="text-16-normal">
- {t('auth.enedissgegrandlyon.zipCode')}
- <input
+ <TextField
+ label={t('auth.enedissgegrandlyon.zipCode')}
+ variant="outlined"
type="number"
- min={0}
id="zipCode"
name="zipCode"
className="inputText"
- value={sgeState.zipCode !== null ? sgeState.zipCode : undefined}
+ value={sgeState.zipCode ?? undefined}
onChange={e => onChange('zipCode', e.target.value, 5)}
/>
</label>
<label htmlFor="city" className="text-16-normal">
- {t('auth.enedissgegrandlyon.city')}
- <input
+ <TextField
+ label={t('auth.enedissgegrandlyon.city')}
+ variant="outlined"
type="text"
id="city"
name="city"
diff --git a/src/components/Connection/SGEConnect/StepIdentityAndPdl.tsx b/src/components/Connection/SGEConnect/StepIdentityAndPdl.tsx
index b9ef3bd75..8a46de609 100644
--- a/src/components/Connection/SGEConnect/StepIdentityAndPdl.tsx
+++ b/src/components/Connection/SGEConnect/StepIdentityAndPdl.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@material-ui/core'
+import { TextField, Button } from '@material-ui/core'
import SgeModalHint from 'components/Connection/SGEConnect/SgeModalHint'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { SgeStore } from 'models'
@@ -28,8 +28,9 @@ const StepIdentityAndPdl = ({
{t('auth.enedissgegrandlyon.identityTitle')}
</div>
<label htmlFor="firstName" className="text-16-normal">
- {t('auth.enedissgegrandlyon.firstName')}
- <input
+ <TextField
+ label={t('auth.enedissgegrandlyon.firstName')}
+ variant="outlined"
type="text"
id="firstName"
name="firstName"
@@ -40,8 +41,9 @@ const StepIdentityAndPdl = ({
/>
</label>
<label htmlFor="lastName" className="text-16-normal">
- {t('auth.enedissgegrandlyon.lastName')}
- <input
+ <TextField
+ label={t('auth.enedissgegrandlyon.lastName')}
+ variant="outlined"
type="text"
id="lastName"
name="lastName"
@@ -55,12 +57,12 @@ const StepIdentityAndPdl = ({
{t('auth.enedissgegrandlyon.pdlTitle')}
</div>
<label htmlFor="pdl" className="text-16-normal">
- {t('auth.enedissgegrandlyon.pdlLabel')}
- <input
+ <TextField
+ label={t('auth.enedissgegrandlyon.pdlLabel')}
+ variant="outlined"
id="pdl"
name="pdl"
type="number"
- min={0}
className="inputText"
value={sgeState.pdl ? sgeState.pdl : undefined}
onChange={e => onChange('pdl', e.target.value, 14)}
diff --git a/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap b/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
index 036c91711..c3877fc8e 100644
--- a/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
+++ b/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
@@ -121,29 +121,101 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
class="text-16-normal"
for="firstName"
>
- auth.enedissgegrandlyon.firstName
- <input
- class="inputText"
- id="firstName"
- name="firstName"
- required=""
- type="text"
- value=""
- />
+ <div
+ class="MuiFormControl-root MuiTextField-root inputText"
+ >
+ <label
+ class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
+ data-shrink="false"
+ for="firstName"
+ id="firstName-label"
+ >
+ auth.enedissgegrandlyon.firstName
+ <span
+ aria-hidden="true"
+ class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
+ >
+  
+ *
+ </span>
+ </label>
+ <div
+ class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl"
+ >
+ <input
+ aria-invalid="false"
+ class="MuiInputBase-input MuiOutlinedInput-input"
+ id="firstName"
+ name="firstName"
+ required=""
+ type="text"
+ value=""
+ />
+ <fieldset
+ aria-hidden="true"
+ class="PrivateNotchedOutline-root-1 MuiOutlinedInput-notchedOutline"
+ >
+ <legend
+ class="PrivateNotchedOutline-legendLabelled-3"
+ >
+ <span>
+ auth.enedissgegrandlyon.firstName
+ Â *
+ </span>
+ </legend>
+ </fieldset>
+ </div>
+ </div>
</label>
<label
class="text-16-normal"
for="lastName"
>
- auth.enedissgegrandlyon.lastName
- <input
- class="inputText"
- id="lastName"
- name="lastName"
- required=""
- type="text"
- value=""
- />
+ <div
+ class="MuiFormControl-root MuiTextField-root inputText"
+ >
+ <label
+ class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
+ data-shrink="false"
+ for="lastName"
+ id="lastName-label"
+ >
+ auth.enedissgegrandlyon.lastName
+ <span
+ aria-hidden="true"
+ class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
+ >
+  
+ *
+ </span>
+ </label>
+ <div
+ class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl"
+ >
+ <input
+ aria-invalid="false"
+ class="MuiInputBase-input MuiOutlinedInput-input"
+ id="lastName"
+ name="lastName"
+ required=""
+ type="text"
+ value=""
+ />
+ <fieldset
+ aria-hidden="true"
+ class="PrivateNotchedOutline-root-1 MuiOutlinedInput-notchedOutline"
+ >
+ <legend
+ class="PrivateNotchedOutline-legendLabelled-3"
+ >
+ <span>
+ auth.enedissgegrandlyon.lastName
+ Â *
+ </span>
+ </legend>
+ </fieldset>
+ </div>
+ </div>
</label>
<div
class="title text-22-bold"
@@ -154,17 +226,52 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
class="text-16-normal"
for="pdl"
>
- auth.enedissgegrandlyon.pdlLabel
- <input
- class="inputText"
- id="pdl"
+ <div
+ class="MuiFormControl-root MuiTextField-root inputText"
inputmode="numeric"
- min="0"
- name="pdl"
- required=""
- type="number"
- value=""
- />
+ >
+ <label
+ class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
+ data-shrink="false"
+ for="pdl"
+ id="pdl-label"
+ >
+ auth.enedissgegrandlyon.pdlLabel
+ <span
+ aria-hidden="true"
+ class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
+ >
+  
+ *
+ </span>
+ </label>
+ <div
+ class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl"
+ >
+ <input
+ aria-invalid="false"
+ class="MuiInputBase-input MuiOutlinedInput-input"
+ id="pdl"
+ name="pdl"
+ required=""
+ type="number"
+ value=""
+ />
+ <fieldset
+ aria-hidden="true"
+ class="PrivateNotchedOutline-root-1 MuiOutlinedInput-notchedOutline"
+ >
+ <legend
+ class="PrivateNotchedOutline-legendLabelled-3"
+ >
+ <span>
+ auth.enedissgegrandlyon.pdlLabel
+ Â *
+ </span>
+ </legend>
+ </fieldset>
+ </div>
+ </div>
</label>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-text btnText"
diff --git a/src/components/Connection/SGEConnect/__snapshots__/StepAddress.spec.tsx.snap b/src/components/Connection/SGEConnect/__snapshots__/StepAddress.spec.tsx.snap
index 9917baafd..c5a8a9076 100644
--- a/src/components/Connection/SGEConnect/__snapshots__/StepAddress.spec.tsx.snap
+++ b/src/components/Connection/SGEConnect/__snapshots__/StepAddress.spec.tsx.snap
@@ -14,41 +14,124 @@ exports[`StepAddress component should be rendered correctly 1`] = `
class="text-16-normal"
for="address"
>
- auth.enedissgegrandlyon.address
- <input
- class="inputText"
- id="address"
- name="address"
- type="text"
- value=""
- />
+ <div
+ class="MuiFormControl-root MuiTextField-root inputText"
+ >
+ <label
+ class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined"
+ data-shrink="false"
+ for="address"
+ id="address-label"
+ >
+ auth.enedissgegrandlyon.address
+ </label>
+ <div
+ class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl"
+ >
+ <input
+ aria-invalid="false"
+ class="MuiInputBase-input MuiOutlinedInput-input"
+ id="address"
+ name="address"
+ type="text"
+ value=""
+ />
+ <fieldset
+ aria-hidden="true"
+ class="PrivateNotchedOutline-root-1 MuiOutlinedInput-notchedOutline"
+ >
+ <legend
+ class="PrivateNotchedOutline-legendLabelled-3"
+ >
+ <span>
+ auth.enedissgegrandlyon.address
+ </span>
+ </legend>
+ </fieldset>
+ </div>
+ </div>
</label>
<label
class="text-16-normal"
for="zipCode"
>
- auth.enedissgegrandlyon.zipCode
- <input
- class="inputText"
- id="zipCode"
- min="0"
- name="zipCode"
- type="number"
- value=""
- />
+ <div
+ class="MuiFormControl-root MuiTextField-root inputText"
+ >
+ <label
+ class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined"
+ data-shrink="false"
+ for="zipCode"
+ id="zipCode-label"
+ >
+ auth.enedissgegrandlyon.zipCode
+ </label>
+ <div
+ class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl"
+ >
+ <input
+ aria-invalid="false"
+ class="MuiInputBase-input MuiOutlinedInput-input"
+ id="zipCode"
+ name="zipCode"
+ type="number"
+ value=""
+ />
+ <fieldset
+ aria-hidden="true"
+ class="PrivateNotchedOutline-root-1 MuiOutlinedInput-notchedOutline"
+ >
+ <legend
+ class="PrivateNotchedOutline-legendLabelled-3"
+ >
+ <span>
+ auth.enedissgegrandlyon.zipCode
+ </span>
+ </legend>
+ </fieldset>
+ </div>
+ </div>
</label>
<label
class="text-16-normal"
for="city"
>
- auth.enedissgegrandlyon.city
- <input
- class="inputText"
- id="city"
- name="city"
- type="text"
- value=""
- />
+ <div
+ class="MuiFormControl-root MuiTextField-root inputText"
+ >
+ <label
+ class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined"
+ data-shrink="false"
+ for="city"
+ id="city-label"
+ >
+ auth.enedissgegrandlyon.city
+ </label>
+ <div
+ class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl"
+ >
+ <input
+ aria-invalid="false"
+ class="MuiInputBase-input MuiOutlinedInput-input"
+ id="city"
+ name="city"
+ type="text"
+ value=""
+ />
+ <fieldset
+ aria-hidden="true"
+ class="PrivateNotchedOutline-root-1 MuiOutlinedInput-notchedOutline"
+ >
+ <legend
+ class="PrivateNotchedOutline-legendLabelled-3"
+ >
+ <span>
+ auth.enedissgegrandlyon.city
+ </span>
+ </legend>
+ </fieldset>
+ </div>
+ </div>
</label>
</div>
</div>
diff --git a/src/components/Connection/SGEConnect/__snapshots__/StepIdentityAndPdl.spec.tsx.snap b/src/components/Connection/SGEConnect/__snapshots__/StepIdentityAndPdl.spec.tsx.snap
index 6699b43c1..e84d923b8 100644
--- a/src/components/Connection/SGEConnect/__snapshots__/StepIdentityAndPdl.spec.tsx.snap
+++ b/src/components/Connection/SGEConnect/__snapshots__/StepIdentityAndPdl.spec.tsx.snap
@@ -14,29 +14,101 @@ exports[`StepIdentityAndPdl component should be rendered correctly 1`] = `
class="text-16-normal"
for="firstName"
>
- auth.enedissgegrandlyon.firstName
- <input
- class="inputText"
- id="firstName"
- name="firstName"
- required=""
- type="text"
- value=""
- />
+ <div
+ class="MuiFormControl-root MuiTextField-root inputText"
+ >
+ <label
+ class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
+ data-shrink="false"
+ for="firstName"
+ id="firstName-label"
+ >
+ auth.enedissgegrandlyon.firstName
+ <span
+ aria-hidden="true"
+ class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
+ >
+  
+ *
+ </span>
+ </label>
+ <div
+ class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl"
+ >
+ <input
+ aria-invalid="false"
+ class="MuiInputBase-input MuiOutlinedInput-input"
+ id="firstName"
+ name="firstName"
+ required=""
+ type="text"
+ value=""
+ />
+ <fieldset
+ aria-hidden="true"
+ class="PrivateNotchedOutline-root-1 MuiOutlinedInput-notchedOutline"
+ >
+ <legend
+ class="PrivateNotchedOutline-legendLabelled-3"
+ >
+ <span>
+ auth.enedissgegrandlyon.firstName
+ Â *
+ </span>
+ </legend>
+ </fieldset>
+ </div>
+ </div>
</label>
<label
class="text-16-normal"
for="lastName"
>
- auth.enedissgegrandlyon.lastName
- <input
- class="inputText"
- id="lastName"
- name="lastName"
- required=""
- type="text"
- value=""
- />
+ <div
+ class="MuiFormControl-root MuiTextField-root inputText"
+ >
+ <label
+ class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
+ data-shrink="false"
+ for="lastName"
+ id="lastName-label"
+ >
+ auth.enedissgegrandlyon.lastName
+ <span
+ aria-hidden="true"
+ class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
+ >
+  
+ *
+ </span>
+ </label>
+ <div
+ class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl"
+ >
+ <input
+ aria-invalid="false"
+ class="MuiInputBase-input MuiOutlinedInput-input"
+ id="lastName"
+ name="lastName"
+ required=""
+ type="text"
+ value=""
+ />
+ <fieldset
+ aria-hidden="true"
+ class="PrivateNotchedOutline-root-1 MuiOutlinedInput-notchedOutline"
+ >
+ <legend
+ class="PrivateNotchedOutline-legendLabelled-3"
+ >
+ <span>
+ auth.enedissgegrandlyon.lastName
+ Â *
+ </span>
+ </legend>
+ </fieldset>
+ </div>
+ </div>
</label>
<div
class="title text-22-bold"
@@ -47,17 +119,52 @@ exports[`StepIdentityAndPdl component should be rendered correctly 1`] = `
class="text-16-normal"
for="pdl"
>
- auth.enedissgegrandlyon.pdlLabel
- <input
- class="inputText"
- id="pdl"
+ <div
+ class="MuiFormControl-root MuiTextField-root inputText"
inputmode="numeric"
- min="0"
- name="pdl"
- required=""
- type="number"
- value=""
- />
+ >
+ <label
+ class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
+ data-shrink="false"
+ for="pdl"
+ id="pdl-label"
+ >
+ auth.enedissgegrandlyon.pdlLabel
+ <span
+ aria-hidden="true"
+ class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
+ >
+  
+ *
+ </span>
+ </label>
+ <div
+ class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl"
+ >
+ <input
+ aria-invalid="false"
+ class="MuiInputBase-input MuiOutlinedInput-input"
+ id="pdl"
+ name="pdl"
+ required=""
+ type="number"
+ value=""
+ />
+ <fieldset
+ aria-hidden="true"
+ class="PrivateNotchedOutline-root-1 MuiOutlinedInput-notchedOutline"
+ >
+ <legend
+ class="PrivateNotchedOutline-legendLabelled-3"
+ >
+ <span>
+ auth.enedissgegrandlyon.pdlLabel
+ Â *
+ </span>
+ </legend>
+ </fieldset>
+ </div>
+ </div>
</label>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-text btnText"
diff --git a/src/components/Options/ReportOptions/ReportOptions.tsx b/src/components/Options/ReportOptions/ReportOptions.tsx
index 30dc6917c..50556fd28 100644
--- a/src/components/Options/ReportOptions/ReportOptions.tsx
+++ b/src/components/Options/ReportOptions/ReportOptions.tsx
@@ -9,6 +9,7 @@ import ConsumptionDataManager from 'services/consumption.service'
import { useAppDispatch, useAppSelector } from 'store/hooks'
import { updateProfile } from 'store/profile/profile.slice'
import './reportOptions.scss'
+import { TextField } from '@material-ui/core'
const ReportOptions = () => {
const { t } = useI18n()
@@ -133,7 +134,8 @@ const ReportOptions = () => {
{t('profile.report.input_label_alert')}
</div>
<div className="switch-container-alert">
- <input
+ <TextField
+ variant="outlined"
className="inputNumber text-18"
type="number"
defaultValue={
@@ -142,9 +144,7 @@ const ReportOptions = () => {
: profile.waterDailyConsumptionLimit
}
onBlur={setWaterLimit}
- aria-label={t(
- 'profile.accessibility.input_water_alert_report'
- )}
+ label={t('profile.accessibility.input_water_alert_report')}
inputMode="numeric"
/>
<span className="switch-label text-16-normal">L</span>
diff --git a/src/components/ProfileType/ProfileTypeFormNumber/ProfileTypeFormNumber.tsx b/src/components/ProfileType/ProfileTypeFormNumber/ProfileTypeFormNumber.tsx
index e4d1bf390..ded85add4 100644
--- a/src/components/ProfileType/ProfileTypeFormNumber/ProfileTypeFormNumber.tsx
+++ b/src/components/ProfileType/ProfileTypeFormNumber/ProfileTypeFormNumber.tsx
@@ -6,6 +6,7 @@ import { ProfileTypeStepForm } from 'enums'
import { ProfileType, ProfileTypeAnswer, ProfileTypeValues } from 'models'
import React, { useCallback, useEffect, useState } from 'react'
import { useAppSelector } from 'store/hooks'
+import { OutlinedInput, TextField, InputAdornment } from '@material-ui/core'
interface ProfileTypeFormNumberProps {
step: ProfileTypeStepForm
@@ -54,7 +55,8 @@ const ProfileTypeFormNumber = ({
</div>
{answer != null && (
<label className="text">
- <input
+ <OutlinedInput
+ endAdornment={<InputAdornment position="end">m²</InputAdornment>}
type="number"
className="inputNumber"
value={answer.toString()}
@@ -63,7 +65,6 @@ const ProfileTypeFormNumber = ({
autoFocus
style={{ marginRight: '0.5rem' }}
/>
- m²
</label>
)}
</div>
diff --git a/src/components/ProfileType/ProfileTypeFormNumberSelection/ProfileTypeFormNumberSelection.tsx b/src/components/ProfileType/ProfileTypeFormNumberSelection/ProfileTypeFormNumberSelection.tsx
index be39d086f..8d733919c 100644
--- a/src/components/ProfileType/ProfileTypeFormNumberSelection/ProfileTypeFormNumberSelection.tsx
+++ b/src/components/ProfileType/ProfileTypeFormNumberSelection/ProfileTypeFormNumberSelection.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@material-ui/core'
+import { Button, TextField } from '@material-ui/core'
import FormNavigation from 'components/CommonKit/FormNavigation/FormNavigation'
import 'components/ProfileType/profileTypeForm.scss'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
@@ -82,12 +82,13 @@ const ProfileTypeFormNumberSelection = ({
>
-
</Button>
- <input
- type="number"
- className="inputNumber"
+ <TextField
+ variant="outlined"
+ type="tel"
+ className="inputNumberIncrements"
value={answer.toString()}
name={answerType.attribute}
- disabled={true}
+ size="small"
/>
<Button
onClick={() => increment()}
diff --git a/src/components/ProfileType/profileTypeForm.scss b/src/components/ProfileType/profileTypeForm.scss
index 9ebe65355..e2cd232b0 100644
--- a/src/components/ProfileType/profileTypeForm.scss
+++ b/src/components/ProfileType/profileTypeForm.scss
@@ -110,6 +110,11 @@
border-color: $gold-shadow;
}
}
+
+ .inputNumberIncrements {
+ width: 80px;
+ }
+
.date-select {
margin: 0.5em;
border: 1px solid $gold-shadow;
diff --git a/src/components/theme.ts b/src/components/theme.ts
index e1b9d32f0..0230c425e 100644
--- a/src/components/theme.ts
+++ b/src/components/theme.ts
@@ -4,9 +4,11 @@ export const theme = createTheme({
palette: {
type: 'dark',
primary: {
+ main: '#F1C017',
'500': '#579eff',
},
},
+ typography: { fontFamily: ['Lato'].join(',') },
overrides: {
MuiButton: {
root: {
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 0539cbb69..b0eaaab45 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -85,3 +85,11 @@
height: 36px !important;
background-color: $dark-light-3 !important;
}
+
+// autofill fix
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+ -webkit-box-shadow: 0 0 0 30px $dark-2 inset !important;
+}
--
GitLab