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

Create new utility classes for border color

Browse Source 
- the colors need a bit of adjusting still, but commit is getting big
- doesn't seem like we need 4 border colors, but leaving in for now
This commit is contained in:
Mattias Granlund 2023-09-13 21:22:45 +02:00
parent a5526bb5dd
commit ca3e4c2f72
16 changed files with 102 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
packages/ui/src/routes/repo/[projectId]/+page.svelte
View File

@ -167,7 +167,7 @@
</div> </div>
</div> </div>
{:else} {:else}
<div class="m-auto text-light-700 dark:text-dark-100"> <div class="text-color-3 m-auto">
{#if $vbrachesState.error.code === Code.InvalidHead} {#if $vbrachesState.error.code === Code.InvalidHead}
<div class="space-y-2 rounded-md p-4"> <div class="space-y-2 rounded-md p-4">
<h2 class="text-lg font-semibold"> <h2 class="text-lg font-semibold">
@ -207,13 +207,13 @@
class="bg-color-2 flex h-full flex-col justify-center gap-y-4 self-center p-12 text-lg" class="bg-color-2 flex h-full flex-col justify-center gap-y-4 self-center p-12 text-lg"
> >
<div class="font-bold">Set your Base Branch</div> <div class="font-bold">Set your Base Branch</div>
<p class="text-light-700 dark:text-dark-100"> <p class="text-color-3">
You need to set your base branch before you can start working on your project. You need to set your base branch before you can start working on your project.
</p> </p>
<!-- select menu of remoteBranches --> <!-- select menu of remoteBranches -->
{#if remoteBranchNames.length === 0} {#if remoteBranchNames.length === 0}
<p class="mt-6 text-red-500">You don't have any remote branches.</p> <p class="mt-6 text-red-500">You don't have any remote branches.</p>
<p class="mt-6 text-sm text-light-700"> <p class="text-color-3 mt-6 text-sm">
Currently, GitButler requires a remote branch to base it's virtual branch work on. To use Currently, GitButler requires a remote branch to base it's virtual branch work on. To use
virtual branches, please push your code to a remote branch to use as a base. virtual branches, please push your code to a remote branch to use as a base.
<a <a
@ -235,7 +235,7 @@
{/if} {/if}
{/each} {/each}
</select> </select>
<p class="text-base text-light-700 dark:text-dark-100"> <p class="text-color-3 text-base">
This is the branch that you consider "production", normally something like "origin/master" This is the branch that you consider "production", normally something like "origin/master"
or "origin/main". or "origin/main".
</p> </p>
@ -249,32 +249,32 @@
<div id="vb-data" class="max-h-full justify-center overflow-y-auto"> <div id="vb-data" class="max-h-full justify-center overflow-y-auto">
<div class="flex h-full max-h-full flex-col gap-y-3 p-12 text-lg"> <div class="flex h-full max-h-full flex-col gap-y-3 p-12 text-lg">
<h1 class="text-xl font-bold">Getting Started with Virtual Branches</h1> <h1 class="text-xl font-bold">Getting Started with Virtual Branches</h1>
<p class="text-xl text-light-700 dark:text-dark-100"> <p class="text-color-3 text-xl">
Virtual branches are just like normal Git branches, except that you can work on several of Virtual branches are just like normal Git branches, except that you can work on several of
them at the same time. them at the same time.
</p> </p>
<div class="font-bold">Base Branch</div> <div class="font-bold">Base Branch</div>
<p class="text-light-700 dark:text-dark-100"> <p class="text-color-3">
With virtual branches, you are not working off of local main or master branches. With virtual branches, you are not working off of local main or master branches.
Everything that you do is on a virtual branch, automatically. Everything that you do is on a virtual branch, automatically.
</p> </p>
<p class="text-light-700 dark:text-dark-100"> <p class="text-color-3">
This works by specifying a "base branch" that represents the state of production, normally This works by specifying a "base branch" that represents the state of production, normally
something like "origin/master". something like "origin/master".
</p> </p>
<div class="font-bold">Ownership, Committing and Pushing</div> <div class="font-bold">Ownership, Committing and Pushing</div>
<p class="text-light-700 dark:text-dark-100"> <p class="text-color-3">
Each virtual branch "owns" parts of the files that are seen as changed. If you commit on Each virtual branch "owns" parts of the files that are seen as changed. If you commit on
that branch, only the parts that are owned by that branch are actually recorded in the that branch, only the parts that are owned by that branch are actually recorded in the
commits on that branch. commits on that branch.
</p> </p>
<p class="text-light-700 dark:text-dark-100"> <p class="text-color-3">
When you push a virtual branch, it will create a branch name based on your branch title, When you push a virtual branch, it will create a branch name based on your branch title,
push that branch to your remote with just the changes committed to that branch, not push that branch to your remote with just the changes committed to that branch, not
everything in your working directory. everything in your working directory.
</p> </p>
<div class="font-bold">Applying and Unapplying</div> <div class="font-bold">Applying and Unapplying</div>
<p class="text-light-700 dark:text-dark-100"> <p class="text-color-3">
You can have many virtual branches applied at the same time, but they cannot conflict with You can have many virtual branches applied at the same time, but they cannot conflict with
each other currently. Unapplying a virtual branch will take all of the changes that it each other currently. Unapplying a virtual branch will take all of the changes that it
owns and remove them from your working directory. Applying the branch will add those owns and remove them from your working directory. Applying the branch will add those

2
packages/ui/src/routes/repo/[projectId]/BaseBranchPeek.svelte
View File

@ -23,7 +23,7 @@
<div class="relative h-full max-h-full"> <div class="relative h-full max-h-full">
<div <div
bind:this={viewport} bind:this={viewport}
class="hide-native-scrollbar flex max-h-full flex-grow flex-col overflow-y-scroll overscroll-none dark:bg-dark-900" class="hide-native-scrollbar bg-color-3 flex max-h-full flex-grow flex-col overflow-y-scroll overscroll-none"
> >
<div bind:this={contents} class="flex flex-col gap-y-4 p-4"> <div bind:this={contents} class="flex flex-col gap-y-4 p-4">
<h1 class="font-bold text-light-700 dark:text-dark-100">Upstream</h1> <h1 class="font-bold text-light-700 dark:text-dark-100">Upstream</h1>

34
packages/ui/src/routes/repo/[projectId]/BranchLane.svelte
View File

@ -192,10 +192,10 @@
> >
<div <div
bind:this={rsViewport} bind:this={rsViewport}
class="bg-color-3 flex flex-grow cursor-default flex-col overflow-x-hidden border-l border-r border-light-400 dark:border-dark-600" class="bg-color-3 border-color-4 flex flex-grow cursor-default flex-col overflow-x-hidden border-l border-r"
> >
<div class="flex"> <div class="flex">
<div class="flex flex-grow flex-col border-b border-light-400 dark:border-dark-600"> <div class="bg-color-4 border-color-4 flex flex-grow flex-col border-b">
{#if !branch.mergeable} {#if !branch.mergeable}
<!-- use of relative is for tooltip rendering --> <!-- use of relative is for tooltip rendering -->
<div class="bg-red-500 px-2 py-0.5 text-center font-bold dark:bg-red-700"> <div class="bg-red-500 px-2 py-0.5 text-center font-bold dark:bg-red-700">
@ -227,7 +227,7 @@
bind:value={branch.name} bind:value={branch.name}
on:change={handleBranchNameChange} on:change={handleBranchNameChange}
title={branch.name} title={branch.name}
class="w-full truncate rounded border border-transparent bg-transparent px-1 font-mono font-bold hover:border-light-400 dark:hover:border-dark-600" class="text-color-3 hover:text-color-2 focus:text-color-2 hover:border-color-4 w-full truncate rounded border border-transparent bg-transparent px-1 font-mono font-bold"
on:dblclick|stopPropagation on:dblclick|stopPropagation
on:click={(e) => e.currentTarget.select()} on:click={(e) => e.currentTarget.select()}
/> />
@ -373,30 +373,25 @@
{#if branch.files.length == 0} {#if branch.files.length == 0}
{#if branch.commits.length == 0} {#if branch.commits.length == 0}
<div <div
class="no-changes text-color-3 space-y-6 rounded p-8 text-center dark:border-zinc-700" class="no-changes text-color-3 space-y-6 rounded p-8 text-center"
data-dnd-ignore data-dnd-ignore
> >
<p>Nothing on this branch yet.</p> <p>Nothing on this branch yet.</p>
{#if !readonly} {#if !readonly}
<IconNewBadge class="mx-auto mt-4 h-16 w-16 text-blue-400 dark:text-dark-400" /> <IconNewBadge class="mx-auto mt-4 h-16 w-16 text-blue-400" />
<p class="px-12">Get some work done, then throw some files my way!</p> <p class="px-12">Get some work done, then throw some files my way!</p>
{/if} {/if}
</div> </div>
{:else} {:else}
<!-- attention: these markers have custom css at the bottom of thise file --> <!-- attention: these markers have custom css at the bottom of thise file -->
<div <div class="no-changes text-color-3 rounded text-center font-mono" data-dnd-ignore>
class="no-changes text-color-3 rounded text-center font-mono dark:border-zinc-700"
data-dnd-ignore
>
No uncommitted changes on this branch No uncommitted changes on this branch
</div> </div>
{/if} {/if}
{/if} {/if}
</div> </div>
{#if localCommits.length > 0 || remoteCommits.length > 0} {#if localCommits.length > 0 || remoteCommits.length > 0}
<div <div class="flex w-full flex-grow flex-col gap-2">
class="flex w-full flex-grow flex-col gap-2 border-t border-light-400 dark:border-dark-500"
>
{#if localCommits.length > 0} {#if localCommits.length > 0}
<div <div
class="relative" class="relative"
@ -405,7 +400,7 @@
> >
<div <div
class="dark:form-dark-600 absolute top-4 ml-[0.75rem] w-px bg-gradient-to-b from-light-400 via-light-500 via-90% dark:from-dark-600 dark:via-dark-600" class="dark:form-dark-600 absolute top-4 ml-[0.75rem] w-px bg-gradient-to-b from-light-400 via-light-500 via-90% dark:from-dark-600 dark:via-dark-600"
style={remoteCommits.length == 0 ? 'height: calc();' : 'height: 100%;'} style={localCommits.length == 0 ? 'height: calc();' : 'height: 100%;'}
/> />
<div class="relative flex flex-col gap-2"> <div class="relative flex flex-col gap-2">
@ -439,9 +434,7 @@
animate:flip animate:flip
> >
<div class="ml-[0.4rem] mr-1.5"> <div class="ml-[0.4rem] mr-1.5">
<div <div class="border-color-4 h-3 w-3 rounded-full border-2" />
class="h-3 w-3 rounded-full border-2 border-light-500 bg-light-200 dark:border-dark-600 dark:bg-dark-1000"
/>
</div> </div>
<CommitCard <CommitCard
{commit} {commit}
@ -456,8 +449,7 @@
{#if remoteCommits.length > 0} {#if remoteCommits.length > 0}
<div class="relative flex-grow"> <div class="relative flex-grow">
<div <div
class="dark:form-dark-600 absolute top-4 ml-[0.75rem] class="dark:form-dark-600 absolute top-4 ml-[0.75rem] w-px bg-gradient-to-b from-light-600 via-light-600 via-90% dark:from-dark-400 dark:via-dark-400"
w-px bg-gradient-to-b from-light-600 via-light-600 via-90% dark:from-dark-400 dark:via-dark-400"
style="height: calc(100% - 1rem);" style="height: calc(100% - 1rem);"
/> />
@ -574,10 +566,4 @@
:global(.lane-dz-hover .hover-text) { :global(.lane-dz-hover .hover-text) {
@apply visible; @apply visible;
} }
:global(.lane-dz-hover .lane-dz-marker) {
@apply text-light-700 outline-light-600;
}
:global(.dark .lane-dz-hover .lane-dz-marker) {
@apply text-dark-100 outline-dark-200;
}
</style> </style>

2
packages/ui/src/routes/repo/[projectId]/BranchLanePopupMenu.svelte
View File

@ -38,7 +38,7 @@
> >
<div class="mx-3"> <div class="mx-3">
<div class="my-2 h-[0.0625rem] w-full bg-light-300 dark:bg-dark-500" /> <div class="bg-color-3 my-2 h-[0.0625rem] w-full" />
</div> </div>
<PopupMenuItem on:click={() => branchController.createBranch({ order })}> <PopupMenuItem on:click={() => branchController.createBranch({ order })}>

16
packages/ui/src/routes/repo/[projectId]/CommitCard.svelte
View File

@ -52,9 +52,7 @@
} }
</script> </script>
<div <div class="text-color-2 bg-color-5 border-color-4 w-full truncate rounded border p-2 text-left">
class="text-color-2 bg-color-5 w-full truncate rounded border border-light-400 p-2 text-left dark:border-dark-600"
>
<div class="mb-1 flex justify-between"> <div class="mb-1 flex justify-between">
<div class="truncate"> <div class="truncate">
{#if url} {#if url}
@ -123,10 +121,8 @@
<div class="flex flex-col rounded px-2"> <div class="flex flex-col rounded px-2">
{#each sections as section} {#each sections as section}
{#if 'hunk' in section} {#if 'hunk' in section}
<div <div class="border-color-4 my-1 flex w-full flex-col overflow-hidden rounded">
class="my-1 flex w-full flex-col overflow-hidden rounded border border-light-400 bg-white dark:border-dark-400 dark:bg-dark-900" <div class="w-full overflow-hidden">
>
<div class="w-full overflow-hidden bg-white dark:bg-dark-900">
{#each section.subSections as subsection, sidx} {#each section.subSections as subsection, sidx}
{#each subsection.lines.slice(0, subsection.expanded ? subsection.lines.length : 0) as line} {#each subsection.lines.slice(0, subsection.expanded ? subsection.lines.length : 0) as line}
<RenderedLine <RenderedLine
@ -138,14 +134,14 @@
{/each} {/each}
{#if !subsection.expanded} {#if !subsection.expanded}
<div <div
class="flex w-full border-light-200 dark:border-dark-400" class="border-color-4 flex w-full"
class:border-t={sidx == section.subSections.length - 1 || class:border-t={sidx == section.subSections.length - 1 ||
(sidx > 0 && sidx < section.subSections.length - 1)} (sidx > 0 && sidx < section.subSections.length - 1)}
class:border-b={sidx == 0 || class:border-b={sidx == 0 ||
(sidx > 0 && sidx < section.subSections.length - 1)} (sidx > 0 && sidx < section.subSections.length - 1)}
> >
<div <div
class="text-color-4 border-r border-light-200 bg-light-25 text-center hover:bg-light-700 hover:text-white dark:border-dark-400 dark:bg-dark-500 dark:hover:bg-dark-400 dark:hover:text-black" class="bg-color-4 text-color-4 hover:text-color-2 border-color-4 border-r text-center"
style:min-width={`calc(${2 * minWidth}rem - 1px)`} style:min-width={`calc(${2 * minWidth}rem - 1px)`}
> >
<button <button
@ -166,7 +162,7 @@
{/if} {/if}
</button> </button>
</div> </div>
<div class="flex-grow bg-white dark:bg-dark-900" /> <div class="bg-color-4 flex-grow" />
</div> </div>
{/if} {/if}
{/each} {/each}

9
packages/ui/src/routes/repo/[projectId]/CommitDialog.svelte
View File

@ -85,10 +85,7 @@
} }
</script> </script>
<div <div class="bg-color-3 flex w-full flex-col" transition:slide={{ duration: 150 }}>
class="flex w-full flex-col border-t border-light-400 bg-light-200 dark:border-dark-400 dark:bg-dark-800"
transition:slide={{ duration: 150 }}
>
{#if annotateCommits} {#if annotateCommits}
<div class="bg-blue-400 p-2 text-sm text-white"> <div class="bg-blue-400 p-2 text-sm text-white">
GitButler will be the committer of this commit. GitButler will be the committer of this commit.
@ -104,7 +101,7 @@
<textarea <textarea
bind:value={commitMessage} bind:value={commitMessage}
on:dblclick|stopPropagation on:dblclick|stopPropagation
class="flex-grow cursor-text resize-none overflow-x-auto overflow-y-auto border border-white bg-white p-2 font-mono text-dark-700 outline-none focus:border-purple-600 focus:ring-0 dark:border-dark-500 dark:bg-dark-700 dark:text-light-400" class="text-color-2 bg-color-5 flex-grow cursor-text resize-none overflow-x-auto overflow-y-auto border border-transparent p-2 font-mono outline-none focus:border-purple-600 focus:ring-0 dark:focus:border-purple-600"
placeholder="Your commit message here" placeholder="Your commit message here"
rows={messageRows} rows={messageRows}
required required
@ -124,7 +121,7 @@
loading={isGeneratingCommigMessage} loading={isGeneratingCommigMessage}
on:click={() => generateCommitMessage(branch.files)} on:click={() => generateCommitMessage(branch.files)}
> >
<span class="text-light-700">Generate message</span> <span class="text-4">Generate message</span>
</Button> </Button>
{:else} {:else}
<Tooltip <Tooltip

10
packages/ui/src/routes/repo/[projectId]/FileCard.svelte
View File

@ -103,7 +103,7 @@
class:opacity-80={isFileLocked} class:opacity-80={isFileLocked}
> >
<div <div
class="bg-color-5 flex w-full flex-col justify-center gap-2 border-b border-t border-light-300 py-1 dark:border-dark-500" class="bg-color-5 border-color-4 flex w-full flex-col justify-center gap-2 border-b border-t py-1"
> >
<div <div
class="flex cursor-default pl-2" class="flex cursor-default pl-2"
@ -183,7 +183,7 @@
{/await} {/await}
{/if} {/if}
<div <div
class="bg-6 my-1 flex w-full flex-col overflow-hidden rounded border border-light-400 dark:border-dark-400" class="bg-6 border-color-3 my-1 flex w-full flex-col overflow-hidden rounded border"
> >
<div <div
draggable={!section.hunk.locked && !readonly} draggable={!section.hunk.locked && !readonly}
@ -221,14 +221,14 @@
{/each} {/each}
{#if !subsection.expanded} {#if !subsection.expanded}
<div <div
class="flex w-full border-light-200 dark:border-dark-400" class="border-color-3 flex w-full"
class:border-t={sidx == section.subSections.length - 1 || class:border-t={sidx == section.subSections.length - 1 ||
(sidx > 0 && sidx < section.subSections.length - 1)} (sidx > 0 && sidx < section.subSections.length - 1)}
class:border-b={sidx == 0 || class:border-b={sidx == 0 ||
(sidx > 0 && sidx < section.subSections.length - 1)} (sidx > 0 && sidx < section.subSections.length - 1)}
> >
<div <div
class="bg-color-4 text-color-4 hover:text-color-2 border-r border-light-200 text-center dark:border-dark-400" class="bg-color-4 text-color-4 hover:text-color-2 border-color-3 border-r text-center"
style:min-width={`calc(${2 * minWidth}rem - 1px)`} style:min-width={`calc(${2 * minWidth}rem - 1px)`}
> >
<button <button
@ -259,7 +259,7 @@
{:else} {:else}
{#if section.expanded} {#if section.expanded}
<div <div
class="my-1 flex w-full flex-col overflow-hidden rounded border border-light-200 bg-white dark:border-dark-400 dark:bg-dark-900" class="border-color-3 bg-color-5 my-1 flex w-full flex-col overflow-hidden rounded border"
role="group" role="group"
on:dblclick on:dblclick
> >

8
packages/ui/src/routes/repo/[projectId]/FileTree.svelte
View File

@ -125,7 +125,7 @@
> >
{node.name} {node.name}
</div> </div>
<div class="flex-grow truncate text-xs font-light text-light-600"> <div class="text-color-4 flex-grow truncate text-xs font-light">
<TimeAgo date={node.file.modifiedAt} addSuffix={false} /> <TimeAgo date={node.file.modifiedAt} addSuffix={false} />
</div> </div>
<div class="flex gap-1 font-mono text-xs font-bold"> <div class="flex gap-1 font-mono text-xs font-bold">
@ -149,9 +149,9 @@
<button class="flex w-full items-center py-0 text-left" class:expanded on:click={toggle}> <button class="flex w-full items-center py-0 text-left" class:expanded on:click={toggle}>
<div class="w-3 shrink-0 text-center"> <div class="w-3 shrink-0 text-center">
{#if expanded} {#if expanded}
<IconChevronDownSmall class="scale-90 text-light-600 dark:text-dark-200" /> <IconChevronDownSmall class="text-color-4 scale-90" />
{:else} {:else}
<IconChevronRightSmall class="scale-90 text-light-600 dark:text-dark-200" /> <IconChevronRightSmall class="text-color-4 scale-90" />
{/if} {/if}
</div> </div>
<div class="w-4 shrink-0 pl-1 text-center"> <div class="w-4 shrink-0 pl-1 text-center">
@ -173,7 +173,7 @@
<div class="flex"> <div class="flex">
<div class="flex"> <div class="flex">
<div class="w-3 shrink-0 text-center"> <div class="w-3 shrink-0 text-center">
<div class="inline-block h-full w-px bg-light-200 dark:bg-dark-400" /> <div class="bg-color-3 inline-block h-full w-px" />
</div> </div>
</div> </div>
<ul class="w-full overflow-hidden"> <ul class="w-full overflow-hidden">

8
packages/ui/src/routes/repo/[projectId]/NewBranchDropZone.svelte
View File

@ -29,7 +29,7 @@
</button> </button>
</div> </div>
<div <div
class="new-dz-marker text-color-3 hidden h-full w-96 shrink-0 items-center justify-center border-2 border-dashed border-light-500 text-center dark:border-dark-600 dark:hover:border-dark-600" class="new-dz-marker text-color-3 border-color-3 hidden h-full w-96 shrink-0 items-center justify-center border-2 border-dashed text-center"
> >
New branch New branch
</div> </div>
@ -47,10 +47,4 @@
* on the element since such events don't seem to trigger on drag. This is a hacky * on the element since such events don't seem to trigger on drag. This is a hacky
* solution and you're welcome to improve it. * solution and you're welcome to improve it.
*/ */
:global(.new-dz-hover .new-dz-marker) {
@apply border-light-600;
}
:global(.dark .new-dz-hover .new-dz-marker) {
@apply border-dark-200;
}
</style> </style>

2
packages/ui/src/routes/repo/[projectId]/NotesTabPanel.svelte
View File

@ -18,6 +18,6 @@
bind:value={notes} bind:value={notes}
on:change={handleUpdateNotes} on:change={handleUpdateNotes}
name="notes" name="notes"
class="outline-none-important h-full w-full resize-none bg-transparent p-2 align-top text-light-900 dark:text-dark-100" class="outline-none-important text-color-2 h-full w-full resize-none bg-transparent p-2 align-top"
placeholder="Branch notes (optional)" placeholder="Branch notes (optional)"
/> />

4
packages/ui/src/routes/repo/[projectId]/PeekTray.svelte
View File

@ -57,7 +57,7 @@
style:width={`${$userSettings.peekTrayWidth}px`} style:width={`${$userSettings.peekTrayWidth}px`}
style:translate={`${offsetLeft}px`} style:translate={`${offsetLeft}px`}
style:transition-property={!disabled ? (expanded ? 'top,translate' : 'translate') : 'none'} style:transition-property={!disabled ? (expanded ? 'top,translate' : 'translate') : 'none'}
class="absolute z-30 flex shrink-0 overflow-visible bg-white text-light-800 outline-none duration-300 ease-in-out dark:bg-dark-800 dark:text-dark-100" class="bg-color-5 text-color-1 absolute z-30 flex shrink-0 overflow-visible outline-none duration-300 ease-in-out"
on:click|stopPropagation on:click|stopPropagation
on:keydown|stopPropagation on:keydown|stopPropagation
role="menu" role="menu"
@ -89,7 +89,7 @@
{/if} {/if}
</div> </div>
<div <div
class="bg-color-4 hover:bg-color-5 flex w-4 cursor-pointer items-center text-light-600" class="bg-color-4 hover:bg-color-5 text-color-4 flex w-4 cursor-pointer items-center"
role="button" role="button"
tabindex="0" tabindex="0"
on:click={toggleExpanded} on:click={toggleExpanded}

2
packages/ui/src/routes/repo/[projectId]/RemoteBranchPeek.svelte
View File

@ -15,7 +15,7 @@
<p class="truncate text-lg font-bold" title="remote branch"> <p class="truncate text-lg font-bold" title="remote branch">
{branch.name.replace('refs/remotes/', '').replace('origin/', '').replace('refs/heads/', '')} {branch.name.replace('refs/remotes/', '').replace('origin/', '').replace('refs/heads/', '')}
</p> </p>
<p class="text-light-700 dark:text-dark-200" title="upstream target"> <p class="text-3" title="upstream target">
{branch.upstream?.replace('refs/remotes/', '') || ''} {branch.upstream?.replace('refs/remotes/', '') || ''}
</p> </p>
</div> </div>

4
packages/ui/src/routes/repo/[projectId]/RenderedLine.svelte
View File

@ -46,7 +46,7 @@
<button <button
disabled={!selectable} disabled={!selectable}
on:click={() => dispatch('selected', !selected)} on:click={() => dispatch('selected', !selected)}
class="shrink-0 select-none border-r px-0.5 text-right text-xs text-light-600 dark:text-light-300 {bgColor}" class="text-color-4 border-color-4 shrink-0 select-none border-r px-0.5 text-right text-xs {bgColor}"
style:min-width={minWidth + 'rem'} style:min-width={minWidth + 'rem'}
> >
{line.beforeLineNumber || ''} {line.beforeLineNumber || ''}
@ -54,7 +54,7 @@
<button <button
disabled={!selectable} disabled={!selectable}
on:click={() => dispatch('selected', !selected)} on:click={() => dispatch('selected', !selected)}
class="text-color-4 shrink-0 select-none border-r border-light-400 px-0.5 text-right text-xs dark:border-dark-400 {bgColor}" class="text-color-4 border-color-4 shrink-0 select-none border-r px-0.5 text-right text-xs {bgColor}"
style:min-width={minWidth + 'rem'} style:min-width={minWidth + 'rem'}
> >
{line.afterLineNumber || ''} {line.afterLineNumber || ''}

4
packages/ui/src/routes/repo/[projectId]/Tabs.svelte
View File

@ -41,8 +41,8 @@
} }
</script> </script>
<div class="border-b border-t border-light-300 bg-light-50 dark:border-dark-500 dark:bg-dark-800"> <div class="bg-color-4">
<div class="text-color-3 flex w-full border-b border-light-200 dark:border-dark-500"> <div class="text-color-3 border-color-4 flex w-full border-b">
{#each items as item} {#each items as item}
<button <button
class:text-color-1={activeTabValue == item.name} class:text-color-1={activeTabValue == item.name}

16
packages/ui/src/routes/repo/[projectId]/Tray.svelte
View File

@ -120,7 +120,7 @@
{projectId} {projectId}
/> />
<div <div
class="bg-color-5 z-30 flex w-80 shrink-0 flex-col border-r border-light-200 dark:border-dark-600" class="bg-color-5 border-color-4 z-30 flex w-80 shrink-0 flex-col border-r"
style:width={$userSettings.trayWidth ? `${$userSettings.trayWidth}px` : null} style:width={$userSettings.trayWidth ? `${$userSettings.trayWidth}px` : null}
role="menu" role="menu"
on:click|stopPropagation on:click|stopPropagation
@ -185,7 +185,7 @@
</div> </div>
<!-- Your branches --> <!-- Your branches -->
<div <div
class="bg-color-4 flex items-center justify-between border-b border-t border-light-300 px-2 py-1 pr-1 dark:border-dark-600" class="bg-color-4 border-color-5 flex items-center justify-between border-b border-t px-2 py-1 pr-1"
> >
<div class="font-bold">Stashed branches</div> <div class="font-bold">Stashed branches</div>
<div class="flex h-4 w-4 justify-around"> <div class="flex h-4 w-4 justify-around">
@ -227,7 +227,7 @@
on:click={() => select(branch, i)} on:click={() => select(branch, i)}
on:keypress|capture={() => select(branch, i)} on:keypress|capture={() => select(branch, i)}
transition:slide={{ duration: 250 }} transition:slide={{ duration: 250 }}
class="group border-b border-light-200 p-2 pr-0 -outline-offset-2 outline-blue-200 last:border-b focus-within:outline-2 dark:border-dark-600" class="border-color-4 group border-b p-2 pr-0 -outline-offset-2 outline-blue-200 last:border-b focus-within:outline-2"
class:bg-light-50={$selectedItem == branch && peekTrayExpanded} class:bg-light-50={$selectedItem == branch && peekTrayExpanded}
class:dark:bg-zinc-700={$selectedItem == branch && peekTrayExpanded} class:dark:bg-zinc-700={$selectedItem == branch && peekTrayExpanded}
> >
@ -307,7 +307,7 @@
<!-- Remote branches --> <!-- Remote branches -->
<div <div
class="bg-color-4 flex items-center justify-between border-b border-t border-light-300 px-2 py-1 pr-1 dark:border-dark-600" class="bg-color-4 border-color-5 flex items-center justify-between border-b border-t px-2 py-1 pr-1"
> >
<div class="flex flex-row place-items-center space-x-2"> <div class="flex flex-row place-items-center space-x-2">
<div class="text-color-2 font-bold">Remote Branches</div> <div class="text-color-2 font-bold">Remote Branches</div>
@ -330,7 +330,11 @@
</div> </div>
</div> </div>
<div bind:this={rbSection} use:accordion={remoteBranchesOpen} class="relative flex-grow"> <div
bind:this={rbSection}
use:accordion={remoteBranchesOpen}
class="border-color-5 relative flex-grow border-b"
>
<div <div
bind:this={rbViewport} bind:this={rbViewport}
on:scroll={onScroll} on:scroll={onScroll}
@ -362,7 +366,7 @@
on:click={() => select(branch, i)} on:click={() => select(branch, i)}
on:keypress={() => select(branch, i)} on:keypress={() => select(branch, i)}
class:bg-color-4={$selectedItem == branch && peekTrayExpanded} class:bg-color-4={$selectedItem == branch && peekTrayExpanded}
class="flex flex-col justify-between gap-1 border-b border-light-200 px-2 py-1 pt-2 -outline-offset-2 outline-blue-200 last:border-b focus:outline-2 dark:border-dark-600" class="border-color-4 flex flex-col justify-between gap-1 border-b px-2 py-1 pt-2 -outline-offset-2 outline-blue-200 last:border-b focus:outline-2"
> >
<div class="flex flex-row items-center gap-x-2 pr-1"> <div class="flex flex-row items-center gap-x-2 pr-1">
<div class="text-color-3"> <div class="text-color-3">

44
packages/ui/src/styles/main.postcss
View File

@ -381,6 +381,12 @@ input[type='checkbox'].large {
--text-color-2: #555555; --text-color-2: #555555;
--text-color-3: #777777; --text-color-3: #777777;
--text-color-4: #999999; --text-color-4: #999999;
--border-color-5: #fafafa;
--border-color-4: #eaeaea;
--border-color-3: #c4c4c7;
--border-color-2: #adadae;
--border-color-1: #949498;
} }
:root.dark { :root.dark {
@ -394,9 +400,15 @@ input[type='checkbox'].large {
--text-color-2: #eeeeee; --text-color-2: #eeeeee;
--text-color-3: #aaaaaa; --text-color-3: #aaaaaa;
--text-color-4: #888888; --text-color-4: #888888;
--border-color-1: #d4d4d8;
--border-color-2: #a1a1aa;
--border-color-3: #71717a;
--border-color-4: #585858;
--border-color-5: #484848;
} }
@layer utilities { @layer base {
/* Background colors */ /* Background colors */
.bg-color-1 { .bg-color-1 {
background-color: var(--background-1); background-color: var(--background-1);
@ -427,4 +439,34 @@ input[type='checkbox'].large {
.text-color-4 { .text-color-4 {
color: var(--text-color-4); color: var(--text-color-4);
} }
/* Border colors */
.border-color-1 {
border-color: var(--border-color-1);
}
.border-color-2 {
border-color: var(--border-color-2);
}
.border-color-3 {
border-color: var(--border-color-3);
}
.border-color-4 {
border-color: var(--border-color-4);
}
.border-color-5 {
border-color: var(--border-color-5);
}
}
/**
* When using native drag & drop :hover events do not work, and per-component styles
* are processed independently by svelte/postcss, so we don't have access to the colors
* from there.
*/
.new-dz-hover .new-dz-marker {
@apply border-color-2 text-color-2;
}
.lane-dz-hover .lane-dz-marker {
@apply text-color-3 outline-light-600;
} }