style: enhance FAQ container styling and adjust layout for customer s… (

#5999) * 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
SigNoz · Sep 26, 2024 · 44a3469 · 44a3469
1 parent ef4b70f
commit 44a3469
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 7 deletions.
diff --git 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
@@ -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>