gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-12-03 03:33:16 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1715 from gitbutlerapp/some-css-updates

Browse Source 
styles updates
This commit is contained in:
Pavel Laptev 2023-11-25 11:16:11 +01:00 committed by GitHub
commit 5fe2ea0d0c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 52 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/ui/src/routes/[projectId]/navigation/BaseBranchCard.svelte
View File

@ -34,8 +34,8 @@
</div>
<div class="content">
<div class="row_1 text-base-13 font-bold">
<span>Trunk</span>
<div class="row_1">
<span class="text-base-14 text-semibold trunk-label">Trunk</span>
{#if ($base$?.behind || 0) > 0}
<Tooltip label="Unmerged upstream commits">
<Badge count={$base$?.behind || 0} />
@ -78,6 +78,8 @@
gap: var(--space-10);
padding: var(--space-8);
border-radius: var(--radius-m);
transition: background-color var(--transition-fast);
&:hover,
&:focus {
background-color: var(--clr-theme-container-pale);
@ -91,6 +93,9 @@
flex-direction: column;
gap: var(--space-8);
}
.trunk-label {
color: var(--clr-theme-scale-ntrl-0);
}
.row_1 {
display: flex;
gap: var(--space-6);

4
packages/ui/src/routes/[projectId]/navigation/Branches.svelte
View File

@ -72,8 +72,8 @@
overscroll-behavior: none;
padding-top: var(--space-4);
padding-bottom: var(--space-16);
padding-left: var(--space-16);
padding-right: var(--space-16);
padding-left: var(--space-12);
padding-right: var(--space-12);
}
.content {
display: flex;

16
packages/ui/src/routes/[projectId]/navigation/DomainButton.svelte
View File

@ -1,22 +1,18 @@
<script lang="ts">
import { page } from '$app/stores';
import Icon from '$lib/icons/Icon.svelte';
import type iconsJson from '$lib/icons/icons.json';
export let href: string;
export let icon: keyof typeof iconsJson | undefined = undefined;
export let label: string;
$: selected = $page.url.href.includes(href);
</script>
<a
{href}
class="domain-button font-semibold"
class="domain-button"
style:background-color={selected ? 'var(--clr-theme-container-pale)' : undefined}
>
{#if icon}
<Icon name={icon} class="text-color-4 mr-1 inline h-4 w-4 align-middle" />
{/if}
<slot />
<span class="text-base-14 text-semibold label">{label}</span>
</a>
<style lang="postcss">
@ -27,9 +23,15 @@
border-radius: var(--radius-m);
background-color: var(--clr-theme-container-light);
padding: var(--space-10);
transition: background-color var(--transition-fast);
&:hover,
&:focus {
background-color: var(--clr-theme-container-pale);
}
}
.label {
color: var(--clr-theme-scale-ntrl-0);
}
</style>

2
packages/ui/src/routes/[projectId]/navigation/Footer.svelte
View File

@ -14,7 +14,7 @@
</script>
<div
class="text-color-3 flex flex-shrink-0 items-center justify-between border-t px-4 py-4"
class="text-color-3 flex flex-shrink-0 items-center justify-between border-t px-3 py-3"
style:background-color="var(--bg-surface-highlight)"
style:border-color="var(--border-surface)"
>

15
packages/ui/src/routes/[projectId]/navigation/Navigation.svelte
View File

@ -28,7 +28,6 @@
export let prService: PrService;
export let projectService: ProjectService;
$: activeBranches$ = vbranchService?.activeBranches$;
const userSettings = getContext<SettingsStore>(SETTINGS_CONTEXT);
let stashExpanded = true;
@ -50,7 +49,7 @@
<ProjectSelector {project} {projectService} />
<div class="flex flex-col gap-1">
<BaseBranchCard {project} {baseBranchService} {branchController} />
<DomainButton href={`/${project.id}/board`}>
<DomainButton href={`/${project.id}/board`} label="Applied branches">
<svg
width="16"
height="16"
@ -62,8 +61,6 @@
<path d="M5 8.8H11V4" stroke="white" stroke-width="2" />
<path d="M5 12V8.44444V4" stroke="white" stroke-width="2" />
</svg>
Applied branches
</DomainButton>
</div>
</div>
@ -75,14 +72,14 @@
<style lang="postcss">
.drag-region {
padding-top: var(--space-14);
padding-left: var(--space-16);
padding-right: var(--space-16);
padding-top: var(--space-12);
padding-left: var(--space-12);
padding-right: var(--space-12);
}
.domains {
flex-grow: 1;
padding-bottom: var(--space-24);
padding-left: var(--space-16);
padding-right: var(--space-16);
padding-left: var(--space-12);
padding-right: var(--space-12);
}
</style>

4
packages/ui/src/routes/[projectId]/navigation/ProjectsPopup.svelte
View File

@ -57,13 +57,13 @@
box-shadow: 0px 7px 14px 0px rgba(0, 0, 0, 0.1);
}
.popup__actions {
padding: var(--space-10);
padding: var(--space-8);
border-top: 1px solid var(--clr-theme-scale-ntrl-70);
}
.popup__projects {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-10);
padding: var(--space-8);
}
</style>

