simplified css for updatebtn

diyhue · Mar 9, 2024 · 46ffc0f · 46ffc0f
1 parent 704acd0
commit 46ffc0f
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 38 deletions.
diff --git a/src/containers/TheHeader.js b/src/containers/TheHeader.js
@@ -116,10 +116,10 @@ const TheHeader = ({ HOST_IP, showSidebar, setShowSidebar, API_KEY }) => {
       return "updatebtn";
     }
     else if (state === "noupdates" || state === "unknown") {
-      return "checkbtn";
+      return "updatebtn check";
     }
     else if (state === "installing"){
-      return "installbtn"
+      return "updatebtn install"
     }
   }
 
@@ -144,6 +144,7 @@ const TheHeader = ({ HOST_IP, showSidebar, setShowSidebar, API_KEY }) => {
           />
         </form>
       </div>
+
 
       <div className="onbtn">
         <p>Turn all lights {group0State ? "off" : "on"}</p>

diff --git a/src/scss/mainframe.scss b/src/scss/mainframe.scss
@@ -112,28 +112,6 @@ body {
     }
   }
 
-  .checkbtn {
-    display: flex;
-    align-items: center;
-    margin: 15px 15px;
-    background: rgb(85, 106, 120);
-    padding: 10px 10px;
-    border-radius: 10px;
-    color: #eee;
-    font-size: 18px;
-    font-weight: 0;
-    border: none;
-    transition: all .15s ease-in-out;
-
-    &:hover,
-    &:active,
-    &:focus {
-      border: none;
-      background: rgb(61, 177, 255);
-      transition: all .15s ease-in-out;
-    }
-  }
-
   .updatebtn {
     display: flex;
     align-items: center;
@@ -147,6 +125,14 @@ body {
     border: none;
     cursor: pointer;
     transition: all .15s ease-in-out;
+
+    &.install{
+      background: rgb(142, 68, 173);
+    }
+
+    &.check{
+      background: rgb(85, 106, 120);
+    }
 
     &:hover,
     &:active,
@@ -157,20 +143,6 @@ body {
     }
   }
 
-  .installbtn {
-    display: flex;
-    align-items: center;
-    margin: 15px 15px;
-    background: rgb(142, 68, 173);
-    padding: 10px 10px;
-    border-radius: 10px;
-    color: #eee;
-    font-size: 18px;
-    font-weight: 0;
-    border: none;
-    transition: all .15s ease-in-out;
-  }
-
   .hamburger {
     display: flex;
     color: #ccc;