From e7031af406c581ccaeea1a98f68966c9156e9383 Mon Sep 17 00:00:00 2001
From: john-rock <johnmrock.jr@gmail.com>
Date: Mon, 2 Oct 2023 11:15:00 -0400
Subject: [PATCH] keep working on styles

---
 .../quickstartGuideList/styles.module.css     |  2 +-
 .../selectDropdown/styles.module.css          | 30 +++++++++++++++----
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/website/src/components/quickstartGuideList/styles.module.css b/website/src/components/quickstartGuideList/styles.module.css
index 360c3dfe9d7..5168a4b1da4 100644
--- a/website/src/components/quickstartGuideList/styles.module.css
+++ b/website/src/components/quickstartGuideList/styles.module.css
@@ -26,7 +26,7 @@
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     grid-gap: 1rem;
-    padding-top: 2rem;
+    padding-top: 4rem;
 }
 
 .quickstartFilterContainer > div:first-child {
diff --git a/website/src/components/selectDropdown/styles.module.css b/website/src/components/selectDropdown/styles.module.css
index fd3430ad753..ec32ec393de 100644
--- a/website/src/components/selectDropdown/styles.module.css
+++ b/website/src/components/selectDropdown/styles.module.css
@@ -5,9 +5,9 @@
     border: 2px solid var(--navy-200-c-6-ccd-4, #C6CCD4);
 }
 
-.selectContainer .select__menu {
-    background: purple;
-} 
+.selectContainer:focus-within, .selectContainer:active {
+    border: 2px solid var(--navy-200-c-6-ccd-4, red);
+}
 
 .selectContainer [class$="-control"]  {
     padding: 0rem 1rem
@@ -29,11 +29,31 @@
     padding: .5rem;
 }
 
-.selectContainer [class$="-option"]:hover {
+.selectContainer [class$="-option"]:hover, .selectContainer [class$="-option"]:active, .selectContainer [class$="-option"]:focus-within {
     background: #262a38;
     color: #fff;
 }
 
+.selectContainer [class$="-multiValue"] {
+    margin-right: .275rem;
+    background: #e6e6e6;
+    border-radius: 0.3125rem;
+    padding: 0 0 0 .5rem;
+}
+
 [data-theme='dark'] .selectContainer [class$="-option"]:hover {
-    background: #1F2937;
+    
+}
+
+.selectContainer [class$="-MultiValueRemove"] {
+    padding: .5rem;
+    border-radius: 0 0.3125rem 0.3125rem 0;
+    padding-left: 4px;
+    padding-right: 4px;
+    margin-left: .2rem;
+}
+
+.selectContainer [class$="-MultiValueRemove"]:hover {
+    background-color: rgb(255, 189, 173);
+    color: rgb(222, 53, 11);
 }