From 17b9d501c54a15fec24fdbabda51f7b845598ce5 Mon Sep 17 00:00:00 2001
From: Alfredo Gallardo <agallardol@outlook.com>
Date: Thu, 12 Oct 2023 08:02:02 -0500
Subject: [PATCH] - improve: job styles

---
 .../src/components/create-job/create-job.tsx           |  4 ++--
 apps/shinkai-visor/src/components/inboxes/inboxes.tsx  | 10 ++++++++--
 apps/shinkai-visor/src/components/nav/nav.tsx          |  6 +++---
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/apps/shinkai-visor/src/components/create-job/create-job.tsx b/apps/shinkai-visor/src/components/create-job/create-job.tsx
index 6a012fa67..a01c5836d 100644
--- a/apps/shinkai-visor/src/components/create-job/create-job.tsx
+++ b/apps/shinkai-visor/src/components/create-job/create-job.tsx
@@ -140,7 +140,7 @@ export const CreateJob = () => {
           />
 
           {query.has('context') && (
-            <blockquote className="max-h-28 p-4 mb-5 border-l-4 border-gray-300 bg-gray-50 dark:border-gray-500 dark:bg-gray-800">
+            <blockquote className="max-h-28 p-4 mb-5 border-l-4 border-gray-300 bg-secondary-600 dark:border-gray-500 dark:bg-gray-800">
               <p className="italic dark:text-white text-ellipsis overflow-hidden h-full">
                 {query.get('context')}
               </p>
@@ -148,7 +148,7 @@ export const CreateJob = () => {
           )}
 
           {location.state?.files?.length && (
-            <blockquote className="max-h-28 p-4 mb-5 border-l-4 border-gray-300 bg-gray-50 dark:border-gray-500 dark:bg-gray-800">
+            <blockquote className="max-h-28 p-4 mb-5 border-l-4 border-gray-300 bg-secondary-600 dark:border-gray-500 dark:bg-gray-800">
               <FileList files={location.state?.files}></FileList>
             </blockquote>
           )}
diff --git a/apps/shinkai-visor/src/components/inboxes/inboxes.tsx b/apps/shinkai-visor/src/components/inboxes/inboxes.tsx
index 55001ab91..0593c3a2d 100644
--- a/apps/shinkai-visor/src/components/inboxes/inboxes.tsx
+++ b/apps/shinkai-visor/src/components/inboxes/inboxes.tsx
@@ -1,7 +1,8 @@
 import './inboxes.css';
 
+import { isJobInbox } from '@shinkai_network/shinkai-message-ts/utils';
 import { useGetInboxes } from '@shinkai_network/shinkai-node-state/lib/queries/getInboxes/useGetInboxes';
-import { Bot, MessageCircleIcon } from 'lucide-react';
+import { Bot, MessageCircleIcon, Workflow } from 'lucide-react';
 import { Fragment } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
@@ -72,7 +73,12 @@ export const Inboxes = () => {
                   onClick={() => navigateToInbox(inboxId)}
                   variant="tertiary"
                 >
-                  <MessageCircleIcon className="h-4 w-4 shrink-0 mr-2" />
+                  {isJobInbox(decodeURIComponent(inboxId)) ? (
+                    <Workflow className="h-4 w-4 shrink-0 mr-2" />
+                  ) : (
+                    <MessageCircleIcon className="h-4 w-4 shrink-0 mr-2" />
+                  )}
+
                   <span className="w-full truncate">
                     {decodeURIComponent(inboxId)}
                   </span>
diff --git a/apps/shinkai-visor/src/components/nav/nav.tsx b/apps/shinkai-visor/src/components/nav/nav.tsx
index 13df56fa8..92eaf7b75 100644
--- a/apps/shinkai-visor/src/components/nav/nav.tsx
+++ b/apps/shinkai-visor/src/components/nav/nav.tsx
@@ -1,6 +1,6 @@
 import './nav.css';
 
-import { ArrowLeft, Bot, Inbox, LogOut, Menu, X } from 'lucide-react';
+import { ArrowLeft, Bot, Inbox, LogOut, Menu, MessageCircle, Workflow, X } from 'lucide-react';
 import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useHistory, useLocation } from 'react-router-dom';
@@ -117,7 +117,7 @@ export default function NavBar() {
               <DropdownMenuItem
                 onClick={() => onClickMenuOption(MenuOption.CreateInbox)}
               >
-                <Inbox className="mr-2 h-4 w-4" />
+                <MessageCircle className="mr-2 h-4 w-4" />
                 <span>
                   <FormattedMessage id="create-inbox" />
                 </span>
@@ -125,7 +125,7 @@ export default function NavBar() {
               <DropdownMenuItem
                 onClick={() => onClickMenuOption(MenuOption.CreateJob)}
               >
-                <Inbox className="mr-2 h-4 w-4" />
+                <Workflow className="mr-2 h-4 w-4" />
                 <span>
                   <FormattedMessage id="create-job" />
                 </span>