Wired access controls for environemnts to frontend

frontend/src/components/v2/Select/Select.tsx

@@ -23,26 +23,26 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
           ref={ref}
           className={twMerge(
             `inline-flex items-center justify-between data-[placeholder]:text-gray-500
-            px-4 py-2.5 font-inter text-sm text-white rounded-md bg-mineshaft-800`,
+            px-3 py-2 font-inter text-sm text-bunker-200 font-normal rounded-md bg-mineshaft-800 outline-none`,
             className
           )}
         >
           <SelectPrimitive.Value placeholder={placeholder} />
-          <SelectPrimitive.Icon className="ml-3">
+          {!props.disabled && <SelectPrimitive.Icon className="ml-3">
             <FontAwesomeIcon icon={faChevronDown} size="sm" />
-          </SelectPrimitive.Icon>
+          </SelectPrimitive.Icon>}
         </SelectPrimitive.Trigger>
         <SelectPrimitive.Portal>
           <SelectPrimitive.Content
-            position="popper"
-            sideOffset={5}
-            className="overflow-hidden text-white rounded-md shadow-md font-inter bg-mineshaft-800"
-            style={{ width: 'var(--radix-select-trigger-width)' }}
+            // position="popper"
+            sideOffset={4}
+            className="overflow-hidden text-bunker-100 rounded-md shadow-md font-inter bg-mineshaft-800"
+            style={{ width: 'var(--radix-select-trigger-width) + 6' }}
           >
             <SelectPrimitive.ScrollUpButton>
               <FontAwesomeIcon icon={faChevronUp} size="sm" />
             </SelectPrimitive.ScrollUpButton>
-            <SelectPrimitive.Viewport className="p-2">
+            <SelectPrimitive.Viewport className="p-1.5">
               {isLoading ? (
                 <div className="flex items-center justify-center">
                   <Spinner size="xs" />
@@ -75,16 +75,16 @@ export const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(
       <SelectPrimitive.Item
         {...props}
         className={twMerge(
-          `text-sm rounded-sm transition-all hover:text-primary 
-          hover:bg-mineshaft-700 flex items-center pl-10 pr-4 py-2 cursor-pointer 
+          `text-sm rounded-sm transition-all hover:bg-mineshaft-500
+          flex items-center pl-10 pr-4 py-2 cursor-pointer rounded-md
           select-none outline-none relative`,
-          isSelected && 'text-primary',
+          isSelected && 'bg-primary',
           isDisabled && 'text-gray-600 hover:bg-transparent cursor-not-allowed hover:text-gray-600',
           className
         )}
         ref={forwardedRef}
       >
-        <SelectPrimitive.ItemIndicator className="absolute left-2">
+        <SelectPrimitive.ItemIndicator className="absolute left-3.5">
           <FontAwesomeIcon icon={faCheck} size="sm" />
         </SelectPrimitive.ItemIndicator>
         <SelectPrimitive.ItemText className="">{children}</SelectPrimitive.ItemText>