refactor: update component styles for improved consistency and visual hierarchy

- Adjusted border colors in various components for better contrast and consistency.
- Simplified class structures by removing unnecessary transition effects.
- Enhanced hover effects and text visibility across multiple components.

Author: githyperplexed

src/lib/components/about/row.svelte

@@ -11,14 +11,14 @@
   let { label, value, description, children }: Props = $props();
 </script>
 
-<div class="flex flex-col w-full bg-neutral-900/50 border border-neutral-900 rounded-lg overflow-hidden">
+<div class="flex flex-col w-full bg-neutral-900/50 border border-neutral-800 rounded-lg overflow-hidden">
   <div class="flex flex-col gap-0.5 p-3">
     <span class="text-neutral-200 font-medium text-xs">{label}</span>
     {#if description}
       <span class="text-neutral-500 text-xs leading-tight">{description}</span>
     {/if}
   </div>
-  <div class="flex items-center justify-start px-3 py-2 bg-neutral-950/30 border-t border-neutral-900">
+  <div class="flex items-center justify-start px-3 py-2 bg-neutral-950/30 border-t border-neutral-800">
     <span class="text-neutral-400 font-mono text-xs">
       {#if value}
         {value}

src/lib/components/credits/credit.svelte

@@ -17,15 +17,13 @@
   {href}
   target="_blank"
   rel="noreferrer"
-  class="group flex items-center gap-2.5 bg-neutral-900/50 hover:bg-neutral-900 px-3 py-2 rounded-lg border border-neutral-900 transition-all hover:border-yellow-400/30"
+  class="flex items-center gap-2.5 bg-neutral-900 px-3 py-2 rounded-lg border border-neutral-800 hover:border-yellow-400/30"
 >
-  <div class="text-neutral-400 group-hover:text-white transition-colors">
+  <div class="text-neutral-400">
     <Icon name={icon} />
   </div>
   <div class="flex flex-col items-start gap-0.5 text-left">
-    <span
-      class="font-medium text-sm text-neutral-200 group-hover:text-white transition-colors"
-    >
+    <span class="font-medium text-sm text-neutral-200">
       {label}
     </span>
     <span class="text-xs text-neutral-500">{description}</span>

src/lib/components/nav/link.svelte

@@ -15,7 +15,7 @@
 <a
   {href}
   class={cn(
-    "text-xs text-neutral-500 hover:text-yellow-400 transition-colors",
+    "text-xs text-neutral-500 hover:text-yellow-400",
     className
   )}
 >

src/lib/components/page/link.svelte

@@ -19,7 +19,7 @@
   {target}
   {rel}
   class={cn(
-    "text-neutral-400 hover:text-yellow-400 underline underline-offset-4 decoration-neutral-800 hover:decoration-neutral-500 transition-colors",
+    "text-neutral-400 hover:text-yellow-400 underline underline-offset-4 decoration-neutral-800 hover:decoration-neutral-500",
     className
   )}
 >

src/lib/components/sort/option.svelte

@@ -16,7 +16,7 @@
 
 <button
 	class={cn(
-		"flex items-center justify-between px-4 py-3 text-sm rounded-lg transition-colors w-full",
+		"flex items-center justify-between px-4 py-3 text-sm rounded-lg w-full",
 		sort.key === col.key
 			? "bg-yellow-400/10 text-yellow-400 font-medium"
 			: "text-neutral-400 hover:bg-neutral-900/50 hover:text-neutral-200"

src/lib/components/sort/sort.svelte

@@ -32,7 +32,7 @@
 								<Option {col} {sort} {onsort} />
 							{/each}
 						</div>
-						<Drawer.Close class="w-full bg-neutral-900 p-3 rounded-lg text-neutral-300 font-medium hover:bg-neutral-800 transition-colors">
+						<Drawer.Close class="w-full bg-neutral-900 p-3 rounded-lg text-neutral-300 font-medium hover:bg-neutral-800">
 							Done
 						</Drawer.Close>
 					</div>

src/lib/components/sort/trigger.svelte

@@ -15,7 +15,7 @@
 </script>
 
 <Drawer.Trigger
-	class="w-full flex items-center justify-between px-4 py-3 text-sm bg-transparent text-neutral-300 hover:bg-neutral-900/80 transition-colors focus:outline-none"
+	class="w-full flex items-center justify-between px-4 py-3 text-sm bg-transparent text-neutral-300 hover:bg-neutral-900/80 focus:outline-none"
 >
 	<span class="flex items-center gap-2">
 		<span class="font-medium text-neutral-200">{label}</span>

src/lib/components/table/head.svelte

@@ -21,7 +21,7 @@
 		{#each columns as col}
 			<th 
 				class={cn(
-					"sticky top-0 z-10 bg-neutral-950 border-b border-neutral-900 px-4 py-4 font-medium transition-colors cursor-pointer hover:text-white select-none group uppercase tracking-wider text-xs", 
+					"sticky top-0 z-10 bg-neutral-950 border-b border-neutral-900 px-4 py-4 font-medium cursor-pointer hover:text-white select-none group uppercase tracking-wider text-xs", 
 					col.class
 				)}
 				onclick={() => onsort(col.key)}
@@ -38,7 +38,7 @@
 							<ChevronDown class="w-3 h-3 text-yellow-400 shrink-0" />
 						{/if}
 					{:else}
-						<ChevronsUpDown class="w-3 h-3 text-neutral-600 group-hover:text-neutral-400 transition-colors shrink-0" />
+						<ChevronsUpDown class="w-3 h-3 text-neutral-600 group-hover:text-neutral-400 shrink-0" />
 					{/if}
 				</div>
 			</th>

src/lib/components/table/row.svelte

@@ -16,7 +16,7 @@
 	let { row, columns, type, ...rest }: Props = $props();
 </script>
 
-<tr class="group hover:bg-yellow-400/5 transition-colors" {...rest}>
+<tr class="group hover:bg-yellow-400/5" {...rest}>
 	{#each columns as col}
 		<StoreItem {row} {col} />
 	{/each}

src/lib/components/ui/badge.svelte

@@ -28,7 +28,7 @@
 
 <span
 	class={cn(
-		"inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium border transition-colors focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-offset-2",
+		"inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium border focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-offset-2",
 		variants[variant],
 		className
 	)}