[Setting]: fixed the settings page issues (#2376)

* [Setting]: fixed the settings page issues * [Setting]: fixed the settings page issues * [Setting]: fixed the settings page issues
ever-co · Apr 19, 2024 · 318d40e · 318d40e
1 parent 14bcd67
commit 318d40e
Show file tree

Hide file tree

Showing 10 changed files with 56 additions and 65 deletions.
diff --git a/apps/web/app/[locale]/settings/layout.tsx b/apps/web/app/[locale]/settings/layout.tsx
@@ -46,10 +46,8 @@ const SettingsLayout = ({ children }: { children: JSX.Element }) => {
 				</div>
 				<Container fullWidth={fullWidth} className={clsxm('!p-0 !mr-0')}>
 					<div className="flex">
-						<div className="h-[calc(100vh-_186px)]">
-							<LeftSideSettingMenu />
-						</div>
-						<div className="h-[calc(100vh-_186px)] mt-3 p-10 overflow-y-auto  w-full">{children}</div>
+						<LeftSideSettingMenu />
+						<div className="h-[calc(100vh-_291px)] mt-3 p-10 overflow-y-auto  w-full">{children}</div>
 					</div>
 				</Container>
 			</MainLayout>

diff --git a/apps/web/app/hooks/useLeftSettingData.ts b/apps/web/app/hooks/useLeftSettingData.ts
@@ -80,12 +80,12 @@ export const useLeftSettingData = () => {
 			href: '#labels',
 			managerOnly: false
 		},
-		{
-			title: t('pages.settingsTeam.RELATED_ISSUE_TYPE'),
-			color: '#7E7991',
-			href: '#related-issue-types',
-			managerOnly: true
-		},
+		// {
+		// 	title: t('pages.settingsTeam.RELATED_ISSUE_TYPE'),
+		// 	color: '#7E7991',
+		// 	href: '#related-issue-types',
+		// 	managerOnly: true
+		// },
 		// {
 		// 	title: t('pages.settingsTeam.NOTIFICATION_HEADING'),
 		// 	color: '#7E7991',

diff --git a/apps/web/components/ui/scroll-bar.tsx b/apps/web/components/ui/scroll-bar.tsx
@@ -4,7 +4,6 @@ import * as React from 'react';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import { clsxm } from '@app/utils';
 
-
 const ScrollArea = React.forwardRef<
 	React.ElementRef<typeof ScrollAreaPrimitive.Root>,
 	React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
@@ -34,7 +33,7 @@ const ScrollBar = React.forwardRef<
 		)}
 		{...props}
 	>
-		<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full dark:bg-white bg-[#6b7280]" />
+		<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full dark:bg-[#686868] bg-[#c1c1c1]" />
 	</ScrollAreaPrimitive.ScrollAreaScrollbar>
 ));
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;

diff --git a/apps/web/lib/components/color-picker.tsx b/apps/web/lib/components/color-picker.tsx
@@ -1,12 +1,11 @@
 'use client';
 
 import { useCallbackRef } from '@app/hooks';
-import { clsxm } from '@app/utils';
-import { Popover, Transition } from '@headlessui/react';
+import { Transition, Popover } from '@headlessui/react';
 import { useState, useEffect, Fragment, useRef, useCallback } from 'react';
 import { HexColorPicker } from 'react-colorful';
-import { Dropdown } from './dropdown';
 import { EditPenUnderlineIcon, TrashIcon } from 'assets/svg';
