From ec2d07d65b496b3d5479927cc845c3bbc1e0e4ba Mon Sep 17 00:00:00 2001
From: Isabela <30164700+isabeladematos@users.noreply.github.com>
Date: Thu, 31 Oct 2024 15:51:25 +0100
Subject: [PATCH] Change switch icon
---
public/icons/reload-icon.svg | 8 +---
public/popup.html | 6 +--
src/popup.css | 73 +++++-------------------------------
src/popup.ts | 2 +-
4 files changed, 14 insertions(+), 75 deletions(-)
diff --git a/public/icons/reload-icon.svg b/public/icons/reload-icon.svg
index 843dc62..5d2f978 100644
--- a/public/icons/reload-icon.svg
+++ b/public/icons/reload-icon.svg
@@ -1,7 +1 @@
-
+
\ No newline at end of file
diff --git a/public/popup.html b/public/popup.html
index 610ce60..cf2a2b2 100644
--- a/public/popup.html
+++ b/public/popup.html
@@ -14,15 +14,13 @@
diff --git a/src/popup.css b/src/popup.css
index 8edcc5d..7dae25c 100644
--- a/src/popup.css
+++ b/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);
-}
+}
\ No newline at end of file
diff --git a/src/popup.ts b/src/popup.ts
index 6d18433..1adfbd5 100644
--- a/src/popup.ts
+++ b/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
+