gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-11-29 14:25:45 +03:00
Code Issues Packages Projects Releases Wiki Activity

Various css color related UI fixes

Browse Source
This commit is contained in:
Mattias Granlund 2023-09-14 13:39:47 +02:00
parent 2152d3d638
commit 3cd9bcb290
5 changed files with 21 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/ui/src/routes/+layout.svelte
View File

@ -113,7 +113,7 @@
<div class="flex h-full flex-col">
<header
data-tauri-drag-region
class="bg-color-3 flex h-8 flex-shrink-0 flex-row items-center gap-x-6 border-b border-light-300 dark:border-dark-500"
class="bg-color-3 border-color-4 flex h-8 flex-shrink-0 flex-row items-center gap-x-6 border-b"
style="z-index: 9999;"
>
<div class="breadcrumb-project-container ml-[80px]">
@ -132,7 +132,7 @@
</div>
</header>
<div class="flex flex-grow overflow-y-auto">
<div class="flex flex-grow overflow-y-auto overscroll-none">
<slot />
</div>
@ -141,9 +141,9 @@
<LinkProjectModal bind:this={linkProjectModal} {cloud} {projects} />
<ShareIssueModal bind:this={shareIssueModal} user={$user} {cloud} />
<footer class="w-full text-sm font-medium text-light-700 dark:text-dark-100">
<footer class="text-color-3 w-full text-sm font-medium">
<div
class="bg-color-3 flex h-[1.375rem] flex-shrink-0 select-none items-center border-t border-light-300 dark:border-dark-500"
class="bg-color-3 border-color-4 flex h-[1.375rem] flex-shrink-0 select-none items-center border-t"
>
<div class="mx-4 flex w-full flex-row items-center justify-between space-x-2 pb-[1px]">
<div>

20
packages/ui/src/routes/+page.svelte
View File

@ -13,11 +13,9 @@
{:then}
<div class="bg-color-2 flex h-full w-full flex-col p-8">
<div class="mb-8 flex flex-row justify-between">
<div class="text-light-900 dark:text-dark-100">
<div class="text-color-2">
<h1 class="mb-2 text-2xl">Your projects</h1>
<p class="text-lg text-light-700 dark:text-dark-200">
All the projects tracked by GitButler
</p>
<p class="text-color-3 text-lg">All the projects tracked by GitButler</p>
</div>
{#if $projects.length > 0}
<div class="self-start">
@ -33,7 +31,7 @@
</div>
{#if $projects.length == 0}
<div
class="mx-auto flex w-full flex-grow items-center justify-center rounded border border-light-400 bg-light-200 p-8 dark:border-dark-500 dark:bg-dark-1000"
class="border-color-3 bg-color-2 mx-auto flex w-full flex-grow items-center justify-center rounded-lg border p-8"
>
<div class="inline-flex w-96 flex-col items-center gap-y-4 text-center">
<svg
@ -66,21 +64,19 @@
<div class="flex flex-wrap gap-4">
{#each $projects as project}
<a
class="bg-color-5 w-96 overflow-hidden rounded-lg text-light-900 shadow dark:border dark:border-dark-600 dark:text-light-200"
class="bg-color-5 text-color-2 dark:border-color-5 w-96 overflow-hidden rounded-lg shadow dark:border dark:shadow-none"
href="/repo/{project.id}/"
>
<div class="p-4">
<h1 class="text-lg text-light-900 dark:text-dark-100">
<div class="text-color-2 p-4">
<h1 class="text-lg">
{project.title}
</h1>
<p class="text-light-700 dark:text-dark-200">
<p>
{project.path}
</p>
</div>
<div
class="bg-color-4 flex flex-row items-center gap-x-2 px-4 py-2 text-light-900 dark:text-dark-100"
>
<div class="bg-color-4 flex flex-row items-center gap-x-2 px-4 py-2">
{#if project.api}
<div class="h-2 w-2 rounded-full bg-green-600" />
<div>Backed-up</div>

6
packages/ui/src/routes/ShareIssueModal.svelte
View File

@ -79,7 +79,7 @@
<Modal bind:this={modal} title="Share with GitButler team for review" on:close={onClose}>
<div class="flex flex-col gap-4">
<p>
<p class="text-color-3">
If you are having trouble, please share your project and logs with the Gitbutler team. We will
review it for you and help identify how we can help resolve the issue.
</p>
@ -98,7 +98,7 @@
{/if}
<div class="flex flex-col gap-1">
<label for="comments" class="text-xl font-semibold">Comments</label>
<label for="comments">Comments</label>
<textarea
placeholder="Provide any steps necessary to reproduce the problem."
@ -114,7 +114,7 @@
<div class="flex flex-col gap-1">
<span class="text-xl font-semibold"> Share logs </span>
<span class="text-sm text-text-subdued">
<span class="text-color-3 text-sm">
We personally ensure all information you share with us will be reviewed internally only and
discarded post-resolution
</span>

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

@ -49,7 +49,7 @@
<div
bind:this={dropZone}
id="branch-lanes"
class="bg-color-1 flex flex-shrink flex-grow items-start"
class="bg-color-2 flex flex-shrink flex-grow items-start"
role="group"
use:dzHighlight={{ type: dzType, active: 'board-dz-active', hover: 'board-dz-hover' }}
on:dragover={(e) => {

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

@ -382,11 +382,11 @@ input[type='checkbox'].large {
--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;
--border-color-2: #adadae;
--border-color-3: #c4c4c7;
--border-color-4: #e6e6e8;
--border-color-5: #fafafa;
}
:root.dark {
@ -404,7 +404,7 @@ input[type='checkbox'].large {
--border-color-1: #d4d4d8;
--border-color-2: #a1a1aa;
--border-color-3: #71717a;
--border-color-4: #585858;
--border-color-4: #484848;
--border-color-5: #484848;
}
@ -441,7 +441,6 @@ input[type='checkbox'].large {
}
/* Border colors */
.border-color-1 {
border-color: var(--border-color-1);
}