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

style(gas-station): design fixes #409

Merged
merged 10 commits into from
Jul 8, 2024
Merged

style(gas-station): design fixes #409

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
c50affe
style: Hero section should take thewhole height
DiogoSoaress Jul 6, 2024
65ed0f3
style: fix spacing between sections
DiogoSoaress Jul 7, 2024
5125643
style: correct Slider margins to take full-width
DiogoSoaress Jul 7, 2024
2c43601
style: fix blob overflow
DiogoSoaress Jul 7, 2024
0fccb78
style: undo Hero video taking the whole height
DiogoSoaress Jul 7, 2024
5b6c3f1
Merge branch 'main' into gas-station-design-fixes
DiogoSoaress Jul 8, 2024
164cb1e
style: have the blobs overlapping the video to smooth the edges
DiogoSoaress Jul 8, 2024
e57d154
style: smooth video edges
DiogoSoaress Jul 8, 2024
3c9086e
fix: extend slider width
DiogoSoaress Jul 8, 2024
e3cb995
style: apply gradient on Slider component
DiogoSoaress Jul 8, 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
7 changes: 5 additions & 2 deletions src/components/GasStation/Hero/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
.videoWrapper {
position: relative;
margin-top: calc(-1 * var(--header-height));
}

.video {
Expand All @@ -17,9 +16,13 @@
}

@media (min-width: 900px) {
.videoWrapper {
margin-top: calc(-1 * var(--header-height));
}

.textContainer {
position: absolute;
top: 35%;
top: 32%;
left: calc(50% - 350px);
max-width: 700px;
}
Expand Down
5 changes: 3 additions & 2 deletions src/components/GasStation/ImageTextTop/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,14 @@
background-repeat: no-repeat;
overflow: hidden;
background-size: contain;
min-height: 650px;
min-height: 500px;
max-height: 90vh;
background-position: center top 150px;
background-position: center top 190px;
}

@media (min-width: 900px) {
.bg {
min-height: 650px;
background-position: center top;
}

Expand Down
2 changes: 1 addition & 1 deletion src/components/GasStation/PartnersCardsImage/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@

.spot1 {
position: absolute;
right: -200px;
right: -50px;
top: -650px;
z-index: -1;
width: 1600px;
Expand Down
1 change: 0 additions & 1 deletion src/components/GasStation/Slider/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@
}

.item {
margin-left: var(--items-gap);
color: var(--mui-palette-primary-main);
}

Expand Down
2 changes: 1 addition & 1 deletion src/components/GasStation/TextBlockImagePartners/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@

.spot2 {
position: absolute;
right: -200px;
right: -50px;
top: -250px;
z-index: -1;
width: 1000px;
Expand Down
25 changes: 13 additions & 12 deletions src/components/GasStation/TwitterCTA/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,22 +16,23 @@ const TwitterCTA = ({ title, text }: BaseBlock) => {
const xUrl = xSharingUrl(currentUrl, socialMsg)

return (
<Container className={`${layoutCss.containerShort} ${css.container}`}>
<Typography variant="h2" className={css.title}>
{title}
</Typography>

<SafeLink href={xUrl}>
<Button variant="contained" size="large" className={css.button}>
Share on
<SvgIcon component={XIcon} fontSize="inherit" inheritViewBox />
</Button>
</SafeLink>
<>
<Container className={`${layoutCss.containerShort} ${css.container}`}>
<Typography variant="h2" className={css.title}>
{title}
</Typography>

<SafeLink href={xUrl}>
<Button variant="contained" size="large" className={css.button}>
Share on
<SvgIcon component={XIcon} fontSize="inherit" inheritViewBox />
</Button>
</SafeLink>
</Container>
<div className={css.sliderWrapper}>
<Slider text={text} />
</div>
</Container>
</>
)
}

Expand Down
14 changes: 12 additions & 2 deletions src/components/GasStation/TwitterCTA/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,23 @@
gap: 8px;
}
.sliderWrapper {
width: 100%;
margin-top: 96px;
margin-bottom: -120px;
margin-bottom: -80px;
}

@media (min-width: 600px) {
.title {
max-width: 800px;
}

.sliderWrapper {
margin-bottom: -120px;
}
}

@media (min-width: 1440px) {
.sliderWrapper {
margin-left: -104px;
margin-right: -104px;
}
}
2 changes: 1 addition & 1 deletion src/content/gas-station.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
},
{
"component": "GasStation/ImageTextTop",
"title": "Supported network<br/>gas pumps.",
"title": "Supported network<br/>gas pumps",
"backgroundImage": {
"sm": "/images/GasStation/network-gas-pump-sm.png",
"md": "/images/GasStation/network-gas-pump-md.png",
Expand Down
Loading