From 0fa8a2594eea109ee727c63161d8eb4572b5902d Mon Sep 17 00:00:00 2001
From: alberto-abarzua <uintuser@pm.me>
Date: Mon, 6 Nov 2023 20:08:16 -0300
Subject: [PATCH] feat: update action colors and side nav

---
 frontend/src/components/actions/ActionSet.jsx      |  4 ++--
 frontend/src/components/actions/BaseAction.jsx     |  4 ++--
 frontend/src/components/controls/ArmStatus.jsx     |  2 +-
 frontend/src/components/general/layout/SideNav.jsx | 10 ++++------
 frontend/src/views/MainView.jsx                    |  4 ++--
 frontend/tailwind.config.js                        | 12 ++++++------
 6 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/actions/ActionSet.jsx b/frontend/src/components/actions/ActionSet.jsx
index d2ce9b36..456dc342 100644
--- a/frontend/src/components/actions/ActionSet.jsx
+++ b/frontend/src/components/actions/ActionSet.jsx
@@ -51,7 +51,7 @@ const ActionSet = ({ action, ...props }) => {
             </div>
         ) : (
             <div className="w-full px-2">
-                <Accordion type="single" collapsible>
+                <Accordion type="single" collapsible defaultValue="item-1">
                     <AccordionItem value="item-1">
                         <AccordionTrigger>Sub Actions</AccordionTrigger>
                         <AccordionContent>
@@ -63,7 +63,7 @@ const ActionSet = ({ action, ...props }) => {
         );
     return (
         <BaseAction
-            className={' bg-action-set'}
+            className={' bg-action-set opacity-90'}
             icon={<DashboardCustomizeIcon className="text-6xl"></DashboardCustomizeIcon>}
             action={action}
             {...props}
diff --git a/frontend/src/components/actions/BaseAction.jsx b/frontend/src/components/actions/BaseAction.jsx
index fc7f29e1..166af3e5 100644
--- a/frontend/src/components/actions/BaseAction.jsx
+++ b/frontend/src/components/actions/BaseAction.jsx
@@ -73,8 +73,8 @@ const BaseAction = ({ icon, children, className, action, ...props }) => {
         running ? (
             <AutorenewIcon className="animate-spin text-4xl transition-all duration-300 group-hover:text-gray-600" />
         ) : (
-            <div onMouseDown={e => e.stopPropagation()} ref={drag}>
-                <DragIndicatorIcon className="text-4xl transition-all duration-300 group-hover:text-slate-300" />
+            <div className="p-3" onMouseDown={e => e.stopPropagation()} ref={drag}>
+                <DragIndicatorIcon className="mx-3 scale-150 transform transition-all duration-300 hover:text-slate-300" />
             </div>
         )
     ) : (
diff --git a/frontend/src/components/controls/ArmStatus.jsx b/frontend/src/components/controls/ArmStatus.jsx
index 23d280f1..ad70856b 100644
--- a/frontend/src/components/controls/ArmStatus.jsx
+++ b/frontend/src/components/controls/ArmStatus.jsx
@@ -31,7 +31,7 @@ const ArmStatus = () => {
             status.icon = AddHomeIcon;
         } else {
             status.label = 'Ready';
-            status.color = 'bg-green-200';
+            status.color = 'bg-green-300';
             status.icon = DoneAllIcon;
         }
     } else if (armStatus === ControllerStatus.STOPPED) {
diff --git a/frontend/src/components/general/layout/SideNav.jsx b/frontend/src/components/general/layout/SideNav.jsx
index a7e8fdb5..0d247f79 100644
--- a/frontend/src/components/general/layout/SideNav.jsx
+++ b/frontend/src/components/general/layout/SideNav.jsx
@@ -3,15 +3,13 @@ import PrecisionManufacturingIcon from '@mui/icons-material/PrecisionManufacturi
 import SettingsIcon from '@mui/icons-material/Settings';
 const SideNav = () => {
     return (
-        <div className="fixed h-full w-28 bg-gray-100">
-            <div className="absolute left-[18px] top-[25px] h-20 w-20">
-                <div className="relative left-0 top-0 flex h-20 w-20 items-center justify-center rounded-full bg-zinc-300">
-                    <PrecisionManufacturingIcon className="scale-150 transform"></PrecisionManufacturingIcon>
-                </div>
+        <div className="fixed h-full w-16 bg-gray-100">
+            <div className="relative left-0 top-0 mx-auto mt-8 flex h-12 w-14 items-center justify-center rounded-full bg-slate-700">
+                <PrecisionManufacturingIcon className="scale-125 transform text-white"></PrecisionManufacturingIcon>
             </div>
 
             <div className="absolute bottom-4 flex w-full flex-col items-center space-y-10 pb-3">
-                <InfoOutlinedIcon className="scale-150 transform"></InfoOutlinedIcon>
+                <InfoOutlinedIcon className="scale-150 transform cursor-pointer text-slate-900"></InfoOutlinedIcon>
                 <SettingsIcon className="scale-150 transform"></SettingsIcon>
             </div>
         </div>
diff --git a/frontend/src/views/MainView.jsx b/frontend/src/views/MainView.jsx
index 11b08508..08d1dd93 100644
--- a/frontend/src/views/MainView.jsx
+++ b/frontend/src/views/MainView.jsx
@@ -9,11 +9,11 @@ export default function Home() {
     return (
         <Providers>
             <div className="box-border flex h-screen">
-                <div className="relative flex h-full w-full flex-col lg:w-1/12 ">
+                <div className="relative flex h-full flex-col lg:w-16 ">
                     <SideNav></SideNav>
                 </div>
 
-                <div className="flex h-full w-full flex-col items-center lg:w-5/12 ">
+                <div className="flex h-full w-full flex-col items-center lg:w-6/12 ">
                     <ActionsPanel></ActionsPanel>
                 </div>
                 <div className="relative box-border flex h-full w-full flex-col items-start justify-start bg-slate-50 lg:w-6/12">
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 828f0067..a245ae96 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -59,18 +59,18 @@ module.exports = {
                 'action-tool-hover': colors.amber[600],
                 'action-sleep': {
                     ...colors.indigo,
-                    DEFAULT: colors.indigo[700],
+                    DEFAULT: colors.sky[700],
                 },
-                'action-sleep-hover': colors.indigo[800],
+                'action-sleep-hover': colors.sky[800],
 
                 'action-set': {
-                    ...colors.red,
-                    DEFAULT: colors.red[500],
+                    ...colors.pink,
+                    DEFAULT: colors.pink[700],
                 },
 
-                'action-set-hover': colors.red[600],
+                'action-set-hover': colors.pink[800],
 
-                'action-data': colors.slate[100],
+                'action-data': colors.sky[50],
             },
             borderRadius: {
                 lg: 'var(--radius)',