update demo-club-house,

03_source/mobile/src/pages/DemoBankingUi/components/SkeletonDashboard/index.tsx

@@ -13,8 +13,9 @@ import {
   IonThumbnail,
 } from '@ionic/react';
 import { pulseOutline, sunnyOutline, thermometerOutline } from 'ionicons/icons';
+import React from 'react';
 
-export const SkeletonDashboard = () => (
+export const SkeletonDashboard = (): React.JSX.Element => (
   <IonGrid>
     <IonCard>
       <IonCardContent className="ion-text-center">

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

@@ -1,19 +1,19 @@
-import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
+import { IonRouterOutlet, IonTabs } from '@ionic/react';
 
-import { cloudOutline, searchOutline } from 'ionicons/icons';
 import { Route, Redirect } from 'react-router';
 
-import Tab1 from './AppPages/Tab1';
+// import Tab1 from './AppPages/Tab1';
-import Tab2 from './AppPages/Tab2';
+// import Tab2 from './AppPages/Tab2';
 
-import Home from './pages/Home.jsx';
+import Home from './pages/Home';
 import Account from './pages/Account';
 import AddCard from './pages/AddCard';
 import AddTransaction from './pages/AddTransaction';
 
 import './style.scss';
+import React from 'react';
 
-function DemoBankingUi() {
+function DemoBankingUi(): React.JSX.Element {
   return (
     <IonTabs className="demo-banking-ui">
       <IonRouterOutlet>

03_source/mobile/src/pages/DemoBankingUi/pages/Home.jsx

@@ -1,5 +1,17 @@
 import { useRef, useState } from 'react';
-import { IonButton, IonButtons, IonContent, IonGrid, IonHeader, IonIcon, IonPage, IonTitle, IonToolbar, useIonRouter, useIonViewDidEnter } from '@ionic/react';
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonGrid,
+  IonHeader,
+  IonIcon,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+  useIonRouter,
+  useIonViewDidEnter,
+} from '@ionic/react';
 import styles from './Home.module.css';
 import { AccountStore } from '../data/AccountStore';
 import CardSlide from '../components/CardSlide';
@@ -22,7 +34,7 @@ const Home = () => {
   const [mainColor, setMainColor] = useState(cards[0].color);
   const [slideSpace, setSlideSpace] = useState(10);
 
-  const slidesRef = useRef();
+  const slidesRef = useRef(null);
 
   useIonViewDidEnter(() => {
     setSlideSpace(0);
@@ -38,7 +50,9 @@ const Home = () => {
     document.getElementById(`slide_${swiperIndex}_balance`).classList.add('animate__headShake');
 
     setTimeout(() => {
-      document.getElementById(`slide_${swiperIndex}_balance`).classList.remove('animate__headShake');
+      document
+        .getElementById(`slide_${swiperIndex}_balance`)
+        .classList.remove('animate__headShake');
     }, 1000);
   };
 
@@ -47,9 +61,13 @@ const Home = () => {
     const swiperIndex = swiper.activeIndex;
 
     if (touched) {
-      document.getElementById(`slide_${swiperIndex}_transactions`).classList.add('animate__fadeOut');
+      document
+        .getElementById(`slide_${swiperIndex}_transactions`)
+        .classList.add('animate__fadeOut');
     } else {
-      document.getElementById(`slide_${swiperIndex}_transactions`).classList.remove('animate__fadeOut');
+      document
+        .getElementById(`slide_${swiperIndex}_transactions`)
+        .classList.remove('animate__fadeOut');
       document.getElementById(`slide_${swiperIndex}_transactions`).classList.add('animate__fadeIn');
     }
   };
@@ -70,7 +88,11 @@ const Home = () => {
               routerLink="/demo-banking-ui/account"
               className={stylesS.toolbarAvatar}
             >
-              <img alt="toolbar avatar" className={stylesS.toolbarAvatarImage} src={profile.avatar} />
+              <img
+                alt="toolbar avatar"
+                className={stylesS.toolbarAvatarImage}
+                src={profile.avatar}
+              />
             </IonButton>
           </IonButtons>
 
@@ -82,7 +104,11 @@ const Home = () => {
             </IonButton>
             {/*  */}
             <IonButton>
-              <IonIcon color="light" icon={searchOutline} style={{ backgroundColor: mainColor, borderRadius: '500px', padding: '0.2rem' }} />
+              <IonIcon
+                color="light"
+                icon={searchOutline}
+                style={{ backgroundColor: mainColor, borderRadius: '500px', padding: '0.2rem' }}
+              />
             </IonButton>
           </IonButtons>
         </IonToolbar>
@@ -101,7 +127,11 @@ const Home = () => {
           >
             {cards.map((card, index) => {
               return (
-                <SwiperSlide key={`slide_${index}`} id={`slide_${index}`} className={stylesS.customSlide}>
+                <SwiperSlide
+                  key={`slide_${index}`}
+                  id={`slide_${index}`}
+                  className={stylesS.customSlide}
+                >
                   <CardSlide key={index} card={card} profile={profile} index={index} />
                 </SwiperSlide>
               );

03_source/mobile/src/pages/DemoClubHouse/AppPages/Tab1.jsx

@@ -23,7 +23,7 @@ import { TalkCard } from '../components/TalkCard';
 import { useRef } from 'react';
 
 const Tab1 = () => {
-  const pageRef = useRef();
+  const pageRef = useRef(null);
   const talks = useStoreState(TalkStore, getTalks);
 
   const router = useIonRouter();

03_source/mobile/src/pages/DemoSkeletonText/pages/Home.tsx

@@ -30,7 +30,7 @@ const Home = (): React.JSX.Element => {
 
   return (
     <IonPage>
-      <IonHeader>
+      <IonHeader className="ion-no-border">
         <IonToolbar>
           <IonTitle>Posts TS</IonTitle>
 

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

@@ -1,12 +1,12 @@
-import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
+import { IonRouterOutlet, IonTabs } from '@ionic/react';
 
-import { cloudOutline, searchOutline } from 'ionicons/icons';
 import { Route, Redirect } from 'react-router';
 
 import './theme/variables.scss';
 import Home from './pages/Home';
+import React from 'react';
 
-function DemoStickyBottomSheetExample() {
+function DemoStickyBottomSheetExample(): React.JSX.Element {
   return (
     <IonTabs className="demo-sticky-bottom-sheet-example">
       <IonRouterOutlet>
@@ -20,18 +20,6 @@ function DemoStickyBottomSheetExample() {
           to="/demo-sticky-bottom-sheet-example/home"
         />
       </IonRouterOutlet>
-
-      {/*  */}
-      <IonTabBar slot="bottom">
-        <IonTabButton tab="tab1" href="/demo-sticky-bottom-sheet-example/tab1">
-          <IonIcon icon={cloudOutline} />
-          <IonLabel>Dashboard</IonLabel>
-        </IonTabButton>
-        <IonTabButton tab="tab2" href="/demo-sticky-bottom-sheet-example/tab2">
-          <IonIcon icon={searchOutline} />
-          <IonLabel>Search</IonLabel>
-        </IonTabButton>
-      </IonTabBar>
     </IonTabs>
   );
 }

03_source/mobile/src/pages/DemoStickyBottomSheetExample/pages/Home.tsx

@@ -9,12 +9,12 @@ import {
   IonToolbar,
   useIonRouter,
 } from '@ionic/react';
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { BottomSheet } from '../components/BottomSheet';
 import './Home.scss';
 import { chevronBackOutline } from 'ionicons/icons';
 
-const Home: React.FC = () => {
+const Home = (): React.JSX.Element => {
   const [showBottomSheet, setShowBottomSheet] = useState<boolean>(true);
 
   const handleClose = () => {
@@ -31,7 +31,7 @@ const Home: React.FC = () => {
 
   return (
     <IonPage>
-      <IonHeader>
+      <IonHeader className="ion-no-border">
         <IonToolbar>
           <IonTitle>Ionic Sticky Bottom Sheet</IonTitle>
 

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

@@ -3,7 +3,6 @@
 http://ionicframework.com/docs/theming/ */
 
   /** Ionic CSS Variables **/
-  :root {
   /** primary **/
   --ion-color-primary: #3880ff;
   --ion-color-primary-rgb: 56, 128, 255;
@@ -75,7 +74,6 @@ http://ionicframework.com/docs/theming/ */
   --ion-color-light-contrast-rgb: 0, 0, 0;
   --ion-color-light-shade: #d7d8da;
   --ion-color-light-tint: #f5f6f9;
-  }
 
   @media (prefers-color-scheme: dark) {
     /*