From cbd0e243868bb73171c7850b3c901744bb3e7f2d Mon Sep 17 00:00:00 2001
From: bodie <bodo.braegger@pm.me>
Date: Mon, 25 Sep 2023 17:17:35 +0200
Subject: [PATCH] define color once, then inherit

---
 src/components/Footer.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 9aa0e35..c8d5bf9 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -44,14 +44,14 @@ function Footer({ t }: Props) {
 
   // render the footer with the localized navigation buttons
   return <>
-    <div data-container="footer" className='py-6'>
+    <div data-container="footer" className='py-6 color-fg-default color-bg-default color-border-default'>
       <nav className="footer-nav d-flex flex-justify-center">
         {/* <div className='footer-logo hide-sm mr-6 mb-1 d-inline-flex'><img alt='PBSLogo' src={PBSLogo}></img></div> */}
         {(prevSection || nextSection) && <>
           <ButtonGroup>
             <Button size="large" 
               className='btn-nav btn-footer pb-5 pt-5
-              color-fg-default color-bg-default color-border-default' 
+                color-fg-inherit color-bg-inherit color-border-inherit' 
               onClick={() => navigate(`/${prevSlug}`)}
               leadingIcon={prevSection? ArrowLeftIcon: ArrowUpIcon} 
             >
@@ -65,8 +65,8 @@ function Footer({ t }: Props) {
               }
             </Button>
             <Button size="large" 
-              className='btn-nav btn-footer pb-5 pt-5 
-              color-fg-default color-bg-default color-border-default'
+              className='btn-nav btn-footer pb-5 pt-5
+                color-fg-inherit color-bg-inherit color-border-inherit' 
               sx={{color:'fg.default', backgroundColor: 'canvas.default'}}
               onClick={() => navigate(`/${nextSlug}`)}
               trailingIcon={nextSection? ArrowRightIcon: ArrowUpIcon} 
@@ -85,7 +85,7 @@ function Footer({ t }: Props) {
         {(!prevSection && !nextSection) && <>
           <Button size="large" 
             className='btn-nav btn-footer
-              color-fg-default color-bg-default color-border-default'
+              color-fg-inherit color-bg-inherit color-border-inherit' 
             onClick={() => navigate(`/${prevSlug}`)}
             leadingIcon={ArrowUpIcon} 
             >