From b9a937561e6065f78ec4134be1f41d8879e379bf Mon Sep 17 00:00:00 2001
From: mike puzon <michael.puzon@tri.global>
Date: Wed, 15 May 2024 14:48:14 -0700
Subject: [PATCH] Some more style fixes for Select and Feedback

---
 lib/components/select.module.css | 6 ++++++
 lib/components/select.tsx        | 9 ++++++++-
 lib/layout/FeedbackButton.tsx    | 2 +-
 3 files changed, 15 insertions(+), 2 deletions(-)
 create mode 100644 lib/components/select.module.css

diff --git a/lib/components/select.module.css b/lib/components/select.module.css
new file mode 100644
index 0000000..6db5dbd
--- /dev/null
+++ b/lib/components/select.module.css
@@ -0,0 +1,6 @@
+.selectContainer > span {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  width: 80%;
+}
diff --git a/lib/components/select.tsx b/lib/components/select.tsx
index a70a1fc..085f32e 100644
--- a/lib/components/select.tsx
+++ b/lib/components/select.tsx
@@ -1,4 +1,5 @@
 import { Option, Select as MTSelect } from '@material-tailwind/react';
+import styles from './select.module.css';
 
 export interface OptionType {
   label: string;
@@ -25,10 +26,16 @@ export const Select = ({ options, id, value, onChange }: SelectProps) => {
       data-testid={`select-dropdown-${id}`}
       value={value}
       onChange={handleChange}
-      className="text-black"
+      className={`${styles['selectContainer']} text-gray-900 font-normal `}
+      containerProps={{
+        className: 'border-gray-400',
+      }}
       labelProps={{
         className: 'before:mr-0 after:ml-0',
       }}
+      menuProps={{
+        className: 'font-medium text-gray-900 border-none shadow-md',
+      }}
     >
       {options.map((option, index) => {
         return (
diff --git a/lib/layout/FeedbackButton.tsx b/lib/layout/FeedbackButton.tsx
index 965c3c4..9eb71ce 100644
--- a/lib/layout/FeedbackButton.tsx
+++ b/lib/layout/FeedbackButton.tsx
@@ -13,7 +13,7 @@ const FeedbackButton = () => {
           variant="filled"
           size="lg"
           placeholder="Feedback"
-          className="rounded-b-sm rounded-t-none px-4 py-3 !font-medium text-base normal-case"
+          className="!rounded-b-sm !rounded-t-none px-4 py-3 !font-medium text-base normal-case"
           onClick={window.showCollectorDialog}
         >
           Feedback