define color once, then inherit

scout-ch · Oct 16, 2023 · cbd0e24 · cbd0e24
1 parent e19484f
commit cbd0e24
Showing 1 changed file with 5 additions and 5 deletions.
diff --git 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} 
             >