move some css to material theme, contact attempt time is editable, ca…

…lendar colors fixed, modals margin and padding removal, scrollBar remove
InseeFr · Apr 13, 2021 · 0ae7cd6 · 0ae7cd6
1 parent bbc2110
commit 0ae7cd6
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 30 deletions.
diff --git a/src/App.js b/src/App.js
@@ -1,4 +1,3 @@
-import { makeStyles } from '@material-ui/core';
 import { useAuth } from 'common-tools/auth/initAuth';
 import useServiceWorker from 'common-tools/hooks/useServiceWorker';
 import Preloader from 'components/common/loader';
@@ -10,24 +9,14 @@ import D from 'i18n';
 import React from 'react';
 import { Route } from 'react-router-dom';
 
-const useStyles = makeStyles(() => ({
-  pearlContainer: {
-    height: '100%',
-    scrollbarWidth: 'none',
-    '&::-webkit-scrollbar': {
-      display: 'none',
-    },
-  },
-}));
-
 function App() {
   const { authenticated } = useAuth();
   const serviceWorkerInfo = useServiceWorker(authenticated);
-  const classes = useStyles();
+
   return (
     <>
       <Notification serviceWorkerInfo={serviceWorkerInfo} />
-      <div className={classes.pearlContainer}>
+      <div>
         {!authenticated && <Preloader message={D.pleaseWait} />}
         {authenticated && (
           <>

diff --git a/src/components/panel-body/UEpage/contacts/contactAttempts/formPanel.js b/src/components/panel-body/UEpage/contacts/contactAttempts/formPanel.js
@@ -14,6 +14,7 @@ const useStyles = makeStyles(() => ({
     borderRadius: '15px',
     minHeight: '200px',
     minWidth: '300px',
+    width: 'max-content',
   },
   row: {
     display: 'flex',

diff --git a/src/components/panel-body/UEpage/forms/contactAttemptsForm.js b/src/components/panel-body/UEpage/forms/contactAttemptsForm.js
@@ -1,7 +1,8 @@
 import DateFnsUtils from '@date-io/date-fns';
 import { Fab, makeStyles, Paper, Typography } from '@material-ui/core';
 import AddIcon from '@material-ui/icons/Add';
-import { DatePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
+import ScheduleIcon from '@material-ui/icons/Schedule';
+import { DatePicker, KeyboardTimePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
 import contactAttemptEnum from 'common-tools/enum/ContactAttemptEnum';
 import surveyUnitStateEnum from 'common-tools/enum/SUStateEnum';
 import { addNewState } from 'common-tools/functions';
@@ -12,7 +13,6 @@ import PropTypes from 'prop-types';
 import React, { useContext, useEffect, useState } from 'react';
 import ContactAttemptLine from '../contacts/contactAttempts/contactAttemptLine';
 import FormPanel from '../contacts/contactAttempts/formPanel';
-import UpDownCounter from '../contacts/contactAttempts/upDownCounter';
 import SurveyUnitContext from '../UEContext';
 
 const useStyles = makeStyles(theme => ({
@@ -63,7 +63,10 @@ const useStyles = makeStyles(theme => ({
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
+    margin: 0,
   },
+  root: { width: '15em', alignSelf: 'center', marginBottom: '2em' },
+  input: { fontSize: 'xxx-large', paddingLeft: '0.5em' },
 }));
 
 class FrLocalizedUtils extends DateFnsUtils {
@@ -211,20 +214,17 @@ const Form = ({ previousValue, save, deleteAction }) => {
             variant="static"
             disableToolbar
           />
-        </MuiPickersUtilsProvider>
-        <div className={classes.row}>
-          <UpDownCounter
-            selectedDate={selectedDate}
-            handleDateChange={handleDateChange}
-            type="hours"
-          />
-          <Typography className={classes.xxxLarge}>:</Typography>
-          <UpDownCounter
-            selectedDate={selectedDate}
-            handleDateChange={handleDateChange}
-            type="minutes"
+          <KeyboardTimePicker
+            classes={{ root: classes.root }}
+            value={selectedDate}
+            ampm={false}
+            onChange={date => handleDateChange(date)}
+            keyboardIcon={<ScheduleIcon />}
+            cancelLabel="Annuler"
+            okLabel="Valider"
+            inputProps={{ className: classes.input }}
           />
-        </div>
+        </MuiPickersUtilsProvider>
       </FormPanel>
 
       <FormPanel

diff --git a/src/components/panel-body/UEpage/router.js b/src/components/panel-body/UEpage/router.js
@@ -24,11 +24,13 @@ const useStyles = makeStyles(() => ({
   },
   row: {
     flexWrap: 'nowrap',
-    padding: '1em',
+    // padding: '1em',
   },
   paperModal: {
     boxShadow: 'unset',
     backgroundColor: 'transparent',
+    margin: 0,
+    maxWidth: 'unset',
   },
 }));
 

diff --git a/src/index.js b/src/index.js
@@ -1,4 +1,3 @@
-import 'font-awesome/css/font-awesome.min.css';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Root from './Root';

diff --git a/src/theme.js b/src/theme.js
@@ -7,6 +7,7 @@ const theme = createMuiTheme({
       main: '#ffffff',
       dark: '#cdcdcd',
       darker: '#666666',
+      contrastText: '#000000',
     },
     secondary: {
       light: '#0066ff',
@@ -18,13 +19,51 @@ const theme = createMuiTheme({
     },
   },
   overrides: {
+    MuiCssBaseline: {
+      '@global': {
+        html: {
+          height: '100%',
+          scrollbarWidth: 'none',
+          '&::-webkit-scrollbar': {
+            display: 'none',
+          },
+        },
+      },
+    },
     MuiInput: {
       underline: {
         '&:after,.Mui-focused&:after': {
           transform: 'scaleX(0)',
         },
       },
     },
+    MuiButton: {
+      root: {
+        background: '#666666',
+        border: 'transparent solid 1px',
+        color: '#ffffff',
+        '&:hover': {
+          background: '#cdcdcd',
+          color: '#000000',
+          border: 'black solid 1px',
+        },
+        '&:disabled': {
+          background: '#cdcdcd',
+        },
+      },
+    },
+    MuiPickersDay: {
+      current: {
+        color: '#000000',
+        backgroundColor: '#eeeeee',
+      },
+      daySelected: {
+        backgroundColor: '#555555',
+        color: '#ffffff',
+        fontWeight: 'bolder',
+        '&:hover': { backgroundColor: '#aaaaaa' },
+      },
+    },
   },
 });
 export default theme;