General fixes (#3)

* Header upgrade

Logo is now centered. Icons no longer wrap on smaller devices

* Homepage product adjustments

Title changed. Product grid now checks if no results.

* Added X-CSRF-TOKEN header to wretch config

* Added Tailwind typography

Author: JonKaric

stubs/resources/css/prose.css

@@ -7,6 +7,7 @@
 @import './buttons';
 @import './accessibility';
 @import './typography';
+@import './prose';
 
 @theme {
 	--font-*: initial;

stubs/resources/css/site.css

@@ -8,7 +8,8 @@ gaia.fetch = wretch()
     .options({
         headers: {
             "Content-Type": "application/json",
-            'X-Requested-With': 'XMLHttpRequest'
+            'X-Requested-With': 'XMLHttpRequest',
+            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
         }
     })
     .errorType("json")

stubs/resources/js/wretch.js

@@ -8,10 +8,10 @@
 
 <{{ $as }} 
     type="button" 
-    class="flex-col h-full px-3 sm:px-4 py-2 btn btn-ghost {{  $class  }}"
+    class="flex-col h-full px-2 sm:px-4 py-2 btn btn-ghost {{  $class  }}"
     {{ $attributes }}
 >
-    <s:svg src="{{  $icon }}" class="fill-current !size-6" />
+    <s:svg src="{{  $icon }}" class="fill-current size-6" />
     <span class="text-xs sr-only sm:not-sr-only">
         {{  $title  }}
 

stubs/resources/views/components/header-button.blade.php

@@ -11,14 +11,16 @@ <h1 class="text-center h1 mb-7">You've successfully installed Gaia!</h1>
 
 <section class="py-16 md:py-32">
   <div class="container">
-    <x-heading level="2"class="mb-3">Some Random Products</x-heading>
+    <x-heading level="2"class="mb-3">Some Products</x-heading>
     <p class="max-w-xl text-base text-gray-600 lg:text-lg">
       Once you have imported products successfully, some products will show here!
     </p>
 
     <div class="grid grid-cols-2 gap-5 mt-10 md:grid-cols-4">
       {{ collection:products limit="8" }}
-        {{ partial:partials/product }}
+        {{ unless no_results}}
+          {{ partial:partials/product }}
+        {{ /unless }}
       {{ /collection:products }}
     </div>
   </div>

stubs/resources/views/home.antlers.html

@@ -1,6 +1,4 @@
-<div class="flex justify-start">
-    <a href="{{ homepage }}" class="mr-10 text-lg font-medium text-gray-900">
-        {{ svg src="logo" class="w-20 h-12 sm:w-24 xl:w-28" aria-hidden="true" }}
-        <span class="sr-only">Homepage</span>
-    </a>
-</div>
+<a class="flex items-center justify-center" href="{{ homepage }}">
+    {{ svg src="logo" class="h-12 w-22 sm:w-24 xl:w-28" aria-hidden="true" }}
+    <span class="sr-only">Homepage</span>
+</a>

stubs/resources/views/layout/header/_logo.antlers.html

@@ -1,13 +1,28 @@
 <header class="relative flex items-center h-[68px] sm:h-[96px] bg-white">
     <div class="container">
-        <div class="flex flex-wrap items-center gap-2 py-1 lg:py-4 md:gap-5 md:justify-start">
+        <div class="flex flex-wrap items-center py-1 lg:py-4 md:justify-start">
 
-            {{ partial:layout/header/logo }}
 
-            {{ partial:layout/navigation/mobile/navigation }}
-            {{ partial:layout/navigation/desktop/navigation }}
+            <div class="w-5/12">
+                {{ partial:layout/navigation/mobile/navigation }}
+                {{ partial:layout/navigation/desktop/navigation }}
+            </div>
+
+            <div class="flex-grow hidden mr-10 lg:block">
+                {{ partial:layout/header/logo }}
+            </div>
 
-            <div class="flex ml-auto sm:gap-2">
+            <div class="flex justify-end w-full lg:w-5/12 lg:ml-auto sm:gap-2">
+
+                <x-header-button 
+                    title="Menu"
+                    icon="menu"
+                    \x-data="{}"
+                    class="lg:hidden"
+                    @click="$dispatch('drawer:open:navigation')"
+                    x-bind:aria-controls="$store.navigation.id"
+                    aria-label="Open Main Navigation"
+                />
 
                 <x-header-button 
                     title="{{ 'Search' | trans }}" 
@@ -19,20 +34,13 @@
                     aria-label="{{ 'Search' | trans }}" 
                 />
 
-                {{ partial:layout/header/user_menu }}
+                <div class="flex justify-center lg:hidden grow">
+                    {{ partial:layout/header/logo }}
+                </div>
 
-                {{ partial:features/minicart/minicart_counter }}
+                {{ partial:layout/header/user_menu }}
 
-                <x-header-button 
-                    title="Menu"
-                    icon="menu"
-                    \x-data="{}"
-                    class="lg:hidden"
-                    @click="$dispatch('drawer:open:navigation')"
-                    x-bind:aria-controls="$store.navigation.id"
-                    aria-label="Open Main Navigation"
-                />
-            
+                {{ partial:features/minicart/minicart_counter }}            
             </div>
         </div>
     </div>

stubs/resources/views/layout/header/header.antlers.html

@@ -1,3 +1,3 @@
-<section class="my-8">
+<section class="my-8 prose">
     {{ content }}
 </section>