From d82e3253131f3958fdca3a83279197411ce11a32 Mon Sep 17 00:00:00 2001
From: cedric karungu <ckarungu921@gmail.com>
Date: Sun, 10 Dec 2023 21:02:39 +0200
Subject: [PATCH 1/3] feat: make issue input responsive in home page

---
 apps/web/lib/layout/navbar.tsx        | 13 ++--
 apps/web/pages/index.tsx              | 95 +++++++++++++--------------
 apps/web/pages/profile/[memberId].tsx |  2 +-
 3 files changed, 53 insertions(+), 57 deletions(-)

diff --git a/apps/web/lib/layout/navbar.tsx b/apps/web/lib/layout/navbar.tsx
index 9486ee366..cc9f8f749 100644
--- a/apps/web/lib/layout/navbar.tsx
+++ b/apps/web/lib/layout/navbar.tsx
@@ -81,14 +81,15 @@ export function Navbar({
 									)}
 									{showTimer && <MinTimerFrame />}
 
-									{!publicTeam && <Collaborate />}
+									<div className="hidden md:flex items-center">
+										{!publicTeam && <Collaborate />}
 
-									{isTeamMember && isTeamDropdownAllowed ? (
-										<TeamsDropDown publicTeam={publicTeam || false} />
-									) : null}
-
-									<KeyboardShortcuts />
+										{isTeamMember && isTeamDropdownAllowed ? (
+											<TeamsDropDown publicTeam={publicTeam || false} />
+										) : null}
 
+										<KeyboardShortcuts />
+									</div>
 									{!publicTeam && <UserNavAvatar />}
 								</div>
 							)}
diff --git a/apps/web/pages/index.tsx b/apps/web/pages/index.tsx
index 61d017808..04aeff146 100644
--- a/apps/web/pages/index.tsx
+++ b/apps/web/pages/index.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { useOrganizationTeams } from '@app/hooks';
 import { clsxm } from '@app/utils';
 import NoTeam from '@components/pages/main/no-team';
