refactor(control-bar): 🎉 update new design

robolaunch · Dec 19, 2023 · dad6be6 · dad6be6
1 parent 14a1f35
commit dad6be6
Show file tree

Hide file tree

Showing 7 changed files with 113 additions and 93 deletions.
diff --git a/public/css/style.css b/public/css/style.css
@@ -1359,6 +1359,10 @@ video {
   width: max-content;
 }
 
+.\!w-28 {
+  width: 7rem !important;
+}
+
 .min-w-\[12rem\] {
   min-width: 12rem;
 }
@@ -1734,6 +1738,14 @@ video {
   gap: 5rem;
 }
 
+.gap-0 {
+  gap: 0px;
+}
+
+.gap-0\.5 {
+  gap: 0.125rem;
+}
+
 .overflow-auto {
   overflow: auto;
 }
@@ -1861,6 +1873,10 @@ video {
   border-top-width: 2px;
 }
 
+.border-l {
+  border-left-width: 1px;
+}
+
 .border-none {
   border-style: none;
 }
@@ -2160,6 +2176,11 @@ video {
   background-color: rgb(234 179 8 / var(--tw-bg-opacity));
 }
 
+.bg-secondary-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(232 247 254 / var(--tw-bg-opacity));
+}
+
 .bg-opacity-75 {
   --tw-bg-opacity: 0.75;
 }
@@ -2534,6 +2555,14 @@ video {
   line-height: 1rem;
 }
 
+.\!text-\[0\.66rem\] {
+  font-size: 0.66rem !important;
+}
+
+.\!text-\[0\.68rem\] {
+  font-size: 0.68rem !important;
+}
+
 .\!font-semibold {
   font-weight: 600 !important;
 }

