Elijah/convertor
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add light theme, fixes #156

Browse source
This commit is contained in:
C4illin 2024-09-30 17:09:12 +02:00
parent 291cfc80c6
commit 72636c5059
5 changed files with 89 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

56
src/index.tsx
View file

@ -141,7 +141,7 @@ const app = new Elysia({
<main class="mx-auto w-full max-w-4xl px-4">
<h1 class="my-8 text-3xl">Welcome to ConvertX!</h1>
<article class="article p-0">
<header class="w-full bg-gray-800 p-4">Create your account</header>
<header class="w-full bg-neutral-800 p-4">Create your account</header>
<form method="post" action="/register" class="p-4">
<fieldset class="mb-4 flex flex-col gap-4">
<label class="flex flex-col gap-1">
@ -149,7 +149,7 @@ const app = new Elysia({
<input
type="email"
name="email"
class="rounded bg-gray-800 p-3"
class="rounded bg-neutral-800 p-3"
placeholder="Email"
autocomplete="email"
required
@ -160,7 +160,7 @@ const app = new Elysia({
<input
type="password"
name="password"
class="rounded bg-gray-800 p-3"
class="rounded bg-neutral-800 p-3"
placeholder="Password"
autocomplete="current-password"
required
@ -172,7 +172,7 @@ const app = new Elysia({
<footer class="p-4">
Report any issues on{" "}
<a
class="text-lime-500 underline hover:text-lime-400"
class="text-accent-500 underline hover:text-accent-400"
href="https://github.com/C4illin/ConvertX"
>
GitHub
@ -202,7 +202,7 @@ const app = new Elysia({
<input
type="email"
name="email"
class="rounded bg-gray-800 p-3"
class="rounded bg-neutral-800 p-3"
placeholder="Email"
autocomplete="email"
required
@ -213,7 +213,7 @@ const app = new Elysia({
<input
type="password"
name="password"
class="rounded bg-gray-800 p-3"
class="rounded bg-neutral-800 p-3"
placeholder="Password"
autocomplete="current-password"
required
@ -324,7 +324,7 @@ const app = new Elysia({
<input
type="email"
name="email"
class="rounded bg-gray-800 p-3"
class="rounded bg-neutral-800 p-3"
placeholder="Email"
autocomplete="email"
required
@ -335,7 +335,7 @@ const app = new Elysia({
<input
type="password"
name="password"
class="rounded bg-gray-800 p-3"
class="rounded bg-neutral-800 p-3"
placeholder="Password"
autocomplete="current-password"
required
@ -528,12 +528,12 @@ const app = new Elysia({
<div class="mb-4 max-h-[50vh] overflow-y-auto scrollbar-thin">
<table
id="file-list"
class="w-full table-auto rounded bg-gray-900 [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-gray-800"
class="w-full table-auto rounded bg-neutral-900 [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800"
/>
</div>
<div
id="dropzone"
class="relative flex h-48 w-full items-center justify-center rounded border border-dashed border-gray-700 transition-all hover:border-gray-600 [&.dragover]:border-4 [&.dragover]:border-gray-500"
class="relative flex h-48 w-full items-center justify-center rounded border border-dashed border-neutral-700 transition-all hover:border-neutral-600 [&.dragover]:border-4 [&.dragover]:border-neutral-500"
>
<span>
<b>Choose a file</b> or drag it here
@ -558,14 +558,14 @@ const app = new Elysia({
name="convert_to_search"
placeholder="Search for conversions"
autocomplete="off"
class="w-full rounded bg-gray-800 p-4"
class="w-full rounded bg-neutral-800 p-4"
/>
<div class="select_container relative">
<article class="convert_to_popup absolute z-[2] m-0 hidden h-[30vh] max-h-[50vh] w-full flex-col overflow-y-auto overflow-x-hidden rounded bg-gray-800 sm:h-[30vh]">
<article class="convert_to_popup absolute z-[2] m-0 hidden h-[30vh] max-h-[50vh] w-full flex-col overflow-y-auto overflow-x-hidden rounded bg-neutral-800 sm:h-[30vh]">
{Object.entries(getAllTargets()).map(
([converter, targets]) => (
<article
class="convert_to_group w-full border-b border-gray-700 p-4 flex flex-col"
class="convert_to_group w-full border-b border-neutral-700 p-4 flex flex-col"
data-converter={converter}
>
<header class="mb-2 w-full text-xl font-bold" safe>
@ -576,7 +576,7 @@ const app = new Elysia({
<button
// https://stackoverflow.com/questions/121499/when-a-blur-event-occurs-how-can-i-find-out-which-element-focus-went-to#comment82388679_33325953
tabindex={0}
class="target rounded bg-gray-700 p-1 text-base hover:bg-gray-600"
class="target rounded bg-neutral-700 p-1 text-base hover:bg-neutral-600"
data-value={`${target},${converter}`}
data-target={target}
data-converter={converter}
@ -629,11 +629,11 @@ const app = new Elysia({
({ body }) => {
return (
<>
<article class="convert_to_popup absolute z-[2] m-0 hidden h-[50vh] max-h-[50vh] w-full flex-col overflow-y-auto overflow-x-hidden rounded bg-gray-800 sm:h-[30vh]">
<article class="convert_to_popup absolute z-[2] m-0 hidden h-[50vh] max-h-[50vh] w-full flex-col overflow-y-auto overflow-x-hidden rounded bg-neutral-800 sm:h-[30vh]">
{Object.entries(getPossibleTargets(body.fileType)).map(
([converter, targets]) => (
<article
class="convert_to_group w-full border-b border-gray-700 p-4 flex flex-col"
class="convert_to_group w-full border-b border-neutral-700 p-4 flex flex-col"
data-converter={converter}
>
<header class="mb-2 w-full text-xl font-bold" safe>
@ -644,7 +644,7 @@ const app = new Elysia({
<button
// https://stackoverflow.com/questions/121499/when-a-blur-event-occurs-how-can-i-find-out-which-element-focus-went-to#comment82388679_33325953
tabindex={0}
class="target rounded bg-gray-700 p-1 text-base hover:bg-gray-600"
class="target rounded bg-neutral-700 p-1 text-base hover:bg-neutral-600"
data-value={`${target},${converter}`}
data-target={target}
data-converter={converter}
@ -893,7 +893,7 @@ const app = new Elysia({
<main class="w-full px-4">
<article class="article">
<h1 class="mb-4 text-xl">Results</h1>
<table class="w-full table-auto rounded bg-gray-900 text-left [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-gray-800">
<table class="w-full table-auto rounded bg-neutral-900 text-left [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800">
<thead>
<tr>
<th class="px-4 py-2">Time</th>
@ -912,7 +912,7 @@ const app = new Elysia({
<td safe>{job.status}</td>
<td>
<a
class="text-lime-500 underline hover:text-lime-400"
class="text-accent-500 underline hover:text-accent-400"
href={`/results/${job.id}`}
>
View
@ -990,9 +990,9 @@ const app = new Elysia({
<progress
max={job.num_files}
value={files.length}
class="mb-4 inline-block h-2 w-full appearance-none overflow-hidden rounded-full border-0 bg-gray-700 bg-none text-lime-500 accent-lime-500 [&::-moz-progress-bar]:bg-gray-700 [&::-webkit-progress-value]:rounded-full [&::-webkit-progress-value]:[background:none] [&[value]::-webkit-progress-value]:bg-lime-500 [&[value]::-webkit-progress-value]:transition-[inline-size]"
class="mb-4 inline-block h-2 w-full appearance-none overflow-hidden rounded-full border-0 bg-neutral-700 bg-none text-accent-500 accent-accent-500 [&::-moz-progress-bar]:bg-neutral-700 [&::-webkit-progress-value]:rounded-full [&::-webkit-progress-value]:[background:none] [&[value]::-webkit-progress-value]:bg-accent-500 [&[value]::-webkit-progress-value]:transition-[inline-size]"
/>
<table class="w-full table-auto rounded bg-gray-900 text-left [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-gray-800">
<table class="w-full table-auto rounded bg-neutral-900 text-left [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800">
<thead>
<tr>
<th class="px-4 py-2">Converted File Name</th>
@ -1008,7 +1008,7 @@ const app = new Elysia({
<td safe>{file.status}</td>
<td>
<a
class="text-lime-500 underline hover:text-lime-400"
class="text-accent-500 underline hover:text-accent-400"
href={`/download/${outputPath}${file.output_file_name}`}
>
View
@ -1016,7 +1016,7 @@ const app = new Elysia({
</td>
<td>
<a
class="text-lime-500 underline hover:text-lime-400"
class="text-accent-500 underline hover:text-accent-400"
href={`/download/${outputPath}${file.output_file_name}`}
download={file.output_file_name}
>
@ -1093,9 +1093,9 @@ const app = new Elysia({
<progress
max={job.num_files}
value={files.length}
class="mb-4 inline-block h-2 w-full appearance-none overflow-hidden rounded-full border-0 bg-gray-700 bg-none text-lime-500 accent-lime-500 [&::-moz-progress-bar]:bg-gray-700 [&::-webkit-progress-value]:rounded-full [&::-webkit-progress-value]:[background:none] [&[value]::-webkit-progress-value]:bg-lime-500 [&[value]::-webkit-progress-value]:transition-[inline-size]"
class="mb-4 inline-block h-2 w-full appearance-none overflow-hidden rounded-full border-0 bg-neutral-700 bg-none text-accent-500 accent-accent-500 [&::-moz-progress-bar]:bg-neutral-700 [&::-webkit-progress-value]:rounded-full [&::-webkit-progress-value]:[background:none] [&[value]::-webkit-progress-value]:bg-accent-500 [&[value]::-webkit-progress-value]:transition-[inline-size]"
/>
<table class="w-full table-auto rounded bg-gray-900 text-left [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-gray-800">
<table class="w-full table-auto rounded bg-neutral-900 text-left [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800">
<thead>
<tr>
<th class="px-4 py-2">Converted File Name</th>
@ -1111,7 +1111,7 @@ const app = new Elysia({
<td safe>{file.status}</td>
<td>
<a
class="text-lime-500 underline hover:text-lime-400"
class="text-accent-500 underline hover:text-accent-400"
href={`/download/${outputPath}${file.output_file_name}`}
>
View
@ -1119,7 +1119,7 @@ const app = new Elysia({
</td>
<td>
<a
class="text-lime-500 underline hover:text-lime-400"
class="text-accent-500 underline hover:text-accent-400"
href={`/download/${outputPath}${file.output_file_name}`}
download={file.output_file_name}
>
@ -1179,7 +1179,7 @@ const app = new Elysia({
<main class="w-full px-4">
<article class="article">
<h1 class="mb-4 text-xl">Converters</h1>
<table class="w-full table-auto rounded bg-gray-900 text-left [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-gray-800 [&_ul]:list-inside [&_ul]:list-disc">
<table class="w-full table-auto rounded bg-neutral-900 text-left [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800 [&_ul]:list-inside [&_ul]:list-disc">
<thead>
<tr>
<th class="mx-4 my-2">Converter</th>