Merge pull request #110 from yaStigma/header

done css to addWaterModal

Author: yaStigma

src/components/AddWaterModal/AddWaterModal.jsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 import { createWaterRecord } from '../../redux/water/operations';
 import css from './AddWaterModal.module.css';
-
+import SvgIcons from 'components/SvgIcons/SvgIcons';
 const AddWaterModal = ({ setModalVisible, onClose }) => {
   const [amount, setAmount] = useState(0);
   const [time, setTime] = useState('');
@@ -100,8 +100,8 @@ const AddWaterModal = ({ setModalVisible, onClose }) => {
     <div className={css.modal} ref={modalRef} onClick={handleBackdropClick}>
       <div className={css.modalContent}>
         <div className={css.modalHeader}>
-          <h2>Add water</h2>
-          <span className={css.close} onClick={handleClose}>&times;</span>
+          <h2 className={css.headerText}>Add water</h2>
+          <span className={css.close} onClick={handleClose}><SvgIcons name="close" className={css.iconClose} /></span>
         </div>
         <div className={css.modalBody}>
           <h4 className={css.labelDistance} htmlFor="amount">Choose a value:</h4>
@@ -111,7 +111,7 @@ const AddWaterModal = ({ setModalVisible, onClose }) => {
             <span id="amount">{amount} ml</span>
             <button className={css.buttonSelector} onClick={() => handleChangeAmount(50)}>+</button>
           </div>
-          <label className={css.labelDistance} htmlFor="time">Recording time:</label>
+          <label className={css.labelDistanceText} htmlFor="time">Recording time:</label>
           <select className={css.inputText} id="time" onChange={(e) => setTime(e.target.value)}></select>
           <h4 className={css.labelDistance} htmlFor="value">Enter the value of the water used:</h4>
           <input

src/components/AddWaterModal/AddWaterModal.module.css

@@ -67,10 +67,10 @@ table {
   align-items: center;
   /* Центрирование по вертикали */
   position: fixed;
-  top: 0;
+  top: -200px;
   left: 0;
   width: 100%;
-  height: 100%;
+  height: 1000px;
   background-color: rgba(0, 0, 0, 0.5);
   /* Полупрозрачный фон */
   z-index: 9999;
@@ -80,18 +80,20 @@ table {
 .modalContent {
   background-color: #fff;
   /* Белый фон для содержимого */
-  padding: 20px;
+  padding: 24px 12px;
+  /* width:256px; */
   /* Внутренний отступ */
   border-radius: 10px;
   /* Скругленные углы */
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   /* Тень для глубины */
-  max-width: 500px;
   /* Максимальная ширина */
-  width: 90%;
+  width: 100%;
   /* Ширина с учетом малых экранов */
   text-align: center;
   /* Центрирование текста */
+  margin-left: 20px;
+  margin-right: 20px;
 }
 
 
@@ -100,8 +102,16 @@ table {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  margin-bottom: 24px;
+}
+.headerText {
+  font-family: var(--font-family);
+font-weight: 500;
+font-size: 26px;
+line-height: 123%;
+color: var(--primery-color-black);
+/* margin:0 0 24px 0; */
 }
-
 .modal-header h2 {
   margin: 0;
 }
@@ -115,42 +125,52 @@ table {
 
 .close:hover,
 .close:focus {
-  color: black;
+    color: white;
+    /* background-color: #007bff; */
+  /* color: black; */
   text-decoration: none;
   cursor: pointer;
 }
 
-.modalBody {
+/* .modalBody {
   margin-top: 10px;
-}
+} */
 
 .modalBody label {
   display: block;
-  margin-bottom: 5px;
+  margin-bottom: 15px;
 }
 
 .modalBody input[type="text"],
 .modalBody input[type="number"],
 .modalBody select {
-  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+  width: 100px;
+  height:20px;
   padding: 8px;
-  margin-bottom: 10px;
-  border: 1px solid #ccc;
+  margin-bottom: 24px;
+  border: 1px solid var(--secondary-color---5);
   border-radius: 4px;
   color: #0056b3;
   font-size: 16px;
 }
-
+.modalBody select {
+  width: 120px;
+  margin-bottom: 20px;
+  padding: 12px 0 10px;
+  height:44px;
+}
 .amountSelector {
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  margin-bottom: 10px;
+  margin-bottom: 24px;
 }
 
 .amountSelector button {
-  width: 30px;
-  height: 30px;
+  width: 44px;
+  height: 44px;
   border: solid 1px;
   background-color: #ffffff;
   border-radius: 50%;
@@ -165,8 +185,12 @@ table {
 }
 
 .amountSelector span {
-  margin: 0 10px;
+  margin: 0 7px;
+  width: 92px;
+  font-weight: 700;
   font-size: 18px;
+  line-height: 133%;
+  text-align: center;
   background-color: #abd4ff;
   padding: 5px 10px;
   border-radius: 15px;
@@ -178,7 +202,8 @@ table {
 .inputSaveContainer {
   display: flex;
   align-items: center;
-  justify-content: flex-start;
+  justify-content: center;
+  flex-direction: column;
 }
 
 .inputSaveContainer input[type="text"] {
@@ -198,23 +223,36 @@ table {
 }
 
 .labelDistance {
-  padding-bottom: 10px;
+  /* padding-bottom: 10px; */
+  margin:0 0 16px 0;
   text-align: start;
+  font-family: var(--font-family);
+font-weight: 500;
+font-size: 18px;
+line-height: 111%;
+color: var(--primery-color-black);
+}
+.labelDistanceText {
+  margin:0 0 16px 0;
+  text-align: start;
+  font-family: var(--font-family);
+font-weight: 400;
+font-size: 16px;
+line-height: 125%;
+color: var(--primery-color-black);
 }
-
 .labelDistanceText {
-  padding-bottom: 10px;
   font-size: 15px;
   text-align: start;
 }
 
 .saveButton {
-  width: 100px;
+  width: 256px;
   padding: 10px;
   background-color: #007bff;
   color: white;
   border: none;
-  border-radius: 4px;
+  border-radius: 10px;
   cursor: pointer;
   text-align: center;
 }
@@ -227,12 +265,79 @@ table {
 .buttonSelector {
   padding: 0;
 }
-.inputField {
-  margin-top: 15px;
+
+.modalBody input[type="text"], .inputField {
+  margin-bottom: 16px;
+  padding: 0;
   border: #ffffff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-left: auto;
+  margin-right: auto;
+  font-family: var(--font-family);
+font-weight: 700;
+font-size: 18px;
+line-height: 133%;
+text-align: center;
+color: var(--primery-color-blue);
 }
 
 .inputField:focus {
   border: none;
   outline: none;
 }
+
+@media screen and (min-width:768px)  {
+  .modalContent {
+    padding: 24px ;
+    width: 656px;
+  }
+  .modalBody input[type="text"],
+  .modalBody input[type="number"],
+  .modalBody select {
+ width: 636px;
+
+  }
+  .modalBody select {
+    width: 656px;
+  }
+  .saveButton {
+    width: 160px;
+  }
+  .inputSaveContainer {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    justify-content: flex-start;
+   
+  }
+  .modalBody input[type="text"], .inputField {
+    text-align: right;
+    margin-right: 24px;
+    padding-right: 10px;
+    margin-bottom: 0;
+  }
+}
+
+@media screen and (min-width:1216px) {
+  .modalContent {
+    width: 544px;
+  }
+  .modalBody input[type="text"],
+  .modalBody input[type="number"],
+  .modalBody select {
+ width: 524px;
+
+  }
+  .modalBody select {
+    width: 544px;
+  }
+  .modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}