From 6eb521f5016fc9ca3c9cce485a2068a9ed58478c Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Sun, 30 Jun 2024 11:47:09 +0200
Subject: [PATCH] style: update mobile UI spacing, colors

---
 src/components/board-buttons/board-buttons.module.css    | 7 +++++--
 src/components/board-buttons/board-buttons.tsx           | 2 +-
 src/components/board-header/board-header.module.css      | 4 ++--
 src/components/board-header/board-header.tsx             | 9 ++++++---
 src/components/topbar/topbar.module.css                  | 4 +++-
 .../catalog/catalog-filters/catalog-filters.module.css   | 4 ++++
 src/views/catalog/catalog-filters/catalog-filters.tsx    | 2 +-
 7 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/components/board-buttons/board-buttons.module.css b/src/components/board-buttons/board-buttons.module.css
index 423986ec..a1c3a79a 100644
--- a/src/components/board-buttons/board-buttons.module.css
+++ b/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 {
diff --git a/src/components/board-buttons/board-buttons.tsx b/src/components/board-buttons/board-buttons.tsx
index aa109f6c..979500b7 100644
--- a/src/components/board-buttons/board-buttons.tsx
+++ b/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
diff --git a/src/components/board-header/board-header.module.css b/src/components/board-header/board-header.module.css
index 1b76f807..01845509 100644
--- a/src/components/board-header/board-header.module.css
+++ b/src/components/board-header/board-header.module.css
@@ -40,8 +40,8 @@
 }
 
 @media (max-width: 640px) {
-  .bannerCnt {
-    padding-top: 35px;
+  .boardTitle {
+    padding-top: 40px;
   }
  }
 
diff --git a/src/components/board-header/board-header.tsx b/src/components/board-header/board-header.tsx
index 2c27ec9c..bbce7043 100644
--- a/src/components/board-header/board-header.tsx
+++ b/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}>
-        <ImageBanner key={isInAllView ? 'all' : isInSubscriptionsView ? 'subscriptions' : address} />
-      </div>
+      {!useIsMobile() && (
+        <div className={styles.bannerCnt}>
+          <ImageBanner key={isInAllView ? 'all' : isInSubscriptionsView ? 'subscriptions' : address} />
+        </div>
+      )}
       <div className={styles.boardTitle}>
         {title || `p/${shortAddress || subplebbitAddress}`}
         {isBoardOffline && <span className={styles.offlineIcon} title={offlineMessage} />}
diff --git a/src/components/topbar/topbar.module.css b/src/components/topbar/topbar.module.css
index 2afdf59b..bfb22c83 100644
--- a/src/components/topbar/topbar.module.css
+++ b/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) {
diff --git a/src/views/catalog/catalog-filters/catalog-filters.module.css b/src/views/catalog/catalog-filters/catalog-filters.module.css
index 4ef358e7..843bd8cd 100644
--- a/src/views/catalog/catalog-filters/catalog-filters.module.css
+++ b/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;
 }
diff --git a/src/views/catalog/catalog-filters/catalog-filters.tsx b/src/views/catalog/catalog-filters/catalog-filters.tsx
index 8169dce2..2d64bb46 100644
--- a/src/views/catalog/catalog-filters/catalog-filters.tsx
+++ b/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} />}