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>
{: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}
<div class="space-y-2 rounded-md p-4">
<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"
>
<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.
</p>
<!-- select menu of remoteBranches -->
{#if remoteBranchNames.length === 0}
<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
virtual branches, please push your code to a remote branch to use as a base.
<a
@ -235,7 +235,7 @@
{/if}
{/each}
</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"
or "origin/main".
</p>
@ -249,32 +249,32 @@
<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">
<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
them at the same time.
</p>
<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.
Everything that you do is on a virtual branch, automatically.
</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
something like "origin/master".
</p>
<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
that branch, only the parts that are owned by that branch are actually recorded in the
commits on that branch.
</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,
push that branch to your remote with just the changes committed to that branch, not
everything in your working directory.
</p>
<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
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

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

@ -23,7 +23,7 @@
<div class="relative h-full max-h-full">
<div
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">
<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
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 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}
<!-- 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">
@ -227,7 +227,7 @@
bind:value={branch.name}
on:change={handleBranchNameChange}
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:click={(e) => e.currentTarget.select()}
/>
@ -373,30 +373,25 @@
{#if branch.files.length == 0}
{#if branch.commits.length == 0}
<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
>
<p>Nothing on this branch yet.</p>
{#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>
{/if}
</div>
{:else}
<!-- attention: these markers have custom css at the bottom of thise file -->
<div
class="no-changes text-color-3 rounded text-center font-mono dark:border-zinc-700"
data-dnd-ignore
>
<div class="no-changes text-color-3 rounded text-center font-mono" data-dnd-ignore>
No uncommitted changes on this branch
</div>
{/if}
{/if}
</div>
{#if localCommits.length > 0 || remoteCommits.length > 0}
<div
class="flex w-full flex-grow flex-col gap-2 border-t border-light-400 dark:border-dark-500"
>
<div class="flex w-full flex-grow flex-col gap-2">
{#if localCommits.length > 0}
<div
class="relative"
@ -405,7 +400,7 @@
>
<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"
style={remoteCommits.length == 0 ? 'height: calc();' : 'height: 100%;'}
style={localCommits.length == 0 ? 'height: calc();' : 'height: 100%;'}
/>
<div class="relative flex flex-col gap-2">
@ -439,9 +434,7 @@
animate:flip
>
<div class="ml-[0.4rem] mr-1.5">
<div
class="h-3 w-3 rounded-full border-2 border-light-500 bg-light-200 dark:border-dark-600 dark:bg-dark-1000"
/>
<div class="border-color-4 h-3 w-3 rounded-full border-2" />
</div>
<CommitCard
{commit}
@ -456,8 +449,7 @@
{#if remoteCommits.length > 0}
<div class="relative flex-grow">
<div
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"
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"
style="height: calc(100% - 1rem);"
/>
@ -574,10 +566,4 @@
:global(.lane-dz-hover .hover-text) {
@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>

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

@ -38,7 +38,7 @@
>
<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>
<PopupMenuItem on:click={() => branchController.createBranch({ order })}>

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

@ -52,9 +52,7 @@
}
</script>
<div
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="text-color-2 bg-color-5 border-color-4 w-full truncate rounded border p-2 text-left">
<div class="mb-1 flex justify-between">
<div class="truncate">
{#if url}
@ -123,10 +121,8 @@
<div class="flex flex-col rounded px-2">
{#each sections as section}
{#if 'hunk' in section}
<div
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 bg-white dark:bg-dark-900">
<div class="border-color-4 my-1 flex w-full flex-col overflow-hidden rounded">
<div class="w-full overflow-hidden">
{#each section.subSections as subsection, sidx}
{#each subsection.lines.slice(0, subsection.expanded ? subsection.lines.length : 0) as line}
<RenderedLine
@ -138,14 +134,14 @@
{/each}
{#if !subsection.expanded}
<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 ||
(sidx > 0 && sidx < section.subSections.length - 1)}
class:border-b={sidx == 0 ||
(sidx > 0 && sidx < section.subSections.length - 1)}
>
<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)`}
>
<button
@ -166,7 +162,7 @@
{/if}
</button>
</div>
<div class="flex-grow bg-white dark:bg-dark-900" />
<div class="bg-color-4 flex-grow" />
</div>
{/if}
{/each}

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

@ -85,10 +85,7 @@
}
</script>
<div
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 }}
>
<div class="bg-color-3 flex w-full flex-col" transition:slide={{ duration: 150 }}>
{#if annotateCommits}
<div class="bg-blue-400 p-2 text-sm text-white">
GitButler will be the committer of this commit.
@ -104,7 +101,7 @@
<textarea
bind:value={commitMessage}
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"
rows={messageRows}
required
@ -124,7 +121,7 @@
loading={isGeneratingCommigMessage}
on:click={() => generateCommitMessage(branch.files)}
>
<span class="text-light-700">Generate message</span>
<span class="text-4">Generate message</span>
</Button>
{:else}
<Tooltip

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

@ -103,7 +103,7 @@
class:opacity-80={isFileLocked}
>
<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
class="flex cursor-default pl-2"
@ -183,7 +183,7 @@
{/await}
{/if}
<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
draggable={!section.hunk.locked && !readonly}
@ -221,14 +221,14 @@
{/each}
{#if !subsection.expanded}
<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 ||
(sidx > 0 && sidx < section.subSections.length - 1)}
class:border-b={sidx == 0 ||
(sidx > 0 && sidx < section.subSections.length - 1)}
>
<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)`}
>
<button
@ -259,7 +259,7 @@
{:else}
{#if section.expanded}
<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"
on:dblclick
>

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

@ -125,7 +125,7 @@
>
{node.name}
</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} />
</div>
<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}>
<div class="w-3 shrink-0 text-center">
{#if expanded}
<IconChevronDownSmall class="scale-90 text-light-600 dark:text-dark-200" />
<IconChevronDownSmall class="text-color-4 scale-90" />
{:else}
<IconChevronRightSmall class="scale-90 text-light-600 dark:text-dark-200" />
<IconChevronRightSmall class="text-color-4 scale-90" />
{/if}
</div>
<div class="w-4 shrink-0 pl-1 text-center">
@ -173,7 +173,7 @@
<div class="flex">
<div class="flex">
<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>
<ul class="w-full overflow-hidden">

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

@ -29,7 +29,7 @@
</button>
</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
</div>
@ -47,10 +47,4 @@
* 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.
*/
:global(.new-dz-hover .new-dz-marker) {
@apply border-light-600;
}
:global(.dark .new-dz-hover .new-dz-marker) {
@apply border-dark-200;
}
</style>

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

@ -18,6 +18,6 @@
bind:value={notes}
on:change={handleUpdateNotes}
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)"
/>

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

@ -57,7 +57,7 @@
style:width={`${$userSettings.peekTrayWidth}px`}
style:translate={`${offsetLeft}px`}
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:keydown|stopPropagation
role="menu"
@ -89,7 +89,7 @@
{/if}
</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"
tabindex="0"
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">
{branch.name.replace('refs/remotes/', '').replace('origin/', '').replace('refs/heads/', '')}
</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/', '') || ''}
</p>
</div>

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

@ -46,7 +46,7 @@
<button
disabled={!selectable}
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'}
>
{line.beforeLineNumber || ''}
@ -54,7 +54,7 @@
<button
disabled={!selectable}
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'}
>
{line.afterLineNumber || ''}

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

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

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

@ -120,7 +120,7 @@
{projectId}
/>
<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}
role="menu"
on:click|stopPropagation
@ -185,7 +185,7 @@
</div>
<!-- Your branches -->
<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="flex h-4 w-4 justify-around">
@ -227,7 +227,7 @@
on:click={() => select(branch, i)}
on:keypress|capture={() => select(branch, i)}
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:dark:bg-zinc-700={$selectedItem == branch && peekTrayExpanded}
>
@ -307,7 +307,7 @@
<!-- Remote branches -->
<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="text-color-2 font-bold">Remote Branches</div>
@ -330,7 +330,11 @@
</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
bind:this={rbViewport}
on:scroll={onScroll}
@ -362,7 +366,7 @@
on:click={() => select(branch, i)}
on:keypress={() => select(branch, i)}
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="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-3: #777777;
--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 {
@ -394,9 +400,15 @@ input[type='checkbox'].large {
--text-color-2: #eeeeee;
--text-color-3: #aaaaaa;
--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 */
.bg-color-1 {
background-color: var(--background-1);
@ -427,4 +439,34 @@ input[type='checkbox'].large {
.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;
}