From 7f2a39239677a124680f77949437e18c65809c81 Mon Sep 17 00:00:00 2001 From: PavelLaptev Date: Thu, 23 Nov 2023 21:28:51 +0100 Subject: [PATCH 1/4] some css fixes --- packages/ui/src/app.html | 5 +- packages/ui/src/lib/components/Resizer.svelte | 1 + .../navigation/BaseBranchCard.svelte | 27 +++++----- .../[projectId]/navigation/Header.svelte | 53 +++++++++++-------- packages/ui/src/styles/main.postcss | 16 ++++++ packages/ui/src/styles/text-classes.css | 18 ++++--- packages/ui/src/styles/tokens.css | 3 ++ 7 files changed, 77 insertions(+), 46 deletions(-) diff --git a/packages/ui/src/app.html b/packages/ui/src/app.html index 72561ea2b..4b3a6d99b 100644 --- a/packages/ui/src/app.html +++ b/packages/ui/src/app.html @@ -6,10 +6,7 @@ %sveltekit.head% - +
%sveltekit.body%
diff --git a/packages/ui/src/lib/components/Resizer.svelte b/packages/ui/src/lib/components/Resizer.svelte index f26431443..f2846d73f 100644 --- a/packages/ui/src/lib/components/Resizer.svelte +++ b/packages/ui/src/lib/components/Resizer.svelte @@ -120,5 +120,6 @@ : `${width}px` : `${width}px` : undefined} + style:cursor={direction == 'horizontal' ? 'ew-resize' : 'ns-resize'} class="shrink-0 {classes ? ` ${classes}` : ''}" /> diff --git a/packages/ui/src/routes/[projectId]/navigation/BaseBranchCard.svelte b/packages/ui/src/routes/[projectId]/navigation/BaseBranchCard.svelte index 7c5f08bdf..15dcfd7d8 100644 --- a/packages/ui/src/routes/[projectId]/navigation/BaseBranchCard.svelte +++ b/packages/ui/src/routes/[projectId]/navigation/BaseBranchCard.svelte @@ -26,19 +26,20 @@ style:background-color={selected ? 'var(--clr-theme-container-pale)' : undefined} bind:this={baseContents} > -
+
-
-
+ +
+
Trunk - - - {#if ($base$?.behind || 0) > 0} + + +
-
+
{#if $base$?.remoteUrl.includes('github.com')} - + {:else} {/if} @@ -76,27 +77,27 @@ display: flex; gap: var(--space-10); padding: var(--space-8); - border-radius: var(--m, 6px); + border-radius: var(--radius-m); &:hover, &:focus { background-color: var(--clr-theme-container-pale); } } - .card__icon { + .icon { flex-shrink: 0; } - .card__content { + .content { display: flex; flex-direction: column; gap: var(--space-8); } - .card__row_1 { + .row_1 { display: flex; gap: var(--space-6); align-items: center; color: var(--clr-theme-scale-ntrl-10); } - .card__row_2 { + .row_2 { display: flex; align-items: center; gap: var(--space-4); diff --git a/packages/ui/src/routes/[projectId]/navigation/Header.svelte b/packages/ui/src/routes/[projectId]/navigation/Header.svelte index 855e86aea..6f729bdd5 100644 --- a/packages/ui/src/routes/[projectId]/navigation/Header.svelte +++ b/packages/ui/src/routes/[projectId]/navigation/Header.svelte @@ -17,29 +17,30 @@
-
- { - e.preventDefault(); - e.stopPropagation(); - fetching = true; - await branchController.fetchFromTarget().finally(() => { - fetching = false; - prService.reload(); - }); - }} - > -
- -
- +
+
diff --git a/packages/ui/src/styles/main.postcss b/packages/ui/src/styles/main.postcss index 1a7617687..9b00b2eee 100644 --- a/packages/ui/src/styles/main.postcss +++ b/packages/ui/src/styles/main.postcss @@ -10,11 +10,27 @@ @tailwind utilities; /* BOILERPLATE CSS */ +body { + font-family: 'Inter', sans-serif; + user-select: none; + height: 100vh; + width: 100vw; + overflow-y: hidden; + padding: 0; + color: var(--clr-theme-scale-ntrl-40); + background-color: var(--bg-body); + + /* optimise font rendering */ + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; +} + a, button { -webkit-user-select: none; -webkit-user-drag: none; -webkit-app-region: no-drag; + cursor: default; } input, diff --git a/packages/ui/src/styles/text-classes.css b/packages/ui/src/styles/text-classes.css index 45d85c900..16c13a8be 100644 --- a/packages/ui/src/styles/text-classes.css +++ b/packages/ui/src/styles/text-classes.css @@ -1,11 +1,3 @@ -.text-semibold { - font-weight: 500; -} - -.text-bold { - font-weight: 700; -} - /* text Base Classes */ .text-base-10 { font-family: var(--base-font-family); @@ -144,3 +136,13 @@ letter-spacing: 0; line-height: 100%; } + +/* modifiers */ + +.text-semibold { + font-weight: 500; +} + +.text-bold { + font-weight: 700; +} diff --git a/packages/ui/src/styles/tokens.css b/packages/ui/src/styles/tokens.css index 119289848..692e434dc 100644 --- a/packages/ui/src/styles/tokens.css +++ b/packages/ui/src/styles/tokens.css @@ -216,6 +216,9 @@ --space-48: 3rem; /* 48px / 16px = 3rem */ --space-56: 3.5rem; /* 56px / 16px = 3.5rem */ --space-64: 4rem; /* 64px / 16px = 4rem */ + --transition-fast: 0.05s ease-in-out; + --transition-medium: 0.1s ease-in-out; + --transition-slow: 0.25s ease-in-out; } :root.dark { From a62cd070c4e2ebc3a08f1a0ad934bb8c09927543 Mon Sep 17 00:00:00 2001 From: PavelLaptev Date: Thu, 23 Nov 2023 22:26:31 +0100 Subject: [PATCH 2/4] refresh icon style update --- .../[projectId]/navigation/Header.svelte | 36 ++++++++++++++++++- 1 file changed, 35 insertions(+), 1 deletion(-) diff --git a/packages/ui/src/routes/[projectId]/navigation/Header.svelte b/packages/ui/src/routes/[projectId]/navigation/Header.svelte index 6f729bdd5..79d1796b7 100644 --- a/packages/ui/src/routes/[projectId]/navigation/Header.svelte +++ b/packages/ui/src/routes/[projectId]/navigation/Header.svelte @@ -29,6 +29,16 @@ }); }} > + {#if !fetching} + + + + {/if} + {#if $base$?.fetchedAt} @@ -54,7 +64,8 @@ .sync-btn { display: flex; align-items: center; - gap: var(--space-4); + height: 20px; + gap: var(--space-6); padding-top: var(--space-2); padding-bottom: var(--space-2); padding-left: var(--space-6); @@ -66,10 +77,33 @@ &:hover { background: var(--clr-theme-container-sub); } + + &:hover .sync-btn__icon { + fill: var(--clr-theme-scale-ntrl-40); + transform: rotate(180deg); + } + + &:hover .sync-btn__label { + color: var(--clr-theme-scale-ntrl-40); + } + } + + .sync-btn__icon { + fill: var(--clr-theme-scale-ntrl-50); + width: var(--space-12); + height: var(--space-12); + transform-origin: center; + transform: rotate(0deg); + transition: + fill var(--transition-fast), + transform var(--transition-slow); } .sync-btn__label { + display: block; + line-height: 1; white-space: nowrap; color: var(--clr-theme-scale-ntrl-50); + transition: color var(--transition-fast); } From b80f4b48debdd05fe2b95df3e6c35feb45217333 Mon Sep 17 00:00:00 2001 From: PavelLaptev Date: Fri, 24 Nov 2023 00:53:23 +0100 Subject: [PATCH 3/4] styles update --- .../navigation/ProjectSelector.svelte | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/packages/ui/src/routes/[projectId]/navigation/ProjectSelector.svelte b/packages/ui/src/routes/[projectId]/navigation/ProjectSelector.svelte index 7a654aebf..9c20a7d13 100644 --- a/packages/ui/src/routes/[projectId]/navigation/ProjectSelector.svelte +++ b/packages/ui/src/routes/[projectId]/navigation/ProjectSelector.svelte @@ -27,7 +27,7 @@ e.preventDefault(); }} > - {project.title} + {project.title}
@@ -36,22 +36,25 @@
-