Merge pull request #104 from Elizabethhub/bug-fix/inputs

Bug fix/inputs
Elizabethhub · Mar 25, 2024 · a586f2d · a586f2d
2 parents 179bfde + 996edff
commit a586f2d
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 12 deletions.
diff --git a/src/components/ModalAddWater/ModalAddWater.jsx b/src/components/ModalAddWater/ModalAddWater.jsx
@@ -17,7 +17,6 @@ import useCounter from '../../hooks/modalHandleUpdate.js';
 import { useDispatch } from 'react-redux';
 import {
   addWaterThunk,
-  // fetchAllWaterThunk,
   fetchTodayWaterThunk,
 } from '../../store/water/operations.js';
 import { changeModalClose } from '../../store/water/waterSlice.js';
@@ -93,11 +92,17 @@ const ModalAddWater = () => {
           name="decrement"
           onClick={handleUpdate}
           disabled={counter === 0}
+          aria-label={t('decrementWater')}
         >
           <SvgMinus size="24" />
         </button>
         <span>{displayValue ? displayValue : `${counter}ml`}</span>
-        <button type="button" name="increment" onClick={handleUpdate}>
+        <button
+          type="button"
+          name="increment"
+          onClick={handleUpdate}
+          aria-label={t('incrementWater')}
+        >
           <SvgPlus size="24" />
         </button>
       </StyledModalAddTracker>
@@ -140,7 +145,9 @@ const ModalAddWater = () => {
 
       <StyledModalAddSave>
         <span>{displayValue}</span>
-        <button type="submit">{t('save')}</button>
+        <button type="submit" aria-label="save">
+          {t('save')}
+        </button>
       </StyledModalAddSave>
     </StyledModalForm>
   );

diff --git a/src/components/ModalAddWater/ModalAddWater.styled.js b/src/components/ModalAddWater/ModalAddWater.styled.js
@@ -20,7 +20,6 @@ export const StyledModalAddWrapper = styled.div`
   position: relative;
   border-radius: 10px;
   background: ${(props) => props.theme.backgroundAdd};
-  /* color: ${(props) => props.theme.colorBody}; */
   background-size: 130% 130%;
   background-position: center;
   width: 280px;
@@ -281,13 +280,17 @@ export const TimeGlobalStyles = createGlobalStyle`
 .react-datepicker__header .react-datepicker-time__header{
   color: ${(props) => props.theme.backgroundAdd};
 }
+.react-datepicker__time-container .react-datepicker__time {
+    background-color: ${(props) => props.theme.datepickerBg} !important;
+  }
+
 
 .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list::-webkit-scrollbar {
   width: 12px;
 }
 
 .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list::-webkit-scrollbar-track {
-  background-color: ${(props) => props.theme.counterSpanBg};
+  background-color: ${(props) => props.theme.counterBorderAdd};
 }
 
 .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list::-webkit-scrollbar-thumb {
@@ -312,4 +315,7 @@ export const TimeGlobalStyles = createGlobalStyle`
 .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item{
   transition: all 0.5s ease;
 }
+.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
+    color: ${(props) => props.theme.datepickerDisabled} !important;
+  }
   `;
diff --git a/src/components/ModalDailyNorma/ModalDailyNorma.styled.js b/src/components/ModalDailyNorma/ModalDailyNorma.styled.js
@@ -100,9 +100,9 @@ export const SaveButton = styled.button`
   width: 256px;
   border-radius: 10px;
   padding: 8px 30px 8px 30px;
-  background-color: var(--blue);
-  box-shadow: var(--modal-add-shadow);
-  color: var(--white);
+  background-color: ${(props) => props.theme.buttonBgAdd};
+  box-shadow: ${(props) => props.theme.counterShadowAdd};
+  color: ${(props) => props.theme.buttonTextAdd};
   border: none;
   outline: transparent;
   transition: all 0.5s ease;
@@ -116,10 +116,13 @@ export const SaveButton = styled.button`
     width: 160px;
     height: 44px;
     font-size: 18px;
-    flex-direction: row-reverse;
+    /* flex-direction: row-reverse; */
     margin-left: auto;
   }
   @media only screen and (min-width: 1280px) {
+    width: 160px;
+    height: 44px;
+    font-size: 18px;
   }
 `;
 

diff --git a/src/components/ModalDeleteWater/ModalDeleteWater.jsx b/src/components/ModalDeleteWater/ModalDeleteWater.jsx
@@ -71,20 +71,25 @@ const ModalDeleteWater = () => {
             onClick={() => {
               dispatch(changeModalClose(false));
             }}
+            aria-label={t('closeWindow')}
           >
             <SvgCross />
           </StyledModalDeleteClose>
 
           <StyledModalDeleteForm onSubmit={onSubmit}>
             <p>{t('areYouSureYouWantToDeleteTheEntry')}</p>
             <StyledModalDeleteButtons>
-              <StyledModalDeleteBtn type="submit">
+              <StyledModalDeleteBtn
+                type="submit"
+                aria-label={t('deleteWaterNote')}
+              >
                 {t('delete')}
               </StyledModalDeleteBtn>
               <StyledModalCancelBtn
                 onClick={() => {
                   dispatch(changeModalClose(false));
                 }}
+                aria-label={t('cancelAction')}
               >
                 {t('cancel')}
               </StyledModalCancelBtn>

diff --git a/src/components/ModalEditWater/ModalEditWater.jsx b/src/components/ModalEditWater/ModalEditWater.jsx
@@ -107,11 +107,17 @@ const ModalEditWater = ({ waterItem }) => {
           name="decrement"
           onClick={handleUpdate}
           disabled={counter === 0}
+          aria-label={t('decrementWater')}
         >
           <SvgMinus size="24" />
         </button>
         <span>{displayValue ? displayValue : `${counter}ml`}</span>
-        <button type="button" name="increment" onClick={handleUpdate}>
+        <button
+          type="button"
+          name="increment"
+          onClick={handleUpdate}
+          aria-label={t('incrementWater')}
+        >
           <SvgPlus size="24" />
         </button>
       </StyledModalAddTracker>
@@ -159,7 +165,9 @@ const ModalEditWater = ({ waterItem }) => {
 
       <StyledModalAddSave>
         <span>{displayValue}</span>
-        <button type="submit">{t('save')}</button>
+        <button type="submit" aria-label={t('saveWater')}>
+          {t('save')}
+        </button>
       </StyledModalAddSave>
     </StyledModalForm>
   );

diff --git a/src/components/ModalWater/ModalWater.jsx b/src/components/ModalWater/ModalWater.jsx
@@ -57,6 +57,7 @@ const ModalWater = () => {
             onClick={() => {
               dispatch(changeModalClose(false));
             }}
+            aria-label={t('closeWindow')}
           >
             <SvgCross />
           </StyledModalAddClose>

diff --git a/src/components/SwitchTheme/Theme.styled.jsx b/src/components/SwitchTheme/Theme.styled.jsx
@@ -137,6 +137,8 @@ export const darkTheme = {
   modalTextEdit: '#D5DFF5',
 
   modalCloseBtn: '#5082F2',
+  datepickerBg: '#2A3052',
+  datepickerDisabled: '#1C1D26',
 };
 
 export const lightTheme = {
@@ -229,4 +231,6 @@ export const lightTheme = {
   modalTextEdit: '#2F2F2F',
 
   modalCloseBtn: '#407BFF',
+  datepickerBg: '#ecf2ff',
+  datepickerDisabled: '#ccc',
 };