From 44a3469b9b974f188019ba4c37d2966452171371 Mon Sep 17 00:00:00 2001
From: Sudeep MP <sudipmelepunathilmp@gmail.com>
Date: Thu, 26 Sep 2024 16:14:34 +0100
Subject: [PATCH] =?UTF-8?q?style:=20enhance=20FAQ=20container=20styling=20?=
 =?UTF-8?q?and=20adjust=20layout=20for=20customer=20s=E2=80=A6=20(#5999)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* style: enhance FAQ container styling and adjust layout for customer stories

fixed the button casing
faq layout shift issue due to parent flex centered

* style: add dark theme support to WorkspaceLocked styles

* refactor: moved inline styles to class
---
 .../WorkspaceLocked.styles.scss               | 29 +++++++++++++++++++
 .../pages/WorkspaceLocked/WorkspaceLocked.tsx | 28 +++++++++++++-----
 2 files changed, 50 insertions(+), 7 deletions(-)

diff --git a/frontend/src/pages/WorkspaceLocked/WorkspaceLocked.styles.scss b/frontend/src/pages/WorkspaceLocked/WorkspaceLocked.styles.scss
index 131601bfb0..d2317c8c68 100644
--- a/frontend/src/pages/WorkspaceLocked/WorkspaceLocked.styles.scss
+++ b/frontend/src/pages/WorkspaceLocked/WorkspaceLocked.styles.scss
@@ -1,4 +1,5 @@
 $light-theme: 'lightMode';
+$dark-theme: 'darkMode';
 
 @keyframes gradientFlow {
 	0% {
@@ -147,6 +148,34 @@ $light-theme: 'lightMode';
 		animation: gradientFlow 24s ease infinite;
 		margin-bottom: 18px;
 	}
+
+	&__faq-container {
+		width: 100%;
+
+		.ant-collapse,
+		.ant-collapse-item,
+		.ant-collapse-content-active {
+			.#{$dark-theme} & {
+				border-color: var(--bg-slate-400);
+			}
+		}
+	}
+
+	&__customer-stories {
+		&__left-container,
+		&__right-container {
+			display: flex;
+			flex-direction: column;
+		}
+
+		&__left-container {
+			align-items: flex-end;
+		}
+
+		&__right-container {
+			align-items: flex-start;
+		}
+	}
 }
 
 .contact-us {
diff --git a/frontend/src/pages/WorkspaceLocked/WorkspaceLocked.tsx b/frontend/src/pages/WorkspaceLocked/WorkspaceLocked.tsx
index 84d977ae81..052d8dcbc5 100644
--- a/frontend/src/pages/WorkspaceLocked/WorkspaceLocked.tsx
+++ b/frontend/src/pages/WorkspaceLocked/WorkspaceLocked.tsx
@@ -187,8 +187,18 @@ export default function WorkspaceBlocked(): JSX.Element {
 			children: (
 				<Row gutter={[24, 16]} justify="center">
 					{/* #FIXME: please suggest if there is any better way to loop in different columns to get the masonry layout */}
-					<Col span={10}>{renderCustomerStories((index) => index % 2 === 0)}</Col>
-					<Col span={10}>{renderCustomerStories((index) => index % 2 !== 0)}</Col>
+					<Col
+						span={10}
+						className="workspace-locked__customer-stories__left-container"
+					>
+						{renderCustomerStories((index) => index % 2 === 0)}
+					</Col>
+					<Col
+						span={10}
+						className="workspace-locked__customer-stories__right-container"
+					>
+						{renderCustomerStories((index) => index % 2 !== 0)}
+					</Col>
 					{isAdmin && (
 						<Col span={24}>
 							<Flex justify="center">
@@ -218,8 +228,12 @@ export default function WorkspaceBlocked(): JSX.Element {
 			label: t('faqs'),
 			children: (
 				<Row align="middle" justify="center">
-					<Col span={18}>
-						<Space size="large" direction="vertical">
+					<Col span={12}>
+						<Space
+							size="large"
+							direction="vertical"
+							className="workspace-locked__faq-container"
+						>
 							<Collapse items={faqData} defaultActiveKey={['1']} />
 							{isAdmin && (
 								<Button
@@ -324,7 +338,7 @@ export default function WorkspaceBlocked(): JSX.Element {
 											loading={isLoading}
 											onClick={handleUpdateCreditCard}
 										>
-											continue my journey
+											Continue my Journey
 										</Button>
 									</Col>
 									<Col>
@@ -340,9 +354,9 @@ export default function WorkspaceBlocked(): JSX.Element {
 								</Row>
 							)}
 
-							<Flex justify="center" className="workspace-locked__tabs">
+							<div className="workspace-locked__tabs">
 								<Tabs items={tabItems} defaultActiveKey="2" />
-							</Flex>
+							</div>
 						</>
 					)}
 				</div>