From 9a866a658fc2504a6a0db9521c4fc93e6dbaa834 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 12 Sep 2022 16:35:42 +0100
Subject: [PATCH] Update plugins UI styles

---
 .../plugins/_components/PluginRow.svelte      | 21 ++++++----
 .../portal/manage/plugins/index.svelte        | 40 +++++++++----------
 2 files changed, 32 insertions(+), 29 deletions(-)
diff --git a/packages/builder/src/pages/builder/portal/manage/plugins/_components/PluginRow.svelte b/packages/builder/src/pages/builder/portal/manage/plugins/_components/PluginRow.svelte
index dd35ce752d..09a67c3583 100644
--- a/packages/builder/src/pages/builder/portal/manage/plugins/_components/PluginRow.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/plugins/_components/PluginRow.svelte
@@ -21,7 +21,7 @@
       : plugin.schema.schema.icon || "Beaker"
 </script>
 
-<div class="row">
+<div class="row" on:click={() => detailsModal.show()}>
   <div class="title">
     <div class="name">
       <div>
@@ -42,9 +42,8 @@
   <div class="desktop">
     {plugin.schema.type.charAt(0).toUpperCase() + plugin.schema.type.slice(1)}
   </div>
-
   <div>
-    <Icon on:click={detailsModal.show()} hoverable name="ChevronRight" />
+    <Icon name="ChevronRight" />
   </div>
 </div>
 
@@ -98,13 +97,19 @@
 <style>
   .row {
     display: grid;
-    grid-template-columns: 35% auto auto auto;
+    grid-template-columns: 1fr 110px 140px 20px;
     align-items: center;
     background: var(--background);
-    height: 50px;
-    padding-left: 20px;
-    padding-right: 20px;
-    justify-content: space-between;
+    border-radius: 4px;
+    padding: 0 16px;
+    height: 56px;
+    background: var(--spectrum-global-color-gray-50);
+    border: 1px solid var(--spectrum-global-color-gray-300);
+    transition: background 130ms ease-out;
+  }
+  .row:hover {
+    cursor: pointer;
+    background: var(--spectrum-global-color-gray-75);
   }
 
   .name {
diff --git a/packages/builder/src/pages/builder/portal/manage/plugins/index.svelte b/packages/builder/src/pages/builder/portal/manage/plugins/index.svelte
index a31cf71f03..2602f4a034 100644
--- a/packages/builder/src/pages/builder/portal/manage/plugins/index.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/plugins/index.svelte
@@ -41,18 +41,16 @@
 
 <Layout noPadding>
   <Layout gap="XS" noPadding>
-    <div style="display: flex;">
-      <Heading size="M">Plugins</Heading>
-    </div>
+    <Heading size="M">Plugins</Heading>
     <Body>Add your own custom datasources and components</Body>
-    <Divider />
   </Layout>
+  <Divider size="S" />
   <Layout noPadding>
-    <div class="align-buttons">
+    <div class="controls">
       <div>
-        <Button on:click={modal.show} newStyles cta icon={"Add"}
-          >Add plugin</Button
-        >
+        <Button on:click={modal.show} newStyles cta icon={"Add"}>
+          Add plugin
+        </Button>
       </div>
       <div class="filters">
         <div class="select">
@@ -60,17 +58,19 @@
             bind:value={filter}
             placeholder={null}
             options={filterOptions}
+            autoWidth
+            quiet
           />
         </div>
-
-        <Search bind:value={searchTerm} />
+        <Search bind:value={searchTerm} placeholder="Search plugins" />
       </div>
     </div>
-
-    {#if $plugins}
-      {#each filteredPlugins as plugin}
-        <PluginRow {plugin} />
-      {/each}
+    {#if filteredPlugins?.length}
+      <Layout noPadding gap="S">
+        {#each filteredPlugins as plugin}
+          <PluginRow {plugin} />
+        {/each}
+      </Layout>
     {/if}
   </Layout>
 </Layout>
@@ -84,14 +84,12 @@
     display: flex;
     gap: var(--spacing-xl);
   }
-  .align-buttons {
-    margin-top: -10px;
+  .controls {
     display: flex;
-    column-gap: var(--spacing-xl);
+    gap: var(--spacing-xl);
     justify-content: space-between;
   }
-
-  .select {
-    flex-basis: 180px;
+  .controls :global(.spectrum-Search) {
+    width: 200px;
   }
 </style>
