update design

Author: Nadezhda-v

src/css/style.css

@@ -2,12 +2,34 @@ body {
   min-width: 420px;
 }
 
+a {
+  color: #20786a;
+  cursor: pointer;
+}
+
 a:hover {
   text-decoration: none;
+  color: #20786a;
+  opacity: 0.8;
+}
+
+svg {
+  width: 32px;
+  height: 32px;
+}
+
+.table td {
+  vertical-align: middle;
+}
+
+.main__container {
+  padding: 30px;
+  border-radius: 20px;
+  background-color: #f3ecd77d;
 }
 
 .header {
-  background-color: #3E5E93;
+  background-color: #81a7a1;
   color: #fff;
   margin-bottom: 40px;
   padding: 20px 0;
@@ -49,9 +71,31 @@ a:hover {
   margin-bottom: 30px;
 }
 
+.btn-add {
+  background-color: #b8d7d2;
+}
+
+.btn-del,
+.btn-cancel {
+  background-color: #ffbe70;
+}
+
+.btn-edit {
+  padding-left: 0;
+}
+
+.btn-edit:focus,.btn-edit:active {
+  outline: none !important;
+  box-shadow: none;
+}
+
+.select-line {
+  background-color: rgba(255, 207, 98, 0.27) !important;
+}
+
 .form {
   padding: 30px 50px;
-  background-color: #fff;
+  background-color: #fff8e3;
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
@@ -118,7 +162,7 @@ a:hover {
 }
 
 .th-cell:hover {
-  color: #007bff;
+  color: #81a7a1;
 }
 
 .del-icon:hover,
@@ -132,7 +176,7 @@ a:hover {
   left: 0;
   right: 0;
   padding: 10px;
-  background-color: #3E5E93;
+  background-color: #81a7a1;
   color: #fff;
   text-align: center;
 }
@@ -141,10 +185,6 @@ a:hover {
   .cell-phone {
     gap: 15px;
   }
-
-  .button-edit {
-    font-size: .8em;
-  }
 }
 
 @media (max-width: 720px) {

src/img/edit.svg

@@ -49,5 +49,5 @@ const {
     editContactControl(list);
   };
 
-  init('#app', 'Надежда');
+  init('#app', '');
 }

src/index.js

@@ -45,7 +45,10 @@ const modalControl = (buttonAdd, formOverlay) => {
 
   formOverlay.addEventListener('click', e => {
     const target = e.target;
-    if (target === formOverlay || target.closest('.close')) {
+    if (target === formOverlay ||
+      target.closest('.close') ||
+      target.closest('.btn-cancel')
+    ) {
       closeModal();
     }
   });
@@ -59,11 +62,12 @@ const modalControl = (buttonAdd, formOverlay) => {
 
 const sortContacts = (cellSelector, list, isAscending) => {
   const allData = [];
-
-  [...list.querySelectorAll('.contact')].forEach(row => {
-    const textContent = row.querySelector(cellSelector).textContent;
-    allData.push({data: textContent, row});
-  });
+  if (cellSelector) {
+    [...list.querySelectorAll('.contact')].forEach(row => {
+      const textContent = row.querySelector(cellSelector).textContent;
+      allData.push({data: textContent, row});
+    });
+  }
 
   const newIsAscending = isAscending === undefined ? true : isAscending;
 
@@ -176,7 +180,7 @@ const handleBlur = (contactRow) => {
   const isValidSurname = isValidText(newSurname);
   const isValidPhone = isValidPhoneNumber(newPhone);
 
-  contactRow.classList.remove('table-primary');
+  contactRow.classList.remove('select-line');
   nameCell.contentEditable = false;
   surnameCell.contentEditable = false;
   phoneCell.contentEditable = false;
@@ -222,7 +226,7 @@ const handleEditButton = (e) => {
   const prevSurname = surnameCell.textContent;
   const prevPhone = phoneHref.textContent;
 
-  contactRow.classList.add('table-primary');
+  contactRow.classList.add('select-line');
 
   nameCell.contentEditable = true;
   surnameCell.contentEditable = true;
@@ -252,7 +256,7 @@ const handleEditButton = (e) => {
 const editContactControl = (list) => {
   list.addEventListener('click', e => {
     const target = e.target;
-    const closestEditButton = target.closest('.button-edit');
+    const closestEditButton = target.closest('.btn-edit');
 
     if (closestEditButton) {
       handleEditButton(e);

src/script/control.js

@@ -1,7 +1,11 @@
-const createContainer = () => {
+const createContainer = (className) => {
   const container = document.createElement('div');
   container.classList.add('container');
 
+  if (className) {
+    container.classList.add(className);
+  }
+
   return container;
 };
 
@@ -27,7 +31,7 @@ const createLogo = (title) => {
 
 const createMain = () => {
   const main = document.createElement('main');
-  const mainContainer = createContainer();
+  const mainContainer = createContainer('main__container');
 
   main.append(mainContainer);
   main.mainContainer = mainContainer;
@@ -39,11 +43,17 @@ const createButtonsGroup = (params) => {
   const btnWrapper = document.createElement('div');
   btnWrapper.classList.add('btn-wrapper');
 
-  const buttons = params.map(({className, type, text}) => {
+  const buttons = params.map(({className, type, text, svg}) => {
     const button = document.createElement('button');
     button.className = className;
     button.type = type;
-    button.textContent = text;
+    if (svg) {
+      const svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+      svgElement.innerHTML = svg;
+      button.appendChild(svgElement);
+    } else {
+      button.textContent = text;
+    }
 
     return button;
   });
@@ -111,12 +121,12 @@ const createForm = () => {
 
   const buttonsGroup = createButtonsGroup([
     {
-      className: 'btn btn-primary mr-3',
+      className: 'btn btn-add mr-3',
       type: 'submit',
       text: 'Добавить',
     },
     {
-      className: 'btn btn-danger',
+      className: 'btn btn-cancel',
       type: 'reset',
       text: 'Отмена',
     },
@@ -161,9 +171,28 @@ const createRow = ({name: firstName, surname, phone}) => {
 
   const buttonsGroup = createButtonsGroup([
     {
-      className: 'btn btn-primary button-edit',
+      className: 'btn btn-edit',
       type: 'button',
-      text: 'Редактировать',
+      svg: `<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="linear-gradient"
+        gradientUnits="userSpaceOnUse"
+        x1="2" x2="29.478" y1="16.276" y2="16.276">
+        <stop offset="0" stop-color="#0fdcdd"></stop>
+        <stop offset="1" stop-color="#46a1e8"></stop>
+        </linearGradient>
+        <g id="_23_Edit" data-name="23 Edit">
+        <path d="m28.6 4.17-.77-.77a3.075 3.075 0 0 0 -4.24 0l-4.6 4.6
+        h-13.99a3.009 3.009 0 0 0 -3 3v16a3.009 3.009 0 0 0 3 3
+        h16a3.009 3.009 0 0 0 3-3v-13.99l4.6-4.6a3 3 0 0 0 0-4.24
+        zm-2.18.64.77.77a1.008 1.008 0 0 1 0 1.42l-.353.353-2.19-2.19.353-.353
+        a1.047 1.047 0 0 1 1.42 0zm-3.188 1.768 2.19 2.19-11.522 11.523
+        -2.19-2.19zm-12.663 13.211 1.542 1.542-2.831 1.079zm11.431 7.211
+        a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1-1v-16a1 1 0 0 1 1-1
+        h11.99l-7.39 7.388-.01.012-.008.012-.012.012a.831.831 0 0 0 
+        -.19.26l-3.03 6.136a1 1 0 0 0 1.26 1.37l6.62-2.53a.929.929 0 0 0 .35
+        -.23l.012-.012.012-.008.008-.012 7.388-7.388z" 
+        fill="url(#linear-gradient)" style="fill: rgb(87, 137, 122);">
+        </path></g></svg>`,
     },
   ]);
 

src/script/createElements.js

@@ -20,12 +20,12 @@ export const renderPhoneBook = (app, title) => {
   const main = createMain();
   const buttonsGroup = createButtonsGroup([
     {
-      className: 'btn btn-primary mr-3 btn-add',
+      className: 'btn mr-3 btn-add',
       type: 'button',
       text: 'Добавить',
     },
     {
-      className: 'btn btn-danger',
+      className: 'btn btn-del',
       type: 'button',
       text: 'Удалить',
     },