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

Fixed buttons and made them pretty again

Browse Source
This commit is contained in:
Ian Donahue 2023-04-03 17:01:56 +02:00
parent 5426f1db1d
commit a8e4c4c692
2 changed files with 37 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/lib/components/Button/Button.svelte
View File

@ -31,7 +31,7 @@
<IconLoading class="h-[16px] w-[16px] animate-spin" />
<slot />
{:else}
<div class="items-around absolute flex h-full w-full justify-center">
<div class="items-around absolute flex w-full justify-center">
<IconLoading class="h-[16px] w-[16px] animate-spin" />
</div>
<div class="opacity-0">
@ -61,7 +61,7 @@
<IconLoading class="h-[16px] w-[16px] animate-spin" />
<slot />
{:else}
<div class="items-around absolute flex h-full w-full justify-center">
<div class="items-around absolute flex w-full justify-center">
<IconLoading class="h-[16px] w-[16px] animate-spin" />
</div>
<div class="opacity-0">
@ -78,7 +78,7 @@
<style lang="postcss">
a,
button {
@apply relative flex w-fit cursor-pointer justify-center gap-[10px] whitespace-nowrap rounded text-base font-medium transition ease-in-out hover:underline;
@apply relative flex items-center w-fit cursor-pointer justify-center gap-[10px] whitespace-nowrap rounded text-base font-medium transition ease-in-out hover:underline;
text-underline-offset: 3px;
}
@ -92,23 +92,29 @@
@apply bg-[#FFFFFF1A]/10;
}
.basic.filled {
@apply border-transparent bg-zinc-500;
@apply bg-zinc-500;
}
.basic.filled:hover {
@apply bg-zinc-600;
}
.basic, .primary, .destructive {
line-height: 20px;
}
.primary {
@apply text-blue-500;
}
.primary.outlined {
@apply border-[#3662E3];
}
.primary.outlined:hover {
@apply bg-[#1C48C94D]/30;
}
.primary.filled {
@apply border-transparent bg-blue-600;
@apply bg-blue-600;
}
.primary.filled:hover {
@apply bg-[#1C48C9];
@ -124,7 +130,7 @@
@apply bg-[#E336364D]/30;
}
.destructive.filled {
@apply border-transparent bg-[#E33636];
@apply bg-[#E33636];
}
.destructive.filled:hover {
@apply bg-[#C91C1C];
@ -139,9 +145,17 @@
@apply opacity-40;
}
.filled {
border-top: 1px solid rgba(255, 255, 255, 0.2);
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
border-left: 1px solid rgba(255, 255, 255, 0);
border-right: 1px solid rgba(255, 255, 255, 0);
text-shadow: 0px 2px #00000021;
}
.filled,
.outlined {
@apply px-[16px] py-[10px] text-zinc-50 hover:no-underline;
@apply px-[16px] py-[7px] text-zinc-50 hover:no-underline;
}
.outlined {
@ -150,7 +164,7 @@
.filled.small,
.outlined.small {
@apply py-[4px];
@apply py-[1px];
}
.filled.long,

28
src/routes/projects/[projectId]/commit/+page.svelte
View File

@ -111,8 +111,8 @@
$: isCommitEnabled = summary.length > 0 && $statuses.filter(({ staged }) => staged).length > 0;
</script>
<div id="commit-page" class="flex h-full w-full gap-2 p-2">
<div>
<div id="commit-page" class="flex h-full w-full gap-2">
<div class="commit-panel-container border-r p-4 border-zinc-700">
<h1 class="px-2 py-1 text-xl font-bold">Commit</h1>
<form on:submit|preventDefault={onCommit} class="flex w-1/3 min-w-[500px] flex-col gap-4">
@ -172,7 +172,7 @@
<input
name="summary"
class="w-full rounded border border-zinc-600 bg-zinc-700 p-2 text-zinc-100"
class="w-full rounded border border-zinc-600 bg-zinc-700 p-2 text-zinc-100 ring-blue-600/30 focus:border-blue-600 "
disabled={isGeneratingCommitMessage || isCommitting}
type="text"
placeholder="Summary (required)"
@ -183,22 +183,13 @@
<textarea
name="description"
disabled={isGeneratingCommitMessage || isCommitting}
class="w-full rounded border border-zinc-600 bg-zinc-700 p-2 text-zinc-100"
class="w-full rounded border border-zinc-600 bg-zinc-700 p-2 text-zinc-100 focus:border-blue-600"
rows="10"
placeholder="Description (optional)"
bind:value={description}
/>
<div class="flex justify-between">
<Button
loading={isCommitting}
disabled={!isCommitEnabled || isGeneratingCommitMessage}
role="primary"
type="submit"
>
Commit changes
</Button>
{#if isGeneratingCommitMessage}
<div
class="flex items-center gap-1 rounded bg-gradient-to-b from-[#623871] to-[#502E5C] py-2 px-4 disabled:cursor-not-allowed disabled:opacity-50"
@ -230,6 +221,17 @@
✨ Generate commit message
</button>
{/if}
<Button
loading={isCommitting}
disabled={!isCommitEnabled || isGeneratingCommitMessage}
role="primary"
type="submit"
>
Commit changes
</Button>
</div>
</form>
</div>