Merge pull request #8 from hendriksen-mark/main

update buttons

.github/workflows/release.yml

@@ -70,4 +70,4 @@ jobs:
           upload_url: ${{ steps.create_release.outputs.upload_url }}
           asset_path: DiyHueUI.zip
           asset_name: DiyHueUI-release.zip
-          asset_content_type: application/zip
+          asset_content_type: application/zip

package.json

@@ -23,7 +23,10 @@
     "react-scripts": "^5.0.1",
     "react-select": "^5.8.0",
     "sass": "^1.45.0",
-    "web-vitals": "^1.0.1"
+    "web-vitals": "^1.0.1",
+    "@mui/material": "latest",
+    "@emotion/react": "latest",
+    "@emotion/styled": "latest"
   },
   "scripts": {
     "start": "react-scripts start",

src/containers/MenuItem.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { FaAngleDown, FaAngleUp } from "react-icons/fa";
+import { FaAngleDown } from "react-icons/fa";
 import { motion } from 'framer-motion';
 
 const MenuItem = ({ label, icon, onClick, isActive, children, link }) => {

src/containers/TheHeader.js

@@ -3,11 +3,10 @@ import { FaBars } from "react-icons/fa";
 import axios from "axios";
 import { motion } from "framer-motion";
 import { toast } from 'react-hot-toast';
+import { Tooltip } from '@mui/material';
 
 const TheHeader = ({ HOST_IP, showSidebar, setShowSidebar, API_KEY }) => {
   const [group0State, setGroup0State] = useState(false);
-  const [install, setInstall] = useState(false);
-  const [check, setCheck] = useState(false);
   const [swstate, getState] = useState("noupdates");
 
   const iconVariants = {
@@ -27,8 +26,6 @@ const TheHeader = ({ HOST_IP, showSidebar, setShowSidebar, API_KEY }) => {
         axios
           .get(`${HOST_IP}/api/${API_KEY}/config/swupdate2`)
           .then((result) => {
-            setInstall(result.data["install"]);
-            setCheck(result.data["checkforupdate"]);
             getState(result.data["state"]);
           })
           .catch((error) => {
@@ -106,23 +103,35 @@ const TheHeader = ({ HOST_IP, showSidebar, setShowSidebar, API_KEY }) => {
     else if (state === "noupdates" || state === "unknown") {
       return "No Update";
     }
-    else if (state === "installing"){
+    else if (state === "installing") {
       return "installing..."
     }
   }
 
   const getClassState = (state) => {
     if (state === "anyreadytoinstall" || state === "allreadytoinstall") {
-      return "updatebtn";
+      return "updatebtn update";
     }
     else if (state === "noupdates" || state === "unknown") {
       return "updatebtn check";
     }
-    else if (state === "installing"){
+    else if (state === "installing") {
       return "updatebtn install"
     }
   }
 
+  const getTitleState = (state) => {
+    if (state === "anyreadytoinstall" || state === "allreadytoinstall") {
+      return "Install update";
+    }
+    else if (state === "noupdates" || state === "unknown") {
+      return "Check for update";
+    }
+    else if (state === "installing") {
+      return "Update is installing"
+    }
+  }
+
   return (
     <div className="topbarRight">
       <motion.div
@@ -137,14 +146,15 @@ const TheHeader = ({ HOST_IP, showSidebar, setShowSidebar, API_KEY }) => {
 
       <div className="switchContainer">
         <form className="add-form" onSubmit={(e) => handleupdate(swstate, e)}>
-          <input
-            type="submit"
-            value={getValueState(swstate)}
-            className={getClassState(swstate)}
-          />
+          <Tooltip title={<p style={{ fontSize: "18px" }}>{getTitleState(swstate)}</p>} arrow>
+            <input
+              type="submit"
+              value={getValueState(swstate)}
+              className={getClassState(swstate)}
+            />
+          </Tooltip>
         </form>
       </div>
-
 
       <div className="onbtn">
         <p>Turn all lights {group0State ? "off" : "on"}</p>

src/containers/TheSidebar.js

@@ -1,4 +1,4 @@
-import { MenuItem, SubMenu } from './MenuItem';
+import { SubMenu } from './MenuItem';
 import { memo, useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import {

src/scss/mainframe.scss

@@ -28,7 +28,7 @@ body {
   background-position: bottom center;
 }
 
-#root{
+#root {
   width: 100%;
   height: 100%;
   display: flex;
@@ -45,7 +45,7 @@ body {
   -webkit-backdrop-filter: blur(20px);
   background: rgba(0, 0, 0, 0.2);
 
-  &.active{
+  &.active {
     width: 180px;
   }
 }
@@ -83,7 +83,7 @@ body {
     letter-spacing: 5px;
   }
 
-  
+
 }
 
 .topbarRight {
@@ -115,31 +115,43 @@ body {
   .updatebtn {
     display: flex;
     align-items: center;
-    background: rgb(39, 174, 96);
     margin-right: 10px;
     padding: 8px 15px;
     border-radius: 10px;
     color: #eee;
-    font-size: 14px;
+    font-size: 18px;
     font-weight: 0;
     border: none;
-    cursor: pointer;
     transition: all .15s ease-in-out;
 
-    &.install{
+    &.update {
+      cursor: pointer;
+      background: rgb(39, 174, 96);
+
+      &:hover,
+      &:active,
+      &:focus {
+        border: none;
+        background: rgb(45, 239, 126);
+        transition: all .15s ease-in-out;
+      }
+    }
+
+    &.install {
       background: rgb(142, 68, 173);
     }
 
-    &.check{
+    &.check {
+      cursor: pointer;
       background: rgb(85, 106, 120);
-    }
-
-    &:hover,
-    &:active,
-    &:focus {
-      border: none;
-      background: rgb(37, 206, 108);
-      transition: all .15s ease-in-out;
+
+      &:hover,
+      &:active,
+      &:focus {
+        border: none;
+        background: rgb(148, 173, 190);
+        transition: all .15s ease-in-out;
+      }
     }
   }
 
@@ -152,7 +164,7 @@ body {
     margin-left: 10px;
     transition: color 0.1s ease;
 
-    &:hover{
+    &:hover {
       color: rgba(255, 255, 255, 0.9);
       cursor: pointer;
       transition: color 0.2s ease;
@@ -174,18 +186,19 @@ body {
   body {
     background-image: url("../static/images/mobile_background.png");
   }
-  .columnLeft{
-    &.active{
+
+  .columnLeft {
+    &.active {
       position: absolute;
-      top:0;
-      left:0;
+      top: 0;
+      left: 0;
       z-index: 9000;
       backdrop-filter: blur(20px);
       -webkit-backdrop-filter: blur(20px);
     }
   }
 
-  .content .inner{
+  .content .inner {
     padding: 20px 0 0 0;
   }
 
@@ -198,6 +211,7 @@ body {
 }
 
 @supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
+
   .columnLeft,
   .topbarRight {
     background: rgba(0, 0, 0, 0.5);

src/scss/sidebar.scss

@@ -34,12 +34,13 @@
 
       svg{
         width: 30px;
-        margin-right: 10px;
+        margin-right: 0px;
         flex-shrink: 0;
       }
 
       p{
         flex-shrink: 0;
+        margin-left: 10px;
       }
     }