updated module css fiels

Kodehode-Stavanger · Apr 10, 2024 · 9e92d0b · 9e92d0b
1 parent 1819f54
commit 9e92d0b
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 9 deletions.
diff --git a/src/Calculator.module.css b/src/Calculator.module.css
@@ -47,10 +47,6 @@
   background-color: #ff8b38 !important;
 }
 
-.theme2 .circle:hover {
-  background-color: #ff8b38 !important;
-}
-
 .theme3 {
   --main-background: hsl(268, 75%, 9%);
   --toggle-keypad-background: hsl(268, 71%, 12%);
@@ -84,10 +80,6 @@
   background-color: #94fff9 !important;
 }
 
-.theme3 .circle:hover {
-  background-color: #94fff9 !important;
-}
-
 .container {
   display: flex;
   flex-direction: column;

diff --git a/src/Theme.jsx b/src/Theme.jsx
@@ -37,7 +37,7 @@ function Theme({ initialTheme, toggleTheme }) {
           </div>
 
           <button className={`themeToggle ${theme}`}>
-            <div onClick={handleToggle} className={styles.circle}></div>
+            <div onClick={handleToggle} className="circle"></div>
           </button>
         </div>
       </div>

diff --git a/src/style.css b/src/style.css
@@ -32,3 +32,33 @@
 .themeToggle.theme3 {
   justify-content: flex-end;
 }
+
+.circle {
+  width: 18px;
+  height: 18px;
+  margin: 5px;
+  border-radius: 50%;
+  cursor: pointer;
+  background-color: var(--toggle-equalto-key-background);
+}
+
+.themeToggle.theme1 .circle:hover {
+  background-color: #f96c5b;
+}
+
+.themeToggle.theme2 .circle:hover {
+  background-color: #ff8b38;
+}
+
+.themeToggle.theme3 .circle:hover {
+  background-color: #94fff9;
+}
+
+@media only screen and (min-width: 1440px) {
+  .circle {
+    width: 14px;
+    height: 14px;
+    margin: 5px;
+    border-radius: 50%;
+  }
+}