mobile-first + update operation

src/components/AppBar/AppBar.module.css

@@ -1,6 +1,6 @@
 .header {
   display: flex;
-  gap: 40px;
+  gap: 10px;
   justify-content: center;
   background: rgb(176, 93, 200);
   background: linear-gradient(
@@ -11,8 +11,18 @@
   );
   background-size: 100% 100%; /* Додана властивість background-size */
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
-  transition: box-shadow 250ms ease-in-out; 
 }
-.header:hover {
-    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4); 
-  }
+
+@media only screen and (min-width: 760px) {
+  .header {
+    gap: 40px;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .header {
+    transition: box-shadow 250ms ease-in-out;
+  }
+  .header:hover {
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
+  }
+}

src/components/AuthNav/AuthNav.module.css

@@ -1,22 +1,44 @@
 .list {
   display: flex;
-  gap: 40px;
+  align-items: center;
+  gap: 10px;
   list-style: none;
   padding: 0;
 }
 .link {
-  font-size: 20px;
+  font-size: 12px;
   text-decoration: none;
   color: #ba3cd0;
-  transition: color 200ms ease-in-out;
-}
-.link:hover,
-.link:focus {
-  color: #9c27b0;
 }
+
 .li {
-  padding: 8px 16px;
+  padding: 4px 12px;
   background-color: #ead7ed;
   border: 1px #9c27b0 solid;
   border-radius: 20px;
 }
+
+@media only screen and (min-width: 760px) {
+  .list {
+    gap: 40px;
+  }
+  .link {
+    font-size: 20px;
+  }
+  .li {
+    padding: 8px 16px;
+    background-color: #ead7ed;
+    border: 1px #9c27b0 solid;
+    border-radius: 20px;
+  }
+}
+
+@media only screen and (min-width: 1200px) {
+  .link {
+    transition: color 200ms ease-in-out;
+  }
+  .link:hover,
+  .link:focus {
+    color: #9c27b0;
+  }
+}

src/components/ContactForm/ContactForm.jsx

@@ -57,33 +57,37 @@ export function ContactForm() {
     <>
       {error && 'something went wrong'}
       <form onSubmit={handleSubmit} className={css.form}>
-        <label htmlFor={id} className={css.label}>
-          Name
-        </label>
-        <input
-          type="text"
-          name="name"
-          pattern="^[a-zA-Zа-яА-Я]+$"
-          minLength="3"
-          maxLength="16"
-          id={id}
-          value={name}
-          onChange={handleChange}
-          className={css.inputName}
-          required
-        />
-        <label htmlFor={id} className={css.label}>
-          Number
-        </label>
-        <input
-          type="tel"
-          name="number"
-          id={id}
-          value={number}
-          onChange={handleChange}
-          className={css.inputName}
-          required
-        />
+        <div className={css.inputLabel}>
+          <label htmlFor={id} className={css.label}>
+            Name
+          </label>
+          <input
+            type="text"
+            name="name"
+            pattern="^[a-zA-Zа-яА-Я]+$"
+            minLength="3"
+            maxLength="16"
+            id={id}
+            value={name}
+            onChange={handleChange}
+            className={css.inputName}
+            required
+          />
+        </div>
+        <div className={css.inputLabel}>
+          <label htmlFor={id} className={css.label}>
+            Number
+          </label>
+          <input
+            type="tel"
+            name="number"
+            id={id}
+            value={number}
+            onChange={handleChange}
+            className={css.inputName}
+            required
+          />
+        </div>
         <button type="submit" className={css.buttonContacts}>
           +
         </button>

src/components/ContactForm/ContactForm.module.css

@@ -1,5 +1,5 @@
 .inputName {
-  margin: 0 20px;
+  width: 90%;
   color: rgb(255, 173, 20);
   font-size: 18px;
   padding: 4px 8px;
@@ -25,6 +25,8 @@
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
 }
 .form {
+  width: calc(100% - 30px);
+  height: 100%;
   background: rgb(203, 136, 12);
   background: linear-gradient(
     90deg,
@@ -38,5 +40,27 @@
 }
 .label {
   font-size: 18px;
-  color: black;
+  color: rgb(20, 20, 20);
 }
+.inputLabel {
+  display: flex;
+  flex-direction: column;
+  margin: 0 0 20px;
+  gap: 4px;
+}
+@media only screen and (min-width: 500px) {
+   .form{
+    width: 450px;
+  }
+  .inputLabel {
+    display: flex;
+    flex-direction: column;
+    margin: 0 0 20px;
+    gap: 10px;
+  }
+}
+@media only screen and (min-width: 1000px) {
+  .form{
+    width: 656px;
+  }
+}

src/components/ContactItem/ContactItem.jsx

@@ -1,11 +1,14 @@
 import { useState } from 'react';
 import { useDispatch } from 'react-redux';
-import { deleteContact } from 'redux/contacts/operations';
+import { deleteContact, updateContact } from 'redux/contacts/operations';
 import { LoadingDelete } from '../ContactsList/LoadingDelete';
 import css from './ContactItem.module.css';
 
-export const ContactItem = ({ contact }) => {
+export const ContactItem = ({ name, number, id, phone }) => {
+  const [contactName, setContactName] = useState(name);
+  const [contactNumber, setContactNumber] = useState(number);
   const [isDelete, setIsDelete] = useState(false);
+  const [isShow, setIsShow] = useState(false);
   const dispatch = useDispatch();
 
   const handleDelete = id => {
@@ -15,17 +18,72 @@ export const ContactItem = ({ contact }) => {
       .then(() => setIsDelete(false));
   };
 
+  const toggleShow = () => {
+    setIsShow(!isShow);
+  };
+
+  const updateContacts = e => {
+    e.preventDefault();
+    const form = e.target;
+    const newContact = {
+      name: contactName,
+      number: contactNumber,
+      contactId: id,
+    };
+    form.reset();
+
+    dispatch(updateContact(newContact));
+    toggleShow();
+  };
+
+  const handleChange = e => {
+    if (e.target.name === 'name') setContactName(e.target.value);
+    if (e.target.name === 'number') setContactNumber(e.target.value);
+  };
+
   return (
     <li>
-      <span>
-        {contact.name}: {contact.number || contact.phone}
-      </span>
-      <button
-        onClick={() => handleDelete(contact.id)}
-        className={css.buttonFilter}
-      >
-        {isDelete ? <LoadingDelete /> : '\u2716'}
-      </button>
+      {isShow ? (
+        <form onSubmit={updateContacts}>
+          <input
+            type="text"
+            name="name"
+            placeholder="Change the name"
+            value={contactName}
+            onChange={handleChange}
+          />
+          <input
+            type="text"
+            name="number"
+            placeholder="Change the number"
+            value={contactNumber}
+            onChange={handleChange}
+          />
+          <button type="submit" className={css.saveBtn}>💾</button>
+        </form>
+      ) : (
+        <>
+          <span className={css.input}>
+            {name}: {number || phone}
+          </span>
+        </>
+      )}
+      <section className={css.buttons}>
+        <button
+          type="button"
+          onClick={() => toggleShow()}
+          className={css.buttonEdit}
+        >
+          {isDelete ? <LoadingDelete /> : '\u270e'}
+        </button>
+        <button
+          type="button"
+          onClick={() => handleDelete(id)}
+          className={css.buttonFilter}
+        >
+          {isDelete ? <LoadingDelete /> : '\u2716'}
+        </button>
+      </section>
     </li>
   );
 };

src/components/ContactItem/ContactItem.module.css

@@ -1,20 +1,83 @@
 .buttonFilter {
-    border-radius: 50%;
+  border-radius: 50%;
+  font-size: 16px;
+  color: rgb(240, 27, 27);
+  background-color: rgb(250, 181, 181);
+  border: 1px red solid;
+  width: 32px;
+  height: 32px;
+  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
+  cursor: pointer;
+  margin-left: 10px;
+}
+
+.buttonEdit {
+  border-radius: 50%;
+  font-size: 16px;
+  color: rgb(96, 96, 96);
+  background-color: rgb(201, 201, 201);
+  border: 1px rgb(87, 87, 87) solid;
+  width: 32px;
+  height: 32px;
+  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
+  cursor: pointer;
+  margin-left: 10px;
+}
+.input {
+  font-size: 16px;
+}
+.buttons {
+  display: flex;
+  margin-top: 4px;
+  gap: 12px;
+}
+.saveBtn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  border: 1px rgb(87, 87, 87) solid;
+  width: 32px;
+  height: 32px;
+  font-size: 16px;
+  border-radius: 50%;
+  cursor: pointer;
+  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
+  margin-top: 4px;
+}
+
+@media only screen and (min-width: 500px) {
+  .input {
+    font-size: 20px;
+  }
+  .buttonFilter,
+  .buttonEdit,
+  .saveBtn {
     font-size: 18px;
-    color: rgb(240, 27, 27);
-    background-color: rgb(250, 181, 181);
-    border: 1px red solid;
     width: 40px;
     height: 40px;
-    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
-    cursor: pointer;
+  }
+}
+
+@media only screen and (min-width: 1200px) {
+  .buttonFilter {
     transition: background-color 200ms ease-in-out, transform 200ms,
       box-shadow 200ms;
-    margin-left: 10px;
   }
   .buttonFilter:hover,
   .buttonFilter:focus {
     transform: scale(1.1);
     background-color: rgb(246, 150, 150);
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
-  }
+  }
+  .buttonEdit {
+    transition: background-color 200ms ease-in-out, transform 200ms,
+      box-shadow 200ms;
+  }
+  .buttonEdit:hover,
+  .buttonEdit:focus {
+    transform: scale(1.1);
+    background-color: rgb(173, 171, 171);
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+  }
+}

src/components/ContactsList/ContactList.jsx

@@ -25,8 +25,8 @@ export const ContactsList = () => {
     <div>
       {error && 'something went wrong'}
       <ul className={css.list}>
-        {filteredContacts.map(contact => (
-          <ContactItem key={contact.id} contact={contact} />
+        {filteredContacts.map(({ id, name, number, phone }) => (
+          <ContactItem key={id} id={id} name={name} number={number} phone={phone}/>
         ))}
       </ul>
     </div>