diff --git a/src/components/ControlBar/ControlBar.tsx b/src/components/ControlBar/ControlBar.tsx
@@ -1,3 +1,7 @@
+import RestartService from "../RestartServiceButton/RestartServiceButton";
+import FullScreenService from "../FullScreenService/FullScreenService";
+import VDIVolumeControl from "../VDIVolumeControl/VDIVolumeControl";
+import VDIControlButton from "../VDIControlButton/VDIControlButton";
 import { ReactElement, useState } from "react";
 import {
   MdOutlineKeyboardArrowDown,
@@ -6,11 +10,7 @@ import {
 import FileBrowser from "../FileBrowser/FileBrowser";
 import ServiceJobs from "../ServiceJobs/ServiceJobs";
 import ServiceLogs from "../ServiceLogs/ServiceLogs";
-import RestartService from "../RestartServiceButton/RestartServiceButton";
-import FullScreenService from "../FullScreenService/FullScreenService";
 import { FullScreenHandle } from "react-full-screen";
-import VDIVolumeControl from "../VDIVolumeControl/VDIVolumeControl";
-import VDIControlButton from "../VDIControlButton/VDIControlButton";
 
 interface IControlBar {
   type: "ide" | "vdi";
@@ -26,7 +26,7 @@ export default function ControlBar({
   return (
     <div className="absolute bottom-0 left-1/2 right-1/2 flex flex-col items-center">
       <button
-        className="rounded-t-lg bg-light-100 bg-opacity-75 px-3 py-0.5"
+        className="rounded-t-lg bg-light-100 px-3 py-0.5"
         onClick={() => setIsOpenMenu(!isOpenMenu)}
       >
         {isOpenMenu ? (
@@ -36,7 +36,7 @@ export default function ControlBar({
         )}
       </button>
       {isOpenMenu && (
-        <div className="flex items-center gap-6 rounded-t-lg bg-light-100 bg-opacity-75 px-6 pb-2 pt-3">
+        <div className="flex items-center gap-6 rounded-t-lg bg-light-100 px-6 pb-2 pt-3">
           <FileBrowser type={type} />
           <ServiceJobs type={type} />
           <ServiceLogs type={type} />

diff --git a/src/components/SidebarLists/RobotsList.tsx b/src/components/SidebarLists/RobotsList.tsx
@@ -1,5 +1,5 @@
-import React, { Fragment, ReactElement, useEffect, useState } from "react";
 import SidebarListLoader from "../SidebarListLoader/SidebarListLoader";
+import { Fragment, ReactElement, useEffect, useState } from "react";
 import { envApplication } from "../../helpers/envProvider";
 import StateCell from "../TableInformationCells/StateCell";
 import SidebarInfo from "../SidebarInfo/SidebarInfo";

diff --git a/src/components/SidebarLists/SidebarListItem.tsx b/src/components/SidebarLists/SidebarListItem.tsx
@@ -4,6 +4,7 @@ import { useNavigate } from "react-router-dom";
 import useMain from "../../hooks/useMain";
 import { ReactElement } from "react";
 import { toast } from "sonner";
+import { MdKeyboardArrowRight } from "react-icons/md";
 
 interface ISidebarListItem {
   name: string;
@@ -122,107 +123,102 @@ export default function SidebarListItem({
     }
   };
 
+  function handleNotSelectableClick() {
+    switch (type) {
+      case "organization":
+        setSelectedState({
+          ...selectedState,
+          organization: data,
+          roboticsCloud: null,
+          instance: null,
+          fleet: null,
+        });
+        setSidebarState({ ...sidebarState, isOpen: false });
+        navigate(url);
+        break;
+      case "roboticscloud":
+        setSelectedState({
+          ...selectedState,
+          roboticsCloud: data,
+          instance: null,
+          fleet: null,
+        });
+        setSidebarState({ ...sidebarState, isOpen: false });
+        navigate(url);
+        break;
+      case "instance":
+        if (data?.instanceCloudState === "ConnectionHub_Ready") {
+          setSelectedState({
+            ...selectedState,
+            instance: data,
+            fleet: null,
+          });
+          setSidebarState({ ...sidebarState, isOpen: false });
+          navigate(url);
+        } else {
+          toast.error(
+            "Instance is not selectable now. Please try again later.",
+          );
+        }
+        break;
+      case "fleet":
+        if (
+          data?.fleetStatus === "Ready" ||
+          data?.namespaceStatus === "Active"
+        ) {
+          setSelectedState({ ...selectedState, fleet: data });
+          setSidebarState({ ...sidebarState, isOpen: false });
+          navigate(url);
+        } else {
+          toast.error("Fleet is not selectable now. Please try again later.");
+        }
+
+        break;
+    }
+  }
+
   return (
     <div
       key={name}
-      className={`animate__animated animate__fadeIn flex cursor-pointer  select-none rounded-lg border hover:scale-[0.985] ${
+      className={`animate__animated animate__fadeIn transition-300 flex w-full cursor-pointer select-none items-center justify-between rounded-lg border hover:scale-[0.985]
+      ${
         selected
-          ? "border-light-400 bg-light-100 shadow"
+          ? "border-light-300 bg-light-100 shadow"
           : "border-light-200 bg-light-50 shadow-sm"
-      } transition-300`}
+      }
+      `}
     >
       <div
         onClick={() => handleSelectItem()}
-        className={`transition-300 flex w-full gap-4 rounded-l-lg border-r p-2.5 ${
-          selected
-            ? "border-light-400 hover:bg-light-200"
-            : "border-light-200 hover:bg-light-100"
-        } ${notSelectable && "!border-0"}`}
+        className={`flex w-full gap-4 rounded-l-lg p-2.5 
+        ${selected ? " hover:bg-light-200" : " hover:bg-light-100"} 
+        `}
       >
         <img
+          alt="rl"
           draggable="false"
           className="w-8"
           src={`/svg/general/${
             envApplication && type === "robot" ? "application" : type
           }/${envApplication && type === "robot" ? "application" : type}-${
             selected ? "blue" : "dark"
           }.svg`}
-          alt=""
         />
         <div className="flex flex-col gap-1">
-          <span className="text-sm font-medium">{name}</span>
-          <span className="text-xs font-light">{description}</span>
+          <p className="text-sm font-medium">{name}</p>
+          <p className="text-xs font-light">{description}</p>
         </div>
       </div>
       {!notSelectable && (
         <div
-          onClick={() => {
-            switch (type) {
-              case "organization":
-                setSelectedState({
-                  ...selectedState,
-                  organization: data,
-                  roboticsCloud: null,
-                  instance: null,
-                  fleet: null,
-                });
-                setSidebarState({ ...sidebarState, isOpen: false });
-                navigate(url);
-                break;
-              case "roboticscloud":
-                setSelectedState({
-                  ...selectedState,
-                  roboticsCloud: data,
-                  instance: null,
-                  fleet: null,
-                });
-                setSidebarState({ ...sidebarState, isOpen: false });
-                navigate(url);
-                break;
-              case "instance":
-                if (data?.instanceCloudState === "ConnectionHub_Ready") {
-                  setSelectedState({
-                    ...selectedState,
-                    instance: data,
-                    fleet: null,
-                  });
-                  setSidebarState({ ...sidebarState, isOpen: false });
-                  navigate(url);
-                } else {
-                  toast.error(
-                    "Instance is not selectable now. Please try again later.",
-                  );
-                }
-                break;
-              case "fleet":
-                if (
-                  data?.fleetStatus === "Ready" ||
-                  data?.namespaceStatus === "Active"
-                ) {
-                  setSelectedState({ ...selectedState, fleet: data });
-                  setSidebarState({ ...sidebarState, isOpen: false });
-                  navigate(url);
-                } else {
-                  toast.error(
-                    "Fleet is not selectable now. Please try again later.",
-                  );
-                }
-
-                break;
-            }
-          }}
-          className={`transition-300 flex items-center justify-center rounded-r-lg px-3.5 ${
+          onClick={() => handleNotSelectableClick()}
+          className={`transition-300 flex h-full items-center justify-center border-l px-3 ${
             selected
-              ? "border-light-400 hover:bg-light-200"
-              : "border-light-100 hover:bg-light-100"
+              ? "border-light-300 hover:bg-light-200"
+              : "border-light-200 hover:bg-light-100"
           } `}
         >
-          <i
-            className={`pi pi-angle-right transition-300 ${
-              selected ? "text-light-900" : "text-light-700"
-            }`}
-            style={{ fontSize: "1.25rem" }}
-          />
+          <MdKeyboardArrowRight size={26} />
         </div>
       )}
     </div>

diff --git a/src/components/SidebarMenu/SidebarMenu.tsx b/src/components/SidebarMenu/SidebarMenu.tsx
@@ -93,12 +93,6 @@ export default function PrivateSidebar(): ReactElement {
             </Fragment>
           ) : (
             <Fragment>
-              {/* {!(envApplicationFleet || envApplication) && (
-                <SidebarStaticItem
-                  to="/marketplace"
-                  imgSrc={`/svg/general/marketplace/marketplace-gray.svg`}
-                />
-              )} */}
               <SideBarMenuItem
                 type="organization"
                 description="You can access all your organizations here."
@@ -132,10 +126,6 @@ export default function PrivateSidebar(): ReactElement {
         </div>
       </div>
       <div className="flex flex-col gap-2">
-        {/* <SidebarStaticItem
-            to="/billing"
-            imgSrc={`/svg/general/billing/billing-gray.svg`}
-          /> */}
         <SidebarStaticItem
           to="/user-role-management"
           imgSrc={`/svg/general/users/users-gray.svg`}

diff --git a/src/components/VDIControlButton/VDIControlButton.tsx b/src/components/VDIControlButton/VDIControlButton.tsx
@@ -36,7 +36,7 @@ export default function VDIControlButton(): ReactElement {
         return "Take Control";
       })()}
       onClick={() => handleGetControl()}
-      className="!h-11 !w-36 text-xs"
+      className="!h-9 !w-32 !text-[0.68rem]"
     />
   );
 }
diff --git a/src/components/VDIVolumeControl/VDIVolumeControl.tsx b/src/components/VDIVolumeControl/VDIVolumeControl.tsx
@@ -21,6 +21,11 @@ export default function VDIVolumeControl(): ReactElement {
       <input
         className="h-[3px] w-24"
         onChange={(e) => handleVolumeControl(Number(e.target.value) / 100)}
+        style={{
+          appearance: "auto",
+          color: "#AC2DFE",
+          accentColor: "currentcolor",
+        }}
         type="range"
         min="1"
         max="100"