update demo-fast-food-app,

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

@@ -14,9 +14,9 @@ import {
 
 import { Geolocation } from '@capacitor/geolocation';
 import { useEffect, useState } from 'react';
-import { SkeletonDashboard } from '../components/SkeletonDashboard';
+import { SkeletonDashboard } from '../TestComponents/SkeletonDashboard';
 import { chevronBackOutline, refreshOutline } from 'ionicons/icons';
-import { CurrentWeather } from '../components/CurrentWeather';
+import { CurrentWeather } from '../TestComponents/CurrentWeather';
 
 function Tab1() {
   const router = useIonRouter();

03_source/mobile/src/pages/Demo2FaExample/AppPages/Tab2.jsx

@@ -10,7 +10,7 @@ import {
   IonToolbar,
 } from '@ionic/react';
 import { useState } from 'react';
-import { CurrentWeather } from '../components/CurrentWeather';
+import { CurrentWeather } from '../TestComponents/CurrentWeather';
 
 function Tab2() {
   const [search, setSearch] = useState('');

03_source/mobile/src/pages/Demo2FaExample/components/Keypad.module.scss

@@ -0,0 +1,5 @@
+.keypad {
+  bottom: 0;
+  position: absolute;
+  width: 100%;
+}

03_source/mobile/src/pages/Demo2FaExample/components/Keypad.tsx

@@ -0,0 +1,118 @@
+import { IonRow } from "@ionic/react";
+import styles from "./Keypad.module.scss";
+import KeypadButton from "./KeypadButton";
+
+const Keypad = (props: any): JSX.Element => {
+  const { activeIndex, handleClick, handleRemove, amount, correct } = props;
+
+  const keypadButtons = [
+    [
+      {
+        value: "1",
+        handleClick: () => handleClick(activeIndex, 1),
+        small: false,
+        remove: false,
+      },
+      {
+        value: "2",
+        handleClick: () => handleClick(activeIndex, 2),
+        small: false,
+        remove: false,
+      },
+      {
+        value: "3",
+        handleClick: () => handleClick(activeIndex, 3),
+        small: false,
+        remove: false,
+      },
+    ],
+    [
+      {
+        value: "4",
+        handleClick: () => handleClick(activeIndex, 4),
+        small: false,
+        remove: false,
+      },
+      {
+        value: "5",
+        handleClick: () => handleClick(activeIndex, 5),
+        small: false,
+        remove: false,
+      },
+      {
+        value: "6",
+        handleClick: () => handleClick(activeIndex, 6),
+        small: false,
+        remove: false,
+      },
+    ],
+    [
+      {
+        value: "7",
+        handleClick: () => handleClick(activeIndex, 7),
+        small: false,
+        remove: false,
+      },
+      {
+        value: "8",
+        handleClick: () => handleClick(activeIndex, 8),
+        small: false,
+        remove: false,
+      },
+      {
+        value: "9",
+        handleClick: () => handleClick(activeIndex, 9),
+        small: false,
+        remove: false,
+      },
+    ],
+    [
+      {
+        value: "Resend",
+        handleClick: () => handleClick(activeIndex, 1),
+        small: true,
+        remove: false,
+      },
+      {
+        value: "0",
+        handleClick: () => handleClick(activeIndex, 2),
+        small: false,
+        remove: false,
+      },
+      {
+        value: "",
+        handleClick: () => handleRemove(),
+        small: true,
+        remove: true,
+      },
+    ],
+  ];
+
+  return (
+    <div className={`${styles.keypad}`}>
+      {keypadButtons.map((keypadRow, index) => {
+        const isDisabled = parseInt(activeIndex) === parseInt(amount);
+
+        return (
+          <IonRow key={`keypadRow_${index}`}>
+            {keypadRow.map((button, index2) => {
+              return (
+                <KeypadButton
+                  correct={correct}
+                  isDisabled={isDisabled}
+                  key={`keypadButton_${index2}`}
+                  value={button.value}
+                  handleClick={button.handleClick}
+                  small={button.small}
+                  remove={button.remove}
+                />
+              );
+            })}
+          </IonRow>
+        );
+      })}
+    </div>
+  );
+};
+
+export default Keypad;

03_source/mobile/src/pages/Demo2FaExample/components/KeypadButton.module.scss

@@ -0,0 +1,30 @@
+.logo {
+  height: 4rem;
+  width: auto;
+}
+
+.keypadButton {
+  --background: none;
+  --color: black;
+  font-size: 2rem;
+  font-weight: 700;
+  --outline: none;
+  --border: none;
+  --box-shadow: none;
+  padding: none;
+  margin: none;
+  --background-hover: rgb(245, 245, 245) !important;
+  --background-focused: rgb(245, 245, 245) !important;
+  --background-activated: rgb(245, 245, 245) !important;
+}
+
+.smallKeypadButton {
+  font-size: 1.4rem;
+  margin-top: 1rem;
+}
+
+.keypad {
+  bottom: 0;
+  position: absolute;
+  width: 100%;
+}

03_source/mobile/src/pages/Demo2FaExample/components/KeypadButton.tsx

@@ -0,0 +1,31 @@
+import { IonButton, IonCol, IonIcon } from "@ionic/react";
+import { backspaceOutline } from "ionicons/icons";
+import styles from "./KeypadButton.module.scss";
+
+const KeypadButton = (props: any): JSX.Element => {
+  const {
+    small,
+    value,
+    remove,
+    handleClick,
+    isDisabled = false,
+    correct,
+  } = props;
+
+  return (
+    <IonCol size="4" className={styles.keypadButton}>
+      <IonButton
+        disabled={(!small || correct) && isDisabled}
+        className={`${styles.keypadButton} ${
+          small && styles.smallKeypadButton
+        }`}
+        onClick={handleClick}
+      >
+        {!remove && value}
+        {remove && <IonIcon icon={backspaceOutline} />}
+      </IonButton>
+    </IonCol>
+  );
+};
+
+export default KeypadButton;

03_source/mobile/src/pages/Demo2FaExample/components/KeypadInput.module.scss

@@ -0,0 +1,38 @@
+.keypadInput {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+  font-size: 2.5rem;
+  width: 100%;
+  min-height: 2.5rem;
+  background-color: rgb(245, 245, 245);
+  border-radius: 4px;
+  color: rgb(207, 207, 207);
+  transition: 0.2s linear;
+}
+
+.active {
+  background-color: rgba(26, 150, 251, 0.2);
+  border: 0 !important;
+  color: white !important;
+  transition: 0.2s linear;
+}
+
+.filled {
+  color: rgb(151, 151, 151);
+  transition: 0.2s linear;
+}
+
+.incorrect {
+  background-color: rgba(251, 26, 26, 0.2);
+  color: rgb(218, 67, 67);
+  transition: 0.2s linear;
+}
+
+.correct {
+  background-color: rgba(26, 251, 120, 0.2);
+  color: rgb(67, 218, 112);
+  transition: 0.2s linear;
+}

03_source/mobile/src/pages/Demo2FaExample/components/KeypadInput.tsx

@@ -0,0 +1,28 @@
+import { IonCol } from "@ionic/react";
+import styles from "./KeypadInput.module.scss";
+
+const KeypadInput = (props: any): JSX.Element => {
+  const {
+    value,
+    isActive = false,
+    isFilled = false,
+    incorrect,
+    correct,
+  } = props;
+
+  return (
+    <IonCol size="2">
+      <div
+        className={`${styles.keypadInput} ${isActive && styles.active} ${
+          isFilled && styles.filled
+        } ${incorrect && styles.incorrect} ${correct && styles.correct}`}
+        onClick={props.handleChange}
+      >
+        {value}
+        {!isFilled && "0"}
+      </div>
+    </IonCol>
+  );
+};
+
+export default KeypadInput;

03_source/mobile/src/pages/Demo2FaExample/components/KeypadInputs.tsx

@@ -0,0 +1,50 @@
+import { IonRow } from "@ionic/react";
+import { useEffect, useRef } from "react";
+import KeypadInput from "./KeypadInput";
+
+const KeypadInputs = (props: any): JSX.Element => {
+  const { values, activeIndex, incorrect, correct } = props;
+  const keypadRef = useRef<HTMLIonRowElement>(null);
+
+  useEffect(() => {
+    if (incorrect && keypadRef.current) {
+      keypadRef.current.classList.add("incorrect");
+
+      setTimeout(() => {
+        if (keypadRef.current) {
+          keypadRef.current.classList.remove("incorrect");
+        }
+      }, 1000);
+    }
+  }, [incorrect]);
+
+  useEffect(() => {
+    if (correct) {
+      if (keypadRef.current) {
+        keypadRef.current.classList.add("correct");
+      }
+    }
+  }, [correct]);
+
+  return (
+    <IonRow ref={keypadRef} className="ion-justify-content-center">
+      {values.map((value: string, index: number) => {
+        const isActive = parseInt(index.toString()) === parseInt(activeIndex);
+        const isFilled = value !== "" ? true : false;
+
+        return (
+          <KeypadInput
+            correct={correct}
+            incorrect={incorrect}
+            isFilled={isFilled}
+            isActive={isActive}
+            value={value}
+            placeholder="0"
+          />
+        );
+      })}
+    </IonRow>
+  );
+};
+
+export default KeypadInputs;

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

@@ -1,38 +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 Tab2 from './AppPages/Tab2';
-
-import './style.scss';
+import Home from './pages/Home';
 
 function Demo2FaExample() {
   return (
-    <IonTabs>
+    <IonTabs className="demo-2fa-example">
       <IonRouterOutlet>
-        <Route exact path="/demo-weather-app/tab1">
-          <Tab1 />
-        </Route>
-        <Route exact path="/demo-weather-app/tab2">
-          <Tab2 />
+        <Route exact path="/demo-2fa-example/home">
+          <Home />
         </Route>
 
-        <Redirect exact path="/demo-weather-app" to="/demo-weather-app/tab1" />
+        <Redirect exact path="/demo-2fa-example" to="/demo-2fa-example/home" />
       </IonRouterOutlet>
-
-      {/*  */}
-      <IonTabBar slot="bottom">
-        <IonTabButton tab="tab1" href="/demo-weather-app/tab1">
-          <IonIcon icon={cloudOutline} />
-          <IonLabel>Dashboard</IonLabel>
-        </IonTabButton>
-        <IonTabButton tab="tab2" href="/demo-weather-app/tab2">
-          <IonIcon icon={searchOutline} />
-          <IonLabel>Search</IonLabel>
-        </IonTabButton>
-      </IonTabBar>
     </IonTabs>
   );
 }

03_source/mobile/src/pages/Demo2FaExample/pages/Home.module.scss

@@ -0,0 +1,30 @@
+.logo {
+  height: 4rem;
+  width: auto;
+}
+
+.incorrect {
+  color: rgb(218, 67, 67);
+}
+
+.successContainer {
+}
+
+.successText {
+  background-color: rgba(26, 251, 120, 0.2);
+  color: rgb(67, 218, 112);
+  padding: 1rem;
+}
+
+.successContinue {
+  font-weight: 700;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+}
+
+.successContinue ion-icon {
+  margin-top: 0.2rem;
+}

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

@@ -0,0 +1,135 @@
+import {
+  IonButton,
+  IonButtons,
+  IonCol,
+  IonContent,
+  IonGrid,
+  IonHeader,
+  IonIcon,
+  IonImg,
+  IonPage,
+  IonRow,
+  IonToolbar,
+  useIonRouter,
+} from '@ionic/react';
+import { arrowForwardOutline, chevronBackOutline } from 'ionicons/icons';
+import styles from './Home.module.scss';
+import KeypadInputs from '../components/KeypadInputs';
+import Keypad from '../components/Keypad';
+import { JSX, useEffect, useRef, useState } from 'react';
+
+const Home = (): JSX.Element => {
+  const correctCode = [5, 9, 2, 5];
+  const [keypadValues, setKeypadValues] = useState(['', '', '', '']);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const successRef = useRef<HTMLIonRowElement>(null);
+
+  const [incorrect, setIncorrect] = useState(false);
+  const [correct, setCorrect] = useState(false);
+
+  const tempValues: { [key: string]: any } = {};
+
+  const handleClick = (index: number, value: any) => {
+    const stringKey = index.toString();
+    tempValues[stringKey] = value;
+
+    setKeypadValues(value);
+    setActiveIndex((activeIndex) => activeIndex + 1);
+  };
+
+  const handleRemove = () => {
+    const tempValues = [...keypadValues];
+    tempValues[activeIndex - 1] = '';
+
+    setKeypadValues(tempValues);
+    activeIndex > 0 && setActiveIndex((activeIndex) => activeIndex - 1);
+    setIncorrect(false);
+    setCorrect(false);
+  };
+
+  const router = useIonRouter();
+  function handleBackClick() {
+    router.goBack();
+  }
+
+  useEffect(() => {
+    if (parseInt(activeIndex.toString()) === parseInt(keypadValues.length.toString())) {
+      var error = false;
+
+      keypadValues.forEach((value, index) => {
+        if (parseInt(value) !== parseInt(correctCode[index].toString())) {
+          error = true;
+          return false;
+        }
+      });
+
+      if (error) {
+        setIncorrect(true);
+      } else {
+        setCorrect(true);
+
+        setTimeout(() => {
+          if (successRef.current) {
+            successRef.current.classList.remove('hidden');
+            successRef.current.classList.add('success');
+          }
+        }, 900);
+      }
+    }
+  }, [activeIndex]);
+
+  return (
+    <IonPage>
+      <IonToolbar>
+        <IonHeader></IonHeader>
+
+        <IonButtons slot="start">
+          <IonButton shape={'round'} onClick={() => handleBackClick()}>
+            <IonIcon icon={chevronBackOutline} color="primary" />
+          </IonButton>
+        </IonButtons>
+      </IonToolbar>
+      <IonContent fullscreen>
+        <IonGrid className="ion-text-center ion-padding-top">
+          <IonRow>
+            <IonCol size="12">
+              <IonImg src="/assets/icon/favicon.png" className={styles.logo} />
+              <h1>Verification required</h1>
+              <p>Enter your 4 digit verification code</p>
+            </IonCol>
+          </IonRow>
+
+          <IonRow ref={successRef} className="ion-justify-content-center hidden">
+            <IonCol size="12" className={styles.successContainer}>
+              <p className={styles.successText}>
+                Awesome! You may continue.
+                <br />
+                <span className={styles.successContinue}>
+                  Continue&nbsp;&nbsp;
+                  <IonIcon icon={arrowForwardOutline} />
+                </span>
+              </p>
+            </IonCol>
+          </IonRow>
+
+          <KeypadInputs
+            incorrect={incorrect}
+            correct={correct}
+            values={keypadValues}
+            activeIndex={activeIndex}
+          />
+          {incorrect && <p className={styles.incorrect}>Wrong code entered</p>}
+          <Keypad
+            handleRemove={handleRemove}
+            handleClick={handleClick}
+            activeIndex={activeIndex}
+            amount={keypadValues.length}
+            correct={correct}
+          />
+        </IonGrid>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Home;

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

@@ -1,103 +0,0 @@
-#about-page {
-  ion-toolbar {
-    position: absolute;
-
-    top: 0;
-    left: 0;
-    right: 0;
-
-    --background: transparent;
-    --color: white;
-  }
-
-  ion-toolbar ion-back-button,
-  ion-toolbar ion-button,
-  ion-toolbar ion-menu-button {
-    --color: white;
-  }
-
-  .about-header {
-    position: relative;
-
-    width: 100%;
-    height: 30%;
-  }
-
-  .about-header .about-image {
-    position: absolute;
-
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-
-    background-position: center;
-    background-size: cover;
-    background-repeat: no-repeat;
-
-    opacity: 0;
-
-    transition: opacity 500ms ease-in-out;
-  }
-
-  .about-header .madison {
-    background-image: url('/assets/WeatherDemo/img/about/madison.jpg');
-  }
-
-  .about-header .austin {
-    background-image: url('/assets/WeatherDemo/img/about/austin.jpg');
-  }
-
-  .about-header .chicago {
-    background-image: url('/assets/WeatherDemo/img/about/chicago.jpg');
-  }
-
-  .about-header .seattle {
-    background-image: url('/assets/WeatherDemo/img/about/seattle.jpg');
-  }
-
-  .about-info {
-    position: relative;
-    margin-top: -10px;
-    border-radius: 10px;
-    background: var(--ion-background-color, #fff);
-    z-index: 2; // display rounded border above header image
-  }
-
-  .about-info h3 {
-    margin-top: 0;
-  }
-
-  .about-info ion-list {
-    padding-top: 0;
-  }
-
-  .about-info p {
-    line-height: 130%;
-
-    color: var(--ion-color-dark);
-  }
-
-  .about-info ion-icon {
-    margin-inline-end: 32px;
-  }
-
-  /*
-   * iOS Only
-   */
-
-  .ios .about-info {
-    --ion-padding: 19px;
-  }
-
-  .ios .about-info h3 {
-    font-weight: 700;
-  }
-}
-
-#date-input-popover {
-  --offset-y: -var(--ion-safe-area-bottom);
-
-  --max-width: 90%;
-  --width: 336px;
-}

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

@@ -0,0 +1,249 @@
+.demo-2fa-example {
+  /* Ionic Variables and Theming. For more info, please see:
+http://ionicframework.com/docs/theming/ */
+
+  * {
+    font-family: 'Lato', sans-serif;
+  }
+
+  .hidden {
+    display: none;
+    transition: 0.2s linear;
+  }
+
+  /** 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;
+  }
+
+  .incorrect {
+    -webkit-animation: incorrect-animation 0.9s both;
+    animation: incorrect-animation 0.9s both;
+  }
+
+  @-webkit-keyframes incorrect-animation {
+    0% {
+      -webkit-transform: scale3d(1, 1, 1);
+      transform: scale3d(1, 1, 1);
+    }
+
+    30% {
+      -webkit-transform: scale3d(1.25, 0.75, 1);
+      transform: scale3d(1.25, 0.75, 1);
+    }
+
+    40% {
+      -webkit-transform: scale3d(0.75, 1.25, 1);
+      transform: scale3d(0.75, 1.25, 1);
+    }
+
+    50% {
+      -webkit-transform: scale3d(1.15, 0.85, 1);
+      transform: scale3d(1.15, 0.85, 1);
+    }
+
+    65% {
+      -webkit-transform: scale3d(0.95, 1.05, 1);
+      transform: scale3d(0.95, 1.05, 1);
+    }
+
+    75% {
+      -webkit-transform: scale3d(1.05, 0.95, 1);
+      transform: scale3d(1.05, 0.95, 1);
+    }
+
+    100% {
+      -webkit-transform: scale3d(1, 1, 1);
+      transform: scale3d(1, 1, 1);
+    }
+  }
+
+  @keyframes incorrect-animation {
+    0% {
+      -webkit-transform: scale3d(1, 1, 1);
+      transform: scale3d(1, 1, 1);
+    }
+
+    30% {
+      -webkit-transform: scale3d(1.25, 0.75, 1);
+      transform: scale3d(1.25, 0.75, 1);
+    }
+
+    40% {
+      -webkit-transform: scale3d(0.75, 1.25, 1);
+      transform: scale3d(0.75, 1.25, 1);
+    }
+
+    50% {
+      -webkit-transform: scale3d(1.15, 0.85, 1);
+      transform: scale3d(1.15, 0.85, 1);
+    }
+
+    65% {
+      -webkit-transform: scale3d(0.95, 1.05, 1);
+      transform: scale3d(0.95, 1.05, 1);
+    }
+
+    75% {
+      -webkit-transform: scale3d(1.05, 0.95, 1);
+      transform: scale3d(1.05, 0.95, 1);
+    }
+
+    100% {
+      -webkit-transform: scale3d(1, 1, 1);
+      transform: scale3d(1, 1, 1);
+    }
+  }
+
+  .correct {
+    -webkit-animation: correct-animation 1s ease-in both;
+    animation: correct-animation 1s ease-in both;
+  }
+
+  @-webkit-keyframes correct-animation {
+    0% {
+      -webkit-transform: translateY(0) rotateX(0) scale(1);
+      transform: translateY(0) rotateX(0) scale(1);
+      -webkit-transform-origin: 50% 1400px;
+      transform-origin: 50% 1400px;
+      opacity: 1;
+    }
+
+    100% {
+      -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
+      transform: translateY(-600px) rotateX(-30deg) scale(0);
+      -webkit-transform-origin: 50% 100%;
+      transform-origin: 50% 100%;
+      opacity: 1;
+    }
+  }
+
+  @keyframes correct-animation {
+    0% {
+      -webkit-transform: translateY(0) rotateX(0) scale(1);
+      transform: translateY(0) rotateX(0) scale(1);
+      -webkit-transform-origin: 50% 1400px;
+      transform-origin: 50% 1400px;
+      opacity: 1;
+    }
+
+    100% {
+      -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
+      transform: translateY(-600px) rotateX(-30deg) scale(0);
+      -webkit-transform-origin: 50% 100%;
+      transform-origin: 50% 100%;
+      opacity: 1;
+    }
+  }
+
+  .success {
+    -webkit-animation: success-animation 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+    animation: success-animation 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+  }
+
+  @-webkit-keyframes success-animation {
+    0% {
+      -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
+      transform: translateY(-600px) rotateX(-30deg) scale(0);
+      -webkit-transform-origin: 50% 100%;
+      transform-origin: 50% 100%;
+      opacity: 0;
+    }
+
+    100% {
+      -webkit-transform: translateY(0) rotateX(0) scale(1);
+      transform: translateY(0) rotateX(0) scale(1);
+      -webkit-transform-origin: 50% 1400px;
+      transform-origin: 50% 1400px;
+      opacity: 1;
+    }
+  }
+
+  @keyframes success-animation {
+    0% {
+      -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
+      transform: translateY(-600px) rotateX(-30deg) scale(0);
+      -webkit-transform-origin: 50% 100%;
+      transform-origin: 50% 100%;
+      opacity: 0;
+    }
+
+    100% {
+      -webkit-transform: translateY(0) rotateX(0) scale(1);
+      transform: translateY(0) rotateX(0) scale(1);
+      -webkit-transform-origin: 50% 1400px;
+      transform-origin: 50% 1400px;
+      opacity: 1;
+    }
+  }
+}

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 Tab2 from './AppPages/Tab2';
+// import Tab1 from './AppPages/Tab1';
+// 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/DemoDictionaryApp/AppPages/Tab1.jsx

@@ -24,7 +24,7 @@ import { getFavourites, getSearchCount } from '../store/Selectors';
 
 const Tab1 = () => {
   const router = useIonRouter();
-  const pageRef = useRef();
+  const pageRef = useRef(null);
   const favourites = useStoreState(WordStore, getFavourites);
   const searchCount = useStoreState(WordStore, getSearchCount);
 

03_source/mobile/src/pages/DemoDictionaryApp/AppPages/Tab2.jsx

@@ -17,7 +17,7 @@ import { WordStore } from '../store';
 import { searchWord } from '../utils';
 
 const Tab2 = () => {
-  const pageRef = useRef();
+  const pageRef = useRef(null);
   const [searchTerm, setSearchTerm] = useState('');
   const [searchResult, setSearchResult] = useState(false);
   const [animatedClass, setAnimatedClass] = useState('');

03_source/mobile/src/pages/DemoDictionaryApp/AppPages/Tab3.jsx

@@ -7,7 +7,7 @@ import { WordStore } from '../store';
 import { getFavourites } from '../store/Selectors';
 
 const Tab3 = () => {
-  const pageRef = useRef();
+  const pageRef = useRef(null);
   const favourites = useStoreState(WordStore, getFavourites);
   const [animatedClass, setAnimatedClass] = useState('animate__slideInLeft');
 

03_source/mobile/src/pages/DemoEcommerceExample/components/ProductCard.module.css

@@ -0,0 +1,72 @@
+.categoryPage ion-toolbar {
+
+    --border-style: none;
+}
+
+.categoryCard {
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+    /* min-height: 20rem !important; */
+}
+
+.productCardActions {
+
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+    margin-bottom: 1rem;
+}
+
+.productCardAction {
+
+    font-size: 1.1rem;
+}
+
+.productCardHeader {
+
+    min-height: 17rem;
+}
+
+.productCardHeader p {
+
+    font-size: 0.8rem;
+    padding: 0;
+    margin: 0;
+    margin-top: 0.75rem;
+}
+
+.categoryCardContent {
+
+    display: flex;
+    flex-direction: column;
+}
+
+.categoryCardContent ion-button {
+
+    height: 1.5rem;
+    font-size: 0.8rem;
+}
+
+.categoryCardContent p {
+
+    font-size: 0.8rem;
+    padding: 0;
+    margin: 0;
+}
+
+.categoryCard img {
+
+    /* border-radius: 5px; */
+    /* padding: 1rem; */
+}
+
+.productPrice {
+
+    display: flex;
+    flex-direction: row;
+}

03_source/mobile/src/pages/DemoEcommerceExample/components/ProductCard.tsx

@@ -0,0 +1,105 @@
+import { IonButton, IonCard, IonCardContent, IonCardHeader, IonCol, IonIcon } from '@ionic/react';
+import { arrowRedoOutline, cart, cartOutline, heart, heartOutline } from 'ionicons/icons';
+import { useEffect, useRef, useState } from 'react';
+import { addToCart } from '../data/CartStore';
+import { addToFavourites, FavouritesStore } from '../data/FavouritesStore';
+import styles from './ProductCard.module.css';
+
+const ProductCard = (props): React.FC => {
+  const { product, category, index, cartRef } = props;
+  const favourites = FavouritesStore.useState((s) => s.product_ids);
+
+  const productCartRef = useRef();
+  const productFavouriteRef = useRef();
+  const [isFavourite, setIsFavourite] = useState(false);
+
+  useEffect(() => {
+    const tempIsFavourite = favourites.find((f) => f === `${category.slug}/${product.id}`);
+    setIsFavourite(tempIsFavourite ? true : false);
+  }, [props.product, favourites]);
+
+  const addProductToFavourites = (e, categorySlug, productID) => {
+    e.preventDefault();
+    e.stopPropagation();
+    addToFavourites(categorySlug, productID);
+
+    productFavouriteRef.current.style.display = '';
+    productFavouriteRef.current.classList.add('animate__fadeOutTopRight');
+
+    setTimeout(() => {
+      if (productCartRef.current) {
+        productFavouriteRef.current.classList.remove('animate__fadeOutTopRight');
+        productFavouriteRef.current.style.display = 'none';
+      }
+    }, 500);
+  };
+
+  const addProductToCart = (e, categorySlug, productID) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    productCartRef.current.style.display = '';
+    productCartRef.current.classList.add('animate__fadeOutUp');
+
+    setTimeout(() => {
+      cartRef.current.classList.add('animate__tada');
+      addToCart(categorySlug, productID);
+
+      setTimeout(() => {
+        cartRef.current.classList.remove('animate__tada');
+        productCartRef.current.style.display = 'none';
+      }, 500);
+    }, 500);
+  };
+
+  return (
+    <IonCol size="6" key={`category_product_list_${index}`}>
+      <IonCard
+        routerLink={`/category/${category.slug}/${product.id}`}
+        className={styles.categoryCard}
+      >
+        <IonCardHeader className={styles.productCardHeader}>
+          <div className={styles.productCardActions}>
+            <IonIcon
+              className={styles.productCardAction}
+              color={isFavourite ? 'danger' : 'medium'}
+              icon={isFavourite ? heart : heartOutline}
+              onClick={(e) => addProductToFavourites(e, category.slug, product.id)}
+            />
+            <IonIcon
+              ref={productFavouriteRef}
+              style={{ position: 'absolute', display: 'none' }}
+              className={`${styles.productCardAction} animate__animated`}
+              color="danger"
+              icon={heart}
+            />
+            <IonIcon className={styles.productCardAction} size="medium" icon={arrowRedoOutline} />
+          </div>
+          <img src={product.image} alt="product pic" />
+          <p className="ion-text-wrap">{product.name}</p>
+        </IonCardHeader>
+
+        <IonCardContent className={styles.categoryCardContent}>
+          <div className={styles.productPrice}>
+            <IonButton style={{ width: '100%' }} color="light">
+              {product.price}
+            </IonButton>
+            <IonButton color="dark" onClick={(e) => addProductToCart(e, category.slug, product.id)}>
+              <IonIcon icon={cartOutline} />
+            </IonButton>
+
+            <IonIcon
+              ref={productCartRef}
+              icon={cart}
+              color="dark"
+              style={{ position: 'absolute', display: 'none', fontSize: '3rem' }}
+              className="animate__animated"
+            />
+          </div>
+        </IonCardContent>
+      </IonCard>
+    </IonCol>
+  );
+};
+
+export default ProductCard;

03_source/mobile/src/pages/DemoEcommerceExample/data/CartStore.ts

@@ -0,0 +1,18 @@
+import { Store } from 'pullstate';
+
+export const CartStore = new Store({
+  total: 0,
+  product_ids: [],
+});
+
+export const addToCart = (categorySlug, productID) => {
+  CartStore.update((s) => {
+    s.product_ids = [...s.product_ids, `${categorySlug}/${parseInt(productID)}`];
+  });
+};
+
+export const removeFromCart = (productIndex) => {
+  CartStore.update((s) => {
+    s.product_ids.splice(productIndex, 1);
+  });
+};

03_source/mobile/src/pages/DemoEcommerceExample/data/FavouritesStore.ts

@@ -0,0 +1,17 @@
+import { Store } from "pullstate";
+
+export const FavouritesStore = new Store({
+    
+    total: 0,
+    product_ids: []
+});
+
+export const addToFavourites = (categorySlug, productID) => {
+    FavouritesStore.update(s => {
+        if (s.product_ids.find(id => id === `${ categorySlug }/${ parseInt(productID) }`)) {
+            s.product_ids = s.product_ids.filter(id => id !== `${ categorySlug }/${ parseInt(productID) }`);
+        } else {
+            s.product_ids = [ ...s.product_ids, `${ categorySlug }/${ parseInt(productID) }` ];
+        }
+    });
+}

03_source/mobile/src/pages/DemoEcommerceExample/data/ProductStore.ts

@@ -0,0 +1,6 @@
+import { Store } from "pullstate";
+
+export const ProductStore = new Store({
+    
+    products: []
+});

03_source/mobile/src/pages/DemoEcommerceExample/data/fetcher.ts

@@ -0,0 +1,57 @@
+import { ProductStore } from './ProductStore';
+
+export const fetchData = async () => {
+  const json = [
+    'beds.json',
+    'armchairs.json',
+    'coffee_tables.json',
+    'cushions.json',
+    'floor_lamps.json',
+    'office_chairs.json',
+  ];
+
+  var products = [];
+
+  json.forEach(async (category) => {
+    const products = await fetchProducts(category);
+
+    let categoryName = category.replace('.json', '');
+    categoryName = categoryName.replace('_', ' ');
+    categoryName = uppercaseWords(categoryName);
+
+    const productCategory = {
+      name: categoryName,
+      slug: category.replace('.json', ''),
+      cover: products[6].image,
+      products,
+    };
+
+    ProductStore.update((s) => {
+      s.products = [...s.products, productCategory];
+    });
+  });
+
+  return products;
+};
+
+const fetchProducts = async (category) => {
+  const response = await fetch(`products/${category}`);
+  const data = await response.json();
+
+  //  Set a product id
+  await data.forEach((d, i) => {
+    d.id = i + 1;
+  });
+
+  return data;
+};
+
+const uppercaseWords = (words) => {
+  words = words
+    .toLowerCase()
+    .split(' ')
+    .map((s) => s.charAt(0).toUpperCase() + s.substring(1))
+    .join(' ');
+
+  return words;
+};

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

@@ -3,23 +3,48 @@ import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs }
 import { cloudOutline, searchOutline } from 'ionicons/icons';
 import { Route, Redirect } from 'react-router';
 
-import Tab1 from './AppPages/Tab1';
-import Tab2 from './AppPages/Tab2';
+// import Tab1 from './AppPages/Tab1';
+// import Tab2 from './AppPages/Tab2';
+
+import Home from './pages/Home';
+import { fetchData } from './data/fetcher';
+import CategoryProducts from './pages/CategoryProducts';
+import Product from './pages/Product';
+import FavouriteProducts from './pages/FavouriteProducts';
+import CartProducts from './pages/CartProducts';
 
 import './style.scss';
+import React, { useEffect } from 'react';
+
+function DemoEcommerceExample(): React.JSX.Element {
+  useEffect(() => {
+    fetchData();
+  }, []);
 
-function DemoEcommerceExample() {
   return (
     <IonTabs>
       <IonRouterOutlet>
-        <Route exact path="/demo-ecommerce-example/tab1">
-          <Tab1 />
-        </Route>
-        <Route exact path="/demo-ecommerce-example/tab2">
-          <Tab2 />
+        <Route path="/demo-ecommerce-example/home" exact={true}>
+          <Home />
         </Route>
 
-        <Redirect exact path="/demo-ecommerce-example" to="/demo-ecommerce-example/tab1" />
+        <Route path="/demo-ecommerce-example/favourites" exact>
+          <FavouriteProducts />
+        </Route>
+
+        <Route path="/demo-ecommerce-example/cart" exact>
+          <CartProducts />
+        </Route>
+
+        <Route path="/demo-ecommerce-example/category/:slug" exact>
+          <CategoryProducts />
+        </Route>
+
+        <Route path="/demo-ecommerce-example/category/:slug/:id" exact>
+          <Product />
+        </Route>
+
+        <Redirect exact path="/demo-ecommerce-example" to="/demo-ecommerce-example/home" />
       </IonRouterOutlet>
 
       {/*  */}

03_source/mobile/src/pages/DemoEcommerceExample/module.d.ts

@@ -0,0 +1,4 @@
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}

03_source/mobile/src/pages/DemoEcommerceExample/pages/CartProducts.module.css

@@ -0,0 +1,31 @@
+.cartCheckout {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  align-content: center;
+  margin: 1rem;
+}
+
+.cartFooter {
+  border-top: 2px solid rgb(200, 200, 200);
+  background-color: white;
+}
+
+.cartCheckout ion-card-subtitle {
+  font-size: 1.3rem;
+}
+
+.cartItem ion-avatar {
+  height: 4rem;
+  width: 4rem;
+}
+
+.cartSlider:not(:nth-child(1)) {
+  border-top: 2px solid rgb(236, 236, 236);
+}
+
+.cartActions {
+  display: flex;
+  flex-direction: column;
+}

03_source/mobile/src/pages/DemoEcommerceExample/pages/CartProducts.tsx

@@ -0,0 +1,161 @@
+import {
+  IonAvatar,
+  IonBadge,
+  IonButton,
+  IonButtons,
+  IonCardSubtitle,
+  IonCol,
+  IonContent,
+  IonFooter,
+  IonHeader,
+  IonIcon,
+  IonImg,
+  IonItem,
+  IonItemOption,
+  IonItemOptions,
+  IonItemSliding,
+  IonLabel,
+  IonList,
+  IonNote,
+  IonPage,
+  IonRow,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/react';
+import { cart, checkmarkSharp, chevronBackOutline, trashOutline } from 'ionicons/icons';
+import React, { useEffect, useRef, useState } from 'react';
+import { CartStore, removeFromCart } from '../data/CartStore';
+import { ProductStore } from '../data/ProductStore';
+
+import styles from './CartProducts.module.css';
+
+const CartProducts = (): React.JSX.Element => {
+  const cartRef = useRef(null);
+  const products = ProductStore.useState((s) => s.products);
+  const shopCart = CartStore.useState((s) => s.product_ids);
+  const [cartProducts, setCartProducts] = useState([]);
+  const [amountLoaded, setAmountLoaded] = useState(6);
+
+  const [total, setTotal] = useState(0);
+
+  useEffect(() => {
+    const getCartProducts = () => {
+      setCartProducts([]);
+      setTotal(0);
+
+      shopCart.forEach((product) => {
+        var favouriteParts = product.split('/');
+        var categorySlug = favouriteParts[0];
+        var productID = favouriteParts[1];
+
+        const tempCategory = products.filter((p) => p.slug === categorySlug)[0];
+        const tempProduct = tempCategory.products.filter(
+          (p) => parseInt(p.id) === parseInt(productID)
+        )[0];
+
+        const tempCartProduct = {
+          category: tempCategory,
+          product: tempProduct,
+        };
+
+        setTotal((prevTotal) => prevTotal + parseInt(tempProduct.price.replace('£', '')));
+        setCartProducts((prevSearchResults) => [...prevSearchResults, tempCartProduct]);
+      });
+    };
+
+    getCartProducts();
+  }, [shopCart]);
+
+  const fetchMore = async (e) => {
+    //	Increment the amount loaded by 6 for the next iteration
+    setAmountLoaded((prevAmount) => prevAmount + 6);
+    e.target.complete();
+  };
+
+  const removeProductFromCart = async (index) => {
+    removeFromCart(index);
+  };
+
+  return (
+    <IonPage id="category-page" className={styles.categoryPage}>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonButton color="dark" routerLink="/" routerDirection="back">
+              <IonIcon color="dark" icon={chevronBackOutline} />
+              &nbsp;Categories
+            </IonButton>
+          </IonButtons>
+          <IonTitle>Cart</IonTitle>
+
+          <IonButtons slot="end">
+            <IonBadge color="dark">{shopCart.length}</IonBadge>
+            <IonButton color="dark">
+              <IonIcon ref={cartRef} className="animate__animated" icon={cart} />
+            </IonButton>
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+
+      <IonContent fullscreen>
+        <IonRow className="ion-text-center ion-margin-top">
+          <IonCol size="12">
+            <IonNote>
+              {cartProducts && cartProducts.length}{' '}
+              {cartProducts.length > 1 || cartProducts.length === 0 ? ' products' : ' product'}{' '}
+              found
+            </IonNote>
+          </IonCol>
+        </IonRow>
+
+        <IonList>
+          {cartProducts &&
+            cartProducts.map((product, index) => {
+              if (index <= amountLoaded) {
+                return (
+                  <IonItemSliding className={styles.cartSlider}>
+                    <IonItem key={index} lines="none" detail={false} className={styles.cartItem}>
+                      <IonAvatar>
+                        <IonImg src={product.product.image} />
+                      </IonAvatar>
+                      <IonLabel className="ion-padding-start ion-text-wrap">
+                        <p>{product.category.name}</p>
+                        <h4>{product.product.name}</h4>
+                      </IonLabel>
+
+                      <div className={styles.cartActions}>
+                        <IonBadge color="dark">{product.product.price}</IonBadge>
+                      </div>
+                    </IonItem>
+
+                    <IonItemOptions side="end">
+                      <IonItemOption
+                        color="danger"
+                        style={{ paddingLeft: '1rem', paddingRight: '1rem' }}
+                        onClick={() => removeProductFromCart(index)}
+                      >
+                        <IonIcon icon={trashOutline} />
+                      </IonItemOption>
+                    </IonItemOptions>
+                  </IonItemSliding>
+                );
+              }
+            })}
+        </IonList>
+      </IonContent>
+
+      <IonFooter className={styles.cartFooter}>
+        <div className={styles.cartCheckout}>
+          <IonCardSubtitle>£{total.toFixed(2)}</IonCardSubtitle>
+
+          <IonButton color="dark">
+            <IonIcon icon={checkmarkSharp} />
+            &nbsp;Checkout
+          </IonButton>
+        </div>
+      </IonFooter>
+    </IonPage>
+  );
+};
+
+export default CartProducts;

03_source/mobile/src/pages/DemoEcommerceExample/pages/CategoryProducts.module.css

@@ -0,0 +1,10 @@
+.categoryPage ion-toolbar {
+
+    --border-style: none;
+}
+
+.search {
+
+    --background: rgb(240, 240, 240);
+    --color: black;
+}

03_source/mobile/src/pages/DemoEcommerceExample/pages/CategoryProducts.tsx

@@ -0,0 +1,134 @@
+import {
+  IonBadge,
+  IonButton,
+  IonButtons,
+  IonCol,
+  IonContent,
+  IonGrid,
+  IonHeader,
+  IonIcon,
+  IonInfiniteScroll,
+  IonInfiniteScrollContent,
+  IonNote,
+  IonPage,
+  IonRow,
+  IonSearchbar,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/react';
+import { cart, chevronBackOutline, searchOutline } from 'ionicons/icons';
+import { useEffect, useRef, useState } from 'react';
+import { useParams } from 'react-router';
+import ProductCard from '../components/ProductCard';
+
+import { CartStore } from '../data/CartStore';
+import { ProductStore } from '../data/ProductStore';
+
+import styles from './CategoryProducts.module.css';
+
+const CategoryProducts = () => {
+  const params = useParams();
+  const cartRef = useRef();
+  const products = ProductStore.useState((s) => s.products);
+  const shopCart = CartStore.useState((s) => s.product_ids);
+  const [category, setCategory] = useState({});
+  const [searchResults, setsearchResults] = useState([]);
+  const [amountLoaded, setAmountLoaded] = useState(6);
+
+  useEffect(() => {
+    const categorySlug = params.slug;
+    const tempCategory = products.filter((p) => p.slug === categorySlug)[0];
+    setCategory(tempCategory);
+    setsearchResults(tempCategory.products);
+  }, [params.slug]);
+
+  const fetchMore = async (e) => {
+    //	Increment the amount loaded by 6 for the next iteration
+    setAmountLoaded((prevAmount) => prevAmount + 6);
+    e.target.complete();
+  };
+
+  const search = async (e) => {
+    const searchVal = e.target.value;
+
+    if (searchVal !== '') {
+      const tempResults = category.products.filter((p) =>
+        p.name.toLowerCase().includes(searchVal.toLowerCase())
+      );
+      setsearchResults(tempResults);
+    } else {
+      setsearchResults(category.products);
+    }
+  };
+
+  return (
+    <IonPage id="category-page" className={styles.categoryPage}>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonButton color="dark" text={category.name} routerLink="/" routerDirection="back">
+              <IonIcon color="dark" icon={chevronBackOutline} />
+              &nbsp;Categories
+            </IonButton>
+          </IonButtons>
+          <IonTitle>{category && category.name}</IonTitle>
+
+          <IonButtons slot="end">
+            <IonBadge color="dark">{shopCart.length}</IonBadge>
+            <IonButton color="dark" routerLink="/cart">
+              <IonIcon ref={cartRef} className="animate__animated" icon={cart} />
+            </IonButton>
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+
+      <IonContent fullscreen>
+        <IonSearchbar
+          className={styles.search}
+          onKeyUp={search}
+          placeholder="Try 'high back'"
+          searchIcon={searchOutline}
+          animated={true}
+        />
+
+        <IonGrid>
+          <IonRow className="ion-text-center">
+            <IonCol size="12">
+              <IonNote>
+                {searchResults && searchResults.length}{' '}
+                {searchResults.length > 1 || searchResults.length === 0 ? ' products' : ' product'}{' '}
+                found
+              </IonNote>
+            </IonCol>
+          </IonRow>
+
+          <IonRow>
+            {searchResults &&
+              searchResults.map((product, index) => {
+                if (index <= amountLoaded && product.image) {
+                  return (
+                    <ProductCard
+                      key={`category_product_${index}`}
+                      product={product}
+                      index={index}
+                      cartRef={cartRef}
+                      category={category}
+                    />
+                  );
+                }
+              })}
+          </IonRow>
+        </IonGrid>
+
+        <IonInfiniteScroll threshold="100px" onIonInfinite={fetchMore}>
+          <IonInfiniteScrollContent
+            loadingSpinner="bubbles"
+            loadingText="Fetching more..."
+          ></IonInfiniteScrollContent>
+        </IonInfiniteScroll>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default CategoryProducts;

03_source/mobile/src/pages/DemoEcommerceExample/pages/FavouriteProducts.tsx

@@ -0,0 +1,131 @@
+import {
+  IonBadge,
+  IonButton,
+  IonButtons,
+  IonCol,
+  IonContent,
+  IonGrid,
+  IonHeader,
+  IonIcon,
+  IonInfiniteScroll,
+  IonInfiniteScrollContent,
+  IonNote,
+  IonPage,
+  IonRow,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/react';
+import { cart, chevronBackOutline } from 'ionicons/icons';
+import { useEffect, useRef, useState } from 'react';
+import ProductCard from '../components/ProductCard';
+import { CartStore } from '../data/CartStore';
+import { FavouritesStore } from '../data/FavouritesStore';
+import { ProductStore } from '../data/ProductStore';
+
+import styles from './CategoryProducts.module.css';
+
+const FavouriteProducts = () => {
+  const cartRef = useRef(null);
+  const products = ProductStore.useState((s) => s.products);
+  const favourites = FavouritesStore.useState((s) => s.product_ids);
+  const shopCart = CartStore.useState((s) => s.product_ids);
+  const [searchResults, setSearchResults] = useState([]);
+  const [amountLoaded, setAmountLoaded] = useState(6);
+
+  useEffect(() => {
+    const getFavourites = () => {
+      setSearchResults([]);
+
+      favourites.forEach((favourite) => {
+        var favouriteParts = favourite.split('/');
+        var categorySlug = favouriteParts[0];
+        var productID = favouriteParts[1];
+
+        const tempCategory = products.filter((p) => p.slug === categorySlug)[0];
+        const tempProduct = tempCategory.products.filter(
+          (p) => parseInt(p.id) === parseInt(productID)
+        )[0];
+
+        const tempFavourite = {
+          category: tempCategory,
+          product: tempProduct,
+        };
+
+        setSearchResults((prevSearchResults) => [...prevSearchResults, tempFavourite]);
+      });
+    };
+
+    getFavourites();
+  }, [favourites]);
+
+  const fetchMore = async (e) => {
+    //	Increment the amount loaded by 6 for the next iteration
+    setAmountLoaded((prevAmount) => prevAmount + 6);
+    e.target.complete();
+  };
+
+  return (
+    <IonPage id="category-page" className={styles.categoryPage}>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonButton color="dark" routerLink="/" routerDirection="back">
+              <IonIcon color="dark" icon={chevronBackOutline} />
+              &nbsp;Categories
+            </IonButton>
+          </IonButtons>
+          <IonTitle>Favourites</IonTitle>
+
+          <IonButtons slot="end">
+            <IonBadge color="dark">{shopCart.length}</IonBadge>
+            <IonButton color="dark">
+              <IonIcon ref={cartRef} className="animate__animated" icon={cart} />
+            </IonButton>
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+
+      <IonContent fullscreen>
+        <IonGrid>
+          <IonRow className="ion-text-center">
+            <IonCol size="12">
+              <IonNote>
+                {searchResults && searchResults.length}{' '}
+                {searchResults.length > 1 || searchResults.length === 0
+                  ? ' favourites'
+                  : ' favourite'}{' '}
+                found
+              </IonNote>
+            </IonCol>
+          </IonRow>
+
+          <IonRow>
+            {searchResults &&
+              searchResults.map((product, index) => {
+                if (index <= amountLoaded) {
+                  return (
+                    <ProductCard
+                      key={`category_product_${index}`}
+                      product={product.product}
+                      index={index}
+                      cartRef={cartRef}
+                      category={product.category}
+                    />
+                  );
+                }
+              })}
+          </IonRow>
+        </IonGrid>
+
+        <IonInfiniteScroll threshold="100px" onIonInfinite={fetchMore}>
+          <IonInfiniteScrollContent
+            loadingSpinner="bubbles"
+            loadingText="Fetching more..."
+          ></IonInfiniteScrollContent>
+        </IonInfiniteScroll>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default FavouriteProducts;

03_source/mobile/src/pages/DemoEcommerceExample/pages/Home.module.css

@@ -0,0 +1,42 @@
+.homePage ion-toolbar {
+
+    --border-style: none;
+}
+
+.logo {
+
+    margin-top: 0.25rem;
+    color: var(--ion-color-primary);
+}
+
+.categoryCard,
+.categoryCardContent {
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+}
+
+.categoryCardContent ion-button {
+
+    height: 1.5rem;
+    font-size: 0.8rem;
+}
+
+.categoryCardContent {
+
+    background-color: rgb(238, 238, 238);
+}
+
+.categoryCardContent ion-card-subtitle {
+
+    /* color: rgb(78, 78, 78); */
+}
+
+.categoryCard img {
+
+    /* border-radius: 5px; */
+    padding: 1rem;
+}

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

@@ -0,0 +1,88 @@
+import { useState } from 'react';
+import {
+  IonBadge,
+  IonButton,
+  IonButtons,
+  IonCard,
+  IonCardContent,
+  IonCardSubtitle,
+  IonCol,
+  IonContent,
+  IonGrid,
+  IonHeader,
+  IonIcon,
+  IonPage,
+  IonRow,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/react';
+
+import styles from './Home.module.css';
+import { cart, heart } from 'ionicons/icons';
+
+import { ProductStore } from '../data/ProductStore';
+import { FavouritesStore } from '../data/FavouritesStore';
+import { CartStore } from '../data/CartStore';
+
+const Home = () => {
+  const products = ProductStore.useState((s) => s.products);
+  const favourites = FavouritesStore.useState((s) => s.product_ids);
+  const shopCart = CartStore.useState((s) => s.product_ids);
+
+  return (
+    <IonPage id="home-page" className={styles.homePage}>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Categories</IonTitle>
+
+          <IonButtons slot="start" className="ion-padding-start">
+            <IonCardSubtitle className={styles.logo}>Ionic Furniture</IonCardSubtitle>
+          </IonButtons>
+
+          <IonButtons slot="end">
+            <IonBadge color="danger">{favourites.length}</IonBadge>
+            <IonButton color="danger" routerLink="/favourites">
+              <IonIcon icon={heart} />
+            </IonButton>
+
+            <IonBadge color="dark">{shopCart.length}</IonBadge>
+            <IonButton color="dark" routerLink="/cart">
+              <IonIcon icon={cart} />
+            </IonButton>
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Categories</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+
+        <IonGrid>
+          <IonRow>
+            {products.map((category, index) => {
+              return (
+                <IonCol size="6" key={`category_list_${index}`}>
+                  <IonCard
+                    routerLink={`/category/${category.slug}`}
+                    className={styles.categoryCard}
+                  >
+                    <img src={category.cover} alt="category cover" />
+
+                    <IonCardContent className={styles.categoryCardContent}>
+                      <IonCardSubtitle>{category.name}</IonCardSubtitle>
+                    </IonCardContent>
+                  </IonCard>
+                </IonCol>
+              );
+            })}
+          </IonRow>
+        </IonGrid>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Home;

03_source/mobile/src/pages/DemoEcommerceExample/pages/Product.module.css

@@ -0,0 +1,66 @@
+.categoryPage ion-toolbar {
+
+    --border-style: none;
+}
+
+.categoryCard {
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+    text-align: center;
+}
+
+.productCardActions {
+
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+    margin-bottom: 1rem;
+}
+
+.productCardAction {
+
+    font-size: 1.1rem;
+}
+
+.productCardHeader {
+
+    min-height: 17rem;
+}
+
+.productCardHeader p {
+
+    font-size: 1.2rem;
+    padding: 0;
+    margin: 0;
+    margin-top: 0.75rem;
+}
+
+.categoryCardContent {
+
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+}
+
+.categoryCardContent ion-button {
+
+    font-size: 0.8rem;
+}
+
+.categoryCardContent p {
+
+    font-size: 1.5rem;
+    padding: 0;
+    margin: 0;
+}
+
+.productPrice {
+
+    display: flex;
+    flex-direction: row;
+}

03_source/mobile/src/pages/DemoEcommerceExample/pages/Product.tsx

@@ -0,0 +1,210 @@
+import {
+  IonBadge,
+  IonButton,
+  IonButtons,
+  IonCard,
+  IonCardContent,
+  IonCardHeader,
+  IonCardSubtitle,
+  IonCol,
+  IonContent,
+  IonGrid,
+  IonHeader,
+  IonIcon,
+  IonPage,
+  IonRow,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/react';
+import {
+  arrowRedoOutline,
+  cart,
+  cartOutline,
+  chevronBackOutline,
+  heart,
+  heartOutline,
+} from 'ionicons/icons';
+import { useEffect, useRef, useState } from 'react';
+import { useParams } from 'react-router';
+import ProductCard from '../components/ProductCard';
+import { addToCart, CartStore } from '../data/CartStore';
+import { addToFavourites, FavouritesStore } from '../data/FavouritesStore';
+import { ProductStore } from '../data/ProductStore';
+
+import styles from './Product.module.css';
+
+const Product = () => {
+  const params = useParams();
+  const cartRef = useRef(null);
+  const products = ProductStore.useState((s) => s.products);
+  const favourites = FavouritesStore.useState((s) => s.product_ids);
+  const [isFavourite, setIsFavourite] = useState(false);
+  const shopCart = CartStore.useState((s) => s.product_ids);
+  const [product, setProduct] = useState({});
+  const [category, setCategory] = useState({});
+
+  useEffect(() => {
+    const categorySlug = params.slug;
+    const productID = params.id;
+    const tempCategory = products.filter((p) => p.slug === categorySlug)[0];
+    const tempProduct = tempCategory.products.filter(
+      (p) => parseInt(p.id) === parseInt(productID)
+    )[0];
+
+    const tempIsFavourite = favourites.find((f) => f === `${categorySlug}/${productID}`);
+
+    setIsFavourite(tempIsFavourite);
+    setCategory(tempCategory);
+    setProduct(tempProduct);
+  }, [params.slug, params.id]);
+
+  useEffect(() => {
+    const tempIsFavourite = favourites.find((f) => f === `${category.slug}/${product.id}`);
+    setIsFavourite(tempIsFavourite ? true : false);
+  }, [favourites, product]);
+
+  const addProductToFavourites = (e, categorySlug, productID) => {
+    e.preventDefault();
+    addToFavourites(categorySlug, productID);
+
+    document.getElementById(
+      `placeholder_favourite_product_${categorySlug}_${productID}`
+    ).style.display = '';
+    document
+      .getElementById(`placeholder_favourite_product_${categorySlug}_${productID}`)
+      .classList.add('animate__fadeOutTopRight');
+  };
+
+  const addProductToCart = (e, categorySlug, productID) => {
+    e.preventDefault();
+
+    document.getElementById(`placeholder_cart_${categorySlug}_${productID}`).style.display = '';
+    document
+      .getElementById(`placeholder_cart_${categorySlug}_${productID}`)
+      .classList.add('animate__fadeOutUp');
+
+    setTimeout(() => {
+      cartRef.current.classList.add('animate__tada');
+      addToCart(categorySlug, productID);
+
+      setTimeout(() => {
+        cartRef.current.classList.remove('animate__tada');
+      }, 500);
+    }, 500);
+  };
+
+  return (
+    <IonPage id="category-page" className={styles.categoryPage}>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonButton
+              color="dark"
+              text={category.name}
+              routerLink={`/category/${category.slug}`}
+              routerDirection="back"
+            >
+              <IonIcon color="dark" icon={chevronBackOutline} />
+              &nbsp;{category.name}
+            </IonButton>
+          </IonButtons>
+
+          <IonTitle>View Product</IonTitle>
+
+          <IonButtons slot="end">
+            <IonBadge color="dark">{shopCart.length}</IonBadge>
+            <IonButton color="dark" routerLink="/cart">
+              <IonIcon ref={cartRef} className="animate__animated" icon={cart} />
+            </IonButton>
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+
+      <IonContent fullscreen>
+        <IonGrid>
+          <IonRow>
+            <IonCol size="12">
+              <IonCard className={styles.categoryCard}>
+                <IonCardHeader className={styles.productCardHeader}>
+                  <div className={styles.productCardActions}>
+                    <IonIcon
+                      className={styles.productCardAction}
+                      color={isFavourite ? 'danger' : 'medium'}
+                      icon={isFavourite ? heart : heartOutline}
+                      onClick={(e) => addProductToFavourites(e, category.slug, product.id)}
+                    />
+                    <IonIcon
+                      style={{ position: 'absolute', display: 'none' }}
+                      id={`placeholder_favourite_product_${category.slug}_${product.id}`}
+                      className={`${styles.productCardAction} animate__animated`}
+                      color="danger"
+                      icon={heart}
+                    />
+                    <IonIcon
+                      className={styles.productCardAction}
+                      size="medium"
+                      icon={arrowRedoOutline}
+                    />
+                  </div>
+                  <img src={product.image} alt="product pic" />
+                  <p className="ion-text-wrap">{product.name}</p>
+                </IonCardHeader>
+
+                <IonCardContent className={styles.categoryCardContent}>
+                  <div className={styles.productPrice}>
+                    <IonButton color="light" size="large">
+                      {product.price}
+                    </IonButton>
+                    <IonButton
+                      size="large"
+                      color="dark"
+                      onClick={(e) => addProductToCart(e, category.slug, product.id)}
+                    >
+                      <IonIcon icon={cartOutline} />
+                      &nbsp;&nbsp;Add to Cart
+                    </IonButton>
+
+                    <IonIcon
+                      icon={cart}
+                      color="dark"
+                      style={{ position: 'absolute', display: 'none', fontSize: '3rem' }}
+                      id={`placeholder_cart_${category.slug}_${product.id}`}
+                      className="animate__animated"
+                    />
+                  </div>
+                </IonCardContent>
+              </IonCard>
+            </IonCol>
+          </IonRow>
+
+          <IonRow className="ion-text-center">
+            <IonCol size="12">
+              <IonCardSubtitle>Similar products...</IonCardSubtitle>
+            </IonCol>
+          </IonRow>
+
+          <IonRow>
+            {category &&
+              category.products &&
+              category.products.map((similar, index) => {
+                if (similar.id !== product.id && product.image && index < 4) {
+                  return (
+                    <ProductCard
+                      key={`similar_product_${index}`}
+                      product={similar}
+                      index={index}
+                      isFavourite={false}
+                      cartRef={cartRef}
+                      category={category}
+                    />
+                  );
+                }
+              })}
+          </IonRow>
+        </IonGrid>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Product;

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

@@ -0,0 +1,81 @@
+/* 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;
+
+  --ion-toolbar-color: black;
+  --ion-grid-column-padding: 0rem;
+  /* --ion-toolbar-background: var(--ion-color-warning); */
+}

03_source/mobile/src/pages/DemoFastFoodApp/module.d.ts

@@ -2,3 +2,8 @@ declare module '*.module.css' {
   const classes: { readonly [key: string]: string };
   export default classes;
 }
+
+declare module '*.module.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}

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

@@ -56,6 +56,12 @@ const Home = () => {
         <IonToolbar>
           <IonTitle>Popular</IonTitle>
 
+          {/*
+          const router = useIonRouter();
+          function handleBackClick() {
+            router.goBack();
+          }
+          */}
           <IonButtons slot="start">
             <IonButton onClick={() => handleBackClick()}>
               <IonIcon icon={chevronBackOutline} color="primary" />

03_source/mobile/src/pages/DemoReactProfileDashboardUi/AppPages/Tab1.tsx

@@ -18,7 +18,7 @@ import { SkeletonDashboard } from '../TestComponents/SkeletonDashboard';
 import { chevronBackOutline, refreshOutline } from 'ionicons/icons';
 import { CurrentWeather } from '../TestComponents/CurrentWeather';
 
-function Tab1() {
+function Tab1(): React.JSX.Element {
   const router = useIonRouter();
 
   const [currentWeather, setCurrentWeather] = useState(false);

03_source/mobile/src/pages/DemoReactProfileDashboardUi/AppPages/Tab2.tsx

@@ -12,9 +12,9 @@ import {
 import { useState } from 'react';
 import { CurrentWeather } from '../TestComponents/CurrentWeather';
 
-function Tab2() {
+function Tab2(): React.JSX.Element {
   const [search, setSearch] = useState('');
-  const [currentWeather, setCurrentWeather] = useState(false);
+  const [currentWeather, setCurrentWeather] = useState<any>(false);
 
   const performSearch = async () => {
     getAddress(search);

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

@@ -1,38 +1,27 @@
-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 Tab2 from './AppPages/Tab2';
+// import Tab1 from './AppPages/Tab1';
+// import Tab2 from './AppPages/Tab2';
 
-import './style.scss';
+// import './style.scss';
+import Home from './pages/Home';
 
 function DemoReactProfileDashboardUi() {
   return (
-    <IonTabs>
+    <IonTabs className="demo-react-profile-dashboard-ui">
       <IonRouterOutlet>
-        <Route exact path="/demo-react-profile-dashboard-ui/tab1">
-          <Tab1 />
-        </Route>
-        <Route exact path="/demo-react-profile-dashboard-ui/tab2">
-          <Tab2 />
+        <Route exact path="/demo-react-profile-dashboard-ui/home">
+          <Home />
         </Route>
 
-        <Redirect exact path="/demo-react-profile-dashboard-ui" to="/demo-react-profile-dashboard-ui/tab1" />
+        <Redirect
+          exact
+          path="/demo-react-profile-dashboard-ui"
+          to="/demo-react-profile-dashboard-ui/home"
+        />
       </IonRouterOutlet>
-
-      {/*  */}
-      <IonTabBar slot="bottom">
-        <IonTabButton tab="tab1" href="/demo-react-profile-dashboard-ui/tab1">
-          <IonIcon icon={cloudOutline} />
-          <IonLabel>Dashboard</IonLabel>
-        </IonTabButton>
-        <IonTabButton tab="tab2" href="/demo-react-profile-dashboard-ui/tab2">
-          <IonIcon icon={searchOutline} />
-          <IonLabel>Search</IonLabel>
-        </IonTabButton>
-      </IonTabBar>
     </IonTabs>
   );
 }

03_source/mobile/src/pages/DemoReactProfileDashboardUi/pages/Home.module.scss

@@ -0,0 +1,105 @@
+.home {
+  ion-header {
+    &.header-md:after {
+      background: none;
+    }
+  }
+
+  ion-header,
+  ion-toolbar {
+    border: none !important;
+    --border-style: none !important;
+    border-color: none !important;
+    border-bottom: none !important;
+  }
+
+  ion-toolbar {
+    background-color: #5893fa;
+    --background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%236a9df6' fill-opacity='0.9' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+  }
+}
+
+.topHeader {
+  height: 8rem;
+  margin-bottom: -8rem;
+  border-end-start-radius: 60px !important;
+
+  background-color: #5893fa;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%236a9df6' fill-opacity='0.9' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+}
+
+.avatar {
+  border-radius: 10px;
+}
+
+.profileStats {
+  background-color: rgb(245, 245, 245);
+  border-radius: 10px !important;
+  padding: 0.2rem;
+  align-content: center;
+}
+
+.profileStat {
+  text-align: center;
+  margin: 0 auto;
+
+  ion-card-title {
+    color: rgb(68, 68, 68);
+    font-size: 0.8rem;
+  }
+
+  ion-card-subtitle {
+    font-size: 0.6rem;
+  }
+}
+
+.profileInfo {
+  text-align: left;
+  margin-top: -0.2rem;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+}
+
+.profileName {
+  color: rgb(59, 59, 59) !important;
+  font-weight: 500 !important;
+}
+
+.profileCard {
+  ion-icon {
+    font-size: 1.75rem;
+    color: #5893fa;
+    margin-bottom: 1rem;
+  }
+}
+
+.profileStatusContainer {
+  margin-top: -2rem;
+  margin-bottom: -2rem;
+
+  ion-card-content {
+    margin-top: -1rem !important;
+  }
+}
+
+.profileActionContainer {
+  margin-top: -2rem;
+}
+
+.profileStatus {
+  ion-card-subtitle {
+    margin-top: 0.35rem;
+    margin-left: 1rem;
+  }
+}
+
+.profileActionCard {
+  padding-top: 0.5rem;
+
+  ion-icon {
+    font-size: 1.75rem;
+    color: #5893fa;
+    margin-top: -0.3rem;
+  }
+}

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

@@ -0,0 +1,183 @@
+import {
+  IonButton,
+  IonButtons,
+  IonCard,
+  IonCardContent,
+  IonCardHeader,
+  IonCardSubtitle,
+  IonCardTitle,
+  IonCol,
+  IonContent,
+  IonGrid,
+  IonHeader,
+  IonIcon,
+  IonPage,
+  IonRow,
+  IonText,
+  IonToolbar,
+  useIonRouter,
+} from '@ionic/react';
+import styles from './Home.module.scss';
+
+import {
+  arrowBackOutline,
+  arrowForward,
+  bookmarkOutline,
+  chatboxEllipsesOutline,
+  chevronBackOutline,
+  ellipsisHorizontal,
+  imageOutline,
+  personAddOutline,
+} from 'ionicons/icons';
+
+const Home = (): React.JSX.Element => {
+  const router = useIonRouter();
+
+  function handleBackClick() {
+    router.goBack();
+  }
+
+  return (
+    <IonPage className={styles.home}>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonButton onClick={() => handleBackClick()} color="light">
+              <IonIcon icon={arrowBackOutline} />
+            </IonButton>
+          </IonButtons>
+
+          <IonButtons slot="end">
+            <IonButton color="light">
+              <IonIcon icon={ellipsisHorizontal} />
+            </IonButton>
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent>
+        <div className={styles.topHeader}></div>
+
+        <IonGrid>
+          <IonRow className="ion-justify-content-center">
+            <IonCol
+              size="12"
+              className="ion-justify-content-center ion-align-items-center ion-text-center"
+            >
+              <IonCard className={styles.profileHeader}>
+                <IonCardContent>
+                  <IonRow>
+                    <IonCol size="4">
+                      <img
+                        src="/assets/DemoReactProfileDashboardUi/alan.jpg"
+                        alt="avatar"
+                        className={styles.avatar}
+                      />
+                    </IonCol>
+
+                    <IonCol size="8">
+                      <IonRow className={styles.profileInfo}>
+                        <IonCol size="12">
+                          <IonText color="dark" className={styles.profileName}>
+                            <p>Alan Montgomery</p>
+                          </IonText>
+                          <IonText color="medium">
+                            <p>Mobile Team Lead</p>
+                          </IonText>
+                        </IonCol>
+                      </IonRow>
+
+                      <IonRow className={styles.profileStats}>
+                        <IonCol className={styles.profileStat}>
+                          <IonCardTitle>109</IonCardTitle>
+                          <IonCardSubtitle>Followinig</IonCardSubtitle>
+                        </IonCol>
+
+                        <IonCol className={styles.profileStat}>
+                          <IonCardTitle>1.2k</IonCardTitle>
+                          <IonCardSubtitle>Followers</IonCardSubtitle>
+                        </IonCol>
+                      </IonRow>
+                    </IonCol>
+                  </IonRow>
+
+                  <IonRow>
+                    <IonCol size="6">
+                      <IonButton fill="outline" expand="block">
+                        Message
+                      </IonButton>
+                    </IonCol>
+
+                    <IonCol size="6">
+                      <IonButton color="primary" expand="block">
+                        <IonIcon icon={personAddOutline} size="small" />
+                        &nbsp; Follow
+                      </IonButton>
+                    </IonCol>
+                  </IonRow>
+                </IonCardContent>
+              </IonCard>
+            </IonCol>
+          </IonRow>
+
+          <IonRow className={styles.profileStatusContainer}>
+            <IonCol size="12">
+              <IonCard className={styles.profileCard}>
+                <IonCardHeader>
+                  <IonRow className={styles.profileStatus}>
+                    <IonIcon icon={chatboxEllipsesOutline} />
+                    <IonCardSubtitle>Status</IonCardSubtitle>
+                  </IonRow>
+                </IonCardHeader>
+                <IonCardContent>
+                  <IonText>
+                    <p>
+                      I love posting content related to Ionic React! Make sure to check out the
+                      Ionic React Hub!
+                    </p>
+                  </IonText>
+                </IonCardContent>
+              </IonCard>
+            </IonCol>
+          </IonRow>
+
+          <IonRow>
+            <IonCol size="6">
+              <IonCard className={styles.profileCard}>
+                <IonCardContent>
+                  <IonIcon icon={imageOutline} />
+                  <IonCardTitle>147</IonCardTitle>
+                  <IonCardSubtitle>Photos</IonCardSubtitle>
+                </IonCardContent>
+              </IonCard>
+            </IonCol>
+
+            <IonCol size="6">
+              <IonCard className={styles.profileCard}>
+                <IonCardContent>
+                  <IonIcon icon={bookmarkOutline} />
+                  <IonCardTitle>63</IonCardTitle>
+                  <IonCardSubtitle>Bookmarks</IonCardSubtitle>
+                </IonCardContent>
+              </IonCard>
+            </IonCol>
+          </IonRow>
+
+          <IonRow className={styles.profileActionContainer}>
+            <IonCol size="12">
+              <IonCard className={styles.profileActionCard}>
+                <IonCardContent>
+                  <IonRow className="ion-justify-content-between">
+                    <IonCardSubtitle>View latest project</IonCardSubtitle>
+                    <IonIcon icon={arrowForward} />
+                  </IonRow>
+                </IonCardContent>
+              </IonCard>
+            </IonCol>
+          </IonRow>
+        </IonGrid>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Home;

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

@@ -1,103 +0,0 @@
-#about-page {
-  ion-toolbar {
-    position: absolute;
-
-    top: 0;
-    left: 0;
-    right: 0;
-
-    --background: transparent;
-    --color: white;
-  }
-
-  ion-toolbar ion-back-button,
-  ion-toolbar ion-button,
-  ion-toolbar ion-menu-button {
-    --color: white;
-  }
-
-  .about-header {
-    position: relative;
-
-    width: 100%;
-    height: 30%;
-  }
-
-  .about-header .about-image {
-    position: absolute;
-
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-
-    background-position: center;
-    background-size: cover;
-    background-repeat: no-repeat;
-
-    opacity: 0;
-
-    transition: opacity 500ms ease-in-out;
-  }
-
-  .about-header .madison {
-    background-image: url('/assets/WeatherDemo/img/about/madison.jpg');
-  }
-
-  .about-header .austin {
-    background-image: url('/assets/WeatherDemo/img/about/austin.jpg');
-  }
-
-  .about-header .chicago {
-    background-image: url('/assets/WeatherDemo/img/about/chicago.jpg');
-  }
-
-  .about-header .seattle {
-    background-image: url('/assets/WeatherDemo/img/about/seattle.jpg');
-  }
-
-  .about-info {
-    position: relative;
-    margin-top: -10px;
-    border-radius: 10px;
-    background: var(--ion-background-color, #fff);
-    z-index: 2; // display rounded border above header image
-  }
-
-  .about-info h3 {
-    margin-top: 0;
-  }
-
-  .about-info ion-list {
-    padding-top: 0;
-  }
-
-  .about-info p {
-    line-height: 130%;
-
-    color: var(--ion-color-dark);
-  }
-
-  .about-info ion-icon {
-    margin-inline-end: 32px;
-  }
-
-  /*
-   * iOS Only
-   */
-
-  .ios .about-info {
-    --ion-padding: 19px;
-  }
-
-  .ios .about-info h3 {
-    font-weight: 700;
-  }
-}
-
-#date-input-popover {
-  --offset-y: -var(--ion-safe-area-bottom);
-
-  --max-width: 90%;
-  --width: 336px;
-}

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

@@ -0,0 +1,88 @@
+.demo-react-profile-dashboard-ui {
+  /* 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;
+
+    --ion-background-color: white;
+  }
+
+  ion-item,
+  ion-toolbar,
+  ion-header {
+    --background: var(--ion-background-color);
+    --color: white;
+  }
+}

03_source/mobile/src/pages/DemoReactQrCode/components/CustomFab.jsx

@@ -0,0 +1,27 @@
+import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/react';
+import { addOutline, cameraOutline, qrCodeOutline } from 'ionicons/icons';
+
+export const CustomFab = ({ start }) => {
+  return (
+    <IonFab
+      vertical="bottom"
+      horizontal="end"
+      slot="fixed"
+      className="ion-padding-bottom ion-padding-end"
+    >
+      <IonFabButton>
+        <IonIcon icon={qrCodeOutline} />
+      </IonFabButton>
+
+      <IonFabList side="top" className="ion-padding-bottom">
+        <IonFabButton color="primary" onClick={start}>
+          <IonIcon icon={cameraOutline} />
+        </IonFabButton>
+
+        <IonFabButton color="primary" routerLink="/demo-qr-scanner/manual">
+          <IonIcon icon={addOutline} />
+        </IonFabButton>
+      </IonFabList>
+    </IonFab>
+  );
+};

03_source/mobile/src/pages/DemoReactQrCode/components/NoQRCodes.jsx

@@ -0,0 +1,15 @@
+import { IonCol, IonRow, IonText } from '@ionic/react';
+
+export const NoQRCodes = () => (
+  <IonRow className="ion-text-center ion-justify-content-center">
+    <IonCol size="9">
+      <h3>It looks like you don't have any QR codes stored.</h3>
+      <img src="/assets/icon2.png" alt="icon" />
+
+      <p>
+        Click the <IonText color="primary">button</IonText> in the bottom right to scan a code or
+        generate a code.
+      </p>
+    </IonCol>
+  </IonRow>
+);

03_source/mobile/src/pages/DemoReactQrCode/components/QRCodeScannedModal.jsx

@@ -0,0 +1,106 @@
+import {
+  IonButton,
+  IonButtons,
+  IonCard,
+  IonCardContent,
+  IonCardHeader,
+  IonCardTitle,
+  IonCol,
+  IonContent,
+  IonGrid,
+  IonHeader,
+  IonIcon,
+  IonNote,
+  IonPage,
+  IonRow,
+  IonTitle,
+  IonToolbar,
+  useIonToast,
+} from '@ionic/react';
+import QRCode from 'react-qr-code';
+import { addQRCode } from '../store/QRStore';
+
+import useSound from 'use-sound';
+import closeSound from '../sounds/close.wav';
+import { reloadOutline } from 'ionicons/icons';
+
+export const QRCodeScannedModal = ({ dismiss, code, set, scan }) => {
+  const [play] = useSound(closeSound);
+  const [showToast] = useIonToast();
+
+  const handleDismiss = () => {
+    dismiss();
+    play();
+  };
+
+  const handleScanAgain = () => {
+    handleDismiss();
+
+    setTimeout(() => {
+      scan();
+    }, 10);
+  };
+
+  const handleAdd = async () => {
+    addQRCode(code.text ? code.text : code, true);
+    showToast({
+      header: 'Success!',
+      message: 'QR Code stored successfully.',
+      duration: 3000,
+      color: 'primary',
+    });
+
+    handleDismiss();
+  };
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>View QR Code</IonTitle>
+          <IonButtons slot="end">
+            <IonButton onClick={handleDismiss}>Close</IonButton>
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+
+      <IonContent>
+        <IonGrid className="ion-padding-top ion-margin-top">
+          <IonRow className="ion-justify-content-center ion-text-center animate__animated animate__lightSpeedInLeft animate__faster">
+            <IonCol size="12">
+              <QRCode value={code.text ? code.text : code} />
+            </IonCol>
+          </IonRow>
+
+          <IonRow>
+            <IonCol size="12">
+              <IonCard>
+                <IonCardHeader>
+                  <IonCardTitle>QR Code data</IonCardTitle>
+                  <IonNote>This is what the code represents</IonNote>
+                </IonCardHeader>
+                <IonCardContent>
+                  <p>{code.text ? code.text : code}</p>
+                </IonCardContent>
+              </IonCard>
+            </IonCol>
+          </IonRow>
+
+          <IonRow>
+            <IonCol size="6">
+              <IonButton expand="block" fill="outline" onClick={handleScanAgain}>
+                <IonIcon icon={reloadOutline} />
+                &nbsp; Scan again
+              </IonButton>
+            </IonCol>
+            <IonCol size="6">
+              <IonButton expand="block" onClick={handleAdd}>
+                Store &rarr;
+              </IonButton>
+            </IonCol>
+          </IonRow>
+        </IonGrid>
+      </IonContent>
+    </IonPage>
+  );
+};

03_source/mobile/src/pages/DemoReactQrCode/components/QRWebModal.jsx

@@ -0,0 +1,45 @@
+import {
+  IonButton,
+  IonButtons,
+  IonCol,
+  IonContent,
+  IonGrid,
+  IonHeader,
+  IonPage,
+  IonRow,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/react';
+// import QrReader from "react-qr-reader";
+
+export const QRWebModal = ({ dismiss, set, scan, error }) => {
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Scan QR Code</IonTitle>
+          <IonButtons slot="end">
+            <IonButton onClick={dismiss}>Close</IonButton>
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+
+      <IonContent>
+        <IonGrid className="ion-padding-top ion-margin-top">
+          <IonRow className="ion-justify-content-center ion-text-center animate__animated animate__lightSpeedInLeft animate__faster">
+            <IonCol size="12">
+              {/*
+              <QrReader
+                  delay={ 500 }
+                  onError={ error }
+                  onScan={ scan }
+                  style={{ width: "100%", height: "100%" }}
+                />
+                */}
+            </IonCol>
+          </IonRow>
+        </IonGrid>
+      </IonContent>
+    </IonPage>
+  );
+};

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

@@ -3,38 +3,30 @@ import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs }
 import { cloudOutline, searchOutline } from 'ionicons/icons';
 import { Route, Redirect } from 'react-router';
 
-import Tab1 from './AppPages/Tab1';
-import Tab2 from './AppPages/Tab2';
+// import Tab1 from './AppPages/Tab1';
+// import Tab2 from './AppPages/Tab2';
 
 import './style.scss';
 
-function DemoReactQrCode() {
+function DemoWeatherAppUi() {
   return (
     <IonTabs>
       <IonRouterOutlet>
-        <Route exact path="/demo-react-qr-code/tab1">
+        <Route exact path="/demo-react-qr-code/home">
           <Tab1 />
         </Route>
-        <Route exact path="/demo-react-qr-code/tab2">
+        <Route exact path="/demo-react-qr-code/manual">
           <Tab2 />
         </Route>
 
-        <Redirect exact path="/demo-react-qr-code" to="/demo-react-qr-code/tab1" />
-      </IonRouterOutlet>
+        <Route exact path="/demo-react-qr-code/camera">
+          <Tab3 />
+        </Route>
 
-      {/*  */}
-      <IonTabBar slot="bottom">
-        <IonTabButton tab="tab1" href="/demo-react-qr-code/tab1">
-          <IonIcon icon={cloudOutline} />
-          <IonLabel>Dashboard</IonLabel>
-        </IonTabButton>
-        <IonTabButton tab="tab2" href="/demo-react-qr-code/tab2">
-          <IonIcon icon={searchOutline} />
-          <IonLabel>Search</IonLabel>
-        </IonTabButton>
-      </IonTabBar>
+        <Redirect exact path="/demo-react-qr-code" to="/demo-react-qr-code/home" />
+      </IonRouterOutlet>
     </IonTabs>
   );
 }
 
-export default DemoReactQrCode;
+export default DemoWeatherAppUi;

03_source/mobile/src/pages/DemoReactQrCode/pages/Tab1.jsx

@@ -0,0 +1,114 @@
+import { BarcodeScanner } from '@ionic-native/barcode-scanner';
+import { IonContent, IonGrid, IonHeader, IonPage, IonTitle, IonToolbar, useIonModal, getPlatforms } from '@ionic/react';
+import { useStoreState } from 'pullstate';
+import { useState } from 'react';
+import { useRef } from 'react';
+import useSound from 'use-sound';
+import { CustomFab } from '../components/CustomFab';
+import { NoQRCodes } from '../components/NoQRCodes';
+import { QRCodeList } from '../components/QRCodeList';
+import { QRCodeScannedModal } from '../components/QRCodeScannedModal';
+import { QRStore } from '../store';
+import { getCodes } from '../store/Selectors';
+import './Tab1.css';
+
+import openSound from "../sounds/open.wav";
+import { QRWebModal } from '../components/QRWebModal';
+
+const Tab1 = () => {
+
+  const pageRef = useRef();
+  const codes = useStoreState(QRStore, getCodes);
+  const [ play ] = useSound(openSound);
+
+  const [ QRData, setQRData ] = useState(false);
+
+  const handleScan = data => {
+    
+    if (data) {
+
+      setQRData(data);
+      play();
+      handleSuccess(data);
+    }
+  }
+  
+  const handleError = err => {
+    
+    console.error(err)
+  }
+
+  const start = async () => {
+
+    const platforms = getPlatforms();
+    const isWeb = (platforms.includes("desktop") || platforms.includes("mobileweb") || platforms.includes("pwa"));
+
+    if (!isWeb) {
+      
+      const data = await BarcodeScanner.scan();
+
+      if (data) {
+        handleSuccess(data);
+      }
+    } else {
+
+      presentWebModal({
+
+        presentingElement: pageRef.current
+      });
+    }
+  }
+
+  const handleSuccess = data => {
+
+    setQRData(data);
+    console.log(data);
+    dismissWebModal();
+    
+    play();
+    present({
+
+      presentingElement: pageRef.current
+    });
+  }
+
+  const [ present, dismiss ] = useIonModal(QRCodeScannedModal, {
+
+    dismiss: () => dismiss(),
+    code: QRData,
+    set: () => setQRData(),
+    scan: () => start()
+  });
+
+  const [ presentWebModal, dismissWebModal ] = useIonModal(QRWebModal, {
+
+    dismiss: () => dismissWebModal(),
+    set: () => setQRData(),
+    scan: handleScan,
+    error: handleError
+  });
+
+  return (
+    <IonPage ref={ pageRef }>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>QR Codes</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">QR Codes</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        <IonGrid>
+          { codes.length < 1 && <NoQRCodes /> }
+          { codes.length > 0 && <QRCodeList codes={ codes } pageRef={ pageRef } /> }
+        </IonGrid>
+        <CustomFab start={ start } />
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Tab1;

03_source/mobile/src/pages/DemoReactQrCode/pages/Tab2.jsx

@@ -0,0 +1,105 @@
+import { IonBackButton, IonButton, IonButtons, IonCol, IonContent, IonGrid, IonHeader, IonInput, IonItem, IonLabel, IonNote, IonPage, IonRow, IonTextarea, IonTitle, IonToolbar, useIonToast } from '@ionic/react';
+import './Tab2.css';
+
+import QRCode from "react-qr-code";
+import { useState } from 'react';
+import { addQRCode } from '../store/QRStore';
+
+const Tab2 = () => {
+
+  const [ data, setData ] = useState("");
+  const [ showToast ] = useIonToast();
+
+  const handleAdd = async () => {
+
+    if (data === "") {
+
+      showToast({
+
+        header: "Error!",
+        message: "Please enter some data to store.",
+        duration: 3000,
+        color: "danger"
+      });
+    } else {
+
+      addQRCode(data);
+      showToast({
+
+        header: "Success!",
+        message: "QR Code stored successfully.",
+        duration: 3000,
+        color: "primary"
+      });
+
+      setData("");
+    }
+  }
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonBackButton text="QR Codes" />
+          </IonButtons>
+          <IonTitle>Generate QR Code</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Generate QR Code</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+
+        <IonGrid>
+
+          <IonRow>
+            <IonCol size="12">
+              <IonItem lines="none">
+                <IonLabel className="ion-text-wrap">
+                  <h1>You can generate a QR code to store or share with friends.</h1>
+                  <p>You'll see a live preview of the QR Code</p>
+                </IonLabel>
+              </IonItem>
+            </IonCol>
+          </IonRow>
+
+          <IonRow>
+            <IonCol size="12">
+              <IonItem>
+                <IonLabel position="stacked">Data to store</IonLabel>
+                <IonTextarea rows="3" placeholder="Enter a URL or secret information" type="text" inputmode="text" value={ data } onIonChange={ e => setData(e.target.value) } />
+              </IonItem>
+            </IonCol>
+          </IonRow>
+
+          <IonRow className="ion-text-center ion-margin-top">
+            <IonCol size="12">
+              { data !== "" ? <QRCode value={ data } /> : <img src="/assets/placeholder2.png" alt="placeholder qr" height="256" /> }
+            </IonCol>
+          </IonRow>
+
+          <IonRow className="ion-text-center ion-justify-content-center">
+            <IonCol size="10">
+              <IonItem lines="none">
+                <IonLabel className="ion-text-wrap ion-text-center">
+                  <p>When you're ready, you can store the generated QR Code</p>
+                </IonLabel>
+              </IonItem>
+            </IonCol>
+          </IonRow>
+
+          <IonRow>
+            <IonCol size="12">
+              <IonButton expand="block" onClick={ handleAdd }>Store &rarr;</IonButton>
+            </IonCol>
+          </IonRow>
+        </IonGrid>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Tab2;

03_source/mobile/src/pages/DemoReactQrCode/pages/Tab3.jsx

@@ -0,0 +1,102 @@
+import { IonBackButton, IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardTitle, IonCol, IonContent, IonGrid, IonHeader, IonIcon, IonNote, IonPage, IonRow, IonTitle, IonToolbar, useIonToast } from '@ionic/react';
+import './Tab3.css';
+import { useState } from 'react';
+
+import { BarcodeScanner } from "@ionic-native/barcode-scanner";
+import QRCode from 'react-qr-code';
+import { addQRCode } from '../store/QRStore';
+import { reloadOutline } from 'ionicons/icons';
+
+const Tab3 = () => {
+
+  const [ QRData, setQRData ] = useState(false);
+
+  const start = async () => {
+
+    const data = await BarcodeScanner.scan();
+    setQRData(data);
+  }
+
+  const [ showToast ] = useIonToast();
+
+  const handleAdd = async () => {
+
+      addQRCode(QRData.text, true);
+      showToast({
+
+        header: "Success!",
+        message: "QR Code stored successfully.",
+        duration: 3000,
+        color: "primary"
+      });
+
+      setQRData(false);
+  }
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonBackButton text="QR Codes" />
+          </IonButtons>
+          <IonTitle>Scan QR Code</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Scan QR Code</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+
+        <IonGrid>
+          { !QRData &&
+            <IonRow>
+              <IonCol size="12">
+                <IonButton expand="block" onClick={ start }>Scan &rarr;</IonButton>
+              </IonCol>
+            </IonRow>
+          }
+
+          { QRData && 
+            <>
+              <IonRow className="ion-justify-content-center ion-text-center animate__animated animate__lightSpeedInLeft animate__faster">
+                <IonCol size="12">
+                  <QRCode value={ QRData.text } />
+                </IonCol>
+              </IonRow>
+
+              <IonRow>
+                <IonCol size="12">
+                  <IonCard>
+                    <IonCardHeader>
+                      <IonCardTitle>QR Code data</IonCardTitle>
+                      <IonNote>This is what the code represents</IonNote>
+                    </IonCardHeader>
+                    <IonCardContent>
+                      <p>{ QRData.text }</p>
+                    </IonCardContent>
+                  </IonCard>
+                </IonCol>
+              </IonRow>
+
+              <IonRow>
+                <IonCol size="6">
+                  <IonButton expand="block" fill="outline" onClick={ start }>
+                    <IonIcon icon={ reloadOutline } />&nbsp;
+                    Scan again</IonButton>
+                </IonCol>
+                <IonCol size="6">
+                  <IonButton expand="block" onClick={ handleAdd }>Store &rarr;</IonButton>
+                </IonCol>
+              </IonRow>
+            </>
+          }
+        </IonGrid>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Tab3;

03_source/mobile/src/pages/DemoReactQrCode/store/QRStore.js

@@ -0,0 +1,19 @@
+import { Store } from 'pullstate';
+
+const QRStore = new Store({
+  codes: [],
+});
+
+export default QRStore;
+
+export const addQRCode = (data, scanned = false) => {
+  QRStore.update((s) => {
+    s.codes = [...s.codes, { id: new Date(), data, scanned }];
+  });
+};
+
+export const removeQRCode = (id) => {
+  QRStore.update((s) => {
+    s.codes = s.codes.filter((code) => code.id !== id);
+  });
+};

03_source/mobile/src/pages/DemoReactQrCode/store/Selectors.js

@@ -0,0 +1,6 @@
+import { createSelector } from 'reselect';
+
+const getState = (state) => state;
+
+//  General getters
+export const getCodes = createSelector(getState, (state) => state.codes);

03_source/mobile/src/pages/DemoReactQrCode/store/index.js

@@ -0,0 +1 @@
+export { default as QRStore } from './QRStore';

03_source/mobile/src/pages/DemoReactQrCode/theme/custom-tab-bar.scss

@@ -0,0 +1,30 @@
+:root {
+
+    /* --ion-background-color: white; */
+    --ion-tab-bar-color: rgb(76, 112, 141);
+    --ion-tab-bar-color-selected: white;
+}
+
+ion-tab-bar {
+
+	--background: rgb(1, 72, 131);
+	box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.4);
+	border-radius: 50px !important;
+
+	height: 50px;
+	width: 40%;
+	padding-top: 5px;
+	padding-bottom: 5px;
+    padding-left: 10px;
+    padding-right: 10px;
+
+	bottom: 24px;
+	position: relative;
+	margin: 0 auto !important;
+	border-top: none;
+}
+
+ion-tab-button {
+
+    border-radius: 16px !important;
+}

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

@@ -0,0 +1,77 @@
+/* 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;
+}

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

@@ -0,0 +1,24 @@
+.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/DemoReactThemeSwitcher/components/ExploreContainer.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import './ExploreContainer.scss';
+
+const ExploreContainer = ({ name }: { name: string }): React.JSX.Element => {
+  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>
+    </div>
+  );
+};
+
+export default ExploreContainer;

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

@@ -1,39 +1,58 @@
 import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
 
-import { cloudOutline, searchOutline } from 'ionicons/icons';
+import {
+  brushOutline,
+  cloudOutline,
+  handLeftOutline,
+  informationCircle,
+  searchOutline,
+} from 'ionicons/icons';
+
 import { Route, Redirect } from 'react-router';
 
-import Tab1 from './AppPages/Tab1';
-import Tab2 from './AppPages/Tab2';
+import './theme/variables.scss';
 
-import './style.scss';
+import ThemeStore from './store/ThemeStore';
+import Info from './pages/Info';
+import Themes from './pages/Themes';
+import Examples from './pages/Examples';
 
 function DemoReactThemeSwitcher() {
+  const theme = ThemeStore.useState((s) => s.currentTheme);
+
   return (
-    <IonTabs>
-      <IonRouterOutlet>
-        <Route exact path="/demo-react-theme-switcher/tab1">
-          <Tab1 />
-        </Route>
-        <Route exact path="/demo-react-theme-switcher/tab2">
-          <Tab2 />
-        </Route>
+    <div className="helloworld" style={theme ? theme : {}}>
+      <IonTabs>
+        <IonRouterOutlet>
+          <Route exact path="/demo-react-theme-switcher/info">
+            <Info />
+          </Route>
+          <Route exact path="/demo-react-theme-switcher/themes">
+            <Themes />
+          </Route>
+          <Route exact path="/demo-react-theme-switcher/examples">
+            <Examples />
+          </Route>
 
-        <Redirect exact path="/demo-react-theme-switcher" to="/demo-react-theme-switcher/tab1" />
-      </IonRouterOutlet>
+          <Redirect exact path="/demo-react-theme-switcher" to="/demo-react-theme-switcher/info" />
+        </IonRouterOutlet>
 
-      {/*  */}
-      <IonTabBar slot="bottom">
-        <IonTabButton tab="tab1" href="/demo-react-theme-switcher/tab1">
-          <IonIcon icon={cloudOutline} />
-          <IonLabel>Dashboard</IonLabel>
-        </IonTabButton>
-        <IonTabButton tab="tab2" href="/demo-react-theme-switcher/tab2">
-          <IonIcon icon={searchOutline} />
-          <IonLabel>Search</IonLabel>
-        </IonTabButton>
-      </IonTabBar>
-    </IonTabs>
+        <IonTabBar slot="bottom">
+          <IonTabButton tab="tab1" href="/demo-react-theme-switcher/info">
+            <IonIcon icon={informationCircle} />
+            <IonLabel>Info</IonLabel>
+          </IonTabButton>
+          <IonTabButton tab="tab2" href="/demo-react-theme-switcher/themes">
+            <IonIcon icon={brushOutline} />
+            <IonLabel>Themes</IonLabel>
+          </IonTabButton>
+          <IonTabButton tab="tab3" href="/demo-react-theme-switcher/examples">
+            <IonIcon icon={handLeftOutline} />
+            <IonLabel>Examples</IonLabel>
+          </IonTabButton>
+        </IonTabBar>
+      </IonTabs>
+    </div>
   );
 }
 

03_source/mobile/src/pages/DemoReactThemeSwitcher/pages/Examples.tsx

@@ -0,0 +1,126 @@
+import {
+  IonBadge,
+  IonButton,
+  IonCardSubtitle,
+  IonCardTitle,
+  IonCol,
+  IonContent,
+  IonGrid,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonPage,
+  IonRange,
+  IonRow,
+  IonSelect,
+  IonSelectOption,
+  IonSpinner,
+  IonText,
+  IonTitle,
+  IonToggle,
+  IonToolbar,
+} from '@ionic/react';
+import { star, sunny } from 'ionicons/icons';
+import { useGetSelectedTheme } from '../store/ThemeStore';
+
+import './Examples.scss';
+
+const Examples = (): React.JSX.Element => {
+  const currentTheme = useGetSelectedTheme();
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Examples</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonGrid>
+          <IonRow
+            className="ion-text-center ion-padding ion-margin-bottom"
+            style={{ backgroundColor: 'var(--ion-color-main-light)' }}
+          >
+            <IonCol size="12">
+              <IonCardSubtitle color="light">Current Theme</IonCardSubtitle>
+              <IonCardTitle color="light">{currentTheme}</IonCardTitle>
+              <IonText color="light">
+                <p>Here are a few examples of how the theme looks on stock Ionic components.</p>
+              </IonText>
+            </IonCol>
+          </IonRow>
+
+          <IonRow className="ion-text-center">
+            <IonCol size="12">
+              <IonCardSubtitle>Buttons</IonCardSubtitle>
+              <IonButton color="main">Main Color button</IonButton>
+              <IonButton color="main-light">Light Color button</IonButton>
+            </IonCol>
+          </IonRow>
+
+          <IonRow className="ion-text-center">
+            <IonCol size="12">
+              <IonCardSubtitle>Toggle</IonCardSubtitle>
+
+              <IonItem lines="none">
+                <IonLabel>Toggle it on/off</IonLabel>
+                <IonToggle />
+              </IonItem>
+            </IonCol>
+          </IonRow>
+
+          <IonRow className="ion-text-center">
+            <IonCol size="12">
+              <IonCardSubtitle>Select</IonCardSubtitle>
+              <IonItem lines="none">
+                <IonLabel>Pick an option</IonLabel>
+                <IonSelect placeholder="Select...">
+                  <IonSelectOption value="1">Option 1</IonSelectOption>
+                  <IonSelectOption value="2">Option 2</IonSelectOption>
+                </IonSelect>
+              </IonItem>
+            </IonCol>
+          </IonRow>
+
+          <IonRow className="ion-text-center">
+            <IonCol size="12">
+              <IonCardSubtitle>Badge</IonCardSubtitle>
+              <IonItem lines="none">
+                <IonLabel>Awesome badge!!</IonLabel>
+                <IonBadge>
+                  <IonIcon icon={star} />
+                  &nbsp; Woohoo!
+                </IonBadge>
+              </IonItem>
+            </IonCol>
+          </IonRow>
+
+          <IonRow className="ion-text-center">
+            <IonCol size="12">
+              <IonCardSubtitle>Spinner</IonCardSubtitle>
+              <IonItem lines="none">
+                <IonLabel>Loading, please wait...</IonLabel>
+                <IonBadge>
+                  <IonSpinner name="bubbles" />
+                </IonBadge>
+              </IonItem>
+            </IonCol>
+          </IonRow>
+
+          <IonRow className="ion-text-center">
+            <IonCol size="12">
+              <IonCardSubtitle>Range</IonCardSubtitle>
+              <IonRange min={1000} max={2000} step={100} snaps={true} ticks={false} color="main">
+                <IonIcon icon={sunny} size="small" slot="start" />
+                <IonIcon icon={sunny} slot="end" />
+              </IonRange>
+            </IonCol>
+          </IonRow>
+        </IonGrid>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Examples;

03_source/mobile/src/pages/DemoReactThemeSwitcher/pages/Info.tsx

@@ -0,0 +1,97 @@
+import {
+  IonButton,
+  IonButtons,
+  IonCardSubtitle,
+  IonCardTitle,
+  IonCol,
+  IonContent,
+  IonGrid,
+  IonHeader,
+  IonIcon,
+  IonPage,
+  IonRow,
+  IonText,
+  IonTitle,
+  IonToolbar,
+  useIonRouter,
+} from '@ionic/react';
+import { useGetSelectedTheme } from '../store/ThemeStore';
+import './Info.scss';
+import React from 'react';
+import { chevronBackOutline } from 'ionicons/icons';
+
+function Info(): React.JSX.Element {
+  const currentTheme = useGetSelectedTheme();
+
+  const router = useIonRouter();
+  function handleBackClick() {
+    router.goBack();
+  }
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Info TS</IonTitle>
+          <IonButtons slot="start">
+            <IonButton shape="round" onClick={handleBackClick}>
+              <IonIcon icon={chevronBackOutline}></IonIcon>
+            </IonButton>
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonGrid>
+          <IonRow
+            className="ion-text-left ion-padding ion-margin-bottom"
+            style={{ backgroundColor: 'var(--ion-color-main-light)' }}
+          >
+            <IonCol size="12">
+              <IonCardSubtitle color="light">Current Theme</IonCardSubtitle>
+              <IonCardTitle color="light">{currentTheme}</IonCardTitle>
+              <IonText color="light">
+                <p>
+                  This is an example showing how to easily implement dynamic themes into an Ionic
+                  app. We could use the setProperty method, but you'll notice that we can pass a
+                  style object into the IonApp component - I feel like we have more control this
+                  way. With this in mind, we can utilise all of the Ionic color CSS variables and
+                  custom variables.
+                  <br />
+                  <br />
+                  Check out the <code>setTheme</code> function
+                  <br />
+                  <br />I haven't over-rode every possible Ionic CSS variable, just a few of the
+                  core visually noticeable ones for this example.
+                </p>
+              </IonText>
+            </IonCol>
+          </IonRow>
+
+          <IonRow
+            className="ion-text-left ion-padding ion-margin-bottom"
+            style={{ backgroundColor: 'var(--ion-color-main-light)' }}
+          >
+            <IonCol size="12">
+              <IonCardSubtitle color="light">Switching themes</IonCardSubtitle>
+              <IonCardTitle color="light">Using global state</IonCardTitle>
+              <IonText color="light">
+                <p>
+                  We now know that our overall theme is controlled via a style object, so we can
+                  easily store this in state. In this example I'm using Pullstate, and updating the
+                  "currentTheme" on each change. I've mimicked an API call from local JSON data, as
+                  if it were a customer/client theme or branding.
+                </p>
+              </IonText>
+            </IonCol>
+          </IonRow>
+
+          <IonButton routerLink="/themes" color="main" expand="full">
+            View Themes &rarr;
+          </IonButton>
+        </IonGrid>
+      </IonContent>
+    </IonPage>
+  );
+}
+
+export default Info;

03_source/mobile/src/pages/DemoReactThemeSwitcher/pages/Themes.tsx

@@ -0,0 +1,60 @@
+import {
+  IonButton,
+  IonCol,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonPage,
+  IonRow,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/react';
+import { checkmark, checkmarkCircle, checkmarkOutline } from 'ionicons/icons';
+
+import ExploreContainer from '../components/ExploreContainer';
+
+import ThemeStore, { setTheme } from '../store/ThemeStore';
+import './Themes.scss';
+import React from 'react';
+
+const Themes = (): React.JSX.Element => {
+  const themes = ThemeStore.useState((s: any) => s.themes);
+  const selectedThemeID = ThemeStore.useState((s: any) => s.selectedID);
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Themes</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        {/* <ExploreContainer name="Tab 1 page" /> */}
+
+        <IonRow>
+          {themes.map((theme: any, index: number) => {
+            return (
+              <IonCol
+                size="6"
+                onClick={() => {
+                  console.log(theme.file);
+                  console.log(theme.id);
+                  setTheme(theme.file, theme.id);
+                }}
+              >
+                {theme.id === selectedThemeID && (
+                  <div className="selected-theme">
+                    <IonIcon icon={checkmark} />
+                  </div>
+                )}
+                <img src={theme.cover} alt="" />
+              </IonCol>
+            );
+          })}
+        </IonRow>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Themes;

03_source/mobile/src/pages/DemoReactThemeSwitcher/store/ThemeStore.ts

@@ -0,0 +1,109 @@
+import { Store } from 'pullstate';
+
+const ThemeStore = new Store({
+  selectedID: '',
+  currentTheme: {},
+  themes: [
+    {
+      id: 1,
+      name: 'Leafy Green',
+      file: 'leafygreen.json',
+      cover: '/assets/DemoReactThemeSwitcher/themes/covers/leafygreen.png',
+    },
+    {
+      id: 2,
+      name: 'Moody Blue',
+      file: 'moodyblue.json',
+      cover: '/assets/DemoReactThemeSwitcher/themes/covers/moodyblue.png',
+    },
+    {
+      id: 3,
+      name: 'Earthy Tones',
+      file: 'earthytones.json',
+      cover: '/assets/DemoReactThemeSwitcher/themes/covers/earthytones.png',
+    },
+    {
+      id: 4,
+      name: 'Peely Orange',
+      file: 'peelyorange.json',
+      cover: '/assets/DemoReactThemeSwitcher/themes/covers/peelyorange.png',
+    },
+    {
+      id: 5,
+      name: 'Firey Red',
+      file: 'fireyred.json',
+      cover: '/assets/DemoReactThemeSwitcher/themes/covers/fireyred.png',
+    },
+    {
+      id: 6,
+      name: 'Coffee Brown',
+      file: 'coffeebrown.json',
+      cover: '/assets/DemoReactThemeSwitcher/themes/covers/coffeebrown.png',
+    },
+  ],
+});
+
+export default ThemeStore;
+
+const buildTheme = (theme: any) => {
+  const appTheme = {
+    '--ion-toolbar-background': theme.toolbar_background_color,
+    '--ion-tab-bar-background': theme.tab_bar_background_color,
+    '--ion-toolbar-color': theme.toolbar_color,
+    '--ion-tab-bar-color': theme.tab_bar_color,
+    '--ion-tab-bar-color-selected': theme.tab_bar_activated_color,
+
+    '--ion-color-main-light': theme.light_color,
+    '--ion-color-main-light-shade': theme.light_color_shade,
+    '--ion-color-main-light-tint': theme.light_color_tint,
+
+    '--ion-color-main-color': theme.main_color,
+
+    //	Set primary to be the main color as well
+    '--ion-color-primary': theme.main_color,
+    '--ion-color-main-color-shade': theme.main_color_shade,
+    '--ion-color-main-color-tint': theme.main_color_tint,
+  };
+
+  return appTheme;
+};
+
+export const useGetSelectedTheme = () => {
+  const themes = ThemeStore.useState((s) => s.themes);
+  const selectedID = ThemeStore.useState((s) => s.selectedID);
+  var themeName = 'Default';
+
+  if (selectedID) {
+    const theme = themes.filter((t: any) => t.id === selectedID);
+    if (theme && theme[0]) {
+      themeName = theme[0].name;
+    } else {
+      themeName = 'false';
+    }
+  }
+
+  return themeName;
+};
+
+export const setTheme = async (file: string, id: number) => {
+  const response = await fetch(`/assets/DemoReactThemeSwitcher/themes/${file}`);
+  const data = await response.json();
+
+  const theme = buildTheme(data);
+  ThemeStore.update((s) => {
+    s.currentTheme = theme;
+  });
+  ThemeStore.update((s: any) => {
+    s.selectedID = id.toString();
+  });
+
+  //	We could also override the style properties
+  //	Using the setProperty method
+  //	But i feel, we have more control using global state
+  //	see below:
+
+  // for (var themeVar in theme) {
+
+  //     document.documentElement.style.setProperty(themeVar, theme[themeVar]);
+  // }
+};

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

@@ -0,0 +1,130 @@
+/* Ionic Variables and Theming. For more info, please see:
+http://ionicframework.com/docs/theming/ */
+
+/** Ionic CSS Variables **/
+.helloworld {
+  /** 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;
+
+  --ion-color-main-light: #6439e4;
+  --ion-color-main-light-contrast: #ffffff;
+  --ion-color-main-light-shade: rgb(129, 121, 155);
+  --ion-color-main-light-tint: rgb(70, 61, 97);
+
+  --ion-color-main-color: #4b1cd8;
+  --ion-color-main-color-contrast: #ffffff;
+  --ion-color-main-color-shade: rgb(60, 35, 143);
+  --ion-color-main-color-tint: rgb(35, 23, 66);
+
+  /* --ion-background-color: #464646;
+  --ion-background-color-rgb: 70,70,70; */
+
+  --ion-toolbar-background: var(--ion-color-main-color);
+  --ion-toolbar-color: white;
+  --ion-tab-bar-background: var(--ion-color-main-color);
+  --ion-tab-bar-color: rgb(103, 101, 231);
+  --ion-tab-bar-color-selected: rgb(255, 255, 255);
+
+  .ion-color-main-light {
+    --ion-color-base: var(--ion-color-main-light);
+    --ion-color-base-rgb: var(--ion-color-main-light-rgb);
+    --ion-color-contrast: var(--ion-color-main-light-contrast);
+    --ion-color-contrast-rgb: var(--ion-color-main-light-contrast-rgb);
+    --ion-color-shade: var(--ion-color-main-light-shade);
+    --ion-color-tint: var(--ion-color-main-light-tint);
+  }
+
+  .ion-color-main {
+    --ion-color-base: var(--ion-color-main-color);
+    --ion-color-base-rgb: var(--ion-color-main-color-rgb);
+    --ion-color-contrast: var(--ion-color-main-color-contrast);
+    --ion-color-contrast-rgb: var(--ion-color-main-color-contrast-rgb);
+    --ion-color-shade: var(--ion-color-main-color-shade);
+    --ion-color-tint: var(--ion-color-main-color-tint);
+  }
+
+  .selected-theme {
+    position: absolute;
+    background-color: rgba(77, 77, 77, 0.8);
+    width: 95%;
+    height: 95%;
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+  }
+
+  .selected-theme ion-icon {
+    color: white;
+    font-size: 5rem;
+  }
+}

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

@@ -14,9 +14,9 @@ import {
 
 import { Geolocation } from '@capacitor/geolocation';
 import { useEffect, useState } from 'react';
-import { SkeletonDashboard } from '../components/SkeletonDashboard';
+import { SkeletonDashboard } from '../TestComponents/SkeletonDashboard';
 import { chevronBackOutline, refreshOutline } from 'ionicons/icons';
-import { CurrentWeather } from '../components/CurrentWeather';
+import { CurrentWeather } from '../TestComponents/CurrentWeather';
 
 function Tab1() {
   const router = useIonRouter();

03_source/mobile/src/pages/DemoSkeletonText/AppPages/Tab2.jsx

@@ -10,7 +10,7 @@ import {
   IonToolbar,
 } from '@ionic/react';
 import { useState } from 'react';
-import { CurrentWeather } from '../components/CurrentWeather';
+import { CurrentWeather } from '../TestComponents/CurrentWeather';
 
 function Tab2() {
   const [search, setSearch] = useState('');

03_source/mobile/src/pages/DemoSkeletonText/components/Posts.tsx

@@ -0,0 +1,29 @@
+import { IonImg, IonItem, IonLabel, IonList, IonLoading, IonThumbnail } from '@ionic/react';
+import { SkeletonPosts } from './SkeletonPosts';
+
+export const Posts = ({ posts, useSkeleton }): React.JSX.Element => (
+  <>
+    {posts.length > 0 ? (
+      <IonList>
+        {posts.map((post, index) => {
+          return (
+            <IonItem key={index}>
+              <IonThumbnail slot="start">
+                <IonImg src={post.image} />
+              </IonThumbnail>
+              <IonLabel className="">
+                <h3>{post.title}</h3>
+                <p>{post.blurb}</p>
+                <p>{post.date}</p>
+              </IonLabel>
+            </IonItem>
+          );
+        })}
+      </IonList>
+    ) : useSkeleton ? (
+      <SkeletonPosts />
+    ) : (
+      <IonLoading isOpen={true} spinner="bubbles" message="Loading posts..." />
+    )}
+  </>
+);

03_source/mobile/src/pages/DemoSkeletonText/components/SkeletonPosts.tsx

@@ -0,0 +1,36 @@
+import {
+  IonItem,
+  IonLabel,
+  IonList,
+  IonSkeletonText,
+  IonThumbnail,
+} from "@ionic/react";
+
+export const SkeletonPosts = (): JSX.Element => {
+  const postAmount = 10;
+
+  return (
+    <IonList>
+      {[...Array(postAmount)].map((post, index) => {
+        return (
+          <IonItem key={index}>
+            <IonThumbnail slot="start">
+              <IonSkeletonText animated />
+            </IonThumbnail>
+            <IonLabel>
+              <h3>
+                <IonSkeletonText animated style={{ width: "50%" }} />
+              </h3>
+              <p>
+                <IonSkeletonText animated style={{ width: "100%" }} />
+              </p>
+              <p>
+                <IonSkeletonText animated style={{ width: "30%" }} />
+              </p>
+            </IonLabel>
+          </IonItem>
+        );
+      })}
+    </IonList>
+  );
+};

03_source/mobile/src/pages/DemoSkeletonText/data/index.ts

@@ -0,0 +1,72 @@
+export const fakePosts = [
+  {
+    title: 'Sed ut perspiciatis unde',
+    blurb:
+      'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.',
+    image: '/assets/DemoSkeletonText/scenery/1.png',
+    date: '01/04/2021',
+  },
+  {
+    title: 'But I must explain to you',
+    blurb:
+      'But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth',
+    image: '/assets/DemoSkeletonText/scenery/2.png',
+    date: '23/02/2021',
+  },
+  {
+    title: 'Far far away, behind the word',
+    blurb:
+      'Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.',
+    image: '/assets/DemoSkeletonText/scenery/3.png',
+    date: '18/02/2021',
+  },
+  {
+    title: 'A wonderful serenity',
+    blurb:
+      'A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot.',
+    image: '/assets/DemoSkeletonText/scenery/4.png',
+    date: '09/02/2021',
+  },
+  {
+    title: 'Morning troubled dreams',
+    blurb:
+      'One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head.',
+    image: '/assets/DemoSkeletonText/scenery/5.png',
+    date: '01/02/2021',
+  },
+  {
+    title: 'The quick brown fox',
+    blurb:
+      'The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs.',
+    image: '/assets/DemoSkeletonText/scenery/6.png',
+    date: '14/01/2021',
+  },
+  {
+    title: 'Lorem ipsum dolor',
+    blurb:
+      'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.',
+    image: '/assets/DemoSkeletonText/scenery/7.png',
+    date: '04/01/2021',
+  },
+  {
+    title: 'Lorem ipsum dolor',
+    blurb:
+      'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.',
+    image: '/assets/DemoSkeletonText/scenery/8.png',
+    date: '04/01/2021',
+  },
+  {
+    title: 'Lorem ipsum dolor',
+    blurb:
+      'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.',
+    image: '/assets/DemoSkeletonText/scenery/9.png',
+    date: '04/01/2021',
+  },
+  {
+    title: 'Lorem ipsum dolor',
+    blurb:
+      'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.',
+    image: '/assets/DemoSkeletonText/scenery/10.png',
+    date: '04/01/2021',
+  },
+];

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

@@ -3,36 +3,20 @@ import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs }
 import { cloudOutline, searchOutline } from 'ionicons/icons';
 import { Route, Redirect } from 'react-router';
 
-import Tab1 from './AppPages/Tab1';
-import Tab2 from './AppPages/Tab2';
-
-import './style.scss';
+// import Tab1 from './AppPages/Tab1';
+// import Tab2 from './AppPages/Tab2';
+import Home from './pages/Home';
 
 function DemoSkeletonText() {
   return (
     <IonTabs>
       <IonRouterOutlet>
-        <Route exact path="/demo-weather-app/tab1">
-          <Tab1 />
-        </Route>
-        <Route exact path="/demo-weather-app/tab2">
-          <Tab2 />
+        <Route exact path="/demo-skeleton-text/home">
+          <Home />
         </Route>
 
-        <Redirect exact path="/demo-weather-app" to="/demo-weather-app/tab1" />
+        <Redirect exact path="/demo-skeleton-text" to="/demo-skeleton-text/home" />
       </IonRouterOutlet>
-
-      {/*  */}
-      <IonTabBar slot="bottom">
-        <IonTabButton tab="tab1" href="/demo-weather-app/tab1">
-          <IonIcon icon={cloudOutline} />
-          <IonLabel>Dashboard</IonLabel>
-        </IonTabButton>
-        <IonTabButton tab="tab2" href="/demo-weather-app/tab2">
-          <IonIcon icon={searchOutline} />
-          <IonLabel>Search</IonLabel>
-        </IonTabButton>
-      </IonTabBar>
     </IonTabs>
   );
 }

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

@@ -0,0 +1,63 @@
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+  useIonRouter,
+} from '@ionic/react';
+import './Home.scss';
+
+import { fakePosts } from '../data';
+import React, { useEffect, useState } from 'react';
+import { Posts } from '../components/Posts';
+import { chevronBackOutline } from 'ionicons/icons';
+
+const Home = (): React.JSX.Element => {
+  const [posts, setPosts] = useState<typeof fakePosts>([]);
+
+  const router = useIonRouter();
+  function handleBackClick() {
+    router.goBack();
+  }
+
+  useEffect(() => {
+    setTimeout(() => setPosts(fakePosts), 2000);
+  }, []);
+
+  return (
+    <IonPage>
+      <IonHeader className="ion-no-border">
+        <IonToolbar>
+          <IonTitle>Posts TS</IonTitle>
+
+          <IonButtons slot="start">
+            <IonButton shape="round" onClick={() => handleBackClick()}>
+              <IonIcon icon={chevronBackOutline} color="primary" />
+            </IonButton>
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Posts TS</IonTitle>
+
+            <IonButtons slot="start">
+              <IonButton onClick={() => handleBackClick()}>
+                <IonIcon icon={chevronBackOutline} color="primary" />
+              </IonButton>
+            </IonButtons>
+          </IonToolbar>
+        </IonHeader>
+
+        <Posts posts={posts} useSkeleton={true} />
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Home;

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

@@ -1,103 +0,0 @@
-#about-page {
-  ion-toolbar {
-    position: absolute;
-
-    top: 0;
-    left: 0;
-    right: 0;
-
-    --background: transparent;
-    --color: white;
-  }
-
-  ion-toolbar ion-back-button,
-  ion-toolbar ion-button,
-  ion-toolbar ion-menu-button {
-    --color: white;
-  }
-
-  .about-header {
-    position: relative;
-
-    width: 100%;
-    height: 30%;
-  }
-
-  .about-header .about-image {
-    position: absolute;
-
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-
-    background-position: center;
-    background-size: cover;
-    background-repeat: no-repeat;
-
-    opacity: 0;
-
-    transition: opacity 500ms ease-in-out;
-  }
-
-  .about-header .madison {
-    background-image: url('/assets/WeatherDemo/img/about/madison.jpg');
-  }
-
-  .about-header .austin {
-    background-image: url('/assets/WeatherDemo/img/about/austin.jpg');
-  }
-
-  .about-header .chicago {
-    background-image: url('/assets/WeatherDemo/img/about/chicago.jpg');
-  }
-
-  .about-header .seattle {
-    background-image: url('/assets/WeatherDemo/img/about/seattle.jpg');
-  }
-
-  .about-info {
-    position: relative;
-    margin-top: -10px;
-    border-radius: 10px;
-    background: var(--ion-background-color, #fff);
-    z-index: 2; // display rounded border above header image
-  }
-
-  .about-info h3 {
-    margin-top: 0;
-  }
-
-  .about-info ion-list {
-    padding-top: 0;
-  }
-
-  .about-info p {
-    line-height: 130%;
-
-    color: var(--ion-color-dark);
-  }
-
-  .about-info ion-icon {
-    margin-inline-end: 32px;
-  }
-
-  /*
-   * iOS Only
-   */
-
-  .ios .about-info {
-    --ion-padding: 19px;
-  }
-
-  .ios .about-info h3 {
-    font-weight: 700;
-  }
-}
-
-#date-input-popover {
-  --offset-y: -var(--ion-safe-area-bottom);
-
-  --max-width: 90%;
-  --width: 336px;
-}

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

@@ -0,0 +1,77 @@
+/* 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;
+}

03_source/mobile/src/pages/DemoStickyBottomSheetExample/components/BottomSheet.tsx

@@ -0,0 +1,49 @@
+import { IonCol, IonGrid, IonModal, IonRow, IonSearchbar } from "@ionic/react";
+import { OverlayEventDetail } from "@ionic/react/dist/types/components/react-component-lib/interfaces";
+import { useState } from "react";
+import { BottomSheetContent } from "./BottomSheetContent";
+import { DummyItem } from "./DummyItem";
+
+interface BottomSheetProps {
+
+    isOpen: boolean,
+    close: (event: CustomEvent<OverlayEventDetail<any>>) => void
+}
+
+export const BottomSheet: React.FC<BottomSheetProps> = ({ isOpen, close }) => {
+
+  const amountOfDummyItems = 10;
+  const [search, setSearch] = useState<string>("")
+
+  const handleChange = (e:any)=> {
+    setSearch(e.target.value);
+  }
+
+  return (
+
+    <IonModal isOpen={isOpen} onDidDismiss={close} breakpoints={[0, 0.12, 0.5, 1]} initialBreakpoint={0.12} backdropBreakpoint={0.5}>
+      <IonGrid className="ion-padding-top">
+        <IonRow>
+          <IonCol size="12">
+            <IonSearchbar animated value={search} onIonChange={handleChange} placeholder="Search by item number" />
+          </IonCol>
+        </IonRow>
+
+        {/* Check the comments insside BottomSheetContent component */}
+        {/* Regarding the scrolling of "content" inside a sheet modal */}
+        <BottomSheetContent>
+          { [...Array(amountOfDummyItems)].map((e, i) => {
+            
+            if (search.includes(i.toString()) || search === "") {
+              return (
+                <DummyItem key={i} number={i} />
+              );
+            } else {
+              return "";
+            }
+          })}
+        </BottomSheetContent>
+      </IonGrid>
+    </IonModal>
+  );
+}