+import { PopoverTrigger, PopoverContent, Popover as PopoverDropdown } from '@components/ui/popover';
 
 export const ColorPicker = ({
 	defaultColor,
@@ -125,34 +124,24 @@ export const ColorPicker = ({
 						leaveTo="opacity-0 translate-y-1"
 						show={!disabled}
 					>
-						<Popover.Panel
-							ref={panelRef}
-							className="absolute left-1/2 z-10 mt-0 w-[354px] max-w-sm -translate-x-1/2 transform  sm:px-0 lg:max-w-3xl shandow"
-						>
+						<Popover.Panel ref={panelRef} className="h-10">
 							<HexColorPicker color={color || undefined} onChange={setColor} />
 						</Popover.Panel>
 					</Transition>
 				</>
 			)}
 		</Popover>
 	) : (
-		<Dropdown
-			className={`min-w-[150px] max-w-sm z-50`}
-			buttonClassName={clsxm(`py-0 font-medium h-[54px] w-[150px] dark:bg-dark--theme-light`)}
-			value={{
-				key: color || '',
-				// eslint-disable-next-line react/no-unstable-nested-components
-				Label: () => (
-					<div className="flex items-center space-x-2">
-						<span className="w-5 h-5 rounded-full block" style={{ backgroundColor: color || '#000' }} />
-						<span className="font-normal">{color || 'Color'}</span>
-					</div>
-				)
-			}}
-			items={[]}
-			closeOnChildrenClick={false}
-		>
-			<HexColorPicker color={color || undefined} onChange={setColor} />
-		</Dropdown>
+		<PopoverDropdown>
+			<PopoverTrigger asChild>
+				<div className="flex items-center space-x-2 dark:bg-dark--theme-light input-border rounded-xl cursor-pointer h-14 px-2">
+					<span className="w-5 h-5 rounded-full block" style={{ backgroundColor: color || '#000' }} />
+					<span className="font-normal">{color || 'Color'}</span>
+				</div>
+			</PopoverTrigger>
+			<PopoverContent align="end" side="bottom" className="w-fit dark:bg-dark--theme-light input-border">
+				<HexColorPicker className="relative h-10" color={color || undefined} onChange={setColor} />
+			</PopoverContent>
+		</PopoverDropdown>
 	);
 };
diff --git a/apps/web/lib/components/dropdown.tsx b/apps/web/lib/components/dropdown.tsx
@@ -6,6 +6,7 @@ import React, { Dispatch, PropsWithChildren, SetStateAction } from 'react';
 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;
@@ -113,24 +114,26 @@ export function Dropdown<T extends DropdownItem>({
 									/>
 								</div>
 							)}
-							<section className={'max-h-[80vh] overflow-y-auto'}>
-								{items.map((Item, index) => (
-									<Listbox.Option
-										key={Item.key ? Item.key : index}
-										value={Item}
-										disabled={!!Item.disabled}
-									>
-										{({ active, selected }) => {
-											return Item.Label ? (
-												<Item.Label active={active} selected={selected} />
-											) : (
-												<></>
-											);
-										}}
-									</Listbox.Option>
-								))}
-							</section>
-
+							<ScrollArea>
+								<section className={'h-96 min-w-[100px] '}>
+									{items.map((Item, index) => (
+										<Listbox.Option
+											key={Item.key ? Item.key : index}
+											value={Item}
+											disabled={!!Item.disabled}
+										>
+											{({ active, selected }) => {
+												return Item.Label ? (
+													<Item.Label active={active} selected={selected} />
+												) : (
+													<></>
+												);
+											}}
+										</Listbox.Option>
+									))}
+								</section>
+								{/* <ScrollBar className="mr-20" /> */}
+							</ScrollArea>
 							{/* Additional content */}
 							{closeOnChildrenClick && <Listbox.Button as="div">{children}</Listbox.Button>}
 							{!closeOnChildrenClick && children}

