GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-14 04:55:55 +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'; $light-theme: 'lightMode';
$dark-theme: 'darkMode';
@keyframes gradientFlow { @keyframes gradientFlow {
0% { 0% {
@ -147,6 +148,34 @@ $light-theme: 'lightMode';
animation: gradientFlow 24s ease infinite; animation: gradientFlow 24s ease infinite;
margin-bottom: 18px; 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 { .contact-us {

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

@ -187,8 +187,18 @@ export default function WorkspaceBlocked(): JSX.Element {
children: ( children: (
<Row gutter={[24, 16]} justify="center"> <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 */} {/* #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
<Col span={10}>{renderCustomerStories((index) => index % 2 !== 0)}</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 && ( {isAdmin && (
<Col span={24}> <Col span={24}>
<Flex justify="center"> <Flex justify="center">
@ -218,8 +228,12 @@ export default function WorkspaceBlocked(): JSX.Element {
label: t('faqs'), label: t('faqs'),
children: ( children: (
<Row align="middle" justify="center"> <Row align="middle" justify="center">
<Col span={18}> <Col span={12}>
<Space size="large" direction="vertical"> <Space
size="large"
direction="vertical"
className="workspace-locked__faq-container"
>
<Collapse items={faqData} defaultActiveKey={['1']} /> <Collapse items={faqData} defaultActiveKey={['1']} />
{isAdmin && ( {isAdmin && (
<Button <Button
@ -324,7 +338,7 @@ export default function WorkspaceBlocked(): JSX.Element {
loading={isLoading} loading={isLoading}
onClick={handleUpdateCreditCard} onClick={handleUpdateCreditCard}
> >
continue my journey Continue my Journey
</Button> </Button>
</Col> </Col>
<Col> <Col>
@ -340,9 +354,9 @@ export default function WorkspaceBlocked(): JSX.Element {
</Row> </Row>
)} )}
<Flex justify="center" className="workspace-locked__tabs"> <div className="workspace-locked__tabs">
<Tabs items={tabItems} defaultActiveKey="2" /> <Tabs items={tabItems} defaultActiveKey="2" />
</Flex> </div>
</> </>
)} )}
</div> </div>