Renamed _colors.scss to _variables.scss and other misc changes to components

app/styles/_variables.scss

@@ -1,5 +1,9 @@
+$color-accent: rgb(255, 69, 58);
 $color-background: #1a202c;
 $color-text: rgba(255, 255, 255, 0.92);
+$color-placeholder-text: rgba(255, 255, 255, 0.44);
 $color-border: rgba(255, 255, 255, 0.16);
 $color-button: rgba(255, 255, 255, 0.08);
 $color-button-hover: rgba(255, 255, 255, 0.16);
+
+$standard-border-radius: 0.3rem;

app/ui/Button.vue

@@ -35,12 +35,12 @@ const props = withDefaults(defineProps<ButtonProps>(), {
 </template>
 
 <style lang="scss" scoped>
-@use "@/styles/colors" as *;
+@use "@/styles/variables" as *;
 
 .button {
 	padding: 0.6rem 1rem;
 	transition: background-color 0.2s ease-in-out;
-	border-radius: 0.3rem;
+	border-radius: $standard-border-radius;
 
 	font-weight: 600;
 }

app/ui/Input.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+interface InputProps {
+	placeholder?: string
+	full?: boolean
+	iconName?: string
+}
+
+const value = defineModel("value")
+
+const emit = defineEmits<{
+	(e: "input", value: string): void
+	(e: "focus"): void
+}>()
+
+const props = defineProps<InputProps>()
+</script>
+
+<template>
+	<div
+		class="input"
+		:class="{ full: props.full, icon: $slots.icon || props.iconName }"
+	>
+		<span class="icon-wrapper">
+			<slot name="icon" v-if="!props.iconName" />
+			<Icon :name="props.iconName" v-else />
+		</span>
+		<input
+			:placeholder="props.placeholder"
+			v-model="value"
+			@input="(e) => emit('input', e.target?.value)"
+			@focus="emit('focus')"
+		/>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+@use "@/styles/variables" as *;
+
+.input {
+	border-radius: $standard-border-radius;
+	border: 1px solid $color-border;
+
+	padding: 0.5rem 1rem;
+
+	transition: outline 0.2s ease;
+	outline: 2px solid transparent;
+
+	&:focus-within {
+		outline: 2px solid $color-accent;
+	}
+
+	& input {
+		width: 100%;
+		background: none;
+	}
+
+	& input:focus {
+		outline: none;
+	}
+
+	& input::placeholder {
+		color: $color-placeholder-text;
+	}
+}
+
+.input,
+.icon,
+.icon-wrapper {
+	display: inline-flex;
+	align-items: center;
+}
+
+.icon {
+	gap: 0.7rem;
+
+	.icon-wrapper {
+		font-size: 24px;
+	}
+}
+
+.full {
+	width: 100%;
+}
+</style>

app/ui/Sidebar.vue

@@ -11,7 +11,7 @@
 </template>
 
 <style lang="scss" scoped>
-@use "@/styles/colors" as *;
+@use "@/styles/variables" as *;
 @use "sass:color";
 
 .sidebar-container {