From c8decb061fecea761b9e58f11d39c3601cacc009 Mon Sep 17 00:00:00 2001
From: Sudeep MP <sudipmelepunathilmp@gmail.com>
Date: Wed, 18 Sep 2024 00:07:09 +0100
Subject: [PATCH 1/3] style: enhance FAQ container styling and adjust layout
 for customer stories

fixed the button casing
faq layout shift issue due to parent flex centered
---
 .../WorkspaceLocked.styles.scss               |  8 ++++
 .../pages/WorkspaceLocked/WorkspaceLocked.tsx | 37 +++++++++++++++----
 2 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/frontend/src/pages/WorkspaceLocked/WorkspaceLocked.styles.scss b/frontend/src/pages/WorkspaceLocked/WorkspaceLocked.styles.scss
index 131601bfb0..3b6bc72581 100644
--- a/frontend/src/pages/WorkspaceLocked/WorkspaceLocked.styles.scss
+++ b/frontend/src/pages/WorkspaceLocked/WorkspaceLocked.styles.scss
@@ -147,6 +147,14 @@ $light-theme: 'lightMode';
 		animation: gradientFlow 24s ease infinite;
 		margin-bottom: 18px;
 	}
+
+	&__faq-container {
+		.ant-collapse,
+		.ant-collapse-item,
+		.ant-collapse-content-active {
+			border-color: var(--bg-slate-400);
+		}
+	}
 }
 
 .contact-us {
diff --git a/frontend/src/pages/WorkspaceLocked/WorkspaceLocked.tsx b/frontend/src/pages/WorkspaceLocked/WorkspaceLocked.tsx
index 84d977ae81..36f4116ac4 100644
--- a/frontend/src/pages/WorkspaceLocked/WorkspaceLocked.tsx
+++ b/frontend/src/pages/WorkspaceLocked/WorkspaceLocked.tsx
@@ -187,8 +187,26 @@ 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}
+						style={{
+							display: 'flex',
+							flexDirection: 'column',
+							alignItems: 'flex-end',
+						}}
+					>
+						{renderCustomerStories((index) => index % 2 === 0)}
+					</Col>
+					<Col
+						span={10}
+						style={{
+							display: 'flex',
+							flexDirection: 'column',
+							alignItems: 'flex-start',
+						}}
+					>
+						{renderCustomerStories((index) => index % 2 !== 0)}
+					</Col>
 					{isAdmin && (
 						<Col span={24}>
 							<Flex justify="center">
@@ -218,8 +236,13 @@ 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"
+							style={{ width: '100%' }}
+							className="workspace-locked__faq-container"
+						>
 							<Collapse items={faqData} defaultActiveKey={['1']} />
 							{isAdmin && (
 								<Button
@@ -324,7 +347,7 @@ export default function WorkspaceBlocked(): JSX.Element {
 											loading={isLoading}
 											onClick={handleUpdateCreditCard}
 										>
-											continue my journey
+											Continue my Journey
 										</Button>
 									</Col>
 									<Col>
@@ -340,9 +363,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>

From c35b02e48565710f3198fefb9fd00f43d5dc29fc Mon Sep 17 00:00:00 2001
From: Sudeep MP <sudipmelepunathilmp@gmail.com>
Date: Wed, 18 Sep 2024 00:37:01 +0100
Subject: [PATCH 2/3] style: add dark theme support to WorkspaceLocked styles

---
 .../src/pages/WorkspaceLocked/WorkspaceLocked.styles.scss    | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/WorkspaceLocked/WorkspaceLocked.styles.scss b/frontend/src/pages/WorkspaceLocked/WorkspaceLocked.styles.scss
index 3b6bc72581..5cf50fc6cc 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% {
@@ -152,7 +153,9 @@ $light-theme: 'lightMode';
 		.ant-collapse,
 		.ant-collapse-item,
 		.ant-collapse-content-active {
-			border-color: var(--bg-slate-400);
+			.#{$dark-theme} & {
+				border-color: var(--bg-slate-400);
+			}
 		}
 	}
 }

From 7a0472b7eed42798b95c37dd2b48bdb721d94889 Mon Sep 17 00:00:00 2001
From: Sudeep MP <sudipmelepunathilmp@gmail.com>
Date: Wed, 18 Sep 2024 22:58:59 +0100
Subject: [PATCH 3/3] refactor: moved inline styles to class

---
 .../WorkspaceLocked.styles.scss                | 18 ++++++++++++++++++
 .../pages/WorkspaceLocked/WorkspaceLocked.tsx  | 13 ++-----------
 2 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/frontend/src/pages/WorkspaceLocked/WorkspaceLocked.styles.scss b/frontend/src/pages/WorkspaceLocked/WorkspaceLocked.styles.scss
index 5cf50fc6cc..d2317c8c68 100644
--- a/frontend/src/pages/WorkspaceLocked/WorkspaceLocked.styles.scss
+++ b/frontend/src/pages/WorkspaceLocked/WorkspaceLocked.styles.scss
@@ -150,6 +150,8 @@ $dark-theme: 'darkMode';
 	}
 
 	&__faq-container {
+		width: 100%;
+
 		.ant-collapse,
 		.ant-collapse-item,
 		.ant-collapse-content-active {
@@ -158,6 +160,22 @@ $dark-theme: 'darkMode';
 			}
 		}
 	}
+
+	&__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 36f4116ac4..052d8dcbc5 100644
--- a/frontend/src/pages/WorkspaceLocked/WorkspaceLocked.tsx
+++ b/frontend/src/pages/WorkspaceLocked/WorkspaceLocked.tsx
@@ -189,21 +189,13 @@ export default function WorkspaceBlocked(): JSX.Element {
 					{/* #FIXME: please suggest if there is any better way to loop in different columns to get the masonry layout */}
 					<Col
 						span={10}
-						style={{
-							display: 'flex',
-							flexDirection: 'column',
-							alignItems: 'flex-end',
-						}}
+						className="workspace-locked__customer-stories__left-container"
 					>
 						{renderCustomerStories((index) => index % 2 === 0)}
 					</Col>
 					<Col
 						span={10}
-						style={{
-							display: 'flex',
-							flexDirection: 'column',
-							alignItems: 'flex-start',
-						}}
+						className="workspace-locked__customer-stories__right-container"
 					>
 						{renderCustomerStories((index) => index % 2 !== 0)}
 					</Col>
@@ -240,7 +232,6 @@ export default function WorkspaceBlocked(): JSX.Element {
 						<Space
 							size="large"
 							direction="vertical"
-							style={{ width: '100%' }}
 							className="workspace-locked__faq-container"
 						>
 							<Collapse items={faqData} defaultActiveKey={['1']} />