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/user/discord-widget.blade.php

@@ -1,21 +1,20 @@
-<x-content.content-card icon="discord-icon" classes="border dark:border-gray-900">
- <x-slot:title>
- {{ __('Discord') }}
- </x-slot:title>
-
- <x-slot:under-title>
- <span id="guildName"></span>
- </x-slot:under-title>
-
- <div class="text-sm dark:text-gray-200">
- <div id="guildUsers" class="h-[129px] overflow-auto"> </div>
- <a id="guildInvite" target="blank">
- <x-form.secondary-button classes="mt-3">
- {{ __('Join server') }}
- </x-form.secondary-button>
- </a>
+<div class="rounded-lg overflow-hidden" style="background-color: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
+ <div class="relative w-full h-12" style="background: linear-gradient(140deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 80%, black) 100%);">
+  <div class="flex items-center h-full px-4">
+   <h2 class="text-white font-bold text-lg">{{ __('Discord') }}</h2>
+  </div>
  </div>
-</x-content.content-card>
+ <div class="p-4">
+  <p class="text-sm mb-3" style="color: var(--color-text-muted);"><span id="guildName"></span></p>
+  <div id="guildUsers" class="h-[129px] overflow-auto text-sm" style="color: var(--color-text);"> </div>
+  <a id="guildInvite" target="blank">
+   <button class="mt-3 w-full 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);">
+    {{ __('Join server') }}
+   </button>
+  </a>
+ </div>
+</div>
 
 @push('javascript')
  <script>
@@ -27,10 +26,8 @@
  mode: 'cors',
  cache: 'reload'
  }
- //gets discord widget json from url with in settings specifed id
  fetch("https://discordapp.com/api/guilds/{{ setting('discord_widget_id') }}/widget.json", init).then(
  function(res) {
- //if there is a problem with discord or id sends an error message in console
  if (res.status != 200) {
  console.error("Discord widget cant connect to discord (" + res.status + ")");
  return;
@@ -39,10 +36,8 @@
  res.json().then(function(data) {
  let users = data.members;
  let guildName = data.name;
- //sets the subtitle of the card to the guild name
  document.getElementById('guildName').innerText = guildName;
 
- //loops over every user in json array and display them in the widget
  for (let i = 0; i < data.members.length; i++) {
  let container = document.createElement('div')
  let leftContainer = document.createElement('div')
@@ -53,7 +48,6 @@
  let name = document.createElement('p')
  let motto = document.createElement('p')
 
- //sets styleing
  container.classList.add('flex', 'items-center', 'gap-x-2')
  leftContainer.classList.add('relative')
  imgContainer.classList.add('h-9', 'w-9', 'bg-gray-100', 'dark:bg-gray-800',
@@ -63,7 +57,6 @@
  name.classList.add('font-semibold')
  motto.classList.add('dark:text-gray-400')
 
- //sets styling for exceptions
  if (i === 0) {
  name.classList.add('mt-1')
  }
@@ -81,7 +74,6 @@
  status.style.backgroundColor = "#9c0017";
  }
 
- //adds attributes to elements
  img.setAttribute('src', data.members[i].avatar_url);
 
  if (users[i].nick === undefined) {
@@ -93,7 +85,6 @@
  motto.innerText = users[i].game.name;
  }
 
- //append all elements to each other
  container.appendChild(leftContainer)
  leftContainer.appendChild(imgContainer)
  imgContainer.appendChild(img)
@@ -105,13 +96,10 @@
  document.getElementById('guildUsers').appendChild(container)
  }
 
- //Checks if join server link is null and removes btn form webpage
  if (data.instant_invite === null) {
  document.getElementById('guildInvite').remove()
  document.getElementById('guildUsers').style.height = "176px"
  } else {
- //Gives the "Join server" button a href to the default selected channel in the server
- //link is recived from widget json
  document.getElementById('guildInvite').setAttribute('href', data.instant_invite)
  }
  })

resources/themes/atom/views/components/user/profile-info-card.blade.php

@@ -1,15 +1,15 @@
 @props(['colSpan'])
 
 <div class="col-span-2 lg:col-span-{{ $colSpan }}">
- {{ $image }}
+    {{ $image }}
 
- <div class="shadow">
- <div class="flex gap-x-2 rounded-t border-b p-3" style="background-color: var(--color-surface); border-color: var(--color-text-muted);">
- <p class="font-semibold" style="color: var(--color-text)">{{ $title }}</p>
- </div>
+    <div class="rounded-lg overflow-hidden" style="background-color: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
+        <div class="flex gap-x-2 border-b p-3" style="background-color: var(--color-surface); border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
+            <p class="font-semibold" style="color: var(--color-text)">{{ $title }}</p>
+        </div>
 
- <section class="rounded-b p-3" style="background-color: var(--color-surface); color: var(--color-text);">
- {{ $slot }}
- </section>
- </div>
+        <section class="p-3" style="color: var(--color-text);">
+            {{ $slot }}
+        </section>
+    </div>
 </div>