From 9a23a06e8408b6ba9a453d73fb784b4c55ee422b Mon Sep 17 00:00:00 2001
From: Vardan Bansal <vardan.bansal@harness.io>
Date: Wed, 20 Sep 2023 12:48:28 -0700
Subject: [PATCH] aligning UX

---
 .../PluginsPanel/PluginsPanel.module.scss     | 13 +++-
 .../PluginsPanel.module.scss.d.ts             |  2 +
 .../components/PluginsPanel/PluginsPanel.tsx  | 67 ++++++++++++-------
 3 files changed, 56 insertions(+), 26 deletions(-)

diff --git a/web/src/components/PluginsPanel/PluginsPanel.module.scss b/web/src/components/PluginsPanel/PluginsPanel.module.scss
index a29a0c08d..b017d87da 100644
--- a/web/src/components/PluginsPanel/PluginsPanel.module.scss
+++ b/web/src/components/PluginsPanel/PluginsPanel.module.scss
@@ -4,12 +4,17 @@
 }
 
 .pluginIcon {
-  background: var(--teal-200) !important;
+  padding: var(--spacing-small) var(--spacing-3) var(--spacing-small) var(--spacing-3) !important;
+  background: var(--grey-100) !important;
   border-radius: 5px;
 }
 
+.pluginCard {
+  margin: var(--spacing-medium);
+  padding: var(--spacing-medium) !important;
+}
+
 .plugin {
-  border: 1px solid var(--grey-100);
   &:hover {
     cursor: pointer;
   }
@@ -64,3 +69,7 @@
   height: calc(100% - var(--spacing-large) - var(--spacing-xxlarge));
   margin: var(--spacing-large) var(--spacing-xxlarge) var(--spacing-xxlarge) var(--spacing-xxlarge) !important;
 }
+
+.pluginCategory {
+  font-weight: 600 !important;
+}
diff --git a/web/src/components/PluginsPanel/PluginsPanel.module.scss.d.ts b/web/src/components/PluginsPanel/PluginsPanel.module.scss.d.ts
index d839420bb..8c973c956 100644
--- a/web/src/components/PluginsPanel/PluginsPanel.module.scss.d.ts
+++ b/web/src/components/PluginsPanel/PluginsPanel.module.scss.d.ts
@@ -6,6 +6,8 @@ export declare const form: string
 export declare const formFields: string
 export declare const indent: string
 export declare const plugin: string
+export declare const pluginCard: string
+export declare const pluginCategory: string
 export declare const pluginDesc: string
 export declare const pluginDetailsPanel: string
 export declare const pluginIcon: string
diff --git a/web/src/components/PluginsPanel/PluginsPanel.tsx b/web/src/components/PluginsPanel/PluginsPanel.tsx
index 00a03685f..4dc7cb3de 100644
--- a/web/src/components/PluginsPanel/PluginsPanel.tsx
+++ b/web/src/components/PluginsPanel/PluginsPanel.tsx
@@ -9,6 +9,7 @@ import {
   Accordion,
   Button,
   ButtonVariation,
+  Card,
   Container,
   ExpandingSearchInput,
   FormInput,
@@ -140,36 +141,54 @@ export const PluginsPanel = ({ onPluginAddUpdate }: PluginsPanelInterface): JSX.
     }
   }, [query])
 
+  const handlePluginCategoryClick = useCallback((selectedCategory: PluginCategory) => {
+    setCategory(selectedCategory)
+    if (selectedCategory === PluginCategory.Drone) {
+      setPanelView(PluginPanelView.Listing)
+    } else if (selectedCategory === PluginCategory.Harness) {
+      setPlugin(RunStep)
+      setPanelView(PluginPanelView.Configuration)
+    }
+  }, [])
+
   const renderPluginCategories = (): JSX.Element => {
     return (
       <>
         {PluginCategories.map((item: PluginCategoryInterface) => {
           const { name, category: pluginCategory, description, icon } = item
           return (
-            <Layout.Horizontal
-              onClick={() => {
-                setCategory(pluginCategory)
-                if (pluginCategory === PluginCategory.Drone) {
-                  setPanelView(PluginPanelView.Listing)
-                } else if (pluginCategory === PluginCategory.Harness) {
-                  setPlugin(RunStep)
-                  setPanelView(PluginPanelView.Configuration)
-                }
-              }}
-              key={pluginCategory}
-              padding={{ left: 'medium', right: 'medium', top: 'medium', bottom: 'medium' }}
-              flex={{ justifyContent: 'flex-start' }}
-              className={css.plugin}>
-              <Container padding="small" className={css.pluginIcon}>
-                <Icon name={icon} />
-              </Container>
-              <Layout.Vertical padding={{ left: 'small' }}>
-                <Text color={Color.PRIMARY_7} font={{ variation: FontVariation.BODY2 }}>
-                  {name}
-                </Text>
-                <Text font={{ variation: FontVariation.SMALL }}>{description}</Text>
-              </Layout.Vertical>
-            </Layout.Horizontal>
+            <Card className={css.pluginCard}>
+              <Layout.Horizontal flex={{ justifyContent: 'space-between' }}>
+                <Layout.Horizontal
+                  onClick={() => handlePluginCategoryClick(pluginCategory)}
+                  key={pluginCategory}
+                  flex={{ justifyContent: 'flex-start' }}
+                  className={css.plugin}>
+                  <Container className={css.pluginIcon}>
+                    <Icon name={icon} />
+                  </Container>
+                  <Layout.Vertical padding={{ left: 'medium' }} spacing="xsmall">
+                    <Text
+                      color={Color.GREY_900}
+                      className={css.pluginCategory}
+                      font={{ variation: FontVariation.BODY2_SEMI }}>
+                      {name}
+                    </Text>
+                    <Text color={Color.GREY_500} font={{ variation: FontVariation.SMALL }}>
+                      {description}
+                    </Text>
+                  </Layout.Vertical>
+                </Layout.Horizontal>
+                <Container>
+                  <Icon
+                    name="arrow-right"
+                    size={24}
+                    onClick={() => handlePluginCategoryClick(pluginCategory)}
+                    className={css.plugin}
+                  />
+                </Container>
+              </Layout.Horizontal>
+            </Card>
           )
         })}
       </>