accent hover and colors

gogonzogo · Apr 22, 2023 · a432260 · a432260
1 parent 6d954b1
commit a432260
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 6 deletions.
diff --git a/src/images/sprite.svg b/src/images/sprite.svg
diff --git a/src/js/movie-gallery.js b/src/js/movie-gallery.js
@@ -117,5 +117,5 @@ export async function renderInfo(movies) {
                 </ul>`;
     movieList.appendChild(card);
   });
-  hideLoadingAnimationWithDelay(1000);
+  hideLoadingAnimationWithDelay(500);
 }
diff --git a/src/js/mylibrary-gallery.js b/src/js/mylibrary-gallery.js
@@ -149,7 +149,7 @@ function renderInfo() {
     card.innerHTML = `<h3>No movies saved in ${nomovie}</h3>`
     movieList.appendChild(card);
   }
-  hideLoadingAnimationWithDelay(1000);
+  hideLoadingAnimationWithDelay(500);
 }
 
 renderInfo()

diff --git a/src/partials/footer.html b/src/partials/footer.html
@@ -1,9 +1,13 @@
 <footer class="footer__container">
     <div class="footer__container-text">
         <p>© 2023 | All Rights Reserved |
-            Developed with ❤️
+            Developed with
+            <svg width="14" height="14">
+                <use href="images/sprite.svg#icon-heart">
+                </use>
+            </svg>
             <!-- heart symbol may be changed to svg -->
             by <a href="#" aria-label="Developer Team Spotlight" data-modal-open>GoIT Scrum Squad</a>
         </p>
     </div>
-</footer>
+</footer>
diff --git a/src/sass/layouts/_footer.scss b/src/sass/layouts/_footer.scss
@@ -17,6 +17,11 @@
     color: #545454; // change to variable or add global class for links
   }
 }
+
+.footer-heart {
+  color: var(--accent-color);
+}
+
 @media screen and (min-width: 768px) {
   .footer__container {
     .footer__container-text {

diff --git a/src/sass/layouts/_movie-modal.scss b/src/sass/layouts/_movie-modal.scss
@@ -1,4 +1,5 @@
 @use '../utilities/variables' as v;
+
 .is-hidden {
   pointer-events: none;
   opacity: 0;
@@ -40,12 +41,14 @@
     max-width: 240px;
     border-radius: 5px;
   }
+
   .movie-name {
     margin-top: 30px;
     font: 500 20px/23.5px Roboto;
     text-transform: uppercase;
     color: v.$primary-title-color;
   }
+
   .movie-info-block {
     margin-top: 20px;
     display: grid;
@@ -60,21 +63,24 @@
     .modal-movie-rate {
       padding: 0 10px;
 
-      background-color: v.$secondary-title-color;
+      background-color: var(--accent-color);
       border-radius: 5px;
       color: #fff;
     }
   }
+
   .movie-about-header {
     margin-top: 20px;
     font: 500 12px/16px Roboto;
     color: v.$primary-title-color;
   }
+
   .movie-about-description {
     margin-top: 10px;
     font: 500 12px/20px Roboto;
   }
 }
+
 .buttons-block {
   margin-top: 20px;
   display: flex;
@@ -94,16 +100,34 @@
     padding: 0 6px;
     text-transform: uppercase;
     cursor: pointer;
+
+
   }
+
   .add-to-watched {
     @extend .button-basic;
     background-color: v.$modal-button-color;
     color: v.$primary-text-color;
+
+    &:hover,
+    &:focus {
+        background-color: var(--accent-color);
+        color: v.$primary-text-color;
+    }
   }
+
   .add-to-queue {
     @extend .button-basic;
     border: 1px solid;
+
+    &:hover,
+    &:focus {
+        background-color: var(--accent-color);
+        color: v.$primary-text-color;
+    }
   }
+
+
 }
 
 .close-button {
@@ -123,6 +147,7 @@
     flex-direction: column;
     justify-content: center;
   }
+
   .movie-modal__container {
     padding: 0 75px;
 
@@ -133,22 +158,26 @@
       display: grid;
       grid-template-columns: 1fr 1fr;
       grid-column-gap: 32px;
+
       .movie-name {
         margin-top: 0;
       }
     }
+
     .modal-movie-poster {
       max-width: 264px;
     }
   }
 }
+
 @media screen and (min-width: 1024px) {
   .movie-modal__container {
     .movie-modal__content {
       max-width: 900px;
     }
+
     .modal-movie-poster {
       max-width: 396px;
     }
   }
-}
+}