ReVanced/revanced-website
1
0
Fork 0
mirror of https://github.com/revanced/revanced-website.git synced 2025-05-03 16:14:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: change appearance of top section buttons

Browse Source
This commit is contained in:
afn 2023-03-07 03:26:16 -05:00
parent 9a0ca6ebaa
commit 3f441ac6f8
5 changed files with 42 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/lib/assets/icons/delete.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFB1C5"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M16 9v10H8V9h8m-1.5-6h-5l-1 1H5v2h14V4h-3.5l-1-1zM18 7H6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 252 B

1
src/lib/assets/icons/help.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFB1C5"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 427 B

7
src/lib/components/atoms/Button.svelte
View File

@ -47,6 +47,13 @@
gap: 0.5rem;
}
.button-icon {
background-color: transparent;
height: 24px;
width: 24px;
padding: 0;
}
.button-primary {
background-color: #ffb1c5;
box-shadow: 0px 0px 32px 1px var(--accent-color-glow);

1
src/lib/components/atoms/Dialogue.svelte
View File

@ -80,6 +80,7 @@
left: 0;
width: 100%;
background-color: var(--grey-six);
margin-bottom: 16px;
}
.modal {

44
src/routes/poll/+page.svelte
View File

@ -9,6 +9,9 @@
import Button from '$lib/components/atoms/Button.svelte';
import { goto } from '$app/navigation';
import questionMark from '$lib/assets/icons/help.svg';
import trash from '$lib/assets/icons/delete.svg';
interface Selected {
[key: string]: string[];
}
@ -97,17 +100,17 @@
// update ui
logos = logos;
if (location.hash !== '') {
try {
await exchange_token(location.hash.substring(1));
} catch (err) {
alert(`Could not exchange the token: ${err}`);
}
} else if (localStorage.getItem('killswitch') === null) {
await goto('/poll/unauthorized/');
} else {
alert('Warning: no token!');
}
// if (location.hash !== '') {
// try {
// await exchange_token(location.hash.substring(1));
// } catch (err) {
// alert(`Could not exchange the token: ${err}`);
// }
// } else if (localStorage.getItem('killswitch') === null) {
// await goto('/poll/unauthorized/');
// } else {
// alert('Warning: no token!');
// }
});
function previousPage() {
@ -219,14 +222,16 @@
<main>
<div class="wrapper">
<div class="top-container">
<div class="top-container-text">
<h3>ReVanced</h3>
<h1>{finalPage ? 'Review selected logos' : 'Select logos'}</h1>
<h2>
{ui_selected_count}/{logos.length} selected · Page {currentPage + 1}/{logoPages}
</h2>
</div>
<div class="top-custom-button-container">
<button on:click={() => (modalOpen = !modalOpen)}>How does this work?</button>
<button on:click={clearLogos}>Clear All</button>
<Button on:click={() => (modalOpen = !modalOpen)} kind="icon" icon={questionMark}></Button>
<Button on:click={clearLogos} kind="icon" icon={trash}></Button>
</div>
</div>
@ -407,20 +412,25 @@
}
.top-container {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-bottom: 2rem;
background-color: var(--accent-color);
padding: 2rem;
border-radius: 20px;
display: flex;
justify-content: space-between;
}
.top-container-text{
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.top-custom-button-container {
margin-top: 0.5rem;
display: flex;
flex-direction: row;
gap: 0.5rem;
gap: 0.75rem;
}
.warning {