Simon/ConvertX
1
0
Fork 0
mirror of https://github.com/C4illin/ConvertX.git synced 2026-06-28 15:05:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

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" />
</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>
);

10
src/components/header.tsx
View File

@@ -8,14 +8,14 @@ export const Header = ({
<ul class="flex gap-4 ">
<li>
<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">
History
</a>
</li>
<li>
<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">
Logout
</a>
@@ -27,7 +27,7 @@ export const Header = ({
<ul class="flex gap-4">
<li>
<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">
Login
</a>
@@ -35,7 +35,7 @@ export const Header = ({
{accountRegistration ? (
<li>
<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">
Register
</a>
@@ -47,7 +47,7 @@ export const Header = ({
return (
<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>
<li>
<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">
<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>

37
src/main.css
View File

@@ -4,9 +4,42 @@
@layer components {
.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 {
@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} */
// eslint-disable-next-line no-undef
module.exports = {
content: ['./src/**/*.{html,js,tsx,jsx,cjs,mjs}'],
content: ["./src/**/*.{html,js,tsx,jsx,cjs,mjs}"],
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")],
};