Complete Hubbly theme conversion: all pages rewritten with CSS variable theming

- Converted all views from Dusk components (x-content.content-card, x-form.*) to inline Hubbly style
- All pages use consistent card pattern: rounded-lg, gradient headers, color-mix borders
- Added Hubbly-style homepage with 2-column layout, login card, swiper news carousel
- Rewrote navigation with Alpine.js dropdowns, CSS variable colors, Hubbly assets
- Updated profile page with Hubbly cards, fixed data bugs (friend/guild relationships)
- Rewrote register page to match Hubbly layout: banner header, avatar preview with Frank GIF, 2-column form, avatar carousel selector, border-4 inputs
- Rewrote login, settings, help center, radio, applications, utility pages
- All colors use CSS variables controlled by Filament theme editor
- Added Hubbly assets: banner, Frank GIF, navigation icons, online badge
- Removed all dependencies on x-content.* and x-form.* components

resources/themes/atom/views/components/auth/login-form.blade.php

@@ -8,22 +8,26 @@
 <form class="flex flex-col gap-y-3" action="{{ route('login') }}" method="POST">
  @csrf
 
- <div>
- <x-form.label for="username">
- {{ __('Username') }}
- </x-form.label>
+  <div>
+  <label for="username" style="color: var(--color-text);">
+  {{ __('Username') }}
+  </label>
 
- <x-form.input error-bag="login" name="username" value="{{ old('username') }}" placeholder="{{ __('Username') }}"
- :autofocus="true" />
- </div>
+  <input error-bag="login" name="username" value="{{ old('username') }}" placeholder="{{ __('Username') }}"
+  autofocus
+  class="w-full rounded-lg px-3 py-2 text-sm border-2 focus:ring-0"
+  style="background-color: var(--color-background); color: var(--color-text); border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent);" />
+  </div>
 
- <div>
- <x-form.label for="password">
- {{ __('Password') }}
- </x-form.label>
+  <div>
+  <label for="password" style="color: var(--color-text);">
+  {{ __('Password') }}
+  </label>
 
- <x-form.input error-bag="login" name="password" placeholder="{{ __('Password') }}" type="password" />
- </div>
+  <input error-bag="login" name="password" placeholder="{{ __('Password') }}" type="password"
+  class="w-full rounded-lg px-3 py-2 text-sm border-2 focus:ring-0"
+  style="background-color: var(--color-background); color: var(--color-text); border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent);" />
+  </div>
 
  @if (setting('google_recaptcha_enabled'))
  <div class="g-recaptcha" data-sitekey="{{ config('habbo.site.recaptcha_site_key') }}"></div>
@@ -33,9 +37,9 @@
  <x-turnstile />
  @endif
 
- <x-form.primary-button>
- {{ __('Login') }}
- </x-form.primary-button>
+  <button type="submit" class="rounded-lg px-4 py-2 text-sm font-semibold transition-all duration-200 hover:opacity-90" style="background-color: var(--color-primary); color: var(--button-text-color);">
+  {{ __('Login') }}
+  </button>
 
  <div class="text-center text-sm font-semibold" style="color: var(--color-text-muted)">
  <a href="{{ route('forgot.password.get') }}" class="hover:underline" x-on:click="open = false" style="color: var(--link-color)">