From 2bb8e2384f802cc4e0ef1de2663d51daced00bfe Mon Sep 17 00:00:00 2001
From: Blake McCord <btmccord@gmail.com>
Date: Sat, 13 Jan 2024 21:57:05 +0200
Subject: [PATCH] fix: match search result area badge to climb result (#1072)

---
 src/components/search/templates/ClimbResultXSearch.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/search/templates/ClimbResultXSearch.tsx b/src/components/search/templates/ClimbResultXSearch.tsx
index ae22d863d..1ab84a842 100644
--- a/src/components/search/templates/ClimbResultXSearch.tsx
+++ b/src/components/search/templates/ClimbResultXSearch.tsx
@@ -51,16 +51,16 @@ interface AreaItemProps {
 export const AreaItem = ({ item }: AreaItemProps): JSX.Element => {
   const { pathTokens, highlightIndices, name } = item
   return (
-    <div className='py-4 text-xs flex flex-col gap-2'>
+    <div className='py-4 text-xs flex flex-row justify-between gap-2'>
       {pathTokens.length === 1 &&
         <>
-          <div className='badge bg-area-cue bg-opacity-60 badge-sm'>country</div>
           <div className='badge badge-outline badge-lg'>{name} →</div>
+          <div className='rounded-lg p-1 px-3 bg-area-cue bg-opacity-40 text-xs mr-2 self-center h-fit'>country</div>
         </>}
       {pathTokens.length > 1 &&
         <>
-          <div className='badge bg-area-cue badge-sm'>area</div>
           <TextOnlyCrumbs pathTokens={pathTokens} highlightIndices={highlightIndices} />
+          <div className='rounded-lg p-1 px-3 bg-area-cue text-base-100 text-xs mr-2 self-center h-fit'>area</div>
         </>}
     </div>
   )