From bb074ee36e184973ca2930d0b5b1817e7e54407f Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Mon, 8 Aug 2022 12:58:47 +0200
Subject: [PATCH] change(ui) - loader margin

---
 .../components/Client/Integrations/Integrations.tsx  |  2 +-
 .../SlackChannelList/SlackChannelList.js             |  6 +++++-
 .../app/components/Client/Integrations/SlackForm.tsx | 12 ++++++------
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/frontend/app/components/Client/Integrations/Integrations.tsx b/frontend/app/components/Client/Integrations/Integrations.tsx
index 92c050ea0..33d0520d4 100644
--- a/frontend/app/components/Client/Integrations/Integrations.tsx
+++ b/frontend/app/components/Client/Integrations/Integrations.tsx
@@ -80,7 +80,7 @@ function Integrations(props: Props) {
                         <h2 className="font-medium text-lg">{cat.title}</h2>
                         {cat.isProject && (
                             <div className="flex items-center">
-                                <div className="flex flex-wrap ml-4">
+                                <div className="flex flex-wrap mx-4">
                                     <SiteDropdown value={props.siteId} onChange={onChangeSelect} />
                                 </div>
                                 {loading && cat.isProject && <AnimatedSVG name={ICONS.LOADER} size={20} />}
diff --git a/frontend/app/components/Client/Integrations/SlackChannelList/SlackChannelList.js b/frontend/app/components/Client/Integrations/SlackChannelList/SlackChannelList.js
index 07f1aa123..8d25b4454 100644
--- a/frontend/app/components/Client/Integrations/SlackChannelList/SlackChannelList.js
+++ b/frontend/app/components/Client/Integrations/SlackChannelList/SlackChannelList.js
@@ -27,7 +27,11 @@ function SlackChannelList(props) {
                 show={list.size === 0}
             >
                 {list.map((c) => (
-                    <div key={c.webhookId} className="border-t px-5 py-2 flex items-center justify-between cursor-pointer" onClick={() => onEdit(c)}>
+                    <div
+                        key={c.webhookId}
+                        className="border-t px-5 py-2 flex items-center justify-between cursor-pointer hover:bg-active-blue"
+                        onClick={() => onEdit(c)}
+                    >
                         <div className="flex-grow-0" style={{ maxWidth: '90%' }}>
                             <div>{c.name}</div>
                             <div className="truncate test-xs color-gray-medium">{c.endpoint}</div>
diff --git a/frontend/app/components/Client/Integrations/SlackForm.tsx b/frontend/app/components/Client/Integrations/SlackForm.tsx
index 207f9b765..e04c02de6 100644
--- a/frontend/app/components/Client/Integrations/SlackForm.tsx
+++ b/frontend/app/components/Client/Integrations/SlackForm.tsx
@@ -24,16 +24,16 @@ const SlackForm = (props: Props) => {
     }, []);
 
     return (
-        <div className="bg-white h-screen overflow-y-auto flex items-start" style={{ width: active ? '650px' : '350px' }}>
-            <div style={{ width: '350px' }}>
-                <h3 className="p-5 text-2xl">Slack</h3>
-                <SlackChannelList onEdit={onEdit} />
-            </div>
+        <div className="bg-white h-screen overflow-y-auto flex items-start" style={{ width: active ? '700px' : '350px' }}>
             {active && (
-                <div className="border-l h-full">
+                <div className="border-r h-full" style={{ width: '350px' }}>
                     <SlackAddForm onClose={() => setActive(false)} />
                 </div>
             )}
+            <div className="shrink-0" style={{ width: '350px' }}>
+                <h3 className="p-5 text-2xl">Slack</h3>
+                <SlackChannelList onEdit={onEdit} />
+            </div>
         </div>
     );
 };