added red glassContainer and style Timezone warning

diyhue · Dec 28, 2024 · 04fc065 · 04fc065
1 parent ba8628e
commit 04fc065
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 13 deletions.
diff --git a/src/Pages/LinkButton.jsx b/src/Pages/LinkButton.jsx
@@ -1,7 +1,7 @@
 import axios from "axios";
 import { toast } from "react-hot-toast";
-
-import { IoIosWarning } from "react-icons/io";
+import { Link } from "react-router-dom";
+import { useEffect, useState } from "react";
 
 import GlassContainer from "../components/GlassContainer/GlassContainer";
 import PageContent from "../components/PageContent/PageContent";
@@ -11,6 +11,21 @@ import CardGrid from "../components/CardGrid/CardGrid";
 export default function LinkButton({ HOST_IP, API_KEY }) {
   //console.log(API_KEY)
 
+  const [configTimezone, setConfigTimezone] = useState("");
+  const clientTimezone = new Date().toString().match(/\(([^\)]+)\)$/)[1];
+
+  useEffect(() => {
+    axios
+      .get(`${HOST_IP}/api/${API_KEY}/config`)
+      .then((response) => {
+        const { timezone } = response.data;
+        setConfigTimezone(timezone);
+      })
+      .catch((error) => {
+        console.error("Error fetching config: ", error);
+      });
+  }, [HOST_IP, API_KEY]);
+
   const pushLinkButton = () => {
     axios
       .get(`${HOST_IP}/api/${API_KEY}/config`)
@@ -36,17 +51,18 @@ export default function LinkButton({ HOST_IP, API_KEY }) {
   return (
     <div className="inner">
       <CardGrid options="main">
-        <GlassContainer options="spacer">
-          <PageContent>
-            <div className="headline">
-              <IoIosWarning style={{ color: "red" }}/>
-              Caution
-              <IoIosWarning style={{ color: "red" }}/>
-            </div>
-            <p>Check<a href="#bridge">TimeZone</a> before pressing Link Button</p>
-          </PageContent>
-        </GlassContainer>
-
+          <GlassContainer options="red spacer">
+            <PageContent>
+              <div className="headline" style={{ color: "red" }}>
+                Caution!
+              </div>
+              <p>Check<Link to="/bridge">TimeZone</Link> before pressing Link Button</p>
+              <br />
+              <p style={{ fontSize: ".8rem" }}>Timezone in config: {configTimezone} </p>
+              <p style={{ fontSize: ".8rem" }} >Your Timezone: {clientTimezone}</p>
+
+            </PageContent>
+          </GlassContainer>
         <GlassContainer options="spacer">
           <PageContent>
             <div className="headline">Link Button</div>

diff --git a/src/components/GlassContainer/glassContainer.scss b/src/components/GlassContainer/glassContainer.scss
@@ -15,6 +15,15 @@
   width: fit-content;
   min-width: 380px;
 
+  &.red {
+    background: linear-gradient(
+      45deg,
+      rgba(255, 0, 0, 0.04) 0%,
+      rgba(255, 0, 0, 0.15) 100%
+    );
+    border: 1px solid rgba(255, 0, 0, 0.05);
+  }
+
   &.spacer {
     margin-bottom: 40px;
   }