Merge pull request #2275 from ever-co/feat/fullWidth

Feat: Full Width Switch Mode
ever-co · Mar 6, 2024 · d8ef203 · d8ef203
2 parents a781bff + 7e73980
commit d8ef203
Show file tree

Hide file tree

Showing 13 changed files with 129 additions and 42 deletions.
diff --git a/apps/web/app/[locale]/page-component.tsx b/apps/web/app/[locale]/page-component.tsx
@@ -30,7 +30,7 @@ import ChatwootWidget from 'lib/features/integrations/chatwoot';
 import 'react-loading-skeleton/dist/skeleton.css';
 import '../../styles/globals.css';
 
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState } from 'recoil';
 import { fullWidthState } from '@app/stores/fullWidth';
 import { ChevronDown } from 'lucide-react';
 import HeaderTabs from '@components/pages/main/header-tabs';
@@ -41,7 +41,7 @@ import { PeoplesIcon } from 'assets/svg';
 function MainPage() {
 	const t = useTranslations();
 	const { isTeamMember, isTrackingEnabled, activeTeam } = useOrganizationTeams();
-	const fullWidth = useRecoilValue(fullWidthState);
+	const [fullWidth, setFullWidth] = useRecoilState(fullWidthState);
 	const [view, setView] = useRecoilState(headerTabs);
 	const path = usePathname();
 	const breadcrumb = [
@@ -56,6 +56,12 @@ function MainPage() {
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [path, setView]);
+
+	React.useEffect(() => {
+		window && window?.localStorage.getItem('conf-fullWidth-mode');
+		setFullWidth(JSON.parse(window?.localStorage.getItem('conf-fullWidth-mode') || 'true'));
+	}, [fullWidth, setFullWidth]);
+
 	if (!online) {
 		return <Offline />;
 	}

diff --git a/apps/web/app/[locale]/settings/layout.tsx b/apps/web/app/[locale]/settings/layout.tsx
@@ -10,6 +10,7 @@ import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 import React from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
+import { clsxm } from '@app/utils';
 
 const SettingsLayout = ({ children }: { children: JSX.Element }) => {
 	const t = useTranslations();
@@ -28,25 +29,28 @@ const SettingsLayout = ({ children }: { children: JSX.Element }) => {
 				className="items-start pb-1 overflow-hidden w-full"
 				childrenClassName="h-[calc(100vh-_300px)] overflow-hidden w-full"
 			>
-				<div>
-					<div className="pt-12 w-full pb-4 bg-white dark:bg-dark--theme">
-						<Container fullWidth={fullWidth}>
-							<div className="flex flex-row items-center justify-start gap-8">
-								<Link href="/">
-									<ArrowLeftIcon className="w-6 h-6" />
-								</Link>
+				<div className="pt-12 w-full pb-4 bg-white dark:bg-dark--theme">
+					<Container
+						fullWidth={fullWidth}
+						className={clsxm('w-full flex flex-row items-center justify-start gap-8')}
+					>
+						{/* <div className=""> */}
+						<Link href="/">
+							<ArrowLeftIcon className="w-6 h-6" />
+						</Link>
 
-								<Breadcrumb paths={breadcrumb} className="text-sm" />
-							</div>
-						</Container>
-					</div>
+						<Breadcrumb paths={breadcrumb} className="text-sm" />
+						{/* </div> */}
+					</Container>
+				</div>
+				<Container fullWidth={fullWidth} className={clsxm('!p-0')}>
 					<div className="flex">
-						<div className="w-96 ml-8">
+						<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>
 					</div>
-				</div>
+				</Container>
 			</MainLayout>
 		);
 	}

diff --git a/apps/web/lib/components/container.tsx b/apps/web/lib/components/container.tsx
@@ -1,7 +1,23 @@
 import { IClassName } from '@app/interfaces';
 import { clsxm } from '@app/utils';
+import { Transition } from '@headlessui/react';
 import { PropsWithChildren } from 'react';
 
 export function Container({ children, className, fullWidth }: PropsWithChildren<IClassName>) {
-	return <div className={clsxm(!fullWidth && 'x-container', fullWidth && 'mx-8', className)}>{children}</div>;
+	return (
+		<Transition
+			show={true}
+			enter="transition-opacity duration-75"
+			enterFrom="opacity-0"
+			enterTo="opacity-100"
+			leave="transition-opacity duration-150"
+			leaveFrom="opacity-100"
+			leaveTo="opacity-0"
+			className="w-full p-0 m-0"
+		>
+			<div className={clsxm('transition-all', !fullWidth && 'x-container', fullWidth && 'mx-8', className)}>
+				{children}
+			</div>
+		</Transition>
+	);
 }
diff --git a/apps/web/lib/components/toggler.tsx b/apps/web/lib/components/toggler.tsx
@@ -12,11 +12,12 @@ import {
 	TimerStopIcon
 } from 'assets/svg';
 import { Text } from './typography';
-import { Cross2Icon, LightningBoltIcon, UpdateIcon } from '@radix-ui/react-icons';
+import { AllSidesIcon, Cross2Icon, LightningBoltIcon, UpdateIcon } from '@radix-ui/react-icons';
 import { useRecoilState } from 'recoil';
 import { dataSyncModeState, isDataSyncState } from '@app/stores/data-sync';
 import { useModal } from '@app/hooks';
 import { RealTimePopup } from 'lib/settings/sync.zone';
+import { fullWidthState } from '@app/stores/fullWidth';
 
 type Props = {
 	className?: string;
@@ -207,3 +208,40 @@ export function CommonToggle({
 		</div>
 	);
 }
+
+export function FullWidthToggler({ className }: IClassName) {
+	const [fullWidth, setFullWidth] = useRecoilState(fullWidthState);
+
+	React.useEffect(() => {
+		window && window.localStorage.setItem('conf-fullWidth-mode', JSON.stringify(fullWidth));
+	}, [fullWidth]);
+
+	return (
+		<div
+			className={clsxm(
+				'flex flex-row items-start bg-light--theme-dark dark:bg-[#1D222A] py-1 px-2 rounded-[60px] gap-[10px]',
+				className
+			)}
+		>
+			<button
+				onClick={() => setFullWidth(true)}
+				className={clsxm(
+					'flex flex-row justify-center items-center p-2 w-8 h-8 rounded-[60px] ml-[-2px]',
+					fullWidth && 'bg-white text-primary shadow-md dark:bg-transparent dark:bg-[#3B4454]'
+				)}
+			>
+				<AllSidesIcon className="dark:text-white" />
+			</button>
+
+			<button
+				onClick={() => setFullWidth(false)}
+				className={clsxm(
+					'flex flex-row justify-center items-center p-2 w-8 h-8 rounded-[60px] mr-[-2px]',
+					!fullWidth && 'bg-red-400 shadow-md dark:bg-transparent dark:bg-red-400'
+				)}
+			>
+				<Cross2Icon className={clsxm(!fullWidth && 'text-white')} />
+			</button>
+		</div>
+	);
+}
diff --git a/apps/web/lib/features/task/task-card.tsx b/apps/web/lib/features/task/task-card.tsx
@@ -118,7 +118,7 @@ export function TaskCard(props: Props) {
 					<SixSquareGridIcon className="w-6 h-6 text-[#CCCCCC] dark:text-[#4F5662]" />
 				</div>
 
-				<div className="flex-1 max-w-[40%] flex flex-row justify-between">
+				<div className="flex-1 min-w-[35%] max-w-[40%] flex flex-row justify-between">
 					{/* Task information */}
 					<TaskInfo
 						task={task}

diff --git a/apps/web/lib/features/team/user-team-card/index.tsx b/apps/web/lib/features/team/user-team-card/index.tsx
@@ -5,7 +5,7 @@ import { useCollaborative, useTMCardTaskEdit, useTaskStatistics, useTeamMemberCa
 import { IClassName, IOrganizationTeamList, OT_Member } from '@app/interfaces';
 import { timerSecondsState } from '@app/stores';
 import { clsxm } from '@app/utils';
-import { Card, HorizontalSeparator, InputField, Text, VerticalSeparator } from 'lib/components';
+import { Card, InputField, Text, VerticalSeparator } from 'lib/components';
 import { TaskTimes, TodayWorkedTime } from 'lib/features';
 import { useTranslations } from 'next-intl';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
@@ -114,7 +114,7 @@ export function UserTeamCard({
 			<Card
 				shadow="bigger"
 				className={clsxm(
-					'sm:block hidden dark:bg-[#1E2025] min-h-[7rem]',
+					'sm:block hidden dark:bg-[#1E2025] min-h-[7rem] !py-4',
 					active
 						? ['border-primary-light border-[0.1875rem]']
 						: ['dark:border border border-transparent dark:border-[#FFFFFF14]'],
@@ -132,7 +132,7 @@ export function UserTeamCard({
 					<VerticalSeparator />
 
 					{/* Task information */}
-					<div className="flex justify-between items-center flex-1 max-w-[40%]">
+					<div className="flex justify-between items-center flex-1 min-w-[40%]">
 						<TaskInfo
 							edition={taskEdition}
 							memberInfo={memberInfo}
@@ -172,7 +172,7 @@ export function UserTeamCard({
 					<VerticalSeparator />
 
 					{/* TodayWorkedTime */}
-					<div className="flex justify-center items-center cursor-pointer w-1/5 gap-4 lg:px-3 2xl:w-52 3xl:w-64">
+					<div className="flex justify-center items-center cursor-pointer w-1/5 gap-4 lg:px-3 2xl:w-52 max-w-[13rem]">
 						<TodayWorkedTime isAuthUser={memberInfo.isAuthUser} className="" memberInfo={memberInfo} />
 						<p
 							onClick={() => showActivityFilter('DATE', memberInfo.member ?? null)}
@@ -224,9 +224,9 @@ export function UserTeamCard({
 				{/* Card menu */}
 				<div className="absolute right-2">{menu}</div>
 			</Card>
-			{currentExit && (
+			{/* {currentExit && (
 				<HorizontalSeparator className="mt-2 !border-primary-light dark:!border-primary-light !border-t-2" />
-			)}
+			)} */}
 		</div>
 	);
 }
diff --git a/apps/web/lib/features/team/user-team-card/task-skeleton.tsx b/apps/web/lib/features/team/user-team-card/task-skeleton.tsx
@@ -45,15 +45,15 @@ export function UserTeamCardHeader() {
 	return (
 		<div className="my-6 dark:text-[#7B8089] font-normal">
 			<div className="relative m-0 flex items-center">
-				<div className="flex w-1/4 justify-center items-center space-x-2 lg:space-x-4 2xl:w-[20.625rem]">
+				<div className="flex 2xl:w-[20.625rem] w-1/4 justify-center items-center space-x-2 lg:space-x-4">
 					<p>{t('common.NAME')}</p>
 				</div>
 
-				<div className="flex-grow self-stretch flex justify-end items-center">{t('common.TASK')}</div>
+				<div className="flex-grow self-stretch flex flex-1 justify-center items-center">{t('common.TASK')}</div>
 
-				<div className="flex flex-1 w-[100%-_20px]"></div>
+				{/* <div className="flex w-[100%-_20px]"></div> */}
 
-				<div className="3xl:w-[12rem] flex w-1/5 flex-col justify-center gap-y-[1.125rem] 2xl:w-48">
+				<div className="w-1/5 gap-4 lg:px-3 2xl:w-52 max-w-[13rem] flex flex-col justify-center gap-y-[1.125rem]">
 					<div className="lg:text-center text-left w-full mt-1.5">
 						<Tooltip label={t('task.taskTableHead.TOTAL_WORKED_TODAY_HEADER_TOOLTIP')}>
 							<div className="text-center">
@@ -64,8 +64,8 @@ export function UserTeamCardHeader() {
 						</Tooltip>
 					</div>
 				</div>
-				<div className="3xl:w-80 w-1/5 lg:px-4 2xl:w-52 lg:text-center text-right">{t('common.ESTIMATE')}</div>
-				<div className="3xl:w-64 flex w-1/5 cursor-pointer items-center justify-center mt-1.5 gap-4 lg:px-3 2xl:w-52">
+				<div className="w-1/5 lg:px-3 2xl:w-52 3xl:w-64 lg:text-center text-right">{t('common.ESTIMATE')}</div>
+				<div className="w-1/5 gap-4 lg:px-3 2xl:w-52 max-w-[13rem] flex cursor-pointer items-center justify-center mt-1.5 ">
 					<Tooltip label={t('task.taskTableHead.WORKED_ON_TASK_HEADER_TOOLTIP')}>
 						{t('task.taskTableHead.TOTAL_WORK.TITLE')}
 						<br />

diff --git a/apps/web/lib/features/user-nav-menu.tsx b/apps/web/lib/features/user-nav-menu.tsx
@@ -7,7 +7,7 @@ import { publicState } from '@app/stores';
 import { clsxm, isValidUrl } from '@app/utils';
 import { Popover, Transition } from '@headlessui/react';
 import { ChevronDownIcon } from '@heroicons/react/20/solid';
-import { Avatar, Card, Divider, Text, ThemeToggler, Tooltip } from 'lib/components';
+import { Avatar, Card, Divider, FullWidthToggler, Text, ThemeToggler, Tooltip } from 'lib/components';
 
 import { DevicesIcon, LogoutRoundIcon, MoonLightOutlineIcon as MoonIcon, PeoplesIcon } from 'assets/svg';
 import { BriefCaseIcon, SettingOutlineIcon } from 'assets/svg';
@@ -25,6 +25,7 @@ import { TeamsDropDown } from './team/teams-dropdown';
 import { KeyboardShortcuts } from 'lib/components/keyboard-shortcuts';
 import { usePathname } from 'next/navigation';
 import { useTranslations } from 'next-intl';
+import { AllSidesIcon } from '@radix-ui/react-icons';
 
 export function UserNavAvatar() {
 	const { user } = useAuthenticateUser();
@@ -126,6 +127,7 @@ function UserNavMenu() {
 	const { timerStatus } = useTimer();
 	const { activeTeam, isTeamMember } = useOrganizationTeams();
 	const publicTeam = useRecoilValue(publicState);
+
 	const members = activeTeam?.members || [];
 	const currentMember = members.find((m) => {
 		return m.employee.userId === user?.id;
@@ -239,6 +241,14 @@ function UserNavMenu() {
 						</Link>
 					</li>
 
+					{/* fullWidth menu */}
+					<li className="flex items-center justify-between space-x-3 font-normal">
+						<div className="flex items-center flex-1 space-x-3">
+							<AllSidesIcon className="w-5 h-5" /> <span>{'Full width'}</span>
+						</div>
+						<FullWidthToggler className="scale-75" />
+					</li>
+
 					{/* Darkmode menu */}
 					<li className="flex items-center justify-between mb-3 space-x-3 font-normal">
 						<div className="flex items-center flex-1 space-x-3">

diff --git a/apps/web/lib/features/user-profile-tasks.tsx b/apps/web/lib/features/user-profile-tasks.tsx
@@ -85,7 +85,7 @@ export function UserProfileTask({ profile, tabFiltered }: Props) {
 				</div>
 			)}
 
-			<ul className="flex flex-col gap-6">
+			<ul className="flex flex-col gap-4">
 				{dataToDisplay.map((task, index) => {
 					return (
 						<li key={task.id}>

diff --git a/apps/web/lib/layout/main-layout.tsx b/apps/web/lib/layout/main-layout.tsx
@@ -30,7 +30,7 @@ export function MainLayout({
 }: Props) {
 	const fullWidth = useRecoilValue(fullWidthState);
 	return (
-		<div className='w-full'>
+		<div className="w-full">
 			<style jsx global>
 				{`
 					:root {
@@ -55,9 +55,12 @@ export function MainLayout({
 			>
 				<div className={clsxm('lg:flex-1 lg:w-full', childrenClassName)}>{children}</div>
 
-				<Container fullWidth={fullWidth} className={clsxm('w-full !mx-0 px-8', footerClassName)}>
+				<Container
+					fullWidth={fullWidth}
+					className={clsxm('w-full px-8', fullWidth && '!mx-0', footerClassName)}
+				>
 					<Divider />
-					<Footer className="justify-between px-0 w-full" />
+					<Footer className="justify-between px-0 w-full mx-auto" />
 				</Container>
 			</div>
 			<Toaster />

diff --git a/apps/web/lib/settings/left-side-setting-menu.tsx b/apps/web/lib/settings/left-side-setting-menu.tsx
@@ -66,7 +66,9 @@ export const LeftSideSettingMenu = ({ className }: { className?: string }) => {
 
 	return (
 		<div className={clsxm(' ', className)}>
-			<Text className="text-4xl font-normal my-10 text-center sm:text-left">{t('common.SETTINGS')}</Text>
+			<Text className="text-4xl font-normal my-10 min-w-[16rem] text-center sm:text-left">
+				{t('common.SETTINGS')}
+			</Text>
 			<div className="flex sm:block h-[calc(100vh-_382px)] overflow-y-auto">
 				<SidebarAccordian
 					title={

diff --git a/apps/web/next.config.js b/apps/web/next.config.js
@@ -86,6 +86,14 @@ const nextConfig = {
 			'gauzystage.s3.wasabisys.com'
 		]
 	},
+	async rewrites() {
+		return [
+			{
+				source: '/fonts/:path*',
+				destination: '/assets/fonts/:path*'
+			}
+		];
+	},
 	...sentryConfig
 };
 

diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css
@@ -217,27 +217,27 @@ html.dark {
 
 @font-face {
 	font-family: 'Plus-Jakarta-Sans-VariableFont_wght';
-	src: url('../public/assets/fonts/PlusJakartaSans-VariableFont_wght.ttf');
+	src: url('/fonts/PlusJakartaSans-VariableFont_wght.ttf');
 }
 @font-face {
 	font-family: 'Plus-Jakarta-Sans-Regular';
-	src: url('../public/assets/fonts/PlusJakartaSans-Regular.ttf');
+	src: url('/fonts/PlusJakartaSans-Regular.ttf');
 }
 @font-face {
 	font-family: 'Plus-Jakarta-Sans-Bold';
-	src: url('../public/assets/fonts/PlusJakartaSans-Bold.ttf');
+	src: url('/fonts/PlusJakartaSans-Bold.ttf');
 }
 @font-face {
 	font-family: 'Plus-Jakarta-Sans-Light';
-	src: url('../public/assets/fonts/PlusJakartaSans-Light.ttf');
+	src: url('/fonts/PlusJakartaSans-Light.ttf');
 }
 @font-face {
 	font-family: 'Plus-Jakarta-Sans-Medium';
-	src: url('../public/assets/fonts/PlusJakartaSans-Medium.ttf');
+	src: url('/fonts/PlusJakartaSans-Medium.ttf');
 }
 @font-face {
 	font-family: 'Plus-Jakarta-Sans-SemiBold';
-	src: url('../public/assets/fonts/PlusJakartaSans-SemiBold.ttf');
+	src: url('/fonts/PlusJakartaSans-SemiBold.ttf');
 }
 
 .search-class {