4
packages/ui/src/routes/[projectId]/navigation/SectionHeader.svelte
View File

@ -13,7 +13,7 @@
if (expandable) expanded = !expanded;
}}
disabled={count && count > 0 ? false : true}
class="header border-t p-4 font-bold"
class="header border-t font-bold"
style:border-color="var(--border-surface)"
class:border-b={scrolled}
>
@ -35,6 +35,8 @@
align-items: center;
justify-content: space-between;
width: 100%;
padding: var(--space-16) var(--space-12);
gap: var(--space-8);
}
.header:hover,
.header:focus {

4
packages/ui/src/routes/[projectId]/navigation/StashedBranches.svelte
View File

@ -113,8 +113,8 @@
.viewport {
padding-top: var(--space-4);
padding-bottom: var(--space-4);
padding-left: var(--space-16);
padding-right: var(--space-16);
padding-left: var(--space-12);
padding-right: var(--space-12);
}
.wrapper {
position: relative;

17
packages/ui/src/styles/text-classes.css
View File

@ -3,7 +3,6 @@
font-family: var(--base-font-family);
font-size: 0.625rem;
font-weight: 500;
letter-spacing: 0;
line-height: 100%;
}
@ -11,7 +10,6 @@
font-family: var(--base-font-family);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0;
line-height: 100%;
}
@ -19,7 +17,6 @@
font-family: var(--base-font-family);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0;
line-height: 100%;
}
@ -27,7 +24,6 @@
font-family: var(--base-font-family);
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0;
line-height: 100%;
}
@ -35,7 +31,6 @@
font-family: var(--base-font-family);
font-size: 0.875rem;
font-weight: 500;
letter-spacing: 0;
line-height: 100%;
}
@ -43,7 +38,6 @@
font-family: var(--base-font-family);
font-size: 1rem;
font-weight: 500;
letter-spacing: 0;
line-height: 100%;
}
@ -51,7 +45,6 @@
font-family: var(--base-font-family);
font-size: 1.125rem;
font-weight: 500;
letter-spacing: 0;
line-height: 100%;
}
@ -60,7 +53,6 @@
font-family: var(--base-font-family);
font-size: 625rem;
font-weight: 500;
letter-spacing: 0;
line-height: 150%;
}
@ -68,7 +60,6 @@
font-family: var(--base-font-family);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0;
line-height: 150%;
}
@ -76,7 +67,6 @@
font-family: var(--base-font-family);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0;
line-height: 150%;
}
@ -84,7 +74,6 @@
font-family: var(--base-font-family);
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0;
line-height: 150%;
}
@ -92,7 +81,6 @@
font-family: var(--base-font-family);
font-size: 0.875rem;
font-weight: 500;
letter-spacing: 0;
line-height: 150%;
}
@ -100,7 +88,6 @@
font-family: var(--base-font-family);
font-size: 1rem;
font-weight: 500;
letter-spacing: 0;
line-height: 150%;
}
@ -108,7 +95,6 @@
font-family: var(--base-font-family);
font-size: 1.125rem;
font-weight: 500;
letter-spacing: 0;
line-height: 150%;
}
@ -117,7 +103,6 @@
font-family: var(--base-font-family);
font-size: 1.25rem;
font-weight: 700;
letter-spacing: 0;
line-height: 100%;
}
@ -125,7 +110,6 @@
font-family: var(--base-font-family);
font-size: 1.375rem;
font-weight: 700;
letter-spacing: 0;
line-height: 100%;
}
@ -133,7 +117,6 @@
font-family: var(--base-font-family);
font-size: 1.5rem;
font-weight: 700;
letter-spacing: 0;
line-height: 100%;
}

34
packages/ui/src/styles/tokens.css
View File

