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

2
src/components/base.tsx
View file

@ -27,6 +27,6 @@ export const BaseHtml = ({
/> />
<link rel="manifest" href="/site.webmanifest" /> <link rel="manifest" href="/site.webmanifest" />
</head> </head>
<body class="w-full bg-gray-900 text-gray-200">{children}</body> <body class="w-full bg-neutral-900 text-neutral-200">{children}</body>
</html> </html>
); );

10
src/components/header.tsx
View file

@ -8,14 +8,14 @@ export const Header = ({
<ul class="flex gap-4 "> <ul class="flex gap-4 ">
<li> <li>
<a <a
class="text-lime-600 transition-all hover:text-lime-500 hover:underline" class="text-accent-600 transition-all hover:text-accent-500 hover:underline"
href="/history"> href="/history">
History History
</a> </a>
</li> </li>
<li> <li>
<a <a
class="text-lime-600 transition-all hover:text-lime-500 hover:underline" class="text-accent-600 transition-all hover:text-accent-500 hover:underline"
href="/logoff"> href="/logoff">
Logout Logout
</a> </a>
@ -27,7 +27,7 @@ export const Header = ({
<ul class="flex gap-4"> <ul class="flex gap-4">
<li> <li>
<a <a
class="text-lime-600 transition-all hover:text-lime-500 hover:underline" class="text-accent-600 transition-all hover:text-accent-500 hover:underline"
href="/login"> href="/login">
Login Login
</a> </a>
@ -35,7 +35,7 @@ export const Header = ({
{accountRegistration ? ( {accountRegistration ? (
<li> <li>
<a <a
class="text-lime-600 transition-all hover:text-lime-500 hover:underline" class="text-accent-600 transition-all hover:text-accent-500 hover:underline"
href="/register"> href="/register">
Register Register
</a> </a>
@ -47,7 +47,7 @@ export const Header = ({
return ( return (
<header class="w-full p-4"> <header class="w-full p-4">
<nav class="mx-auto flex max-w-4xl justify-between rounded bg-gray-900 p-4"> <nav class="mx-auto flex max-w-4xl justify-between rounded bg-neutral-900 p-4">
<ul> <ul>
<li> <li>
<strong> <strong>

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

37
src/main.css
View file

@ -4,9 +4,42 @@
@layer components { @layer components {
.article { .article {
@apply p-4 mb-4 bg-gray-800/40 w-full mx-auto max-w-4xl rounded; @apply p-4 mb-4 bg-neutral-800/40 w-full mx-auto max-w-4xl rounded;
} }
.btn-primary { .btn-primary {
@apply bg-lime-500 text-black rounded p-4 hover:bg-lime-400 cursor-pointer; @apply bg-accent-500 text-contrast rounded p-4 hover:bg-accent-400 cursor-pointer transition-colors;
}
}
:root {
--contrast: 255, 255, 255;
--neutral-900: 243, 244, 246;
--neutral-800: 229, 231, 235;
--neutral-700: 209, 213, 219;
--neutral-600: 156, 163, 175;
--neutral-500: 180, 180, 180;
--neutral-400: 75, 85, 99;
--neutral-300: 55, 65, 81;
--neutral-200: 31, 41, 55;
--neutral-100: 17, 24, 39;
--accent-400: 132, 204, 22;
--accent-500: 101, 163, 13;
--accent-600: 77, 124, 15;
}
@media (prefers-color-scheme: dark) {
:root {
--contrast: 0, 0, 0;
--neutral-900: 17, 24, 39;
--neutral-800: 31, 41, 55;
--neutral-700: 55, 65, 81;
--neutral-600: 75, 85, 99;
--neutral-500: 107, 114, 128;
--neutral-300: 209, 213, 219;
--neutral-400: 156, 163, 175;
--neutral-200: 229, 231, 235;
--accent-600: 101, 163, 13;
--accent-500: 132, 204, 22;
--accent-400: 163, 230, 53;
} }
} }

24
tailwind.config.js
View file

@ -1,9 +1,25 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
// eslint-disable-next-line no-undef // eslint-disable-next-line no-undef
module.exports = { module.exports = {
content: ['./src/**/*.{html,js,tsx,jsx,cjs,mjs}'], content: ["./src/**/*.{html,js,tsx,jsx,cjs,mjs}"],
theme: { theme: {
extend: {}, extend: {
colors: {
contrast: "rgba(var(--contrast))",
"neutral-900": "rgba(var(--neutral-900))",
"neutral-800": "rgba(var(--neutral-800))",
"neutral-700": "rgba(var(--neutral-700))",
"neutral-600": "rgba(var(--neutral-600))",
"neutral-500": "rgba(var(--neutral-500))",
"neutral-400": "rgba(var(--neutral-400))",
"neutral-300": "rgba(var(--neutral-300))",
"neutral-200": "rgba(var(--neutral-200))",
"neutral-100": "rgba(var(--neutral-100))",
"accent-600": "rgba(var(--accent-600))",
"accent-500": "rgba(var(--accent-500))",
"accent-400": "rgba(var(--accent-400))",
},
},
}, },
plugins: [require('tailwind-scrollbar')], plugins: [require("tailwind-scrollbar")],
} };