Skip to content

Commit 836d9ec

Browse files
PavelLaptevPavelLaptev
authored
ui-marketing-web (#11354)
* fix(ui): adjust CTA button text color to improve contrast * feat(ui): add commit links, chevron icon and responsive release row layout * fix(ui): hide footer download banner when links missing and adjust headline line-height
1 parent c644934 commit 836d9ec

File tree

3 files changed

+107
-15
lines changed

3 files changed

+107
-15
lines changed

‎apps/web/src/lib/components/marketing/Footer.svelte‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
</script>
1717

1818
<footer class="footer">
19-
<div class="banner">
19+
<div class="banner" class:no-downloads={!showDownloadLinks}>
2020
{#if showDownloadLinks}
2121
<div class="banner-content-downloads">
2222
<div class="stack-v">
@@ -429,6 +429,10 @@
429429
430430
.banner {
431431
padding: 24px;
432+
433+
&.no-downloads {
434+
display: none;
435+
}
432436
}
433437
434438
.banner-title {

‎apps/web/src/routes/(home)/components/CtaButton.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@
143143
border: 1px solid var(--clr-scale-pop-60);
144144
border-radius: var(--radius-xl);
145145
background-color: var(--clr-theme-pop-soft);
146-
color: var(--clr-scale-pop-10);
146+
color: var(--clr-scale-pop-20);
147147
transition:
148148
transform 0.15s ease-out,
149149
color 0.15s ease,

‎apps/web/src/routes/nightly/+page.svelte‎

Lines changed: 101 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import Footer from '$lib/components/marketing/Footer.svelte';
33
import Header from '$lib/components/marketing/Header.svelte';
44
import osIcons from '$lib/data/os-icons.json';
5+
import { Icon } from '@gitbutler/ui';
56
import type { Release } from '$lib/types/releases';
67
import type { LatestReleaseBuilds } from '$lib/utils/releaseUtils';
78
@@ -51,6 +52,15 @@
5152
hour12: false
5253
})}
5354
</span>
55+
<span> • </span>
56+
<a
57+
href="https://github.com/gitbutlerapp/gitbutler/commit/{latestNightly.sha}"
58+
target="_blank"
59+
rel="noopener noreferrer"
60+
class="sha-link"
61+
>
62+
{latestNightly.sha.substring(0, 7)}
63+
</a>
5464
</div>
5565
<p class="nightly-hero__description">
5666
Experience GitButler's newest features before anyone else. Nightly builds are
@@ -196,19 +206,39 @@
196206
class:expanded={expandedRelease === release.version}
197207
onclick={() => toggleRelease(release.version)}
198208
>
199-
<span class="release-row__version">{release.version}</span>
200-
<span class="release-row__date">
201-
{new Date(release.released_at).toLocaleDateString('en-GB', {
202-
day: 'numeric',
203-
month: 'short',
204-
year: 'numeric'
205-
})},
206-
{new Date(release.released_at).toLocaleTimeString('en-GB', {
207-
hour: '2-digit',
208-
minute: '2-digit',
209-
hour12: false
210-
})}
211-
</span>
209+
<div class="release-row__chevron" class:expanded={expandedRelease === release.version}>
210+
<Icon name="chevron-right" />
211+
</div>
212+
<div class="release-row__content">
213+
<span class="release-row__version">{release.version}</span>
214+
<div class="release-row__info">
215+
<span class="release-row__date">
216+
{new Date(release.released_at).toLocaleDateString('en-GB', {
217+
day: 'numeric',
218+
month: 'short',
219+
year: 'numeric'
220+
})},
221+
{new Date(release.released_at).toLocaleTimeString('en-GB', {
222+
hour: '2-digit',
223+
minute: '2-digit',
224+
hour12: false
225+
})},
226+
</span>
227+
<div class="flex items-center gap-2">
228+
<span class="release-row__separator">#</span>
229+
<a
230+
href="https://github.com/gitbutlerapp/gitbutler/commit/{release.sha}"
231+
target="_blank"
232+
rel="noopener noreferrer"
233+
title="View Commit on GitHub"
234+
class="sha-link"
235+
onclick={(e) => e.stopPropagation()}
236+
>
237+
{release.sha.substring(0, 7)}
238+
</a>
239+
</div>
240+
</div>
241+
</div>
212242
</button>
213243

214244
{#if expandedRelease === release.version}
@@ -436,6 +466,7 @@
436466
& h3 {
437467
padding: 16px 24px 12px;
438468
font-size: 40px;
469+
line-height: 1.2;
439470
font-family: var(--font-accent);
440471
}
441472
}
@@ -464,15 +495,61 @@
464495
}
465496
}
466497
498+
.release-row__chevron {
499+
display: flex;
500+
flex-shrink: 0;
501+
align-items: center;
502+
margin-right: 8px;
503+
color: var(--clr-text-3);
504+
transition: transform 0.15s ease;
505+
506+
&.expanded {
507+
transform: rotate(90deg);
508+
}
509+
}
510+
511+
.release-row__content {
512+
display: flex;
513+
flex: 1;
514+
align-items: center;
515+
justify-content: space-between;
516+
}
517+
467518
.release-row__version {
468519
font-size: 18px;
469520
}
470521
522+
.release-row__info {
523+
display: flex;
524+
flex-wrap: wrap;
525+
align-items: center;
526+
gap: 6px;
527+
}
528+
471529
.release-row__date {
472530
color: var(--clr-text-2);
473531
font-size: 14px;
474532
}
475533
534+
.release-row__separator {
535+
color: var(--clr-text-3);
536+
font-size: 14px;
537+
}
538+
539+
.sha-link {
540+
color: var(--clr-text-3);
541+
font-size: 14px;
542+
text-decoration: underline;
543+
text-underline-offset: 2px;
544+
transition: all 0.1s ease;
545+
546+
&:hover {
547+
color: var(--clr-theme-pop-element);
548+
text-decoration: underline wavy;
549+
text-decoration-color: var(--clr-theme-pop-element);
550+
}
551+
}
552+
476553
.release-row__links {
477554
display: flex;
478555
flex-wrap: wrap;
@@ -542,9 +619,20 @@
542619
}
543620
544621
.release-row__button {
622+
align-items: flex-start;
545623
padding: 12px 16px;
546624
}
547625
626+
.release-row__chevron {
627+
margin-top: 4px;
628+
}
629+
630+
.release-row__content {
631+
flex-direction: column;
632+
align-items: flex-start;
633+
width: 100%;
634+
}
635+
548636
.release-row__version {
549637
font-size: 16px;
550638
}

0 commit comments

Comments
 (0)