Small visual tweeks to look more like designs

This commit is contained in:
idonahue 2023-06-14 18:32:48 +02:00
parent 61a83f2386
commit 9d8e10834b
5 changed files with 8 additions and 8 deletions

View File

@ -76,7 +76,7 @@
</header> </header>
<ul class="all-files-changed flex flex-col rounded pl-3"> <ul class="all-files-changed flex flex-col rounded pl-3">
{#each Object.entries(fileDeltas) as [filepath, deltas]} {#each Object.entries(fileDeltas) as [filepath, deltas]}
<li class="changed-file flex items-center justify-between gap-4 "> <li class="changed-file flex items-center justify-between gap-4 bg-[#212121] ">
<a <a
class="file-name max-w- flex w-full max-w-[360px] overflow-auto py-2 font-mono hover:underline" class="file-name max-w- flex w-full max-w-[360px] overflow-auto py-2 font-mono hover:underline"
href="/projects/{$page.params.projectId}/player/{format( href="/projects/{$page.params.projectId}/player/{format(

View File

@ -42,7 +42,7 @@
</script> </script>
<section <section
class="flex h-full w-full gap-x-4 overflow-x-scroll p-2" class="swimlane-container flex h-full w-full gap-x-4 overflow-x-scroll p-4 bg-zinc-900"
use:dndzone={{ use:dndzone={{
items: branches, items: branches,
flipDurationMs, flipDurationMs,
@ -54,7 +54,7 @@
> >
{#each branches.filter((c) => c.active) as { id, name, files } (id)} {#each branches.filter((c) => c.active) as { id, name, files } (id)}
<div <div
class="flex h-full w-96 rounded-lg border border-zinc-700 bg-zinc-900" class="swimlane flex h-full w-96 rounded-lg border border-zinc-700 bg-zinc-900"
animate:flip={{ duration: flipDurationMs }} animate:flip={{ duration: flipDurationMs }}
> >
<Lane {name} bind:files on:empty={handleEmpty} /> <Lane {name} bind:files on:empty={handleEmpty} />

View File

@ -42,7 +42,7 @@
} }
</script> </script>
<div class="flex h-full w-full flex-col"> <div class="flex h-full w-full flex-col bg-[#2C2C2C]">
<div class="mb-4 flex items-center justify-center border-b border-zinc-700 py-4 font-bold"> <div class="mb-4 flex items-center justify-center border-b border-zinc-700 py-4 font-bold">
{name} {name}
</div> </div>

View File

@ -22,7 +22,7 @@
<div <div
use:animateHeight use:animateHeight
class="flex w-full flex-col justify-center gap-2 overflow-hidden rounded border border-dotted border-zinc-600 bg-zinc-900 p-2" class="changed-file flex w-full flex-col justify-center gap-2 overflow-hidden rounded border-[0.5px] border-[#393939] bg-[#212121] p-2"
> >
<button <button
class="flex items-center gap-2 font-bold text-zinc-200" class="flex items-center gap-2 font-bold text-zinc-200"
@ -41,7 +41,7 @@
</button> </button>
<div <div
class="flex flex-col gap-1" class="flex flex-col gap-2"
use:dndzone={{ use:dndzone={{
items: file.hunks, items: file.hunks,
flipDurationMs, flipDurationMs,
@ -57,7 +57,7 @@
{#each file.hunks || [] as hunk (hunk.id)} {#each file.hunks || [] as hunk (hunk.id)}
<div <div
animate:flip={{ duration: flipDurationMs }} animate:flip={{ duration: flipDurationMs }}
class="w-full rounded border border-zinc-500 bg-zinc-600 p-1" class="changed-hunk w-full rounded border-t-[0.5px] border-t-[#4C4C4C] border-b-[0.5px] border-b-[#252525] bg-[#2C2C2C] p-1"
> >
<div class="w-full text-ellipsis"> <div class="w-full text-ellipsis">
{hunk.name} {hunk.name}

View File

@ -6,7 +6,7 @@
export let branches: Branch[]; export let branches: Branch[];
</script> </script>
<section class="flex h-full w-64 flex-col gap-y-2 border-r border-zinc-700 bg-[#2F2F33] p-4"> <section class="flex h-full w-64 flex-col gap-y-2 border-r border-zinc-700 bg-[#2C2C2C] p-4">
<div class="flex flex-col gap-y-2 py-2"> <div class="flex flex-col gap-y-2 py-2">
{#each branches as branch (branch.id)} {#each branches as branch (branch.id)}
<div animate:flip={{ duration: 300 }} class="rounded border border-zinc-600 bg-zinc-700 p-2"> <div animate:flip={{ duration: 300 }} class="rounded border border-zinc-600 bg-zinc-700 p-2">