update floating action button,

03_source/mobile/src/pages/DemoFloatingTabs/components/ExploreContainer.css

@@ -1,24 +0,0 @@
-.container {
-  text-align: center;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.container strong {
-  font-size: 20px;
-  line-height: 26px;
-}
-
-.container p {
-  font-size: 16px;
-  line-height: 22px;
-  color: #8c8c8c;
-  margin: 0;
-}
-
-.container a {
-  text-decoration: none;
-}

03_source/mobile/src/pages/DemoFloatingTabs/components/ExploreContainer.scss

@@ -0,0 +1,26 @@
+.floating-tab-bar {
+  .container {
+    text-align: center;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .container strong {
+    font-size: 20px;
+    line-height: 26px;
+  }
+
+  .container p {
+    font-size: 16px;
+    line-height: 22px;
+    color: #8c8c8c;
+    margin: 0;
+  }
+
+  .container a {
+    text-decoration: none;
+  }
+}

03_source/mobile/src/pages/DemoFloatingTabs/components/ExploreContainer.tsx

@@ -1,10 +1,19 @@
-import './ExploreContainer.css';
+import './ExploreContainer.scss';
 
 const ExploreContainer = ({ name }) => {
   return (
     <div className="container">
       <strong>{name}</strong>
-      <p>Explore <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
+      <p>
+        Explore{' '}
+        <a
+          target="_blank"
+          rel="noopener noreferrer"
+          href="https://ionicframework.com/docs/components"
+        >
+          UI Components
+        </a>
+      </p>
     </div>
   );
 };

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

@@ -1,30 +1,19 @@
-import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
+import { IonIcon, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
 
-import { cloudOutline, cogOutline, homeOutline, listOutline, searchOutline } from 'ionicons/icons';
+import { cogOutline, homeOutline, listOutline } from 'ionicons/icons';
 import { Route, Redirect } from 'react-router';
 
-// import Tab1 from './AppPages/Tab1';
-// import Tab2 from './AppPages/Tab2';
-
 import Tab1 from './pages/Tab1';
 import Tab2 from './pages/Tab2';
 import Tab3 from './pages/Tab3';
 
-import './style.scss';
+import './theme/style.scss';
-import './theme/floating-tab-bar.css';
+import './theme/floating-tab-bar.scss';
 
 function DemoFloatingTabs() {
   return (
-    <IonTabs>
+    <IonTabs className="demo-floating-tabs">
       <IonRouterOutlet>
-        {/*
-        <Route exact path="/demo-floating-tabs/tab1">
-          <Tab1 />
-        </Route>
-        <Route exact path="/demo-floating-tabs/tab2">
-          <Tab2 />
-        </Route>
-        */}
         <Route exact path="/demo-floating-tabs/tab1">
           <Tab1 />
         </Route>
@@ -37,31 +26,18 @@ function DemoFloatingTabs() {
         <Redirect exact path="/demo-floating-tabs" to="/demo-floating-tabs/tab1" />
       </IonRouterOutlet>
 
-      {/*  */}
       <IonTabBar slot="bottom">
-        {/*
-        <IonTabButton tab="tab1" href="/demo-floating-tabs/tab1">
-          <IonIcon icon={cloudOutline} />
-          <IonLabel>Dashboard</IonLabel>
-        </IonTabButton>
-        <IonTabButton tab="tab2" href="/demo-floating-tabs/tab2">
-          <IonIcon icon={searchOutline} />
-          <IonLabel>Search</IonLabel>
-        </IonTabButton>
-         */}
-        {/*  */}
         <IonTabButton tab="tab1" href="/demo-floating-tabs/tab1">
           <IonIcon icon={homeOutline} />
-          {/* <IonLabel>Tab 1</IonLabel> */}
         </IonTabButton>
+
         <IonTabButton tab="tab2" href="/demo-floating-tabs/tab2">
           <IonIcon icon={listOutline} />
-          {/* <IonLabel>Tab 2</IonLabel> */}
         </IonTabButton>
+
         <IonTabButton tab="tab3" href="/demo-floating-tabs/tab3">
           <IonIcon icon={cogOutline} />
-          {/* <IonLabel>Tab 3</IonLabel> */}
+        </IonTabButton>
-        </IonTabButton>{' '}
       </IonTabBar>
     </IonTabs>
   );

03_source/mobile/src/pages/DemoFloatingTabs/pages/Tab1.tsx

@@ -1,14 +1,37 @@
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+  useIonRouter,
+} from '@ionic/react';
 import ExploreContainer from '../components/ExploreContainer';
 import './Tab1.css';
 import React from 'react';
+import { chevronBackOutline } from 'ionicons/icons';
 
 const Tab1 = (): React.JSX.Element => {
+  const router = useIonRouter();
+
+  function handleBackClick() {
+    router.goBack();
+  }
+
   return (
     <IonPage>
       <IonHeader>
         <IonToolbar>
           <IonTitle>Floating Tab Bar</IonTitle>
+
+          <IonButtons slot="start">
+            <IonButton onClick={() => handleBackClick()}>
+              <IonIcon icon={chevronBackOutline} color="primary" />
+            </IonButton>
+          </IonButtons>
         </IonToolbar>
       </IonHeader>
       <IonContent fullscreen>

03_source/mobile/src/pages/DemoFloatingTabs/theme/floating-tab-bar.css

@@ -1,25 +0,0 @@
-:root {
-  --ion-background-color: white;
-  --ion-tab-bar-color: rgb(92, 123, 207);
-  --ion-tab-bar-color-selected: rgb(255, 255, 255);
-}
-
-ion-tab-bar {
-  --background: rgb(44, 83, 192);
-  box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.4);
-  border-radius: 16px !important;
-
-  height: 50px;
-  width: 90%;
-  padding-top: 5px;
-  padding-bottom: 5px;
-
-  bottom: 20px;
-  position: relative;
-  margin: 0 auto !important;
-  border-top: none;
-}
-
-ion-tab-button {
-  border-radius: 16px !important;
-}

03_source/mobile/src/pages/DemoFloatingTabs/theme/floating-tab-bar.scss

@@ -0,0 +1,27 @@
+.demo-floating-tabs {
+  * {
+    --ion-background-color: white;
+    --ion-tab-bar-color: rgb(92, 123, 207);
+    --ion-tab-bar-color-selected: rgb(255, 255, 255);
+  }
+
+  ion-tab-bar {
+    --background: rgb(44, 83, 192);
+    box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.4);
+    border-radius: 16px !important;
+
+    height: 50px;
+    width: 90%;
+    padding-top: 5px;
+    padding-bottom: 5px;
+
+    bottom: 20px;
+    position: relative;
+    margin: 0 auto !important;
+    border-top: none;
+  }
+
+  ion-tab-button {
+    border-radius: 16px !important;
+  }
+}

03_source/mobile/src/pages/DemoFloatingTabs/theme/variables.css

@@ -1,77 +0,0 @@
-/* Ionic Variables and Theming. For more info, please see:
-http://ionicframework.com/docs/theming/ */
-
-/** Ionic CSS Variables **/
-:root {
-  /** primary **/
-  --ion-color-primary: #3880ff;
-  --ion-color-primary-rgb: 56, 128, 255;
-  --ion-color-primary-contrast: #ffffff;
-  --ion-color-primary-contrast-rgb: 255, 255, 255;
-  --ion-color-primary-shade: #3171e0;
-  --ion-color-primary-tint: #4c8dff;
-
-  /** secondary **/
-  --ion-color-secondary: #3dc2ff;
-  --ion-color-secondary-rgb: 61, 194, 255;
-  --ion-color-secondary-contrast: #ffffff;
-  --ion-color-secondary-contrast-rgb: 255, 255, 255;
-  --ion-color-secondary-shade: #36abe0;
-  --ion-color-secondary-tint: #50c8ff;
-
-  /** tertiary **/
-  --ion-color-tertiary: #5260ff;
-  --ion-color-tertiary-rgb: 82, 96, 255;
-  --ion-color-tertiary-contrast: #ffffff;
-  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
-  --ion-color-tertiary-shade: #4854e0;
-  --ion-color-tertiary-tint: #6370ff;
-
-  /** success **/
-  --ion-color-success: #2dd36f;
-  --ion-color-success-rgb: 45, 211, 111;
-  --ion-color-success-contrast: #ffffff;
-  --ion-color-success-contrast-rgb: 255, 255, 255;
-  --ion-color-success-shade: #28ba62;
-  --ion-color-success-tint: #42d77d;
-
-  /** warning **/
-  --ion-color-warning: #ffc409;
-  --ion-color-warning-rgb: 255, 196, 9;
-  --ion-color-warning-contrast: #000000;
-  --ion-color-warning-contrast-rgb: 0, 0, 0;
-  --ion-color-warning-shade: #e0ac08;
-  --ion-color-warning-tint: #ffca22;
-
-  /** danger **/
-  --ion-color-danger: #eb445a;
-  --ion-color-danger-rgb: 235, 68, 90;
-  --ion-color-danger-contrast: #ffffff;
-  --ion-color-danger-contrast-rgb: 255, 255, 255;
-  --ion-color-danger-shade: #cf3c4f;
-  --ion-color-danger-tint: #ed576b;
-
-  /** dark **/
-  --ion-color-dark: #222428;
-  --ion-color-dark-rgb: 34, 36, 40;
-  --ion-color-dark-contrast: #ffffff;
-  --ion-color-dark-contrast-rgb: 255, 255, 255;
-  --ion-color-dark-shade: #1e2023;
-  --ion-color-dark-tint: #383a3e;
-
-  /** medium **/
-  --ion-color-medium: #92949c;
-  --ion-color-medium-rgb: 146, 148, 156;
-  --ion-color-medium-contrast: #ffffff;
-  --ion-color-medium-contrast-rgb: 255, 255, 255;
-  --ion-color-medium-shade: #808289;
-  --ion-color-medium-tint: #9d9fa6;
-
-  /** light **/
-  --ion-color-light: #f4f5f8;
-  --ion-color-light-rgb: 244, 245, 248;
-  --ion-color-light-contrast: #000000;
-  --ion-color-light-contrast-rgb: 0, 0, 0;
-  --ion-color-light-shade: #d7d8da;
-  --ion-color-light-tint: #f5f6f9;
-}