BradNut/boredgame
1
0
Fork 0
mirror of https://github.com/BradNut/boredgame synced 2025-09-08 17:40:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Adding warning color to the remove button.

Browse source
This commit is contained in:
Bradley Shellnut 2022-11-01 11:49:10 -05:00
parent 6e716f6465
commit b2e34606fe
6 changed files with 53 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/lib/components/dialog/RemoveCollectionDialog.svelte
View file

@ -38,7 +38,7 @@
<DialogDescription>Are you sure you want to remove from your collection?</DialogDescription>
<div class="dialog-footer">
<button on:click={removeGame}>Remove</button>
<button class="remove" on:click={removeGame}>Remove</button>
<button
on:click={() => {
boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
@ -82,6 +82,14 @@
background-color: var(--color-btn-primary-active-hover);
}
}
.remove {
background-color: var(--warning);
&:hover {
background-color: var(--warning-hover);
}
}
}
}
</style>

10
src/lib/components/dialog/RemoveWishlistDialog.svelte
View file

@ -38,7 +38,7 @@
<DialogDescription>Are you sure you want to remove from your wishlist?</DialogDescription>
<div class="dialog-footer">
<button on:click={removeGame}>Remove</button>
<button class="remove" on:click={removeGame}>Remove</button>
<button
on:click={() => {
boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
@ -82,6 +82,14 @@
background-color: var(--color-btn-primary-active-hover);
}
}
.remove {
background-color: var(--warning);
&:hover {
background-color: var(--warning-hover);
}
}
}
}
</style>

10
src/lib/components/game/index.svelte
View file

@ -144,7 +144,15 @@
}
.btn {
max-height: 50px;
max-height: 100px;
}
.remove {
background-color: var(--warning);
&:hover {
background-color: var(--warning-hover);
}
}
}
</style>

10
src/routes/game/[id]/+page.svelte
View file

@ -73,7 +73,7 @@
</div>
<div>
{#if existsInCollection}
<button class="btn button-icon" type="button" on:click={() => removeGame()}
<button class="btn button-icon remove" type="button" on:click={() => removeGame()}
>Remove from collection <MinusCircleIcon width="24" height="24" /></button
>
{:else}
@ -139,6 +139,14 @@
background-color: var(--color-btn-primary-active);
}
.remove {
background-color: var(--warning);
&:hover {
background-color: var(--warning-hover);
}
}
.button-icon {
display: grid;
grid-template-columns: repeat(2, auto);

10
src/styles/global.scss
View file

@ -18,7 +18,7 @@
--clr-input-txt: hsl(177 100% 15%);
--red: #990000;
--tomatoOrange: #e54b4b;
--tomatoOrange: hsla(0, 75%, 60%, 1);
--redBrown: #633539;
--blue: #336699;
--black: #1f273a;
@ -318,6 +318,14 @@ input {
cursor: not-allowed;
}
.remove {
background-color: var(--warning);
&:hover {
background-color: var(--warning-hover);
}
}
ul,
ol {
list-style: none;

8
src/styles/theme.scss
View file

@ -61,6 +61,10 @@ html[data-theme='🌛 Night'] {
/* Input Fields */
--input-bg: #181a1b;
/* Button */
--warning: hsla(0, 75%, 60%, 0.90);
--warning-hover: hsla(0, 75%, 60%, 1);
}
html[data-theme='☀️ Daylight'] {
@ -126,4 +130,8 @@ html[data-theme='☀️ Daylight'] {
/* Input Fields */
--input-bg: #181a1b;
/* Button */
--warning: hsla(0, 75%, 60%, 0.90);
--warning-hover: hsla(0, 75%, 60%, 1);
}