diff --git a/apps/web/lib/components/pagination.tsx b/apps/web/lib/components/pagination.tsx
@@ -17,7 +17,7 @@ export function Paginate({ total, itemsPerPage = 10, onPageChange, itemOffset, e
 
 	return (
 		<div
-			className="flex flex-col md:flex-row gap-2 items-center justify-between pt-4"
+			className="flex flex-col md:flex-row gap-2 items-center justify-between pt-4 relative"
 			aria-label="Table navigation"
 		>
 			<ReactPaginate
@@ -68,7 +68,7 @@ export function Paginate({ total, itemsPerPage = 10, onPageChange, itemOffset, e
 				breakClassName={'pl-5 pr-5 pt-1 pb-2'}
 			/>
 
-			<div className="flex items-center gap-x-5">
+			<div className="flex items-center relative gap-x-5">
 				<PaginationDropdown setValue={setItemsPerPage} />
 				<span className="text-sm font-normal text-gray-500 dark:text-gray-400">
 					{`Showing ${itemOffset + 1} to ${endOffset} of ${total} entries`}

diff --git a/apps/web/lib/settings/list-card.tsx b/apps/web/lib/settings/list-card.tsx
@@ -53,9 +53,10 @@ export const StatusesListCard = ({
 				>
 					<Text.Label
 						className={clsxm(
-							'flex-none flex-grow-0 font-normal',
+							'flex-none flex-grow-0 !w-40 max-w-[190px] font-normal',
 							'capitalize overflow-hidden text-ellipsis whitespace-nowrap w-full',
-							bgColor === '' && ['dark:text-[#cdd1d8]']
+							bgColor === '' && ['dark:text-[#cdd1d8]'],
+							statusIcon && 'max-w-[135px]'
 						)}
 						style={{ color: bgColor === '' ? undefined : textColor }}
 					>

diff --git a/apps/web/lib/settings/member-setting.tsx b/apps/web/lib/settings/member-setting.tsx
@@ -46,7 +46,7 @@ export const MemberSetting = () => {
 			</div>
 
 			{members.length > 0 ? (
-				<div className="mb-8 mt-7 overflow-y-auto">
+				<div className="mb-8 mt-7 ">
 					<MemberTable members={members} />
 				</div>
 			) : (

diff --git a/apps/web/lib/settings/personal-setting-form.tsx b/apps/web/lib/settings/personal-setting-form.tsx
@@ -308,7 +308,7 @@ export const PersonalSettingForm = () => {
 									</Text>
 									<div className="flex items-center lg:items-start w-full">
 										<ThemeToggler />
-										<Text className="flex items-center ml-5 text-sm font-normal text-gray-400">
+										<Text className="flex items-center ml-5 mt-2.5 text-sm font-normal text-gray-400">
 											{theme === 'light' ? 'Light' : 'Dark'} Mode
 										</Text>
 									</div>
@@ -320,7 +320,7 @@ export const PersonalSettingForm = () => {
 									<Text className="font-normal min-w-[25%] text-gray-400 text-lg justify-center">
 										{t('common.LANGUAGE')}
 									</Text>
-									<div className="flex flex-col lg:flex-row w-full">
+									<div className="flex flex-col relative lg:flex-row w-full">
 										<LanguageDropDown
 											currentLanguage={currentLanguage}
 											onChangeLanguage={(t: string) => {
@@ -336,7 +336,7 @@ export const PersonalSettingForm = () => {
 									<Text className="font-normal min-w-[25%] text-gray-400 text-lg justify-center">
 										{t('common.TIME_ZONE')}
 									</Text>
-									<div className="flex flex-col lg:flex-row gap-2 w-full">
+									<div className="flex flex-col relative lg:flex-row gap-2 w-full">
 										<TimezoneDropDown
 											currentTimezone={currentTimezone}
 											onChangeTimezone={(t: string) => {

diff --git a/apps/web/lib/settings/timezone-dropdown.tsx b/apps/web/lib/settings/timezone-dropdown.tsx
@@ -72,12 +72,13 @@ export const TimezoneDropDown = ({
 		<Dropdown
 			searchBar={true}
 			setSearchText={handleSearchChange}
-			className="md:w-[469px]"
+			className="md:w-[469px] h-40"
 			buttonClassName={clsxm(
 				'py-0 font-medium h-[54px]',
 				items.length === 0 && ['py-2'],
-				'bg-light--theme-light dark:bg-dark--theme-light dark:text-white font-normal'
+				'bg-light--theme-light dark:bg-dark--theme-light dark:text-white font-normal '
 			)}
+			cardClassName='h-40'
 			value={timezoneItem as any}
 			onChange={(e: any) => onChange(e)}
 			items={items as any}