feat: better writing and styling for vertd settings

src/app.scss

@@ -32,6 +32,7 @@
 	// general
 	--accent-pink: hsl(302, 100%, 76%);
 	--accent-pink-alt: hsl(302, 100%, 50%);
+	--accent-pink-muted: hsl(302, 98%, 42%);
 	--accent-red: hsl(348, 100%, 80%);
 	--accent-red-alt: hsl(348, 100%, 50%);
 	--accent-purple: hsl(264, 100%, 81%);
@@ -46,6 +47,8 @@
 	--fg-muted: hsla(0, 0%, 0%, 0.6);
 	--fg-on-accent: hsl(0, 0%, 0%);
 	--fg-on-badge: hsl(0, 0%, 0%);
+	/* readable version of the accent color */
+	--fg-accent: var(--accent-pink-muted);
 
 	// backgrounds
 	--bg: hsl(0, 0%, 95%);
@@ -127,6 +130,7 @@
 	--fg-muted: hsla(0, 0%, 100%, 0.6);
 	--fg-on-accent: hsl(0, 0%, 0%);
 	--fg-on-badge: hsl(0, 0%, 0%);
+	--fg-accent: var(--accent);
 
 	// backgrounds
 	--bg: hsl(220, 5%, 12%);
@@ -275,4 +279,8 @@ body {
 	input[type="text"]::placeholder {
 		@apply text-muted font-normal;
 	}
+
+	input[type=text]:focus {
+		@apply outline outline-accent outline-2;
+	}
 }

src/lib/sections/settings/Vertd.svelte

@@ -1,9 +1,7 @@
 <script lang="ts">
-	import { browser } from "$app/environment";
-	import FancyTextInput from "$lib/components/functional/FancyInput.svelte";
 	import Panel from "$lib/components/visual/Panel.svelte";
 	import { GITHUB_URL_VERTD } from "$lib/consts";
-	import { RefreshCwIcon, SaveAllIcon, ServerIcon } from "lucide-svelte";
+	import { ServerIcon } from "lucide-svelte";
 	import type { Settings } from "./index.svelte";
 	import clsx from "clsx";
 
@@ -45,7 +43,7 @@
 				class="inline-block -mt-1 mr-2 bg-accent-red p-2 rounded-full overflow-visible"
 				color="black"
 			/>
-			<code>vertd</code>
+			Converting Video
 		</h2>
 		<p
 			class={clsx("text-sm font-normal", {
@@ -63,20 +61,26 @@
 		<div class="flex flex-col gap-8">
 			<div class="flex flex-col gap-4">
 				<p class="text-sm text-muted font-normal">
-					VERT allows fully functional video conversion via the
+					The <code>vertd</code> project is a server wrapper for FFmpeg.
-					<code>vertd</code> project. It acts as an FFmpeg wrapper on
+					This allows you to convert videos through the convenience of
-					a given server, allowing for GPU accelerated local* video
+					VERT's web interface, while still being able to harness the power
-					conversion. We currently don't provide our own instance due
+					of your GPU to do it as quickly as possible.
-					to upkeep costs of servers with the necessary hardware for
+				</p>
-					speedy conversion. You can host your own instance by
+				<p class="text-sm text-muted font-normal">
-					downloading the binaries
+					We currently don't provide an hosted instance due to the
-					<a href={GITHUB_URL_VERTD} target="_blank">here</a>.
+					upkeep costs. However, it's quite easy to host one on your
+					own PC or server if you know what you're doing. You can
+					download the server binaries <a
+						href={GITHUB_URL_VERTD}
+						target="_blank">here</a
+					>. The process of setting this up will become easier in the
+					future, so stay tuned!
 				</p>
 				<div class="flex flex-col gap-2">
 					<p class="text-base font-bold">Instance URL</p>
 					<input
 						type="text"
-						placeholder="http://localhost:24153"
+						placeholder="Example: http://localhost:24153"
 						bind:value={settings.settings.vertdURL}
 					/>
 				</div>

tailwind.config.ts

@@ -20,6 +20,7 @@ export default {
 			textColor: {
 				foreground: "var(--fg)",
 				muted: "var(--fg-muted)",
+				accent: "var(--fg-accent)",
 				"on-accent": "var(--fg-on-accent)",
 				"on-badge": "var(--fg-on-badge)",
 			},