Merge pull request #586 from UTDNebula/fix/autocomplete-background

make mui autocomplete same color

Author: akevinge

src/components/AutoCompleteMajor.tsx

@@ -56,14 +56,15 @@ const AutoCompleteMajor: FC<AutoCompleteMajorProps & React.ComponentPropsWithout
           onInputChange(query);
         }}
         options={options}
+        sx={{ border: '1px solid var(--color-neutral-500)', borderRadius: '0.375rem' }}
         fullWidth
         PopperComponent={CustomPopper}
         renderInput={(params) => {
           return (
             <TextField
               {...params}
               variant="standard"
-              className="h-11 appearance-none rounded border border-[#6366F1] bg-[#F5F5F5] pl-4 text-[14px] font-semibold text-black outline-none"
+              className="h-11 appearance-none pl-4 text-[14px] font-semibold text-black outline-none"
               inputProps={{
                 style: { fontSize: 14, marginTop: 8 },
                 ...params.inputProps,

src/components/template/CustomPlan.tsx

@@ -281,7 +281,7 @@ export default function CustomPlan({ onDismiss }: { onDismiss: () => void }) {
       <div className="relative mb-4">
         <AutoCompleteMajor
           data-testid="major-autocomplete"
-          className="w-[500px] rounded border outline-none"
+          className="w-[500px] outline-none"
           key={0}
           onValueChange={(value) => setMajor(value)}
           onInputChange={(query: string) => updateQuery(query)}

src/components/template/TemplateView.tsx

@@ -121,7 +121,7 @@ export default function TemplateView({ onDismiss }: { onDismiss: () => void }) {
       <p className="text-sm font-semibold">Search degree template</p>
       <div className="relative mb-4">
         <AutoCompleteMajor
-          className="w-[500px] rounded border outline-none"
+          className="w-[500px] outline-none"
           key={0}
           onValueChange={(value) => setMajor(value)}
           onInputChange={(query: string) => updateQuery(query)}