fix switcher's move

mate-academy · Sep 12, 2023 · 7d2f137 · 7d2f137
1 parent a04df1b
commit 7d2f137
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 16 deletions.
diff --git a/src/scripts/light-theme.js b/src/scripts/light-theme.js
@@ -17,10 +17,6 @@ function setThemeBasedOnUserPreference() {
       page.classList.remove('page--theme--light');
       contactUs.classList.remove('contact-us--theme--light');
 
-      switchers.forEach(switcher => {
-        switcher.classList.remove('page__theme-switcher--theme--light');
-      });
-
       links.forEach(link => {
         link.classList.remove('link--theme--light');
       });
@@ -49,10 +45,6 @@ function setThemeBasedOnUserPreference() {
     page.classList.add('page--theme--light');
     contactUs.classList.add('contact-us--theme--light');
 
-    switchers.forEach(switcher => {
-      switcher.classList.add('page__theme-switcher--theme--light');
-    });
-
     links.forEach(link => {
       link.classList.add('link--theme--light');
     });
@@ -85,7 +77,6 @@ switchers.forEach(switcher => {
   switcher.addEventListener('click', () => {
     if (page.classList.contains('page--theme--light')) {
       page.classList.remove('page--theme--light');
-      switcher.classList.remove('page__theme-switcher--theme--light');
       contactUs.classList.remove('contact-us--theme--light');
 
       links.forEach(link => {
@@ -113,7 +104,6 @@ switchers.forEach(switcher => {
       });
     } else {
       page.classList.add('page--theme--light');
-      switcher.classList.add('page__theme-switcher--theme--light');
       contactUs.classList.add('contact-us--theme--light');
 
       links.forEach(link => {

diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss
@@ -9,6 +9,7 @@
   --page-bg: #f2f6fa;
   --header-footer-bg: #2c2c2c;
   --bg-icon: url("../images/icons/icon-moon.svg");
+  --move: translateX(0);
 
   --header-border-rds: 0 0 30px 30px;
   --footer-border-rds: 30px 30px 0 0;
@@ -22,6 +23,7 @@
     --page-bg: #f2f9ff;
     --header-footer-bg: #008aff;
     --bg-icon: url("../images/icons/icon-sun.svg");
+    --move: translateX(100%);
 
     --header-border-rds: 0 0 0 200px;
     --footer-border-rds: 0 200px 0 0;
@@ -125,13 +127,8 @@
       background-repeat: no-repeat;
       border-radius: 100%;
       padding-bottom: 50%;
+      transform: var(--move);
       transition: 0.5s;
     }
-
-    &--theme--light {
-      &::after {
-        transform: translateX(100%);
-      }
-    }
   }
 }