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

Refined UI aesthetics with CSS class adjustments

Browse Source 
The modification to the codebase primarily included updates to CSS classes associated with various UI elements. Changes appeared to address various aspects of the UI such as spacing, colors, and fonts to improve visual consistency and aesthetics. 

Key updates encompass:
- Altered CSS classes for "div" elements to amplify color contrasts in both light and dark modes.
- Reduced left padding and margins in several sections to enhance alignment and space utilization.
- Downscaled the text size and minimized padding in certain areas to augments space use and maintain clean visuals.
- Amended spacing between flex items and reduced padding within div elements to improve overall layout structure. 

With these adjustments, the finalized UI should result in a cleaner and more streamlined user experience
This commit is contained in:
Kiril Videlov 2023-08-03 12:19:23 +02:00 committed by Kiril Videlov
parent 1d4ed6e628
commit edea94e85b
6 changed files with 39 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -61,7 +61,9 @@
}}
/>
<div class="flex w-full flex-col overflow-hidden">
<div class="lane-scroll flex flex-grow overflow-x-auto overflow-y-hidden overscroll-y-none">
<div
class="lane-scroll flex flex-grow gap-1 overflow-x-auto overflow-y-hidden overscroll-y-none bg-light-300 dark:bg-dark-1100"
>
{#if base}
<UpstreamBranchLane {base} />
{/if}

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

@ -35,7 +35,7 @@
<div
bind:this={dropZone}
id="branch-lanes"
class="flex flex-shrink flex-grow items-start bg-light-150 dark:bg-dark-1000"
class="flex flex-shrink flex-grow items-start gap-1 bg-light-300 dark:bg-dark-1100"
role="group"
use:dzHighlight={{ type: dzType }}
on:dragover={(e) => {

31
src/routes/repo/[projectId]/BranchLane.svelte
View File

@ -193,8 +193,8 @@
<div
draggable="true"
class:w-full={maximized}
class:w-96={!maximized}
class="flex h-full min-w-[24rem] max-w-[120ch] shrink-0 cursor-default snap-center flex-col bg-light-150 transition-width dark:bg-dark-1000 dark:text-dark-100"
class:w-80={!maximized}
class="flex h-full max-w-[120ch] shrink-0 cursor-default snap-center flex-col border-l border-r border-light-400 bg-light-150 transition-width dark:border-dark-600 dark:bg-dark-1000 dark:text-dark-100"
role="group"
use:dzHighlight={{ type: dzType, hover: hoverClass, active: 'drop-zone-active' }}
on:dragstart
@ -222,7 +222,7 @@
class="flex bg-light-200 text-light-900 dark:bg-dark-800 dark:font-normal dark:text-dark-100"
>
<div class="flex shrink-0 flex-grow flex-col border-b border-light-400 dark:border-dark-600">
<div class="flex w-full items-center py-1 pl-2 pr-4">
<div class="flex w-full items-center px-1.5 py-1">
<button
bind:this={meatballButton}
class="h-8 w-8 flex-grow-0 p-2 text-light-600 transition-colors hover:bg-zinc-300 dark:text-dark-200 dark:hover:bg-zinc-800"
@ -338,9 +338,6 @@
</div>
{/if}
</div>
<div
class="w-3 shrink-0 border-l border-r border-light-400 bg-light-300 dark:border-dark-600 dark:bg-dark-500"
/>
</div>
<div class="relative flex flex-grow overflow-y-hidden">
@ -416,13 +413,13 @@
transition:slide={{ duration: 150 }}
>
<div
class="dark:form-dark-600 absolute top-4 ml-[1.0625rem] 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(100% - 1rem);' : 'height: 100%;'}
/>
<div class="relative flex flex-col gap-2">
<div
class="dark:form-dark-600 absolute top-4 ml-[1.0625rem] h-px w-6 bg-gradient-to-r from-light-400 via-light-400 via-10% dark:from-dark-600 dark:via-dark-600"
class="dark:form-dark-600 absolute top-4 ml-[0.75rem] h-px w-6 bg-gradient-to-r from-light-400 via-light-400 via-10% dark:from-dark-600 dark:via-dark-600"
/>
<div class="ml-10 mr-2 flex items-center py-2">
<div
@ -444,12 +441,12 @@
{#each localCommits as commit (commit.id)}
<div
class="flex w-full items-center pb-2 pr-2"
class="flex w-full items-center pb-2 pr-1.5"
in:receive={{ key: commit.id }}
out:send={{ key: commit.id }}
animate:flip
>
<div class="ml-[0.875rem] mr-2">
<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"
/>
@ -463,14 +460,14 @@
{#if remoteCommits.length > 0}
<div class="relative flex-grow">
<div
class="dark:form-dark-600 absolute top-4 ml-[1.0625rem]
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);"
/>
<div class="relative flex flex-col gap-2">
<div
class="dark:form-dark-600 absolute top-4 ml-[1.0625rem] h-px w-6 bg-gradient-to-r from-light-600 via-light-600 via-10% dark:from-dark-400 dark:via-dark-400"
class="dark:form-dark-600 absolute top-4 ml-[0.75rem] h-px w-6 bg-gradient-to-r from-light-600 via-light-600 via-10% dark:from-dark-400 dark:via-dark-400"
/>
<div class="ml-12 flex items-center py-2 font-mono text-sm">
@ -485,12 +482,12 @@
{#each remoteCommits as commit (commit.id)}
<div
class="flex w-full items-center pb-2 pr-2"
class="flex w-full items-center pb-2 pr-1.5"
in:receive={{ key: commit.id }}
out:send={{ key: commit.id }}
animate:flip
>
<div class="ml-3 mr-2">
<div class="ml-[0.4rem] mr-1.5">
<div
class="h-3 w-3 rounded-full border-2 border-light-600 bg-light-600 dark:border-dark-400 dark:bg-dark-400"
class:bg-light-500={commit.isRemote}
@ -507,11 +504,7 @@
{/if}
</div>
</div>
<div
class="w-3 shrink-0 border-l border-r border-light-400 bg-light-300 dark:border-dark-600 dark:bg-dark-500"
>
<Scrollbar {viewport} {contents} width="0.75rem" opacity="0.1" />
</div>
<Scrollbar {viewport} {contents} width="0.4rem" />
</div>
</div>

16
src/routes/repo/[projectId]/FileCardNext.svelte
View File

@ -62,10 +62,10 @@
$: maxLineNumber = sections[sections.length - 1]?.maxLineNumber;
function getGutterMinWidth(max: number) {
if (max >= 1000) return 2.25;
if (max >= 100) return 1.75;
if (max >= 10) return 1.5;
return 1.25;
if (max >= 1000) return 2;
if (max >= 100) return 1.5;
if (max >= 10) return 1.25;
return 1;
}
$: minWidth = getGutterMinWidth(maxLineNumber);
@ -155,7 +155,7 @@
{#if expanded}
<div
class="hunk-change-container flex flex-col rounded pl-2 pr-3"
class="hunk-change-container flex flex-col rounded px-1.5"
transition:slide={{ duration: 150 }}
>
{#each sections as section}
@ -212,11 +212,11 @@
>
<div
class="border-r border-light-200 bg-light-25 text-center text-light-500 hover:bg-light-700 hover:text-white dark:border-dark-400 dark:bg-dark-500 dark:text-light-600 dark:hover:bg-dark-400 dark:hover:text-black"
style:min-width={`${2 * minWidth}rem`}
style:min-width={`calc(${2 * minWidth}rem - 1px)`}
>
<button
class="flex justify-center py-0.5 text-sm"
style:width={`${2 * minWidth}rem`}
style:width={`calc(${2 * minWidth}rem - 1px)`}
on:click={() => {
if ('expanded' in subsection) {
subsection.expanded = true;
@ -262,7 +262,7 @@
</div>
{/if}
{#if !section.expanded}
<div style:width={`${2 * minWidth}rem`} class="flex justify-center">
<div style:width={`calc(${2 * minWidth}rem - 1px)`} class="flex justify-center">
<button
class="px-2 py-1.5 text-sm text-light-600 hover:text-light-700 dark:text-dark-200 dark:hover:text-dark-100"
on:click={() => {

8
src/routes/repo/[projectId]/RenderedLine.svelte
View File

@ -29,24 +29,24 @@
</script>
<div
class="flex w-full bg-light-50 pl-[1px] font-mono text-sm dark:bg-dark-700"
class="flex w-full bg-light-50 font-mono text-sm dark:bg-dark-700"
role="group"
on:contextmenu|preventDefault
>
<div
class="shrink-0 select-none border-r border-light-400 bg-light-50 px-1 text-right text-light-600 dark:border-dark-400 dark:bg-dark-700 dark:text-light-300"
class="shrink-0 select-none border-r border-light-400 bg-light-50 px-0.5 text-right text-xs text-light-600 dark:border-dark-400 dark:bg-dark-700 dark:text-light-300"
style:min-width={minWidth + 'rem'}
>
{line.beforeLineNumber || ''}
</div>
<div
class="shrink-0 select-none border-r border-light-400 bg-light-50 px-1 text-right text-light-600 dark:border-dark-400 dark:bg-dark-700 dark:text-light-300"
class="shrink-0 select-none border-r border-light-400 bg-light-50 px-0.5 text-right text-xs text-light-600 dark:border-dark-400 dark:bg-dark-700 dark:text-light-300"
style:min-width={minWidth + 'rem'}
>
{line.afterLineNumber || ''}
</div>
<div
class="flex-grow overflow-hidden whitespace-pre pl-1"
class="flex-grow overflow-hidden whitespace-pre pl-0.5"
class:diff-line-deletion={sectionType === SectionType.RemovedLines}
class:diff-line-addition={sectionType === SectionType.AddedLines}
>

27
src/routes/repo/[projectId]/UpstreamBranchLane.svelte
View File

@ -24,16 +24,20 @@
<div
class="flex h-full shrink-0 cursor-default snap-center flex-col overflow-y-hidden
overscroll-y-none border-light-600
bg-light-150
overscroll-y-none
border-r border-light-400 bg-light-150
dark:border-l
dark:border-dark-600 dark:border-r-light-800 dark:bg-dark-700 dark:text-dark-100"
dark:border-dark-600
dark:border-r-light-800 dark:bg-dark-700 dark:text-dark-100"
role="group"
>
<div class="flex w-full {expanded ? 'bg-purple-300' : 'bg-light-200'} dark:bg-dark-800">
<div
class="flex w-full {expanded
? 'bg-purple-300 dark:bg-purple-600'
: 'bg-light-200 dark:bg-dark-800'}"
>
<div
class="flex flex-grow items-center border-b border-light-500 pl-1 dark:border-dark-500"
class:border-r={!expanded}
class:pr-1={!expanded}
>
<Tooltip
@ -71,18 +75,13 @@
</div>
{/if}
</div>
{#if expanded}
<div
class="h-full w-3 shrink-0 border-l border-r border-light-400 bg-light-300 dark:border-dark-600 dark:bg-dark-500"
/>
{/if}
</div>
<div class="relative flex flex-grow justify-center overflow-hidden">
<div class="flex-grow" />
{#if expanded}
<div
class="relative flex h-full w-60 shrink-0 flex-grow cursor-default snap-center flex-col overflow-y-hidden overscroll-y-none border-light-300 bg-light-200 pr-2 dark:border-l dark:border-dark-600 dark:border-r-light-800 dark:bg-dark-700 dark:text-dark-100"
class="relative flex h-full w-60 shrink-0 flex-grow cursor-default snap-center flex-col overflow-y-hidden overscroll-y-none border-light-300 bg-light-200 pr-1.5 dark:border-l dark:border-dark-600 dark:border-r-light-800 dark:bg-dark-700 dark:text-dark-100"
>
<div
bind:this={viewport}
@ -131,11 +130,7 @@
</div>
</div>
</div>
<div
class="w-3 shrink-0 border-l border-r border-light-400 bg-light-300 dark:border-dark-500 dark:bg-dark-500"
>
<Scrollbar {viewport} {contents} width="0.75rem" opacity="0.1" />
</div>
<Scrollbar {viewport} {contents} width="0.4rem" />
{:else}
<div class="w-5" />
{/if}