[PRAC/cont] Correct styles for "add-modal" btn

Adding a "gray" icon at/for :disabled state (at 10 contacts).

Worth noting:
  - a series of small corrections like this.

core: B-3 / JS-BL

Author: matowdev

core-courses/3-js-basic-level/practicum-js-basic-level/sb-crm-client/css/modal-add.css

@@ -162,7 +162,7 @@
 }
 
 .modal__add-body-add-btn:focus-visible:not(:hover) {
-  color: var(--main-purple);
+  color: var(--cold-purple);
 }
 
 .modal__add-body-add-btn:focus-visible:not(:hover) .stroke-add-modal-icon {
@@ -177,15 +177,23 @@
   color: var(--light-purple);
 }
 
-.modal__add-body-add-btn:active {
+.modal__add-body-add-btn:active:not(:disabled) {
   color: var(--light-purple);
 }
 
-.modal__add-body-add-btn:active .stroke-add-modal-icon {
+.modal__add-body-add-btn:active:not(:disabled) .stroke-add-modal-icon {
+  opacity: 0;
+}
+
+.modal__add-body-add-btn:active:not(:disabled) .fill-add-modal-icon {
+  opacity: 1;
+}
+
+.modal__add-body-add-btn:disabled .stroke-add-modal-icon {
   opacity: 0;
 }
 
-.modal__add-body-add-btn:active .fill-add-modal-icon {
+.modal__add-body-add-btn:disabled .stroke-gray-add-modal-icon {
   opacity: 1;
 }
 
@@ -206,6 +214,11 @@
   opacity: 1;
 }
 
+.stroke-gray-add-modal-icon {
+  background: url("../images/add-plus-stroke-gray.svg") no-repeat center / contain;
+  opacity: 0;
+}
+
 .fill-add-modal-icon {
   background: url("../images/add-plus-fill.svg") no-repeat center / contain;
   opacity: 0;
@@ -258,15 +271,15 @@
 /* media queries, any-hover */
 
 @media (any-hover: hover) {
-  .modal__add-body-add-btn:hover:not(:active) {
-    color: var(--main-purple);
+  .modal__add-body-add-btn:hover:not(:active):not(:disabled) {
+    color: var(--cold-purple);
   }
 
-  .modal__add-body-add-btn:hover:not(:active) .stroke-add-modal-icon {
+  .modal__add-body-add-btn:hover:not(:active):not(:disabled) .stroke-add-modal-icon {
     opacity: 0;
   }
 
-  .modal__add-body-add-btn:hover:not(:active) .fill-add-modal-icon {
+  .modal__add-body-add-btn:hover:not(:active):not(:disabled) .fill-add-modal-icon {
     opacity: 1;
   }
 

core-courses/3-js-basic-level/practicum-js-basic-level/sb-crm-client/css/variables.css

@@ -21,6 +21,7 @@
   --main-purple: #9873FF;
   --light-purple: #B89EFF;
   --dark-purple: #8052FF;
+  --cold-purple: #7458c2;
   --specific-purple: #7B61FF;
   --gray: #C8C5D1;
   --text-gray: #B0B0B0;

core-courses/3-js-basic-level/practicum-js-basic-level/sb-crm-client/images/add-plus-stroke-gray.svg

@@ -255,6 +255,7 @@
   const addModalBodyAddSelectWrap = document.createElement('div');
   const addModalBodyAddBtn = document.createElement('button');
   const addModalBodyAddBtnStrokeIcon = document.createElement('span');
+  const addModalBodyAddBtnStrokeIconGray = document.createElement('span');
   const addModalBodyAddBtnFillIcon = document.createElement('span');
   const addModalBodyAddBtnText = document.createElement('span');
   const addModalBodySaveBtn = document.createElement('button');
@@ -353,6 +354,10 @@
     'modal__add-body-btn-icon',
     'stroke-add-modal-icon'
   );
+  addModalBodyAddBtnStrokeIconGray.classList.add(
+    'modal__add-body-btn-icon',
+    'stroke-gray-add-modal-icon'
+  );
   addModalBodyAddBtnFillIcon.classList.add(
     'modal__add-body-btn-icon',
     'fill-add-modal-icon'
@@ -460,6 +465,7 @@
   );
   addModalBodyAddBtn.append(
     addModalBodyAddBtnStrokeIcon,
+    addModalBodyAddBtnStrokeIconGray,
     addModalBodyAddBtnFillIcon,
     addModalBodyAddBtnText
   );