gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-10-27 13:39:19 +03:00
Code Issues Packages Projects Releases Wiki Activity

Revert "Utility classes for light/dark bg text and border"

Browse Source 
This reverts commit c654a2aee9.
This commit is contained in:
Mattias Granlund 2023-06-22 20:43:41 +03:00
parent fe44d9ae30
commit f2356e8d7d
11 changed files with 44 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/app.postcss
View File

@ -84,7 +84,7 @@ textarea {
/* CARD STYLING */
.card {
@apply rounded border-[0.5px] border-dark-200 bg-card-default shadow;
@apply rounded border-[0.5px] border-gb-700 bg-card-default shadow;
/* background-image: url("http://api.thumbr.it/whitenoise-361x370.png?background=212121ff&noise=4d4d4d&density=40&opacity=100"); */
/* background-opacity: 0.1; */
/* background-image: url(data:image/png;base64,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); */
@ -135,55 +135,5 @@ button.active {
}
.button.active {
@apply gb-bg-3;
}
/* The following are used to reduce repetition of common light/dark mode styles */
.gb-bg-1 {
@apply bg-white dark:bg-black;
}
.gb-bg-2 {
@apply bg-light-100 dark:bg-dark-100;
}
.gb-bg-3 {
@apply bg-light-200 dark:bg-dark-200;
}
.gb-border-1 {
@apply border-light-200 dark:border-dark-500;
}
.gb-border-2 {
@apply border-light-300 dark:border-dark-600;
}
.gb-border-3 {
@apply border-light-400 dark:border-dark-700;
}
.gb-border-4 {
@apply border-light-500 dark:border-dark-800;
}
.gb-border-5 {
@apply border-light-600 dark:border-dark-800;
}
.gb-text-1 {
@apply text-black dark:text-white;
}
.gb-text-2 {
@apply text-dark-700 dark:text-light-300;
}
.gb-text-3 {
@apply text-dark-800 dark:text-light-500;
}
.gb-text-4 {
@apply text-dark-800 dark:text-light-800;
@apply bg-light-300 dark:bg-dark-300;
}

2
src/routes/+layout.svelte
View File

@ -63,7 +63,7 @@
<div class="flex h-full flex-col">
<header
data-tauri-drag-region
class="gb-bg-1 gb-text-2 flex h-11 flex-row items-center gap-x-4 pt-1"
class="flex h-11 flex-row items-center gap-x-4 bg-light-400 pt-1 text-dark-400 dark:bg-dark-600 dark:text-light-400"
style="z-index: 9999;"
>
<div class="breadcrumb-project-container ml-24">

2
src/routes/Breadcrumbs.svelte
View File

@ -11,7 +11,7 @@
<Button icon={IconHome} kind="plain" on:click={() => goto('/')} />
{#if project}
<a
class="button gb-bg-2 flex items-center px-2"
class="button flex items-center bg-light-700 px-3 dark:bg-dark-500"
class:active={window.location.pathname.includes(`/projects/${project.id}`)}
href="/projects/{project.id}"
title="{project.title} home"

4
src/routes/projects_new/[projectId]/+page.svelte
View File

@ -36,12 +36,12 @@
{:else}
<div class="m-auto flex flex-col space-y-2">
<h1 class="text-2xl font-bold">Set your target</h1>
<p class="gb-text-3">
<p class="text-gray-500">
You need to set your target before you can start working on your project.
</p>
<!-- select menu of remoteBranches -->
{#if remoteBranches.length === 0}
<p class="gb-text-3">You don't have any remote branches.</p>
<p class="text-gray-500">You don't have any remote branches.</p>
{:else}
<select bind:value={targetChoice}>
{#each remoteBranches as branch}

2
src/routes/projects_new/[projectId]/Board.svelte
View File

@ -30,7 +30,7 @@
<div
id="branch-lanes"
class="gb-bg-2 flex max-w-full flex-shrink flex-grow items-start gap-x-4 overflow-x-auto overflow-y-hidden p-4"
class="flex max-w-full flex-shrink flex-grow items-start gap-x-4 overflow-x-auto overflow-y-hidden bg-light-800 p-4 dark:bg-dark-700"
use:dndzone={{
items: branches,
types: ['branch'],

8
src/routes/projects_new/[projectId]/BranchLane.svelte
View File

@ -91,17 +91,19 @@
</script>
<div
class="gb-bg-1 gb-border-1 flex max-h-full w-96 shrink-0 flex-col overflow-y-hidden rounded-xl border px-2 pb-2 shadow"
class="flex max-h-full w-96 shrink-0 flex-col overflow-y-hidden rounded-xl bg-white px-2 shadow dark:bg-black"
>
<div class="flex h-16 shrink-0 items-center px-3 text-lg font-bold">
<IconBranch class="mr-3 text-[#A1A1AA]" />
{name}
</div>
<div class="gb-bg-2 gb-border-3 flex flex-col overflow-y-hidden rounded-lg border p-2">
<div
class="flex flex-col overflow-y-hidden rounded-lg border border-light-700 bg-light-800 p-2 dark:border-dark-700 dark:bg-dark-800"
>
<div>
<textarea
bind:this={textArea}
class="gb-bg-2 gb-text-2 mb-5 h-14 w-full shrink-0 resize-none rounded border-0 py-0 focus-within:h-36"
class="mb-5 h-14 w-full shrink-0 resize-none rounded border-0 bg-light-800 py-0 text-dark-400 focus-within:h-36 dark:bg-dark-800 dark:text-light-400"
style="height: {descriptionHeight}px"
value={commitMessage ? commitMessage.trim() : ''}
placeholder="Your commit message here..."

10
src/routes/projects_new/[projectId]/FileCard.svelte
View File

@ -40,7 +40,7 @@
</script>
<div
class="changed-file gb-border-2 gb-bg-1 gb-text-2 flex w-full flex-col justify-center gap-2 rounded-lg border p-2"
class="changed-file flex w-full flex-col justify-center gap-2 rounded-lg border border-light-700 bg-white p-2 text-dark-600 dark:border-dark-700 dark:bg-black dark:text-light-300"
>
<div class="flex items-center gap-2">
<div class="flex-grow overflow-hidden text-ellipsis whitespace-nowrap" title={filepath}>
@ -74,13 +74,17 @@
>
{#if expanded}
{#each hunks || [] as hunk (hunk.id)}
<div class="changed-hunk gb-border-2 flex w-full flex-col gap-1 rounded-sm border">
<div
class="changed-hunk flex w-full flex-col gap-1 rounded-sm border border-light-500 dark:border-dark-500"
>
<div class="w-full text-ellipsis p-2">
{#await summarizeHunk(hunk.diff) then description}
{description}
{/await}
</div>
<div class="gb-border-2 cursor-pointer border-t border-b text-sm">
<div
class="cursor-pointer border-t border-b border-light-700 text-sm dark:border-dark-800"
>
<!-- Disabling syntax highlighting for perormance reasons -->
<HunkDiffViewer diff={hunk.diff} filePath="foo" linesShown={2} />
</div>

8
src/routes/projects_new/[projectId]/HunkDiffViewer.svelte
View File

@ -103,13 +103,17 @@
row.type === RowType.Equal || row.type === RowType.Addition
? String(row.currentLineNumber + currentLineNumber - 1)
: ''}
<span class="gb-bg-3 gb-border-3 gb-text-3 select-none border-r">
<span
class="select-none border-r border-light-200 bg-light-800 text-dark-300 dark:border-dark-800 dark:bg-dark-800 dark:text-light-300"
>
<div class="mx-0.5 text-right">
{baseNumber}
</div>
</span>
<span class="gb-bg-3 gb-border-3 gb-text-3 mr-1 select-none border-r">
<span
class="mr-1 select-none border-r border-light-200 bg-light-800 text-dark-300 dark:border-dark-800 dark:bg-dark-800 dark:text-light-300"
>
<div class="mx-0.5 text-right">
{curNumber}
</div>

2
src/routes/projects_new/[projectId]/NewBranchDropZone.svelte
View File

@ -46,7 +46,7 @@
on:finalize={handleDndFinalize}
>
<div
class="gb-border-5 gb-bg-2 gb-text-4 flex h-full w-64 items-center self-center rounded-lg border border-dashed p-8 text-center text-xl font-bold "
class="flex h-full w-64 items-center self-center rounded-lg border border-dashed border-dark-100 bg-light-300 p-8 text-center text-xl font-bold dark:bg-dark-400"
>
drop here to create a new branch
</div>

4
src/routes/projects_new/[projectId]/Tray.svelte
View File

@ -7,8 +7,8 @@
export let remoteBranches: BranchData[];
</script>
<div class="gb-text-2 w-80 shrink-0 px-2">
<div class="py-4 text-lg font-bold">Your Branches</div>
<div class="w-80 shrink-0 px-2 dark:bg-dark-300 dark:text-light-800">
<div class="py-4">Your Branches</div>
<div class="flex flex-col gap-y-2">
{#each branches as branch (branch.id)}
<div class="rounded-lg p-2" title={branch.name}>

32
tailwind.config.cjs
View File

@ -58,25 +58,25 @@ const config = {
500: '#6B7280'
},
dark: {
100: '#1F1F1F',
200: '#1E1E1E',
300: '#212121',
400: '#252525',
500: '#27272A',
600: '#2C2C2C',
700: '#3C3C3C',
800: '#4C4C4C'
100: '#4C4C4C',
200: '#3C3C3C',
300: '#2C2C2C',
400: '#27272A',
500: '#252525',
600: '#212121',
700: '#1E1E1E',
800: '#1F1F1F'
},
light: {
100: '#F9FAFB',
200: '#F1F1F1',
300: '#E4E4E7',
400: '#DEDEDE',
100: '#B3B3B3',
200: '#C3C3C3',
300: '#D3D3D3',
400: '#D8D8D5',
500: '#DADADA',
600: '#D8D8D5',
700: '#D3D3D3',
800: '#C3C3C3',
900: '#B3B3B3'
600: '#DEDEDE',
700: '#E4E4E7',
800: '#F9FAFB',
900: '#F1F1F1'
},
blue: {
200: '#bfdbfe',