feat: enhance CarousellMe UI with updated filter button styling, end of list indicator, and improved content padding

03_source/mobile/src/pages/CarousellMe/ListingsContent/index.tsx

@@ -56,6 +56,7 @@ import {
   chevronDownSharp,
   chevronForwardSharp,
   filterSharp,
+  filter,
 } from 'ionicons/icons';
 // import AboutPopover from '../../components/AboutPopover';
 import { format, parseISO } from 'date-fns';
@@ -115,15 +116,15 @@ const ListingsContent: React.FC<SessionListProps> = ({ hide }) => {
             style={{ padding: 0 }}
           ></IonSearchbar>
 
-          <div style={{ fontSize: '0.8rem' }}>
+          <div style={{ fontSize: '0.75rem', display: 'flex', justifyContent: 'space-between' }}>
             <IonButton size="small" fill="outline" onClick={(e) => setOpenExplain(true)}>
-              <IonIcon slot="end" icon={filterSharp} style={{ fontSize: '0.8rem' }}></IonIcon>
-              Filters
+              <IonIcon slot="end" icon={filter} style={{ fontSize: '0.75rem' }}></IonIcon>
+              <div style={{ fontSize: '0.75rem' }}>Filters</div>
             </IonButton>
-            <IonButton size="small" fill="outline">
+            <IonButton size="small" fill="outline" style={{ fontSize: '0.75rem' }}>
               <IonText>{`Status:  ${'All'}`}</IonText>
             </IonButton>
-            <IonButton size="small" fill="outline">
+            <IonButton size="small" fill="outline" style={{ fontSize: '0.75rem' }}>
               <IonText>{`In: All Categories`}</IonText>
             </IonButton>
           </div>
@@ -142,6 +143,22 @@ const ListingsContent: React.FC<SessionListProps> = ({ hide }) => {
           <SellingButton />
           <SellingButton />
         </div>
+
+        <div
+          style={{
+            height: '5rem',
+            color: 'lightgray',
+            display: 'inline-flex',
+            flexDirection: 'row',
+            justifyContent: 'center',
+            alignItems: 'center',
+
+            //
+            width: '100%',
+          }}
+        >
+          end of list
+        </div>
       </div>
     </>
   );

03_source/mobile/src/pages/CarousellMe/index.tsx

@@ -138,7 +138,7 @@ const CarousellMe: React.FC<CarousellMeProps> = () => {
 
   return (
     <IonPage id="carousell-me-page" style={{}}>
-      <IonContent style={{ paddingBottom: '5rem' }}>
+      <IonContent>
         <IonHeader className="ion-no-border">
           <IonToolbar>
             <IonButtons slot="end">
@@ -177,9 +177,6 @@ const CarousellMe: React.FC<CarousellMeProps> = () => {
             </IonButtons>
           </IonToolbar>
         </IonHeader>
-        {/*  */}
-        {/*  */}
-        {/*  */}
         <div className="about-header">
           {/* Instead of loading an image each time the select changes, use opacity to transition them */}
           <div
@@ -190,6 +187,7 @@ const CarousellMe: React.FC<CarousellMeProps> = () => {
             }}
           ></div>
         </div>
+        {/*  */}
         <div
           style={{
             display: 'flex',
@@ -207,6 +205,8 @@ const CarousellMe: React.FC<CarousellMeProps> = () => {
                 width: '75px',
                 borderRadius: '50px',
                 border: '3px solid white',
+                //
+                boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
               }}
             />
 
@@ -369,17 +369,12 @@ const CarousellMe: React.FC<CarousellMeProps> = () => {
           <IonSegmentButton value="reviews">{t('Reviwes')}</IonSegmentButton>
           <IonSegmentButton value="about">{t('About')}</IonSegmentButton>
         </IonSegment>
+
         {/* listing / reviews / about */}
         <ListingsContent hide={segment != 'listings'} />
         <ReviewsContent hide={segment != 'reviews'} />
         <AboutContent hide={segment != 'about'} />
       </IonContent>
-
-      {/*
-      <IonPopover isOpen={showPopover} event={popoverEvent} onDidDismiss={() => setShowPopover(false)}>
-        <AboutPopover dismiss={() => setShowPopover(false)} />
-      </IonPopover>
-      */}
     </IonPage>
   );
 };

03_source/mobile/src/pages/CarousellMe/style.scss

@@ -13,10 +13,6 @@
     }
   }
 
-  ion-content {
-    --padding-bottom: 5rem;
-  }
-
   ion-toolbar {
     position: absolute;
 

03_source/mobile/src/pages/CarousellMe/theme/variables.scss

@@ -1,5 +1,5 @@
 #carousell-me-page {
-  ion-button {
+  * {
     --ion-color-primary: #243763;
     --ion-color-primary-rgb: 36, 55, 99;
     --ion-color-primary-contrast: #ffffff;