From 7cbc54a831ff09ed9db029a6c8cdf1cb6aa5ffb3 Mon Sep 17 00:00:00 2001
From: BetaHuhn <hello@mxis.ch>
Date: Thu, 21 Sep 2023 15:43:43 +0200
Subject: [PATCH] style app actions menu

---
 src/components/MessageItem.tsx            | 12 ++++++------
 src/components/SelectIntegrationModal.tsx | 14 +++++++++++---
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/components/MessageItem.tsx b/src/components/MessageItem.tsx
index 9a79713..c9f3946 100644
--- a/src/components/MessageItem.tsx
+++ b/src/components/MessageItem.tsx
@@ -124,12 +124,12 @@ export function MessageItem({ message, readOnly = false, onDeleted, handleUseMes
           <Box style={{ display: 'flex' }}>
             {spaceAppActions !== null && (
                 <SelectIntegrationModal contentHtml={html} contentText={message.content}>
-              <Tooltip label="Send to Space" position="top">
-                  <ActionIcon >
-                    {/* <IconBolt opacity={0.5} size={20} /> */}
-                    <img src="/assets/integrations/deta.png" height={20} style={{ opacity: 0.75 }} />
-                  </ActionIcon>
-              </Tooltip>
+                  <Tooltip label="Send to Space" position="top">
+                      <ActionIcon >
+                        {/* <IconBolt opacity={0.5} size={20} /> */}
+                        <img src="/assets/integrations/deta.png" height={20} style={{ opacity: 0.75 }} />
+                      </ActionIcon>
+                  </Tooltip>
                 </SelectIntegrationModal>
             )}
 
diff --git a/src/components/SelectIntegrationModal.tsx b/src/components/SelectIntegrationModal.tsx
index 8d90552..a083766 100644
--- a/src/components/SelectIntegrationModal.tsx
+++ b/src/components/SelectIntegrationModal.tsx
@@ -32,7 +32,7 @@ export function SelectIntegrationModal({
       const spotlightActionsItems = actions.map(action => ({
         title: action.title,
         description: action.instance_alias,
-        icon: action.icon_url ? <img width={28} style={{ borderRadius: 5 }} src={action.icon_url} alt={action.title} /> : <IconBolt size={28} />,
+        icon: action.icon_url ? <img width={30} style={{ borderRadius: 5 }} src={action.icon_url} alt={action.title} /> : <IconBolt size={28} />,
         onTrigger: async () => {
           try {
             if (action) {
@@ -122,13 +122,21 @@ export function SelectIntegrationModal({
       {open && (
         <SpotlightProvider
           actions={spotlightActions}
-          searchIcon={<IconSearch size="1.2rem" />}
-          searchPlaceholder="Search..."
+          searchIcon={<img src="/assets/integrations/deta.png" height={28} />}
+          searchPlaceholder="Search Space App Actions..."
           shortcut={null}
           nothingFoundMessage="Nothing found..."
           onSpotlightOpen={() => setOpen(true)}
           onSpotlightClose={() => setOpen(false)}
           limit={Infinity}
+          styles={{
+            'content': {
+              border: '4px solid #dbdbdb88'
+            },
+            'searchInput': {
+              'border-bottom': '3px solid #dbdbdb54 !important',
+            }
+          }}
         >
         </SpotlightProvider>
       )}