Change switch icon

public/popup.html

@@ -14,15 +14,13 @@
         </div>
         <div class="app-header-right">
           <a id="reloadIcon" hidden>
-            <img src="/icons/reload-icon.svg" alt="Reload page" width="25" />
+            <img src="/icons/reload-icon.svg" alt="Reload page" />
           </a>
           <div class="switch-container">
-            <label class="switch-label" id="switch-label-off">OFF</label>
             <label class="switch" id="switch">
               <input type="checkbox" id="statusCheckbox" checked />
-              <span class="slider"></span>
+              <svg width="64px" height="64px" viewBox="-2 0 19 19" xmlns="http://www.w3.org/2000/svg" id="on-off-icon"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M7.498 17.1a7.128 7.128 0 0 1-.98-.068 7.455 7.455 0 0 1-1.795-.483 7.26 7.26 0 0 1-3.028-2.332A7.188 7.188 0 0 1 .73 12.52a7.304 7.304 0 0 1 .972-7.128 7.221 7.221 0 0 1 1.387-1.385 1.03 1.03 0 0 1 1.247 1.638 5.176 5.176 0 0 0-.993.989 5.313 5.313 0 0 0-.678 1.181 5.23 5.23 0 0 0-.348 1.292 5.22 5.22 0 0 0 .326 2.653 5.139 5.139 0 0 0 .69 1.212 5.205 5.205 0 0 0 .992.996 5.257 5.257 0 0 0 1.178.677 5.37 5.37 0 0 0 1.297.35 5.075 5.075 0 0 0 1.332.008 5.406 5.406 0 0 0 1.32-.343 5.289 5.289 0 0 0 2.211-1.682 5.18 5.18 0 0 0 1.02-2.465 5.2 5.2 0 0 0 .01-1.336 5.315 5.315 0 0 0-.343-1.318 5.195 5.195 0 0 0-.695-1.222 5.134 5.134 0 0 0-.987-.989 1.03 1.03 0 1 1 1.24-1.643 7.186 7.186 0 0 1 1.384 1.386 7.259 7.259 0 0 1 .97 1.706 7.413 7.413 0 0 1 .473 1.827 7.296 7.296 0 0 1-4.522 7.65 7.476 7.476 0 0 1-1.825.471 7.203 7.203 0 0 1-.89.056zM7.5 9.613a1.03 1.03 0 0 1-1.03-1.029V2.522a1.03 1.03 0 0 1 2.06 0v6.062a1.03 1.03 0 0 1-1.03 1.03z"></path></g></svg>
             </label>
-            <label class="switch-label" id="switch-label-on">ON</label>
           </div>
         </div>
       </div>

src/popup.css

@@ -71,6 +71,13 @@ a {
   display: flex;
   flex-direction: row;
   align-items: center;
+  gap: 0.5em;
+}
+
+.app-header-right img, #on-off-icon {
+  width: 25px;
+  height: 25px;
+  fill: var(--green);
 }
 
 .switch-container {
@@ -79,27 +86,10 @@ a {
   align-items: center;
 }
 
-.switch-label {
-  padding: 8px;
-  transition: color 0.3s ease;
-  font-size: 8px;
-  font-weight: bolder;
-}
-
-#switch-label-on {
-  color: var(--green);
-}
-
-#switch-label-off {
-  color: var(--cold-gray);
-}
-
 .switch {
   position: relative;
   display: inline-block;
-  width: 40px;
-  height: 20px;
-  border-radius: 20px;
+  cursor: pointer;
 }
 
 .switch input {
@@ -108,49 +98,6 @@ a {
   height: 0;
 }
 
-.slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: var(--black-wash);
-  border: 1px solid white;
-  opacity: 50%;
-  -webkit-transition: 0.3s;
-  transition: 0.3s;
-  border-radius: 20px;
-}
-
-.slider:before {
-  position: absolute;
-  content: '';
-  height: 16px;
-  width: 16px;
-  right: 21px;
-  top: 1px;
-  background-color: var(--green);
-  -webkit-transition: 0.3s;
-  transition: 0.3s;
-  border-radius: 50%;
-}
-
-input:checked + .slider {
-  background-color: var(--black-wash);
-  opacity: 100%;
-}
-
-input:checked + .slider:before {
-  -webkit-transform: translateX(20px);
-  -ms-transform: translateX(20px);
-  transform: translateX(20px);
-}
-
-input:checked + .switch-label-on {
+input:checked + img {
   color: var(--green);
-}
-
-input:checked + .switch-label-off {
-  color: var(--cold-gray);
-}
+}

src/popup.ts

@@ -40,7 +40,7 @@ document.addEventListener('DOMContentLoaded', () => {
     statusCheckbox.addEventListener('click', () => {
       browser.storage.sync.set({ status: !statusCheckbox.checked })
 
-      document.getElementById('switch-label-on')!.style.color =
+      document.getElementById('on-off-icon')!.style.fill =
         statusCheckbox.checked ? 'var(--green)' : 'var(--cold-gray)'
 
       if (reloadIcon?.hidden) reloadIcon.hidden = false