refactor: footer additional output & reduce size of content (#658)

Author: alexbarnsley

resources/views/footer-bar-desktop.blade.php

@@ -1,16 +1,18 @@
 @props([
-    'isArkProduct' => true,
-    'noBorder'     => '',
-    'copyClass'    => '',
-    'copyText'     => null,
-    'socials'      => null,
+    'isArkProduct'  => true,
+    'noBorder'      => '',
+    'copyClass'     => '',
+    'copyText'      => null,
+    'socials'       => null,
+    'copyrightSlot' => null,
 ])
 
 <div class="flex items-center justify-between @unless ($noBorder) border-t border-theme-secondary-800 @endunless">
     <x-ark-footer-copyright
         :is-ark-product="$isArkProduct"
         :copy-text="$copyText"
-        class="{{ $copyClass }}"
+        :class="$copyClass"
+        :copyright-slot="$copyrightSlot"
     />
 
     <x-ark-footer-social :networks="$socials" />

resources/views/footer-bar-mobile.blade.php

@@ -1,16 +1,18 @@
 @props([
-    'isArkProduct' => true,
-    'class'        => '',
-    'copyClass'    => '',
-    'copyText'     => null,
-    'socials'      => null,
+    'isArkProduct'  => true,
+    'class'         => '',
+    'copyClass'     => '',
+    'copyText'      => null,
+    'socials'       => null,
+    'copyrightSlot' => null,
 ])
 
 <div class="flex flex-col {{ $class }}">
     <x-ark-footer-copyright
         :is-ark-product="$isArkProduct"
         :copy-text="$copyText"
-        class="{{ $copyClass }}"
+        :class="$copyClass"
+        :copyright-slot="$copyrightSlot"
     />
 
     <x-ark-footer-social :networks="$socials" />

resources/views/footer-copyright.blade.php

@@ -1,17 +1,29 @@
 @props([
-    'isArkProduct' => true,
-    'copyText'     => 'ARK.io | ' . trans('ui::general.all_rights_reserved'),
+    'isArkProduct'  => true,
+    'copyText'      => 'ARK.io | ' . trans('ui::general.all_rights_reserved'),
+    'copyrightSlot' => null,
 ])
 
-<div {{ $attributes->merge(['class' => 'flex flex-col py-6 space-y-2 font-semibold text-theme-secondary-700 sm:block sm:space-y-0'])}}>
+<div {{ $attributes->merge(['class' => 'flex flex-col py-6 space-y-2 font-semibold text-sm text-theme-secondary-700 sm:flex-row sm:space-y-0 sm:space-x-1'])}}>
     <span class="whitespace-nowrap">
         {{ date('Y') }} &copy; {{ $copyText }}
     </span>
 
-    @if($isArkProduct)
-        <span class="hidden mr-1 sm:inline"> | </span>
-        <span class="whitespace-nowrap">
-            @svg('ark-logo-red-square', 'inline-block h-6 -mt-1') An <a href="https://ark.io/" class="underline hover:no-underline focus-visible:rounded">ARK.io</a> Product
-        </span>
-    @endif
+    <div class="flex">
+        @if($isArkProduct)
+            <div>
+                <span class="hidden mr-1 sm:inline"> | </span>
+                <span class="whitespace-nowrap">
+                    <x-ark-icon
+                        name="ark-logo-red-square"
+                        class="inline-block mr-1 -mt-1"
+                    />
+
+                    An <a href="https://ark.io/" class="underline hover:no-underline focus-visible:rounded">ARK.io</a> Product
+                </span>
+            </div>
+        @endif
+
+        {{ $copyrightSlot }}
+    </div>
 </div>

resources/views/footer.blade.php

@@ -1,29 +1,31 @@
 @props([
-    'desktopClass' => 'px-8 max-w-7xl hidden lg:flex',
-    'mobileClass'  => 'px-8 pb-8 lg:hidden',
-    'copyClass'    => '',
-    'copyText'     => null,
-    'isArkProduct' => true,
-    'socials'      => null,
+    'desktopClass'  => 'px-8 max-w-7xl hidden lg:flex',
+    'mobileClass'   => 'px-8 pb-8 lg:hidden',
+    'copyClass'     => '',
+    'copyText'      => null,
+    'isArkProduct'  => true,
+    'socials'       => null,
+    'copyrightSlot' => null,
 ])
 
 <div {{ $attributes->merge(['class' => 'border-t bg-theme-secondary-900 border-theme-secondary-800']) }}>
     <div class="{{ $desktopClass }} flex-col mx-auto">
-        {{-- Empty class to remove border --}}
         <x-ark-footer-bar-desktop
             :is-ark-product="$isArkProduct"
             :copy-class="$copyClass"
             :copy-text="$copyText"
             :socials="$socials"
+            :copyright-slot="$copyrightSlot"
             no-border
         />
     </div>
 
     <x-ark-footer-bar-mobile
-        class="{{ $mobileClass }}"
+        :class="$mobileClass"
         :is-ark-product="$isArkProduct"
         :copy-class="$copyClass"
         :copy-text="$copyText"
         :socials="$socials"
+        :copyright-slot="$copyrightSlot"
     />
 </div>