From 7b4a7451331404afc23a42da308cd0e7a5d63d08 Mon Sep 17 00:00:00 2001
From: Luqmaan Essop <luqmaan.essop@amazee.com>
Date: Wed, 8 May 2024 10:26:13 +0200
Subject: [PATCH] style: complete styling

---
 packages/ui/src/components/Molecules/Breadcrumbs.tsx | 6 +++---
 packages/ui/src/components/Organisms/PageDisplay.tsx | 5 ++---
 packages/ui/src/components/Routes/Page.stories.tsx   | 2 +-
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/packages/ui/src/components/Molecules/Breadcrumbs.tsx b/packages/ui/src/components/Molecules/Breadcrumbs.tsx
index 0efa3eb61..27232e13b 100644
--- a/packages/ui/src/components/Molecules/Breadcrumbs.tsx
+++ b/packages/ui/src/components/Molecules/Breadcrumbs.tsx
@@ -20,7 +20,7 @@ export function BreadCrumbs({ className }: { className?: string }) {
           <li className="inline-flex items-center" key={id}>
             {index > 0 ? (
               <div aria-hidden="true">
-                <ChevronRightIcon className={'w-3 h-3 text-gray-400 mx-1'} />
+                <ChevronRightIcon className={'w-4 h-4 text-gray-400 mr-4'} />
               </div>
             ) : null}
             <Link
@@ -35,7 +35,7 @@ export function BreadCrumbs({ className }: { className?: string }) {
             >
               {target === '/' && (
                 <svg
-                  className="w-3 h-3 mx-1 mr-2"
+                  className="w-4 h-4 mr-4"
                   aria-hidden="true"
                   xmlns="http://www.w3.org/2000/svg"
                   fill="currentColor"
@@ -44,7 +44,7 @@ export function BreadCrumbs({ className }: { className?: string }) {
                   <path d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z" />
                 </svg>
               )}
-              {title}
+              <span className="mr-4">{title}</span>
             </Link>
           </li>
         ))}
diff --git a/packages/ui/src/components/Organisms/PageDisplay.tsx b/packages/ui/src/components/Organisms/PageDisplay.tsx
index 29ef63583..2abf2c3e9 100644
--- a/packages/ui/src/components/Organisms/PageDisplay.tsx
+++ b/packages/ui/src/components/Organisms/PageDisplay.tsx
@@ -21,10 +21,9 @@ export function PageDisplay(page: PageFragment) {
             <PageHero {...page.hero} />
             <BreadCrumbs className="mx-auto max-w-3xl" />
           </>
-        ) : (
-          <BreadCrumbs />
-        )}
+        ) : null}
         <div className="bg-white pt-5 pb-12 lg:px-8">
+          <BreadCrumbs />
           <div className="mx-auto max-w-3xl text-base leading-7 text-gray-700">
             {page?.content?.filter(isTruthy).map((block, index) => {
               switch (block.__typename) {
diff --git a/packages/ui/src/components/Routes/Page.stories.tsx b/packages/ui/src/components/Routes/Page.stories.tsx
index 6f3babd25..27ead643b 100644
--- a/packages/ui/src/components/Routes/Page.stories.tsx
+++ b/packages/ui/src/components/Routes/Page.stories.tsx
@@ -57,7 +57,7 @@ export const Default = {
     },
   },
   parameters: {
-    location: new URL('local:/drupal'),
+    location: new URL('local:/gatsby-turbo'),
   },
 } satisfies StoryObj<ViewPageQuery>;