From c33f424333d2635570a1a96773864229bba64554 Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Tue, 11 Apr 2023 16:21:24 +0100
Subject: [PATCH] Fixes /more page + fixes multiple duration badge on
 BookingPage (#8200)

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
---
 apps/web/components/booking/BookingDescription.tsx | 6 +++---
 packages/features/shell/Shell.tsx                  | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/web/components/booking/BookingDescription.tsx b/apps/web/components/booking/BookingDescription.tsx
index 75d98b9051..8e4aa8b6c9 100644
--- a/apps/web/components/booking/BookingDescription.tsx
+++ b/apps/web/components/booking/BookingDescription.tsx
@@ -132,9 +132,9 @@ const BookingDescription: FC<Props> = (props) => {
                       variant="gray"
                       className={classNames(
                         duration === dur.toString()
-                          ? "bg-darkgray-200 text-darkgray-900 dark:bg-darkmodebrand dark:!text-darkmodebrandcontrast"
-                          : "hover:bg-darkgray-200 dark:hover:bg-darkmodebrand hover:text-darkgray-900 dark:hover:text-darkmodebrandcontrast dark:bg-darkgray-200 bg-emphasis text-emphasis dark:text-inverted",
-                        "cursor-pointer"
+                          ? "bg-emphasis border-emphasis text-emphasis "
+                          : "bg-subtle text-default border-transparent ",
+                        "cursor-pointer border"
                       )}
                       onClick={() => {
                         setDuration(dur);
diff --git a/packages/features/shell/Shell.tsx b/packages/features/shell/Shell.tsx
index 3211e81c0c..a52c9de9a4 100644
--- a/packages/features/shell/Shell.tsx
+++ b/packages/features/shell/Shell.tsx
@@ -715,7 +715,7 @@ const MobileNavigationMoreItem: React.FC<{
   if (!shouldDisplayNavigationItem) return null;
 
   return (
-    <li className="border-b last:border-b-0" key={item.name}>
+    <li className="border-subtle border-b last:border-b-0" key={item.name}>
       <Link href={item.href} className="hover:bg-subtle flex items-center justify-between p-5">
         <span className="text-default flex items-center font-semibold ">
           {item.icon && <item.icon className="h-5 w-5 flex-shrink-0 ltr:mr-3 rtl:ml-3" aria-hidden="true" />}
@@ -912,7 +912,7 @@ function TopNav() {
 }
 
 export const MobileNavigationMoreItems = () => (
-  <ul className="mt-2 rounded-md border">
+  <ul className="border-subtle mt-2 rounded-md border">
     {mobileNavigationMoreItems.map((item) => (
       <MobileNavigationMoreItem key={item.name} item={item} />
     ))}