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

Add border and text-shadow to Button; simplify button styles

Browse Source 
This commit modifies the styling of the Button component by adding a border and text-shadow to the .btn-base CSS class. It also simplifies button styles by removing unnecessary border declarations in the .btn-primary, .btn-primary:hover, and .btn-basic classes. Additionally, the commit removes the 'text-lg' class from buttons in several other components and replaces the 'border-gb-700' class with 'border-zinc-700' in the player layout component.

Changes:
- Add border and text-shadow to .btn-base class
- Remove unnecessary border declarations in Button component
- Remove 'text-lg' class from buttons in Commit.svelte, +page.svelte, and +layout.svelte
- Replace 'border-gb-700' with 'border-zinc-700' in +layout.svelte
This commit is contained in:
Ian Donahue 2023-03-30 20:17:49 +02:00 committed by Nikita Galaiko
parent 9b6a740832
commit e8bf77d604
5 changed files with 15 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -47,6 +47,11 @@ And the following optional props:
<style>
.btn-base {
@apply flex items-center justify-center rounded text-base text-zinc-50 shadow transition ease-in-out;
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;
}
.btn-base:disabled {
@apply opacity-40;
@ -54,11 +59,9 @@ And the following optional props:
/* Primary */
.btn-primary {
border: 1px solid #3662e3;
background: #3662e3;
}
.btn-primary:hover {
border: 1px solid #1c48c9;
background: #1c48c9;
@apply transition ease-in-out;
}
@ -75,7 +78,6 @@ And the following optional props:
/* Basic */
.btn-basic {
border: 1px solid #71717a;
background: #71717a;
@apply transition ease-in-out;
}

4
src/lib/components/CommandPalette/Commit.svelte
View File

@ -109,7 +109,7 @@
{#if isCommitting}
<div
class="flex gap-1 rounded bg-[#2563EB] py-2 px-4 text-lg disabled:cursor-not-allowed disabled:opacity-50"
class="flex gap-1 rounded bg-[#2563EB] py-2 px-4 disabled:cursor-not-allowed disabled:opacity-50"
>
<IconRotateClockwise class="h-5 w-5 animate-spin" />
<span>Comitting...</span>
@ -118,7 +118,7 @@
<button
disabled={!isCommitEnabled}
type="submit"
class="rounded bg-[#2563EB] py-2 px-4 text-lg disabled:cursor-not-allowed disabled:opacity-50"
class="rounded bg-[#2563EB] py-2 px-4 disabled:cursor-not-allowed disabled:opacity-50"
>
Commit changes
</button>

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

@ -188,7 +188,7 @@
<div class="flex justify-between">
{#if isCommitting}
<div
class="flex gap-1 rounded bg-[#2563EB] py-2 px-4 text-lg disabled:cursor-not-allowed disabled:opacity-50"
class="flex gap-1 rounded bg-[#2563EB] py-2 px-4 disabled:cursor-not-allowed disabled:opacity-50"
>
<IconRotateClockwise class="h-5 w-5 animate-spin" />
<span>Comitting...</span>
@ -197,7 +197,7 @@
<button
disabled={!isCommitEnabled || isGeneratingCommitMessage}
type="submit"
class="rounded bg-[#2563EB] py-2 px-4 text-lg disabled:cursor-not-allowed disabled:opacity-50"
class="rounded bg-[#2563EB] py-2 px-4 disabled:cursor-not-allowed disabled:opacity-50"
>
Commit changes
</button>
@ -205,7 +205,7 @@
{#if isGeneratingCommitMessage}
<div
class="flex items-center gap-1 rounded bg-gradient-to-b from-[#623871] to-[#502E5C] py-2 px-4 text-lg disabled:cursor-not-allowed disabled:opacity-50"
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"
>
<IconRotateClockwise class="h-5 w-5 animate-spin" />
<span>Generating commit message...</span>
@ -214,7 +214,7 @@
<button
type="button"
disabled={$user === undefined}
class="rounded bg-gradient-to-b from-[#623871] to-[#502E5C] py-2 px-4 text-lg disabled:cursor-not-allowed disabled:opacity-50"
class="rounded bg-gradient-to-b from-[#623871] to-[#502E5C] py-2 px-4 disabled:cursor-not-allowed disabled:opacity-50"
on:click|preventDefault={onGenerateCommitMessage}
>
✨ Generate commit message

4
src/routes/projects/[projectId]/player/[date]/+layout.svelte
View File

@ -63,9 +63,9 @@
href="/projects/{projectId}/player/{date}{$page.url.search}"
class:bg-card-active={date === $currentDate}
class:text-white={date === $currentDate}
class:border-gb-700={date !== $currentDate}
class:border-zinc-700={date !== $currentDate}
class:bg-card-default={date !== $currentDate}
class="max-h-content flex w-full flex-col items-center justify-around rounded border border-[0.5px] p-2 text-zinc-300 shadow transition duration-150 ease-out hover:bg-card-active hover:ease-in"
class="max-h-content flex w-full flex-col items-center justify-around rounded border-[0.5px] p-2 text-zinc-300 shadow transition duration-150 ease-out hover:ease-in border-gb-700"
>
{#if isToday}
<div class="py-2 text-lg leading-5">Today</div>

4
src/routes/projects/[projectId]/player/[date]/[sessionId]/+page.svelte
View File

@ -281,7 +281,7 @@
>
{#if $frame}
<div id="code" class="flex-auto overflow-auto px-2">
<div class="pb-[120px]">
<div class="pb-[200px]">
<CodeViewer
doc={$frame.doc}
deltas={$frame.deltas}
@ -293,7 +293,7 @@
<div
id="info"
class="w-content absolute bottom-[86px] ml-4 flex max-w-full gap-2 rounded-lg bg-zinc-800 p-2"
class="w-content absolute bottom-[86px] ml-4 flex max-w-full gap-2 rounded-full bg-zinc-500 py-2 px-4"
>
<span
class="flex-auto overflow-auto font-mono font-bold text-white"