Merge pull request #2461 from ever-co/develop

Release
ever-co · Apr 29, 2024 · 7a802a2 · 7a802a2
2 parents 6110c1a + f746ef1
commit 7a802a2
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 13 deletions.
diff --git a/apps/web/app/[locale]/settings/personal/page.tsx b/apps/web/app/[locale]/settings/personal/page.tsx
@@ -19,7 +19,7 @@ const Personal = () => {
 			</Link>
 			<Accordian
 				title={t('pages.settingsPersonal.HEADING_TITLE')}
-				className="w-full max-w-[96vw] overflow-y-hidden p-4 mt-8 dark:bg-dark--theme"
+				className="w-full max-w-[96vw] p-4 mt-8 dark:bg-dark--theme"
 				id="general"
 			>
 				{/* <Text className="text-base font-normal text-center text-gray-400 sm:text-left">

diff --git a/apps/web/app/[locale]/settings/team/page.tsx b/apps/web/app/[locale]/settings/team/page.tsx
@@ -34,7 +34,7 @@ const Team = () => {
 					{/* General Settings */}
 					<Accordian
 						title={t('pages.settingsTeam.HEADING_TITLE')}
-						className="w-full max-w-[96vw] overflow-y-hidden p-4 mt-8 dark:bg-dark--theme"
+						className="w-full max-w-[96vw] p-4 mt-8 dark:bg-dark--theme"
 						id="general-settings"
 					>
 						<div className="flex flex-col">
@@ -47,7 +47,7 @@ const Team = () => {
 					{isTeamManager ? (
 						<Accordian
 							title={t('pages.settingsTeam.INVITATION_HEADING_TITLE')}
-							className="w-full max-w-[96vw] overflow-y-hidden p-4 mt-8 dark:bg-dark--theme"
+							className="w-full max-w-[96vw] p-4 mt-8 dark:bg-dark--theme"
 							id="invitations"
 						>
 							<InvitationSetting />
@@ -58,7 +58,7 @@ const Team = () => {
 					{isTeamManager ? (
 						<Accordian
 							title={t('pages.settingsTeam.MEMBER_HEADING_TITLE')}
-							className="w-full max-w-[96vw] overflow-y-hidden p-4 mt-8 dark:bg-dark--theme"
+							className="w-full max-w-[96vw] p-4 mt-8 dark:bg-dark--theme"
 							id="member"
 						>
 							<MemberSetting />
@@ -68,7 +68,7 @@ const Team = () => {
 					{isTeamManager && (
 						<Accordian
 							title={t('pages.settingsTeam.INTEGRATIONS')}
-							className="w-full max-w-[96vw] overflow-y-hidden p-4 mt-8 dark:bg-dark--theme"
+							className="w-full max-w-[96vw] p-4 mt-8 dark:bg-dark--theme"
 							id="integrations"
 						>
 							<IntegrationSetting />
@@ -78,7 +78,7 @@ const Team = () => {
 					{/* Issues Settings */}
 					<Accordian
 						title={t('pages.settingsTeam.ISSUES_HEADING_TITLE')}
-						className="w-full max-w-[96vw] overflow-y-hidden p-4 mt-8 dark:bg-dark--theme"
+						className="w-full max-w-[96vw] p-4 mt-8 dark:bg-dark--theme"
 						id="issues-settings"
 					>
 						<IssuesSettings />
@@ -96,7 +96,7 @@ const Team = () => {
 					{/* Danger Zone */}
 					<Accordian
 						title={t('pages.settings.DANDER_ZONE')}
-						className="w-full max-w-[96vw] overflow-y-hidden p-4 mt-8 dark:bg-dark--theme"
+						className="w-full max-w-[96vw] p-4 mt-8 dark:bg-dark--theme"
 						isDanger={true}
 						id="danger-zones"
 					>

diff --git a/apps/web/lib/components/dropdown.tsx b/apps/web/lib/components/dropdown.tsx
@@ -7,7 +7,6 @@ import { Card } from './card';
 import { SpinnerLoader } from './loader';
 import { useTranslations } from 'next-intl';
 import { ScrollArea } from '@components/ui/scroll-bar';
-
 export type DropdownItem<D = Record<string | number | symbol, any>> = {
 	key: React.Key;
 	Label: (props: { active?: boolean; selected?: boolean }) => JSX.Element;
@@ -49,16 +48,31 @@ export function Dropdown<T extends DropdownItem>({
 	setSearchText
 }: Props<T>) {
 	const t = useTranslations();
+	const [open, setOpen] = React.useState(false);
 	return (
 		<div className={clsxm('rounded-xl', className)}>
-			<Listbox value={Value} onChange={onChange} disabled={publicTeam}>
+			{open && (
+				<div
+					onClick={() => setOpen(false)}
+					className="h-screen w-screen absolute bg-transparent top-0 left-0"
+				></div>
+			)}
+			<Listbox
+				value={Value}
+				onChange={(e: T) => {
+					onChange && onChange(e);
+					setOpen(false);
+				}}
+				disabled={publicTeam}
+			>
 				<Listbox.Button
 					className={clsxm(
 						'input-border',
 						'w-full flex justify-between rounded-xl px-3 py-2 text-sm items-center',
 						'font-normal outline-none',
 						buttonClassName
 					)}
+					onClick={() => setOpen(!open)}
 					style={buttonStyle}
 				>
 					<div title={Value?.itemTitle} className="w-full overflow-hidden text-ellipsis whitespace-nowrap">
@@ -72,7 +86,8 @@ export function Dropdown<T extends DropdownItem>({
 					) : !publicTeam ? (
 						<ChevronDownIcon
 							className={clsxm(
-								'ml-2 h-5 w-5 dark:text-white transition duration-150 ease-in-out group-hover:text-opacity-80'
+								'ml-2 h-5 w-5 dark:text-white transition duration-150 ease-in-out group-hover:text-opacity-80',
+								open && 'transform rotate-180'
 							)}
 							aria-hidden="true"
 						/>
@@ -89,6 +104,7 @@ export function Dropdown<T extends DropdownItem>({
 					leaveFrom="transform scale-100 opacity-100"
 					leaveTo="transform scale-95 opacity-0"
 					className={clsxm('absolute z-40')}
+					show={open}
 				>
 					<Listbox.Options
 						className={clsxm(

diff --git a/apps/web/lib/settings/table-action-popover.tsx b/apps/web/lib/settings/table-action-popover.tsx
@@ -33,7 +33,7 @@ export const TableActionPopover = ({ member, handleEdit }: Props) => {
 	// 	setIsOpen(!isOpen);
 	// };
 	return (
-		<Popover className="w-full no-underline border-none">
+		<Popover className="w-full relative no-underline border-none">
 			{() => (
 				<>
 					<Transition
@@ -45,7 +45,7 @@ export const TableActionPopover = ({ member, handleEdit }: Props) => {
 						leaveFrom="opacity-100 translate-y-0"
 						leaveTo="opacity-0 translate-y-1"
 					>
-						<Popover.Panel className="z-10 absolute right-16 bg-white rounded-2xl w-[7.5rem] flex flex-col pl-5 pr-5 pt-2 pb-2 shadow-xlcard dark:bg-[#1B1D22] dark:border dark:border-[#FFFFFF33]">
+						<Popover.Panel className="z-10 absolute right-10 bg-white rounded-2xl w-[7.5rem] flex flex-col pl-5 pr-5 pt-2 pb-2 shadow-xlcard dark:bg-[#1B1D22] dark:border dark:border-[#FFFFFF33]">
 							{/* TODO Dynamic */}
 							{/* Edit */}
 							<div
@@ -93,7 +93,7 @@ export const TableActionPopover = ({ member, handleEdit }: Props) => {
 						</Popover.Panel>
 					</Transition>
 					<Popover.Button className="w-full mt-2 outline-none">
-						<ThreeCircleOutlineHorizontalIcon className="w-6 text-[#292D32] dark:text-white" strokeWidth="2.5" />
+						<ThreeCircleOutlineHorizontalIcon className="w-6 text-[#292D32] relative dark:text-white" strokeWidth="2.5" />
 					</Popover.Button>
 					<ConfirmationModal
 						open={isOpen}