@ -32,7 +32,7 @@
--clr-core-ntrl-25: #383838;
--clr-core-ntrl-30: #424242;
--clr-core-ntrl-35: #4d4d4d;
--clr-core-ntrl-40: #5e5e5e;
--clr-core-ntrl-40: #676767;
--clr-core-ntrl-45: #7a7a7a;
--clr-core-ntrl-50: #989898;
--clr-core-ntrl-55: #b1b1b1;
@ -110,7 +110,7 @@
--clr-theme-container-outline-dim: var(--clr-core-ntrl-35);
--clr-theme-container-outline-light: var(--clr-core-ntrl-65);
--clr-theme-container-outline-mid: var(--clr-core-ntrl-40);
--clr-theme-container-outline-pale: var(--clr-core-ntrl-60);
--clr-theme-container-outline-pale: var(--clr-core-ntrl-55);
--clr-theme-container-outline-sub: var(--clr-core-ntrl-50);
--clr-theme-container-pale: var(--clr-core-ntrl-90);
--clr-theme-container-sub: var(--clr-core-ntrl-80);
@ -130,6 +130,9 @@
--clr-theme-pop-element-dim: var(--clr-core-pop-30);
--clr-theme-pop-onContainer: var(--clr-core-pop-10);
--clr-theme-pop-onElement: var(--clr-core-ntrl-100);
--clr-theme-pop-oulint-dark: var(--clr-core-pop-25);
--clr-theme-pop-outline: var(--clr-core-pop-50);
--clr-theme-pop-outline-dim: var(--clr-core-pop-35);
--clr-theme-scale-err-10: var(--clr-core-err-10);
--clr-theme-scale-err-20: var(--clr-core-err-20);
--clr-theme-scale-err-30: var(--clr-core-err-30);
@ -237,19 +240,22 @@
--clr-theme-err-container: var(--clr-core-err-15);
--clr-theme-err-container-dark: var(--clr-core-err-5);
--clr-theme-err-container-dim: var(--clr-core-err-10);
--clr-theme-err-element: var(--clr-core-err-30);
--clr-theme-err-element-dark: var(--clr-core-err-20);
--clr-theme-err-element-dim: var(--clr-core-err-25);
--clr-theme-err-element: var(--clr-core-err-50);
--clr-theme-err-element-dark: var(--clr-core-err-35);
--clr-theme-err-element-dim: var(--clr-core-err-40);
--clr-theme-err-onContainer: var(--clr-core-err-80);
--clr-theme-err-onElement: var(--clr-core-err-90);
--clr-theme-pop-container: var(--clr-core-pop-15);
--clr-theme-pop-container-dark: var(--clr-core-pop-5);
--clr-theme-pop-container-dim: var(--clr-core-pop-10);
--clr-theme-pop-element: var(--clr-core-pop-30);
--clr-theme-pop-element-dark: var(--clr-core-pop-15);
--clr-theme-pop-element-dim: var(--clr-core-pop-20);
--clr-theme-pop-element: var(--clr-core-pop-40);
--clr-theme-pop-element-dark: var(--clr-core-pop-20);
--clr-theme-pop-element-dim: var(--clr-core-pop-30);
--clr-theme-pop-onContainer: var(--clr-core-pop-80);
--clr-theme-pop-onElement: var(--clr-core-ntrl-100);
--clr-theme-pop-oulint-dark: var(--clr-core-pop-65);
--clr-theme-pop-outline: var(--clr-core-pop-50);
--clr-theme-pop-outline-dim: var(--clr-core-pop-55);
--clr-theme-scale-err-10: var(--clr-core-err-90);
--clr-theme-scale-err-20: var(--clr-core-err-80);
--clr-theme-scale-err-30: var(--clr-core-err-70);
@ -300,17 +306,17 @@
--clr-theme-succ-container: var(--clr-core-succ-15);
--clr-theme-succ-container-dim: var(--clr-core-succ-5);
--clr-theme-succ-conteiner-dim: var(--clr-core-succ-10);
--clr-theme-succ-element: var(--clr-core-succ-30);
--clr-theme-succ-element-dark: var(--clr-core-succ-15);
--clr-theme-succ-element-dim: var(--clr-core-succ-20);
--clr-theme-succ-element: var(--clr-core-succ-50);
--clr-theme-succ-element-dark: var(--clr-core-succ-35);
--clr-theme-succ-element-dim: var(--clr-core-succ-40);
--clr-theme-succ-onContainer: var(--clr-core-succ-80);
--clr-theme-succ-onElement: var(--clr-core-succ-90);
--clr-theme-warn-container: var(--clr-core-warn-15);
--clr-theme-warn-container-dark: var(--clr-core-warn-5);
--clr-theme-warn-container-dim: var(--clr-core-warn-10);
--clr-theme-warn-eleemnt-dark: var(--clr-core-warn-20);
--clr-theme-warn-element: var(--clr-core-warn-30);
--clr-theme-warn-element-dim: var(--clr-core-warn-25);
--clr-theme-warn-eleemnt-dark: var(--clr-core-warn-35);
--clr-theme-warn-element: var(--clr-core-warn-50);
--clr-theme-warn-element-dim: var(--clr-core-warn-40);
--clr-theme-warn-onContainer: var(--clr-core-warn-80);
--clr-theme-warn-onElement: var(--clr-core-warn-90);
}