style: update mobile UI spacing, colors

src/components/board-buttons/board-buttons.module.css

@@ -1,11 +1,14 @@
 .mobileBoardButtons {
   text-align: center;
-  margin-bottom: 10px;
+}
+
+.addMargin {
+  margin-bottom: 7px;
 }
 
 .mobileBoardButtons button {
-  margin: 0 2px;
   text-transform: capitalize;
+  margin: 5px 2px;
 }
 
 .mobileBoardButtons a, .desktopBoardButtons a {

src/components/board-buttons/board-buttons.tsx

@@ -185,7 +185,7 @@ export const MobileBoardButtons = () => {
   const subplebbitAddress = params?.subplebbitAddress || accountComment?.subplebbitAddress;
 
   return (
-    <div className={styles.mobileBoardButtons}>
+    <div className={`${styles.mobileBoardButtons} ${!isInCatalogView ? styles.addMargin : ''}`}>
       <div className={styles.adButton}>
         [
         <Link

src/components/board-header/board-header.module.css

@@ -40,8 +40,8 @@
 }
 
 @media (max-width: 640px) {
-  .bannerCnt {
+  .boardTitle {
-    padding-top: 35px;
+    padding-top: 40px;
   }
  }
 

src/components/board-header/board-header.tsx

@@ -6,6 +6,7 @@ import { getFormattedTimeAgo } from '../../lib/utils/time-utils';
 import { isAllView, isSubscriptionsView } from '../../lib/utils/view-utils';
 import styles from './board-header.module.css';
 import { useMultisubMetadata } from '../../hooks/use-default-subplebbits';
+import useIsMobile from '../../hooks/use-is-mobile';
 
 const totalBanners = 59;
 
@@ -45,9 +46,11 @@ const BoardHeader = () => {
 
   return (
     <div className={styles.content}>
-      <div className={styles.bannerCnt}>
+      {!useIsMobile() && (
-        <ImageBanner key={isInAllView ? 'all' : isInSubscriptionsView ? 'subscriptions' : address} />
+        <div className={styles.bannerCnt}>
-      </div>
+          <ImageBanner key={isInAllView ? 'all' : isInSubscriptionsView ? 'subscriptions' : address} />
+        </div>
+      )}
       <div className={styles.boardTitle}>
         {title || `p/${shortAddress || subplebbitAddress}`}
         {isBoardOffline && <span className={styles.offlineIcon} title={offlineMessage} />}

src/components/topbar/topbar.module.css

@@ -44,6 +44,7 @@
   background-color: var(--topbar-mobile-background-color);
   border-bottom: var(--topbar-mobile-border-bottom);
   font-size: var(--topbar-mobile-font-size);
+  color: var(--topbar-mobile-button-text-color);
   position: fixed;
   width: 100%;
   z-index: 3;
@@ -72,6 +73,7 @@
 
 .boardSelect {
   float: left;
+  color: var(--homepage-box-link-text-color);
 }
 
 .pageJump {
@@ -81,8 +83,8 @@
 
 .pageJump a, .pageJump span {
   padding-right: 5px;
-  color: var(--homepage-box-link-text-color);
   text-decoration: var(--homepage-box-link-text-decoration);
+  cursor: pointer;
 }
 
 @media (max-width: 640px) {

src/views/catalog/catalog-filters/catalog-filters.module.css

@@ -19,6 +19,10 @@
   cursor: pointer;
 }
 
+.filtersButton {
+  text-transform: capitalize;
+}
+
 .modal label, .modal button, .modal select {
   cursor: pointer;
 }

src/views/catalog/catalog-filters/catalog-filters.tsx

@@ -57,7 +57,7 @@ const CatalogFilters = () => {
 
   return (
     <>
-      <span className='button' onClick={() => setShowModal(true)}>
+      <span className={`${styles.filtersButton} button`} onClick={() => setShowModal(true)}>
         {t('filters')}
       </span>
       {showModal && <FiltersModal closeModal={closeModal} />}