Some more style fixes for Select and Feedback

ToyotaResearchInstitute · May 15, 2024 · b9a9375 · b9a9375
1 parent 41e9d12
commit b9a9375
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 2 deletions.
diff --git a/lib/components/select.module.css 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
@@ -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
@@ -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