Fix Graph, add close button and modify colors

app/components/device-detail/device-detail-box.tsx

@@ -1,6 +1,7 @@
 import {
   Form,
   useLoaderData,
+  useNavigate,
   useNavigation,
   useSearchParams,
   useSubmit,
@@ -20,6 +21,7 @@ import {
   Share2,
   XSquare,
   EllipsisVertical,
+  X,
 } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import type { DraggableData } from "react-draggable";
@@ -84,6 +86,7 @@ export const useSharedCompareMode = () => useBetween(useCompareMode);
 
 export default function DeviceDetailBox() {
   const navigation = useNavigation();
+  const navigate = useNavigate();
   const data = useLoaderData<typeof loader>();
   const nodeRef = useRef(null);
   // state variables
@@ -171,7 +174,7 @@ export default function DeviceDetailBox() {
                 <div
                   className={
                     data.device.status === "ACTIVE"
-                      ? "h-4 w-4 rounded-full bg-green-100"
+                      ? "h-4 w-4 rounded-full bg-light-green"
                       : "h-4 w-4 rounded-full bg-red-500"
                   }
                 ></div>
@@ -228,6 +231,12 @@ export default function DeviceDetailBox() {
                   className="cursor-pointer"
                   onClick={() => setOpen(false)}
                 />
+                <X
+                  className="cursor-pointer"
+                  onClick={() => {
+                    navigate("/explore");
+                  }}
+                />
               </div>
               <div className="no-scrollbar relative flex-1 overflow-y-scroll">
                 <Accordion
@@ -355,7 +364,7 @@ export default function DeviceDetailBox() {
                                           <div
                                             className={
                                               sensor.status === "active"
-                                                ? "h-2 w-2 rounded-full bg-green-100"
+                                                ? "h-2 w-2 rounded-full bg-light-green"
                                                 : "h-2 w-2 rounded-full bg-red-500"
                                             }
                                           ></div>

app/components/device/new/select-sensors/index.tsx

@@ -119,7 +119,7 @@ export default function SelectSensors({ data }: SelectSensorsProps) {
                               sensorsField.validate();
                             }}
                             key={sensor.id}
-                            className="relative hover:cursor-pointer hover:ring-2 hover:ring-green-100 data-[checked=true]:ring-4 data-[checked=true]:ring-green-300"
+                            className="relative hover:cursor-pointer hover:ring-2 hover:ring-light-green data-[checked=true]:ring-4 data-[checked=true]:ring-light-green"
                           >
                             <CardContent className="flex justify-center pt-2">
                               <AspectRatio ratio={4 / 3}>
@@ -134,7 +134,7 @@ export default function SelectSensors({ data }: SelectSensorsProps) {
                               <CardTitle className="text-xl">
                                 {sensor.sensor.label.item[0].text}
                               </CardTitle>
-                              <PlusCircleIcon className="absolute bottom-0 right-0 h-5 w-5 text-green-300" />
+                              <PlusCircleIcon className="absolute bottom-0 right-0 h-5 w-5 text-light-green" />
                             </CardFooter>
                           </Card>
                         }

app/components/header/nav-bar/nav-bar-handler.tsx

@@ -34,7 +34,7 @@ function getSections(devices: Device[]) {
     {
       title: "Einstellungen",
       icon: Cog,
-      color: "bg-green-100",
+      color: "bg-light-green",
       component: <div>Einstellungen</div>,
     },
   ];

app/components/header/nav-bar/sensor-filter.tsx

@@ -49,8 +49,8 @@ export function SensorFilter(props: SensorFilterProps, request: Request) {
               <li>
                 <button
                   className={
-                    "hover:text-green-100 " +
-                    (props.sensor === "all" ? "text-green-300" : "")
+                    "hover:text-light-green " +
+                    (props.sensor === "all" ? "text-light-green" : "")
                   }
                   onClick={() => props.setSensor("all")}
                 >
@@ -62,8 +62,8 @@ export function SensorFilter(props: SensorFilterProps, request: Request) {
                   <li className="py-1" key={p.id}>
                     <button
                       className={
-                        "flex items-center gap-2 hover:text-green-100 " +
-                        (props.sensor === p.slug ? "text-green-300" : "")
+                        "flex items-center gap-2 hover:text-light-green " +
+                        (props.sensor === p.slug ? "text-light-green" : "")
                       }
                       onClick={() => props.setSensor(p.slug)}
                     >
@@ -91,7 +91,7 @@ export function SensorFilter(props: SensorFilterProps, request: Request) {
                 className="hidden"
                 defaultChecked={true}
               />
-              <Button type="submit" className="bg-green-100">
+              <Button type="submit" className="bg-light-green">
                 {t("button")}
               </Button>
             </Form>

app/components/landing/donate.tsx

@@ -9,7 +9,7 @@ export default function Donate() {
     >
       <div className="flex w-full flex-col">
         <div className="flex items-center justify-center pb-10">
-        <p className="dark:text-green-200 font-serif text-6xl font-black text-green-100 subpixel-antialiased">
+        <p className="dark:text-green-200 font-serif text-6xl font-black text-light-green subpixel-antialiased">
             Donate
           </p>
         </div>

app/components/landing/features-card.tsx

@@ -4,9 +4,9 @@ export default function FeatureCard(item: Feature) {
   return (
     <div
       key={item.id}
-      className="dark:bg-gray-900 flex flex-col items-center justify-center rounded-xl border-4 border-solid border-green-100 bg-white p-4 text-center text-4xl text-gray-300 shadow-[5px_5px_rgba(0,_98,_90,_0.4),_8px_8px_rgba(0,_98,_90,_0.3),_11px_11px_rgba(0,_98,_90,_0.2),_14px_14px_rgba(0,_98,_90,_0.1),_17px_17px_rgba(0,_98,_90,_0.05)] dark:text-gray-100"
+      className="dark:bg-gray-900 flex flex-col items-center justify-center rounded-xl border-4 border-solid border-light-green bg-white p-4 text-center text-4xl text-gray-300 shadow-[5px_5px_rgba(0,_98,_90,_0.4),_8px_8px_rgba(0,_98,_90,_0.3),_11px_11px_rgba(0,_98,_90,_0.2),_14px_14px_rgba(0,_98,_90,_0.1),_17px_17px_rgba(0,_98,_90,_0.05)] dark:text-gray-100"
     >
-      <div className="dark:text-green-200 pb-4 font-serif text-2xl font-extrabold text-green-100 subpixel-antialiased">
+      <div className="dark:text-green-200 pb-4 font-serif text-2xl font-extrabold text-light-green subpixel-antialiased">
         {item.title}
       </div>
       <div className="text-center text-lg">{item.description}</div>

app/components/landing/features-carousel.tsx

@@ -117,10 +117,10 @@ export default function FeaturesCarousel({ data }: FeaturesProps) {
             whileHover={{ scale: 1.2 }}
             whileTap={{ scale: 0.9 }}
             transition={{ type: "spring", stiffness: 400, damping: 17 }}
-            className="group relative inline-flex items-center overflow-hidden rounded-full border-2 border-green-300 px-2 py-2 text-lg font-medium text-green-300 hover:bg-gray-50 hover:text-white md:px-3 md:py-3"
+            className="group relative inline-flex items-center overflow-hidden rounded-full border-2 border-light-green px-2 py-2 text-lg font-medium text-light-green hover:bg-gray-50 hover:text-white md:px-3 md:py-3"
           >
             <ArrowLeft className="z-20 h-2 w-2 hover:text-white md:h-6 md:w-6" />
-            <span className="duration-400 ease absolute left-0 top-1/2 block h-0 w-full bg-green-300 opacity-100 transition-all group-hover:top-0 group-hover:h-full"></span>
+            <span className="duration-400 ease absolute left-0 top-1/2 block h-0 w-full bg-light-green opacity-100 transition-all group-hover:top-0 group-hover:h-full"></span>
             <span className="ease absolute left-1/2 flex h-10 w-10 -translate-x-1/2 transform items-center justify-start duration-300 group-hover:translate-x-4"></span>
           </motion.div>
         </motion.button>
@@ -176,10 +176,10 @@ export default function FeaturesCarousel({ data }: FeaturesProps) {
             whileHover={{ scale: 1.2 }}
             whileTap={{ scale: 0.9 }}
             transition={{ type: "spring", stiffness: 400, damping: 17 }}
-            className="group relative inline-flex items-center overflow-hidden rounded-full border-2 border-green-300 px-2 py-2 text-lg font-medium text-green-300 hover:bg-gray-50 hover:text-white md:px-3 md:py-3"
+            className="group relative inline-flex items-center overflow-hidden rounded-full border-2 border-light-green px-2 py-2 text-lg font-medium text-light-green hover:bg-gray-50 hover:text-white md:px-3 md:py-3"
           >
             <ArrowRight className="z-20 h-2 w-2 hover:text-white md:h-6 md:w-6" />
-            <span className="duration-400 ease absolute left-0 top-1/2 block h-0 w-full bg-green-300 opacity-100 transition-all group-hover:top-0 group-hover:h-full"></span>
+            <span className="duration-400 ease absolute left-0 top-1/2 block h-0 w-full bg-light-green opacity-100 transition-all group-hover:top-0 group-hover:h-full"></span>
             <span className="ease absolute left-1/2 flex h-10 w-10 -translate-x-1/2 transform items-center justify-start duration-300 group-hover:translate-x-4"></span>
           </motion.div>
         </motion.button>

app/components/landing/features.tsx

@@ -11,7 +11,7 @@ export default function Features({ data }: FeaturesProps) {
     <div id="features" className="flex h-full items-center justify-center">
       <div className="w-full">
         <div className="flex items-center justify-center pb-10">
-          <p className="dark:text-green-200 font-serif text-6xl font-black text-green-100 subpixel-antialiased">
+          <p className="dark:text-green-200 font-serif text-6xl font-black text-light-green subpixel-antialiased">
             Features
           </p>
         </div>

app/components/landing/footer.tsx

@@ -16,7 +16,7 @@ export default function Footer() {
               href="/imprint"
               target="_blank"
               rel="noopener noreferrer"
-              className="dark:hover:text-green-200 px-2 hover:text-green-100 md:px-8"
+              className="dark:hover:text-green-200 px-2 hover:text-light-green md:px-8"
             >
               Impressum
             </a>
@@ -26,7 +26,7 @@ export default function Footer() {
               href="https://www.instagram.com/opensenselab/"
               target="_blank"
               rel="noopener noreferrer"
-              className="dark:hover:text-green-200 px-2 hover:text-green-100 md:px-8"
+              className="dark:hover:text-green-200 px-2 hover:text-light-green md:px-8"
             >
               <svg
                 className="h-10 w-10"
@@ -48,7 +48,7 @@ export default function Footer() {
               href="https://twitter.com/openSenseLab"
               target="_blank"
               rel="noopener noreferrer"
-              className="dark:hover:text-green-200 px-2 hover:text-green-100 md:px-8"
+              className="dark:hover:text-green-200 px-2 hover:text-light-green md:px-8"
             >
               <svg
                 className="h-10 w-10"
@@ -66,7 +66,7 @@ export default function Footer() {
               href="https://github.com/opensenselab"
               target="_blank"
               rel="noopener noreferrer"
-              className="dark:hover:text-green-200 px-2 hover:text-green-100 md:px-8"
+              className="dark:hover:text-green-200 px-2 hover:text-light-green md:px-8"
             >
               <svg
                 className="h-10 w-10"

app/components/landing/header.tsx

@@ -41,7 +41,7 @@ export default function Header() {
           {/* Osem Logo*/}
           <Link to="/" className="flex items-center md:pr-10">
             <img src="/logo.png" className="mr-3 h-6 sm:h-9" alt="osem Logo" />
-            <span className="dark:text-green-200 hidden self-center whitespace-nowrap text-xl font-semibold text-green-100 md:block">
+            <span className="text-light-green dark:text-dark-green hidden self-center whitespace-nowrap text-xl font-semibold md:block">
               openSenseMap
             </span>
           </Link>
@@ -58,7 +58,7 @@ export default function Header() {
                   <li key={index}>
                     <Link
                       to={item.link}
-                      className="dark:md:hover:text-green-200 block rounded py-2 pl-3 pr-4 md:p-0 md:font-thin md:hover:text-green-100"
+                      className="dark:md:hover:text-green-200 block rounded py-2 pl-3 pr-4 md:p-0 md:font-thin md:hover:text-light-green"
                     >
                       {item.name}
                     </Link>
@@ -109,7 +109,7 @@ export default function Header() {
                   <Link
                     key={index}
                     to={item.link}
-                    className="dark:hover:text-green-200 block px-4 py-2 text-sm text-gray-700 hover:text-green-100"
+                    className="dark:hover:text-green-200 block px-4 py-2 text-sm text-gray-700 hover:text-light-green"
                     role="menuitem"
                   >
                     {item.name}