Merge pull request #4061 from omnivore-app/fix/web-home-load-more

Dont show section if all items removed, better colours for load more button

packages/web/components/elements/Pagination.tsx

@@ -46,8 +46,8 @@ const Pagination = <T,>({
               fontFamily: '$inter',
               fontSize: '15px',
               fontWeight: '500',
-              color: '$thTextSubtle4',
-              bg: '#3D3D3D',
+              color: '$readerFont',
+              bg: '$thNavMenuFooter',
               py: '10px',
               px: '25px',
             }}

packages/web/components/nav-containers/home.tsx

@@ -244,19 +244,21 @@ const TopPicksHomeSection = (props: HomeSectionProps): JSX.Element => {
         },
       }}
     >
-      <SpanBox
-        css={{
-          fontFamily: '$inter',
-          fontSize: '16px',
-          fontWeight: '600',
-          color: '$homeTextTitle',
-          '@mdDown': {
-            px: '20px',
-          },
-        }}
-      >
-        {props.homeSection.title}
-      </SpanBox>
+      {items.length > 0 && (
+        <SpanBox
+          css={{
+            fontFamily: '$inter',
+            fontSize: '16px',
+            fontWeight: '600',
+            color: '$homeTextTitle',
+            '@mdDown': {
+              px: '20px',
+            },
+          }}
+        >
+          {props.homeSection.title}
+        </SpanBox>
+      )}
 
       <Pagination
         items={items}

packages/web/components/templates/navMenu/Footer.tsx

@@ -17,7 +17,7 @@ export const NavMenuFooter = (props: NavMenuFooterProps): JSX.Element => {
         position: 'fixed',
         bottom: '0%',
         alignItems: 'center',
-        backgroundColor: '$thNavMenuFooter',
+        bg: '$thNavMenuFooter',
         width: LIBRARY_LEFT_MENU_WIDTH,
         overflowY: 'auto',
         overflowX: 'hidden',