Merge pull request #26 from alberto-abarzua/25-update-front-action-co…

…lors feat: update action colors and side nav
alberto-abarzua · Nov 6, 2023 · 1ba4585 · 1ba4585
2 parents 5cfdd99 + 0fa8a25
commit 1ba4585
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 19 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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)',