mirror of
https://github.com/gitbutlerapp/gitbutler.git
synced 2024-09-11 12:25:42 +03:00
Add border and text-shadow to Button; simplify button styles
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:
parent
9b6a740832
commit
e8bf77d604
@ -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;
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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
|
||||
|
@ -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>
|
||||
|
@ -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"
|
||||
|
Loading…
Reference in New Issue
Block a user