GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-12 07:28:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
This commit is contained in:
Sudeep MP 2024-09-26 16:14:34 +01:00 committed by GitHub
parent ef4b70f67b
commit 44a3469b9b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 50 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
frontend/src/pages/WorkspaceLocked/WorkspaceLocked.styles.scss
View File

@ -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 {

28
frontend/src/pages/WorkspaceLocked/WorkspaceLocked.tsx
View File

@ -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>