From a43ea992a99921c426f45d51d156d6f1846b757f Mon Sep 17 00:00:00 2001
From: Arnav Palnitkar <arnav@hashicorp.com>
Date: Mon, 19 Apr 2021 15:40:18 -0700
Subject: [PATCH] Updated search select component styling (#11360)

* Updated search select component styling

- Fixed styling for better readability and access to delete action

* Added changelog file
---
 changelog/11360.txt                                      | 3 +++
 ui/app/styles/components/search-select.scss              | 6 +-----
 ui/lib/core/addon/templates/components/search-select.hbs | 2 +-
 3 files changed, 5 insertions(+), 6 deletions(-)
 create mode 100644 changelog/11360.txt

diff --git a/changelog/11360.txt b/changelog/11360.txt
new file mode 100644
index 000000000..a773c41b2
--- /dev/null
+++ b/changelog/11360.txt
@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Updated search select component styling
+```
\ No newline at end of file
diff --git a/ui/app/styles/components/search-select.scss b/ui/app/styles/components/search-select.scss
index 8ebf0bd94..478992482 100644
--- a/ui/app/styles/components/search-select.scss
+++ b/ui/app/styles/components/search-select.scss
@@ -92,13 +92,9 @@ div > .ember-power-select-options {
 .search-select-list-item {
   align-items: center;
   display: flex;
-  margin: 0 $spacing-m;
   padding: $spacing-xxs;
   justify-content: space-between;
-
-  &:not(:last-child) {
-    border-bottom: $light-border;
-  }
+  border-bottom: $light-border;
 
   .control .button {
     color: $grey-light;
diff --git a/ui/lib/core/addon/templates/components/search-select.hbs b/ui/lib/core/addon/templates/components/search-select.hbs
index 089446706..bc876e1f8 100644
--- a/ui/lib/core/addon/templates/components/search-select.hbs
+++ b/ui/lib/core/addon/templates/components/search-select.hbs
@@ -66,7 +66,7 @@
         <div class="control">
           <button type="button" class="button is-ghost" data-test-selected-list-button="delete"
             {{action "discardSelection" selected}}>
-            <Icon @glyph="trash" />
+            <Icon @glyph="trash" class="has-text-grey" />
           </button>
         </div>
       </li>