diff --git a/packages/frontend/src/components/shared/UserSelect/UserSelect.theme.ts b/packages/frontend/src/components/shared/UserSelect/UserSelect.theme.ts index 7e17355e..bca34a1c 100644 --- a/packages/frontend/src/components/shared/UserSelect/UserSelect.theme.ts +++ b/packages/frontend/src/components/shared/UserSelect/UserSelect.theme.ts @@ -25,8 +25,6 @@ export const userSelectTheme = tv({ 'mt-12', 'z-20', 'absolute', - 'px-1', - 'py-1', 'flex-col', 'gap-0.5', 'min-w-full', @@ -39,6 +37,7 @@ export const userSelectTheme = tv({ 'border-gray-200', 'rounded-xl', ], + popoverItemWrapper: ['flex', 'flex-col', 'px-2', 'py-2', 'gap-1'], }, variants: { isOpen: { diff --git a/packages/frontend/src/components/shared/UserSelect/UserSelect.tsx b/packages/frontend/src/components/shared/UserSelect/UserSelect.tsx index 07866570..f68214cd 100644 --- a/packages/frontend/src/components/shared/UserSelect/UserSelect.tsx +++ b/packages/frontend/src/components/shared/UserSelect/UserSelect.tsx @@ -10,6 +10,7 @@ import { BuildingIcon, ChevronUpDown, SettingsSlidersIcon, + SquigglyLine, } from 'components/shared/CustomIcon'; import { cn } from 'utils/classnames'; import { UserSelectTheme, userSelectTheme } from './UserSelect.theme'; @@ -143,48 +144,66 @@ export const UserSelect = ({ options, value }: UserSelectProps) => { {...getMenuProps({ ref: popoverRef }, { suppressRefError: true })} id="popover" ref={popoverRef} - className={cn( - theme.popover({ isOpen }), - { - // Position the popover based on the dropdown position - 'top-[27.5%]': dropdownPosition === 'bottom', - 'bottom-[92.5%]': dropdownPosition === 'top', - }, - 'px-2 py-2', - )} + className={cn(theme.popover({ isOpen }), { + // Position the popover based on the dropdown position + 'top-[27.5%]': dropdownPosition === 'bottom', + 'bottom-[92.5%]': dropdownPosition === 'top', + })} > - {/* Settings header */} -
-
- -

Other teams

-
-
-

Manage

- +
+ {/* Settings header */} +
+
+ +

Other teams

+
+
+

Manage

+ +
+ + {/* Organization */} + {isOpen && options.length !== 0 ? ( + options.map((item, index) => ( + + )) + ) : ( + + )}
- {/* Organization */} - {isOpen && options.length !== 0 ? ( - options.map((item, index) => ( - - )) - ) : ( - - )} + {/* Squiggly line */} + {/* //TODO:remove if personal dont exist */} +
+ +
- {/* //TODO:Squiggly line */} - {/* //TODO:Personal */} +
+ {/* //TODO:Personal (replace options with Personal Options) */} + {isOpen && options.length !== 0 ? ( + options.map((item, index) => ( + + )) + ) : ( + + )} +
);