Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
wants to merge 7 commits into
base: develop
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
c8decb0
style: enhance FAQ container styling and adjust layout for customer s…
sharpshooter90 Sep 17, 2024
c35b02e
style: add dark theme support to WorkspaceLocked styles
sharpshooter90 Sep 17, 2024
1ee8ce5
Merge branch 'develop' into feat/trial-end-screen-UI-fixes
sharpshooter90 Sep 18, 2024
7a0472b
refactor: moved inline styles to class
sharpshooter90 Sep 18, 2024
caac561
Merge branch 'develop' into feat/trial-end-screen-UI-fixes
sharpshooter90 Sep 18, 2024
eee5c0c
Merge branch 'feat/trial-end-screen-UI-fixes' of github.com:sharpshoo…
sharpshooter90 Sep 19, 2024
4f71d13
Merge branch 'develop' into feat/trial-end-screen-UI-fixes
sharpshooter90 Sep 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions frontend/src/pages/WorkspaceLocked/WorkspaceLocked.styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
$light-theme: 'lightMode';
$dark-theme: 'darkMode';

@keyframes gradientFlow {
0% {
Expand Down Expand Up @@ -147,6 +148,16 @@ $light-theme: 'lightMode';
animation: gradientFlow 24s ease infinite;
margin-bottom: 18px;
}

&__faq-container {
.ant-collapse,
.ant-collapse-item,
.ant-collapse-content-active {
.#{$dark-theme} & {
border-color: var(--bg-slate-400);
}
}
}
}

.contact-us {
Expand Down
37 changes: 30 additions & 7 deletions frontend/src/pages/WorkspaceLocked/WorkspaceLocked.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
sharpshooter90 marked this conversation as resolved.
Show resolved Hide resolved
alignItems: 'flex-end',
}}
>
{renderCustomerStories((index) => index % 2 === 0)}
</Col>
<Col
span={10}
style={{
display: 'flex',
flexDirection: 'column',
sharpshooter90 marked this conversation as resolved.
Show resolved Hide resolved
alignItems: 'flex-start',
}}
>
{renderCustomerStories((index) => index % 2 !== 0)}
</Col>
{isAdmin && (
<Col span={24}>
<Flex justify="center">
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -324,7 +347,7 @@ export default function WorkspaceBlocked(): JSX.Element {
loading={isLoading}
onClick={handleUpdateCreditCard}
>
continue my journey
Continue my Journey
</Button>
</Col>
<Col>
Expand All @@ -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>
Expand Down
Loading