@@ -47,58 +48,46 @@ function MainPage() {
 
 					{/* <Collaborative /> */}
 					<div className="flex items-end gap-1">
-						<Tooltip
-							label={'Cards'}
-							placement="top-start"
-						>
-						<button
-							className={clsxm(
-								'rounded-md px-3 py-1 text-sm font-medium',
-								view === IssuesView.CARDS
-									? 'bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100'
-									: 'text-gray-700 dark:text-gray-300'
-							)}
-							onClick={() => setView(IssuesView.CARDS)}
-						>
-							<QueueListIcon className="w-5 h-5 inline" />
-						</button>
+						<Tooltip label={'Cards'} placement="top-start">
+							<button
+								className={clsxm(
+									'rounded-md px-3 py-1 text-sm font-medium',
+									view === IssuesView.CARDS
+										? 'bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100'
+										: 'text-gray-700 dark:text-gray-300'
+								)}
+								onClick={() => setView(IssuesView.CARDS)}
+							>
+								<QueueListIcon className="w-5 h-5 inline" />
+							</button>
 						</Tooltip>
-						<Tooltip
-							label={'Table'}
-							placement="top-start"
-						>
-						<button
-							className={clsxm(
-								'rounded-md px-3 py-1 text-sm font-medium',
-								view === IssuesView.TABLE
-									? 'bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100'
-									: 'text-gray-700 dark:text-gray-300'
-							)}
-							onClick={() => setView(IssuesView.TABLE)}
-						>
-							<TableCellsIcon className="w-5 h-5 inline" />
-						</button>
+						<Tooltip label={'Table'} placement="top-start">
+							<button
+								className={clsxm(
+									'rounded-md px-3 py-1 text-sm font-medium',
+									view === IssuesView.TABLE
+										? 'bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100'
+										: 'text-gray-700 dark:text-gray-300'
+								)}
+								onClick={() => setView(IssuesView.TABLE)}
+							>
+								<TableCellsIcon className="w-5 h-5 inline" />
+							</button>
 						</Tooltip>
-						<Tooltip
-							label={'Blocks'}
-							placement="top-start"
-						>
-						<button
-							className={clsxm(
-								'rounded-md px-3 py-1 text-sm font-medium',
-								view === IssuesView.BLOCKS
-									? 'bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100'
-									: 'text-gray-700 dark:text-gray-300'
-							)}
-							onClick={() => setView(IssuesView.BLOCKS)}
-						>
-							<Squares2X2Icon className="w-5 h-5 inline" />
-						</button>
+						<Tooltip label={'Blocks'} placement="top-start">
+							<button
+								className={clsxm(
+									'rounded-md px-3 py-1 text-sm font-medium',
+									view === IssuesView.BLOCKS
+										? 'bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100'
+										: 'text-gray-700 dark:text-gray-300'
+								)}
+								onClick={() => setView(IssuesView.BLOCKS)}
+							>
+								<Squares2X2Icon className="w-5 h-5 inline" />
+							</button>
 						</Tooltip>
-						<Tooltip
-							label={'Kanban'}
-							placement="top-start"
-						>
+						<Tooltip label={'Kanban'} placement="top-start">
 							<button
 								className={clsxm(
 									'rounded-md px-3 py-1 text-sm font-medium',
@@ -147,6 +136,7 @@ function MainPage() {
 }
 
 function TaskTimerSection({ isTrackingEnabled }: { isTrackingEnabled: boolean }) {
+	const [showInput, setShowInput] = React.useState(false);
 	return (
 		<Card
 			shadow="bigger"
@@ -156,8 +146,13 @@ function TaskTimerSection({ isTrackingEnabled }: { isTrackingEnabled: boolean })
 			)}
 		>
 			{/* Task inputs */}
-			<AuthUserTaskInput className="w-4/5 md:w-1/2 2xl:w-full " />
+			{/* {showInput && ( */}
+			<AuthUserTaskInput className={clsxm('w-4/5 md:w-1/2 2xl:w-full ', !showInput && '!hidden md:!flex')} />
+			{/* )} */}
 
+			<button className="border rounded py-1 px-2 md:hidden" onClick={() => setShowInput((p) => !p)}>
+				{showInput ? 'hide the issue input' : 'show the issue input'}
+			</button>
 			{/* Timer  */}
 			{isTrackingEnabled ? <Timer /> : null}
 		</Card>
diff --git a/apps/web/pages/profile/[memberId].tsx b/apps/web/pages/profile/[memberId].tsx
index 6c17bbbf2..b2370646a 100644
--- a/apps/web/pages/profile/[memberId].tsx
+++ b/apps/web/pages/profile/[memberId].tsx
@@ -123,7 +123,7 @@ function UserProfileDetail({ member }: { member?: OT_Member }) {
 			</div>
 
 			<div className="flex flex-col gap-3.5">
-				<Text.Heading as="h3" className="text-4xl">
+				<Text.Heading as="h3" className="text-xl md:text-4xl">
 					{user?.firstName} {user?.lastName}
 				</Text.Heading>
 				<Text className="text-lg text-gray-500">{user?.email}</Text>

From 53b8f9617f1d3d805ff76c3e283127fdfaf6ed1f Mon Sep 17 00:00:00 2001
From: cedric karungu <ckarungu921@gmail.com>
Date: Tue, 12 Dec 2023 16:36:41 +0200
Subject: [PATCH 2/3] feat: navbar responsive

---
 apps/web/lib/features/task/task-filters.tsx | 22 +++++++++++++--------
 apps/web/lib/features/user-nav-menu.tsx     | 21 +++++++++++++++++++-
 apps/web/lib/layout/navbar.tsx              |  2 +-
 apps/web/pages/index.tsx                    |  2 +-
 apps/web/pages/profile/[memberId].tsx       |  4 ++--
 5 files changed, 38 insertions(+), 13 deletions(-)

diff --git a/apps/web/lib/features/task/task-filters.tsx b/apps/web/lib/features/task/task-filters.tsx
index fdaff4a8d..77a580cea 100644
--- a/apps/web/lib/features/task/task-filters.tsx
+++ b/apps/web/lib/features/task/task-filters.tsx
@@ -184,8 +184,13 @@ export type I_TaskFilter = ReturnType<typeof useTaskFilter>;
 type Props = { hook: I_TaskFilter; profile: I_UserProfilePage };
 export function TaskFilter({ className, hook, profile }: IClassName & Props) {
 	return (
-		<div className="relative z-10">
-			<div className={clsxm('flex justify-between xs:flex-row flex-col items-center', className)}>
+		<div className="relative w-full z-10">
+			<div
+				className={clsxm(
+					'flex justify-between flex-col xs:flex-row  items-center w-full flex-wrap-reverse md:flex-nowrap',
+					className
+				)}
+			>
 				<TabsNav hook={hook} />
 				<InputFilters profile={profile} hook={hook} />
 			</div>
@@ -200,7 +205,7 @@ export function TaskFilter({ className, hook, profile }: IClassName & Props) {
 				leave="transition duration-75 ease-out"
 				leaveFrom="transform scale-100 opacity-100"
 				leaveTo="transform scale-95 opacity-0 ease-out"
-				// className="pb-3"
+				className="w-full"
 				ref={hook.outclickFilterCard.targetEl}
 			>
 				{/* {hook.filterType !== undefined && <Divider className="mt-4" />} */}
@@ -291,22 +296,23 @@ function InputFilters({ hook, profile }: Props) {
 /* It's a function that returns a nav element. */
 function TabsNav({ hook }: { hook: I_TaskFilter }) {
 	return (
-		<nav className="flex mt-4 space-x-1 md:space-x-4 md:mt-0">
+		<nav className="flex justify-center md:justify-start items-center mt-4 space-x-1 w-full md:space-x-4 md:mt-0">
 			{hook.tabs.map((item, i) => {
 				const active = item.tab === hook.tab;
+
 				return (
-					<Tooltip key={i} placement="top-start" label={item.description}>
+					<Tooltip key={i} placement="top-start" label={item.description} className="">
 						<button
 							onClick={() => hook.setTab(item.tab)}
 							className={clsxm(
-								'md:text-lg text-xs text-gray-500 font-normal outline-none py-[1.5rem] px-[2.5rem] relative mt-4 md:mt-0 min-w-[10.625rem]',
+								`md:text-lg text-xs text-gray-500 font-normal outline-none md:py-[1.5rem] px-[2.5rem] relative mt-4 md:mt-0 w-full md:min-w-[10.625rem] flex flex-col md:flex-row gap-1 items-center `,
 								active && ['text-primary dark:text-white']
 							)}
 						>
 							{item.name}{' '}
 							<span
 								className={clsxm(
-									'bg-gray-lighter p-1 px-2 text-xs rounded-md',
+									'bg-gray-lighter p-1 px-2 text-xs rounded-md m-1',
 									active && ['bg-primary dark:bg-[#47484D] text-white']
 								)}
 							>
@@ -428,7 +434,7 @@ export function TaskNameFilter({
 	};
 
 	return (
-		<div className={clsxm('flex flex-row w-1/2 gap-2 mt-3 ml-auto', fullWidth && '!w-full')}>
+		<div className={clsxm('flex flex-row w-full md:w-1/2 gap-2 mt-3 ml-auto', fullWidth && '!w-full')}>
 			<InputField
 				value={tempValue}
 				autoFocus={true}
diff --git a/apps/web/lib/features/user-nav-menu.tsx b/apps/web/lib/features/user-nav-menu.tsx
index 707ba8293..4b0dc9f97 100644
--- a/apps/web/lib/features/user-nav-menu.tsx
+++ b/apps/web/lib/features/user-nav-menu.tsx
@@ -26,6 +26,10 @@ import stc from 'string-to-color';
 import gauzyDark from '../../public/assets/themeImages/gauzyDark.png';
 import gauzyLight from '../../public/assets/themeImages/gauzyLight.png';
 import { TimerStatus, getTimerStatusValue } from './timer/timer-status';
+import Collaborate from '@components/shared/collaborate';
+import { TeamsDropDown } from './team/teams-dropdown';
+import { KeyboardShortcuts } from 'lib/components/keyboard-shortcuts';
+import { useRouter } from 'next/router';
 
 export function UserNavAvatar() {
 	const { user } = useAuthenticateUser();
@@ -125,13 +129,20 @@ function UserNavMenu() {
 	const imageUrl = user?.image?.thumbUrl || user?.image?.fullUrl || user?.imageUrl;
 	const name = user?.name || user?.firstName || user?.lastName || user?.username;
 	const { timerStatus } = useTimer();
-	const { activeTeam } = useOrganizationTeams();
+	const { activeTeam, isTeamMember } = useOrganizationTeams();
 	const publicTeam = useRecoilValue(publicState);
 	const members = activeTeam?.members || [];
 	const currentMember = members.find((m) => {
 		return m.employee.userId === user?.id;
 	});
 
+	const router = useRouter();
+
+	const isTeamDropdownAllowed = useMemo(() => {
+		const notAllowedList = ['/task/[id]', '/profile/[memberId]'];
+		return !notAllowedList.includes(router.route);
+	}, [router.route]);
+
 	const timerStatusValue: ITimerStatusEnum = useMemo(() => {
 		return getTimerStatusValue(timerStatus, currentMember, publicTeam);
 	}, [timerStatus, currentMember, publicTeam]);
@@ -258,6 +269,14 @@ function UserNavMenu() {
 					</li>
 				</ul>
 				<Divider className="mt-4 mb-3" />
+				<ul className="md:hidden flex flex-col gap-2 justify-start items-center">
+					{!publicTeam && <Collaborate />}
+
+					{isTeamMember && isTeamDropdownAllowed ? <TeamsDropDown publicTeam={publicTeam || false} /> : null}
+
+					<KeyboardShortcuts />
+				</ul>
+				<Divider className="mt-4 mb-3" />
 				<ul className="w-full">
 					{/* Logout menu */}
 					<li>
diff --git a/apps/web/lib/layout/navbar.tsx b/apps/web/lib/layout/navbar.tsx
index cc9f8f749..9a28a2326 100644
--- a/apps/web/lib/layout/navbar.tsx
+++ b/apps/web/lib/layout/navbar.tsx
@@ -81,7 +81,7 @@ export function Navbar({
 									)}
 									{showTimer && <MinTimerFrame />}
 
-									<div className="hidden md:flex items-center">
+									<div className="hidden md:flex gap-4 items-center">
 										{!publicTeam && <Collaborate />}
 
 										{isTeamMember && isTeamDropdownAllowed ? (
diff --git a/apps/web/pages/index.tsx b/apps/web/pages/index.tsx
index 04aeff146..e8c39c9f7 100644
--- a/apps/web/pages/index.tsx
+++ b/apps/web/pages/index.tsx
@@ -148,7 +148,7 @@ function TaskTimerSection({ isTrackingEnabled }: { isTrackingEnabled: boolean })
 			{/* Task inputs */}
 			{/* {showInput && ( */}
 			<AuthUserTaskInput className={clsxm('w-4/5 md:w-1/2 2xl:w-full ', !showInput && '!hidden md:!flex')} />
-			{/* )} */}
+			{/* )}  */}
 
 			<button className="border rounded py-1 px-2 md:hidden" onClick={() => setShowInput((p) => !p)}>
 				{showInput ? 'hide the issue input' : 'show the issue input'}
diff --git a/apps/web/pages/profile/[memberId].tsx b/apps/web/pages/profile/[memberId].tsx
index b2370646a..5f050b3e1 100644
--- a/apps/web/pages/profile/[memberId].tsx
+++ b/apps/web/pages/profile/[memberId].tsx
@@ -86,7 +86,7 @@ function UserProfileDetail({ member }: { member?: OT_Member }) {
 		<div className="flex items-center mb-4 space-x-4 md:mb-0">
 			<div
 				className={clsx(
-					`w-[100px] h-[100px]`, // removed the size variable from width and height, as passing variables is not supported by tailwind
+					` w-[100px] h-[100px]`, // removed the size variable from width and height, as passing variables is not supported by tailwind
 					'flex justify-center items-center relative',
 					'rounded-full text-white',
 					'shadow-md text-7xl dark:text-6xl font-thin font-PlusJakartaSans ',
@@ -123,7 +123,7 @@ function UserProfileDetail({ member }: { member?: OT_Member }) {
 			</div>
 
 			<div className="flex flex-col gap-3.5">
-				<Text.Heading as="h3" className="text-xl md:text-4xl">
+				<Text.Heading as="h3" className="text-2xl md:text-4xl">
 					{user?.firstName} {user?.lastName}
 				</Text.Heading>
 				<Text className="text-lg text-gray-500">{user?.email}</Text>

From ac4154d48c341361dc1820a6509231e8bf9de9e8 Mon Sep 17 00:00:00 2001
From: cedric karungu <ckarungu921@gmail.com>
Date: Tue, 12 Dec 2023 21:41:53 +0200
Subject: [PATCH 3/3] feat: add responsive to profile timer sections

---
 apps/web/lib/features/task/task-filters.tsx | 8 ++++----
 apps/web/lib/features/timer/timer.tsx       | 2 +-
 apps/web/lib/features/user-nav-menu.tsx     | 2 +-
 apps/web/pages/profile/[memberId].tsx       | 2 +-
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/web/lib/features/task/task-filters.tsx b/apps/web/lib/features/task/task-filters.tsx
index 77a580cea..638d031e5 100644
--- a/apps/web/lib/features/task/task-filters.tsx
+++ b/apps/web/lib/features/task/task-filters.tsx
@@ -348,28 +348,28 @@ function TaskStatusFilter({ hook }: { hook: I_TaskFilter }) {
 				<TaskStatusDropdown
 					key={key + 1}
 					onValueChange={(_, values) => hook.onChangeStatusFilter('status', values || [])}
-					className="lg:min-w-[170px] mt-4 lg:mt-0"
+					className="lg:min-w-[170px] mt-4 mb-2 lg:mt-0"
 					multiple={true}
 				/>
 
 				<TaskPropertiesDropdown
 					key={key + 2}
 					onValueChange={(_, values) => hook.onChangeStatusFilter('priority', values || [])}
-					className="lg:min-w-[170px] mt-4 lg:mt-0"
+					className="lg:min-w-[170px] mt-4 mb-2 lg:mt-0"
 					multiple={true}
 				/>
 
 				<TaskSizesDropdown
 					key={key + 3}
 					onValueChange={(_, values) => hook.onChangeStatusFilter('size', values || [])}
-					className="lg:min-w-[170px] mt-4 lg:mt-0"
+					className="lg:min-w-[170px] mt-4 mb-2 lg:mt-0"
 					multiple={true}
 				/>
 
 				<TaskLabelsDropdown
 					key={key + 4}
 					onValueChange={(_, values) => hook.onChangeStatusFilter('label', values || [])}
-					className="lg:min-w-[170px] mt-4 lg:mt-0"
+					className="lg:min-w-[170px] mt-4 mb-2 lg:mt-0"
 					multiple={true}
 				/>
 
diff --git a/apps/web/lib/features/timer/timer.tsx b/apps/web/lib/features/timer/timer.tsx
index 8f5d37bfb..076914bb0 100644
--- a/apps/web/lib/features/timer/timer.tsx
+++ b/apps/web/lib/features/timer/timer.tsx
@@ -58,7 +58,7 @@ export function Timer({ className }: IClassName) {
 	useHotkeys(HostKeys.START_STOP_TIMER, handleStartSTOPTimer);
 
 	return (
-		<div className={clsxm('flex flex-row mb-12 2xl:mb-0', className)}>
+		<div className={clsxm('flex flex-row mb-6 md:mb-12 2xl:mb-0', className)}>
 			<div className="flex items-start justify-between border-r-[2px] dark:border-r-[#28292F] pr-5">
 				<div className="w-[11rem]">
 					<Text.Heading
diff --git a/apps/web/lib/features/user-nav-menu.tsx b/apps/web/lib/features/user-nav-menu.tsx
index 4b0dc9f97..e70286735 100644
--- a/apps/web/lib/features/user-nav-menu.tsx
+++ b/apps/web/lib/features/user-nav-menu.tsx
@@ -275,8 +275,8 @@ function UserNavMenu() {
 					{isTeamMember && isTeamDropdownAllowed ? <TeamsDropDown publicTeam={publicTeam || false} /> : null}
 
 					<KeyboardShortcuts />
+					<Divider className="mt-1 mb-3 w-full" />
 				</ul>
-				<Divider className="mt-4 mb-3" />
 				<ul className="w-full">
 					{/* Logout menu */}
 					<li>
diff --git a/apps/web/pages/profile/[memberId].tsx b/apps/web/pages/profile/[memberId].tsx
index 5f050b3e1..1a27ff937 100644
--- a/apps/web/pages/profile/[memberId].tsx
+++ b/apps/web/pages/profile/[memberId].tsx
@@ -43,7 +43,7 @@ const Profile = () => {
 					</div>
 
 					{/* User Profile Detail */}
-					<div className="flex flex-col items-center justify-between py-10 xs:flex-row">
+					<div className="flex flex-col items-center justify-between py-5 md:py-10 md:flex-row">
 						<UserProfileDetail member={profile.member} />
 
 						{profileIsAuthUser && isTrackingEnabled && (