Merge pull request #2035 from ever-co/fix/ui-fixes-kanban

Fix/UI fixes kanban
ever-co · Dec 29, 2023 · c11e087 · c11e087
2 parents 7b5fb59 + fceddf1
commit c11e087
Show file tree

Hide file tree

Showing 9 changed files with 630 additions and 626 deletions.
diff --git a/apps/web/app/[locale]/kanban/page.tsx b/apps/web/app/[locale]/kanban/page.tsx
@@ -20,13 +20,17 @@ const Kanban = () => {
 	const { data } = useKanban();
 	const { activeTeam } = useOrganizationTeams();
 	const t = useTranslations();
-	const params = useParams<{locale: string}>();
-	
+	const params = useParams<{ locale: string }>();
+
 	const currentLocale = params ? params.locale : null;
 
 	const [activeTab, setActiveTab] = useState(KanbanTabs.TODAY);
 
-	const breadcrumbPath = [{title: JSON.parse(t('pages.home.BREADCRUMB')), href: '/'},  {title: activeTeam?.name || '', href:'/'}, {title:'Kanban Board', href: `/${currentLocale}/kanban`}];
+	const breadcrumbPath = [
+		{ title: JSON.parse(t('pages.home.BREADCRUMB')), href: '/' },
+		{ title: activeTeam?.name || '', href: '/' },
+		{ title: 'Kanban Board', href: `/${currentLocale}/kanban` }
+	];
 
 	const imageRadius = 20;
 	const numberOfImagesDisplayed = 4;
@@ -39,9 +43,7 @@ const Kanban = () => {
 				<div className={'relative bg-white dark:bg-dark--theme pt-20 -mt-8 px-[32px] mx-[0px] w-full'}>
 					<Breadcrumb paths={breadcrumbPath} className="text-sm" />
 					<div className="flex flex-row items-center justify-between mt-[24px]">
-						<div>
-
-						</div>
+						<div></div>
 						<div className="flex flex-row items-center gap-[12px]">
 							<p>08:00 ( UTC +04:30 )</p>
 							<VerticalLine />
@@ -89,9 +91,9 @@ const Kanban = () => {
 								onClick={() => {
 									setActiveTab(KanbanTabs.TODAY);
 								}}
-								className={`cursor-pointer pt-2.5 px-5 pb-[30px] text-base font-bold ${
+								className={`cursor-pointer pt-2.5 px-5 pb-[30px] text-base font-semibold ${
 									activeTab === KanbanTabs.TODAY
-										? 'border-b-[#3826A6] text-[#3826A6]'
+										? 'border-b-[#3826A6] text-[#3826A6] dark:text-white dark:border-b-white'
 										: 'border-b-white dark:border-b-[#191A20] dark:text-white text-[#282048]'
 								}`}
 								style={{
@@ -105,9 +107,9 @@ const Kanban = () => {
 								onClick={() => {
 									setActiveTab(KanbanTabs.YESTERDAY);
 								}}
-								className={`cursor-pointer pt-2.5 px-5 pb-[30px] text-base font-bold ${
+								className={`cursor-pointer pt-2.5 px-5 pb-[30px] text-base font-semibold ${
 									activeTab === KanbanTabs.YESTERDAY
-										? 'border-b-[#3826A6] text-[#3826A6]'
+										? 'border-b-[#3826A6] text-[#3826A6] dark:text-white dark:border-b-white'
 										: 'border-b-white dark:border-b-[#191A20] dark:text-white text-[#282048]'
 								}`}
 								style={{
@@ -121,9 +123,9 @@ const Kanban = () => {
 								onClick={() => {
 									setActiveTab(KanbanTabs.TOMORROW);
 								}}
-								className={`cursor-pointer pt-2.5 px-5 pb-[30px] text-base font-bold ${
+								className={`cursor-pointer pt-2.5 px-5 pb-[30px] text-base font-semibold ${
 									activeTab === KanbanTabs.TOMORROW
-										? 'border-b-[#3826A6] text-[#3826A6]'
+										? 'border-b-[#3826A6] text-[#3826A6] dark:text-white dark:border-b-white'
 										: 'border-b-white dark:border-b-[#191A20] dark:text-white text-[#282048]'
 								}`}
 								style={{

diff --git a/apps/web/components/ui/svgs/left-arrow-tailess.tsx b/apps/web/components/ui/svgs/left-arrow-tailess.tsx
@@ -1,7 +1,16 @@
 export default function LeftArrowTailessIcon() {
-    return (
-        <>
-            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="none" stroke="white" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m14 7l-5 5m0 0l5 5"/></svg>
-        </>
-    )
-}
+	return (
+		<>
+			<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
+				<path
+					fill="none"
+					stroke="black"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+					strokeWidth="2"
+					d="m14 7l-5 5m0 0l5 5"
+				/>
+			</svg>
+		</>
+	);
+}
diff --git a/apps/web/lib/app/authenticator.tsx b/apps/web/lib/app/authenticator.tsx
@@ -52,36 +52,37 @@ export function withAuthentication(Component: NextPage<any, any>, params: Params
 			}
 		}, [queryCall, setUser, user]);
 
+		if (!user || loading) {
+			return <></>;
+		}
+		if (showPageSkeleton) {
+			return <TeamPageSkeleton />;
+		}
+
 		return (
-			<>
-				{(!user || loading) && showPageSkeleton ? (
-					<TeamPageSkeleton />
-				) : (
-					<>
-						<Component {...props} />
-						{user && !isTeamMember && showCreateTeamModal && (
-							<CreateTeamModal
-								open={showCreateTeamModal}
-								closeModal={() => {
-									closeModalIfNewTeamCreated();
-								}}
-								joinTeamModal={() => {
-									setShowCreateTeamModal(false);
-									setShowJoinTeamModal(true);
-								}}
-							/>
-						)}
-						{user && !isTeamMember && showJoinTeamModal && (
-							<JoinTeamModal
-								open={showJoinTeamModal}
-								closeModal={() => {
-									closeModalIfNewTeamCreated();
-								}}
-							/>
-						)}
-					</>
+			<div>
+				<Component {...props} />
+				{!isTeamMember && showCreateTeamModal && (
+					<CreateTeamModal
+						open={showCreateTeamModal}
+						closeModal={() => {
+							closeModalIfNewTeamCreated();
+						}}
+						joinTeamModal={() => {
+							setShowCreateTeamModal(false);
+							setShowJoinTeamModal(true);
+						}}
+					/>
+				)}
+				{!isTeamMember && showJoinTeamModal && (
+					<JoinTeamModal
+						open={showJoinTeamModal}
+						closeModal={() => {
+							closeModalIfNewTeamCreated();
+						}}
+					/>
 				)}
-			</>
+			</div>
 		);
 	};