From 5be77aae23ae258ad79fde824701c362a9930688 Mon Sep 17 00:00:00 2001
From: louiscklaw <louiscklaw@users.noreply.github.com>
Date: Sun, 8 Jun 2025 16:44:59 +0800
Subject: [PATCH] update DemoWeatherAppUi,

---
 .../pages/DemoWeatherApp/AppPages/Tab1.jsx    |  76 ------------
 .../mobile/src/pages/DemoWeatherApp/index.tsx |  40 ------
 .../src/pages/DemoWeatherApp/style.scss       | 103 ---------------
 .../AppPages/{Tab1.jsx => Tab1.tsx}           |   6 +-
 .../pages/DemoWeatherAppUi/AppPages/Tab2.jsx  |  81 ------------
 .../AppPages/Tab2.tsx}                        |   4 +-
 .../CurrentWeather/WeatherProperty.tsx        |  62 ----------
 .../TestComponents/CurrentWeather/index.tsx   |  48 -------
 .../SkeletonDashboard/index.tsx               | 117 ------------------
 .../CurrentWeather/WeatherProperty.tsx        |   0
 .../components/CurrentWeather/index.tsx       |   0
 .../components/SkeletonDashboard/index.tsx    |   0
 .../src/pages/DemoWeatherAppUi/index.tsx      |   1 +
 13 files changed, 6 insertions(+), 532 deletions(-)
 delete mode 100644 03_source/mobile/src/pages/DemoWeatherApp/AppPages/Tab1.jsx
 delete mode 100644 03_source/mobile/src/pages/DemoWeatherApp/index.tsx
 delete mode 100644 03_source/mobile/src/pages/DemoWeatherApp/style.scss
 rename 03_source/mobile/src/pages/DemoWeatherAppUi/AppPages/{Tab1.jsx => Tab1.tsx} (93%)
 delete mode 100644 03_source/mobile/src/pages/DemoWeatherAppUi/AppPages/Tab2.jsx
 rename 03_source/mobile/src/pages/{DemoWeatherApp/AppPages/Tab2.jsx => DemoWeatherAppUi/AppPages/Tab2.tsx} (96%)
 delete mode 100644 03_source/mobile/src/pages/DemoWeatherAppUi/TestComponents/CurrentWeather/WeatherProperty.tsx
 delete mode 100644 03_source/mobile/src/pages/DemoWeatherAppUi/TestComponents/CurrentWeather/index.tsx
 delete mode 100644 03_source/mobile/src/pages/DemoWeatherAppUi/TestComponents/SkeletonDashboard/index.tsx
 rename 03_source/mobile/src/pages/{DemoWeatherApp => DemoWeatherAppUi}/components/CurrentWeather/WeatherProperty.tsx (100%)
 rename 03_source/mobile/src/pages/{DemoWeatherApp => DemoWeatherAppUi}/components/CurrentWeather/index.tsx (100%)
 rename 03_source/mobile/src/pages/{DemoWeatherApp => DemoWeatherAppUi}/components/SkeletonDashboard/index.tsx (100%)

diff --git a/03_source/mobile/src/pages/DemoWeatherApp/AppPages/Tab1.jsx b/03_source/mobile/src/pages/DemoWeatherApp/AppPages/Tab1.jsx
deleted file mode 100644
index 8a6c62f..0000000
--- a/03_source/mobile/src/pages/DemoWeatherApp/AppPages/Tab1.jsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import { IonButton, IonButtons, IonCol, IonContent, IonHeader, IonIcon, IonPage, IonRow, IonTitle, IonToolbar, useIonRouter } from '@ionic/react';
-
-import { Geolocation } from '@capacitor/geolocation';
-import { useEffect, useState } from 'react';
-import { SkeletonDashboard } from '../components/SkeletonDashboard';
-import { chevronBackOutline, refreshOutline } from 'ionicons/icons';
-import { CurrentWeather } from '../components/CurrentWeather';
-
-function Tab1() {
-  const router = useIonRouter();
-
-  const [currentWeather, setCurrentWeather] = useState(false);
-
-  useEffect(() => {
-    getCurrentPosition();
-  }, []);
-
-  const getCurrentPosition = async () => {
-    setCurrentWeather(false);
-    const coordinates = await Geolocation.getCurrentPosition();
-    getAddress(coordinates.coords);
-  };
-
-  const getAddress = async (coords) => {
-    const query = `${coords.latitude},${coords.longitude}`;
-    const response = await fetch(`https://api.weatherapi.com/v1/current.json?key=f93eb660b2424258bf5155016210712&q=${query}`);
-
-    const data = await response.json();
-    console.log(data);
-    setCurrentWeather(data);
-  };
-
-  // const router = useIonRouter();
-  function handleBackClick() {
-    router.goBack();
-  }
-
-  return (
-    <IonPage>
-      <IonHeader>
-        <IonToolbar>
-          <IonTitle>My Weather</IonTitle>
-
-          <IonButtons slot="end">
-            <IonButton onClick={() => getCurrentPosition()}>
-              <IonIcon icon={refreshOutline} color="primary" />
-            </IonButton>
-          </IonButtons>
-
-          <IonButtons slot="start">
-            <IonButton onClick={() => handleBackClick()}>
-              <IonIcon icon={chevronBackOutline} color="primary" />
-            </IonButton>
-          </IonButtons>
-        </IonToolbar>
-      </IonHeader>
-      <IonContent fullscreen>
-        <IonHeader collapse="condense">
-          <IonToolbar>
-            <IonTitle size="large">Dashboard</IonTitle>
-          </IonToolbar>
-        </IonHeader>
-
-        <IonRow className="ion-margin-start ion-margin-end ion-justify-content-center ion-text-center">
-          <IonCol size="12">
-            <h4>Here's your location based weather</h4>
-          </IonCol>
-        </IonRow>
-
-        <div style={{ marginTop: '-1.5rem' }}>{currentWeather ? <CurrentWeather currentWeather={currentWeather} /> : <SkeletonDashboard />}</div>
-      </IonContent>
-    </IonPage>
-  );
-}
-
-export default Tab1;
diff --git a/03_source/mobile/src/pages/DemoWeatherApp/index.tsx b/03_source/mobile/src/pages/DemoWeatherApp/index.tsx
deleted file mode 100644
index a114547..0000000
--- a/03_source/mobile/src/pages/DemoWeatherApp/index.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, 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';
-
-function DemoWeatherApp() {
-  return (
-    <IonTabs>
-      <IonRouterOutlet>
-        <Route exact path="/demo-weather-app/tab1">
-          <Tab1 />
-        </Route>
-        <Route exact path="/demo-weather-app/tab2">
-          <Tab2 />
-        </Route>
-
-        <Redirect exact path="/demo-weather-app" to="/demo-weather-app/tab1" />
-      </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>
-  );
-}
-
-export default DemoWeatherApp;
diff --git a/03_source/mobile/src/pages/DemoWeatherApp/style.scss b/03_source/mobile/src/pages/DemoWeatherApp/style.scss
deleted file mode 100644
index 37c1e1a..0000000
--- a/03_source/mobile/src/pages/DemoWeatherApp/style.scss
+++ /dev/null
@@ -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;
-}
diff --git a/03_source/mobile/src/pages/DemoWeatherAppUi/AppPages/Tab1.jsx b/03_source/mobile/src/pages/DemoWeatherAppUi/AppPages/Tab1.tsx
similarity index 93%
rename from 03_source/mobile/src/pages/DemoWeatherAppUi/AppPages/Tab1.jsx
rename to 03_source/mobile/src/pages/DemoWeatherAppUi/AppPages/Tab1.tsx
index a24d76a..14802c1 100644
--- a/03_source/mobile/src/pages/DemoWeatherAppUi/AppPages/Tab1.jsx
+++ b/03_source/mobile/src/pages/DemoWeatherAppUi/AppPages/Tab1.tsx
@@ -14,11 +14,11 @@ import {
 
 import { Geolocation } from '@capacitor/geolocation';
 import { useEffect, useState } from 'react';
-import { SkeletonDashboard } from '../TestComponents/SkeletonDashboard';
+import { SkeletonDashboard } from '../components/SkeletonDashboard';
 import { chevronBackOutline, refreshOutline } from 'ionicons/icons';
-import { CurrentWeather } from '../TestComponents/CurrentWeather';
+import { CurrentWeather } from '../components/CurrentWeather';
 
-function Tab1() {
+function Tab1(): React.JSX.Element {
   const router = useIonRouter();
 
   const [currentWeather, setCurrentWeather] = useState(false);
diff --git a/03_source/mobile/src/pages/DemoWeatherAppUi/AppPages/Tab2.jsx b/03_source/mobile/src/pages/DemoWeatherAppUi/AppPages/Tab2.jsx
deleted file mode 100644
index c258179..0000000
--- a/03_source/mobile/src/pages/DemoWeatherAppUi/AppPages/Tab2.jsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import {
-  IonButton,
-  IonCol,
-  IonContent,
-  IonHeader,
-  IonPage,
-  IonRow,
-  IonSearchbar,
-  IonTitle,
-  IonToolbar,
-} from '@ionic/react';
-import { useState } from 'react';
-import { CurrentWeather } from '../TestComponents/CurrentWeather';
-
-function Tab2() {
-  const [search, setSearch] = useState('');
-  const [currentWeather, setCurrentWeather] = useState(false);
-
-  const performSearch = async () => {
-    getAddress(search);
-  };
-
-  const getAddress = async (city) => {
-    const response = await fetch(
-      `https://api.weatherapi.com/v1/current.json?key=f93eb660b2424258bf5155016210712&q=${city}&aqi=no`
-    );
-    const data = await response.json();
-
-    if (data && data.current && data.location) {
-      setCurrentWeather(data);
-    }
-  };
-
-  return (
-    <IonPage>
-      <IonHeader>
-        <IonToolbar>
-          <IonTitle>Search</IonTitle>
-        </IonToolbar>
-      </IonHeader>
-      <IonContent fullscreen>
-        <IonHeader collapse="condense">
-          <IonToolbar>
-            <IonTitle size="large">Search</IonTitle>
-          </IonToolbar>
-        </IonHeader>
-
-        <IonRow className="ion-justify-content-center ion-margin-top ion-align-items-center">
-          <IonCol size="7">
-            <IonSearchbar
-              placeholder="Try 'London'"
-              animated
-              value={search}
-              onIonChange={(e) => setSearch(e.target.value)}
-            />
-          </IonCol>
-
-          <IonCol size="5">
-            <IonButton
-              expand="block"
-              className="ion-margin-start ion-margin-end"
-              onClick={performSearch}
-            >
-              Search
-            </IonButton>
-          </IonCol>
-        </IonRow>
-
-        <div style={{ marginTop: '-0.8rem' }}>
-          {currentWeather ? (
-            <CurrentWeather currentWeather={currentWeather} />
-          ) : (
-            <h3 className="ion-text-center">Your search result will appear here</h3>
-          )}
-        </div>
-      </IonContent>
-    </IonPage>
-  );
-}
-
-export default Tab2;
diff --git a/03_source/mobile/src/pages/DemoWeatherApp/AppPages/Tab2.jsx b/03_source/mobile/src/pages/DemoWeatherAppUi/AppPages/Tab2.tsx
similarity index 96%
rename from 03_source/mobile/src/pages/DemoWeatherApp/AppPages/Tab2.jsx
rename to 03_source/mobile/src/pages/DemoWeatherAppUi/AppPages/Tab2.tsx
index 216544f..c8c5b78 100644
--- a/03_source/mobile/src/pages/DemoWeatherApp/AppPages/Tab2.jsx
+++ b/03_source/mobile/src/pages/DemoWeatherAppUi/AppPages/Tab2.tsx
@@ -9,10 +9,10 @@ import {
   IonTitle,
   IonToolbar,
 } from '@ionic/react';
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { CurrentWeather } from '../components/CurrentWeather';
 
-function Tab2() {
+function Tab2(): React.JSX.Element {
   const [search, setSearch] = useState('');
   const [currentWeather, setCurrentWeather] = useState(false);
 
diff --git a/03_source/mobile/src/pages/DemoWeatherAppUi/TestComponents/CurrentWeather/WeatherProperty.tsx b/03_source/mobile/src/pages/DemoWeatherAppUi/TestComponents/CurrentWeather/WeatherProperty.tsx
deleted file mode 100644
index 52949af..0000000
--- a/03_source/mobile/src/pages/DemoWeatherAppUi/TestComponents/CurrentWeather/WeatherProperty.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { IonCardSubtitle, IonCol, IonIcon, IonNote, IonRow } from '@ionic/react';
-import { pulseOutline, sunnyOutline, thermometerOutline } from 'ionicons/icons';
-import { useEffect, useState } from 'react';
-
-export const WeatherProperty = ({ type, currentWeather }: { type: any; currentWeather: any }) => {
-  const [property, setProperty] = useState(false);
-
-  const properties = {
-    wind: {
-      isIcon: false,
-      icon: '/assets/WeatherDemo/wind.png',
-      alt: 'wind',
-      label: 'Wind',
-      value: `${currentWeather.current.wind_mph}mph`,
-    },
-    feelsLike: {
-      isIcon: true,
-      icon: thermometerOutline,
-      alt: 'feels like',
-      label: 'Feels like',
-      value: `${currentWeather.current.feelslike_c}°C`,
-    },
-    indexUV: {
-      isIcon: true,
-      icon: sunnyOutline,
-      alt: 'index uv',
-      label: 'Index UV',
-      value: currentWeather.current.uv,
-    },
-    pressure: {
-      isIcon: true,
-      icon: pulseOutline,
-      alt: 'pressure',
-      label: 'Pressure',
-      value: `${currentWeather.current.pressure_mb} mbar`,
-    },
-  };
-
-  useEffect(() => {
-    setProperty(properties[type]);
-  }, [type]);
-
-  return (
-    <IonCol size="6">
-      <IonRow className="ion-justify-content-center ion-align-items-center">
-        <IonCol size="3">
-          {!property.isIcon && (
-            <img alt={property.alt} src={property.icon} height="32" width="32" />
-          )}
-          {property.isIcon && (
-            <IonIcon icon={property.icon} color="medium" style={{ fontSize: '2rem' }} />
-          )}
-        </IonCol>
-
-        <IonCol size="9">
-          <IonCardSubtitle>{property.label}</IonCardSubtitle>
-          <IonNote>{property.value}</IonNote>
-        </IonCol>
-      </IonRow>
-    </IonCol>
-  );
-};
diff --git a/03_source/mobile/src/pages/DemoWeatherAppUi/TestComponents/CurrentWeather/index.tsx b/03_source/mobile/src/pages/DemoWeatherAppUi/TestComponents/CurrentWeather/index.tsx
deleted file mode 100644
index ceb4332..0000000
--- a/03_source/mobile/src/pages/DemoWeatherAppUi/TestComponents/CurrentWeather/index.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { IonCard, IonCardContent, IonGrid, IonRow, IonText, IonCardTitle } from '@ionic/react';
-import { WeatherProperty } from './WeatherProperty';
-
-export const CurrentWeather = ({ currentWeather }: { currentWeather: any }) => (
-  <IonGrid>
-    <IonCard>
-      <IonCardContent className="ion-text-center">
-        <IonText color="primary">
-          <h1>
-            {currentWeather.location.region},{' '}
-            <span style={{ color: 'gray' }}>{currentWeather.location.country}</span>
-          </h1>
-        </IonText>
-
-        <div className="ion-margin-top">
-          <img
-            alt="condition"
-            src={currentWeather.current.condition.icon.replace('//', 'https://')}
-          />
-
-          <IonText color="dark">
-            <h1 style={{ fontWeight: 'bold' }}>{currentWeather.current.condition.text}</h1>
-          </IonText>
-
-          <IonText color="medium">
-            <p>{new Date(currentWeather.location.localtime).toDateString()}</p>
-          </IonText>
-        </div>
-
-        <IonCardTitle style={{ fontSize: '3rem' }} className="ion-margin-top">
-          {currentWeather.current.temp_c}&#8451;
-        </IonCardTitle>
-
-        <IonGrid className="ion-margin-top">
-          <IonRow>
-            <WeatherProperty type="wind" currentWeather={currentWeather} />
-            <WeatherProperty type="feelsLike" currentWeather={currentWeather} />
-          </IonRow>
-
-          <IonRow className="ion-margin-top">
-            <WeatherProperty type="indexUV" currentWeather={currentWeather} />
-            <WeatherProperty type="pressure" currentWeather={currentWeather} />
-          </IonRow>
-        </IonGrid>
-      </IonCardContent>
-    </IonCard>
-  </IonGrid>
-);
diff --git a/03_source/mobile/src/pages/DemoWeatherAppUi/TestComponents/SkeletonDashboard/index.tsx b/03_source/mobile/src/pages/DemoWeatherAppUi/TestComponents/SkeletonDashboard/index.tsx
deleted file mode 100644
index 234fb9b..0000000
--- a/03_source/mobile/src/pages/DemoWeatherAppUi/TestComponents/SkeletonDashboard/index.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import {
-  IonCard,
-  IonCardContent,
-  IonCardSubtitle,
-  IonCardTitle,
-  IonCol,
-  IonGrid,
-  IonIcon,
-  IonNote,
-  IonRow,
-  IonSkeletonText,
-  IonText,
-  IonThumbnail,
-} from '@ionic/react';
-import { pulseOutline, sunnyOutline, thermometerOutline } from 'ionicons/icons';
-
-export const SkeletonDashboard = () => (
-  <IonGrid>
-    <IonCard>
-      <IonCardContent className="ion-text-center">
-        <IonText color="primary">
-          <h1>
-            <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
-          </h1>
-        </IonText>
-
-        <div className="ion-margin-top">
-          <IonThumbnail>
-            <IonSkeletonText animated style={{ width: '2rem', height: '2rem' }} />
-          </IonThumbnail>
-
-          <IonText color="dark">
-            <h1 style={{ fontWeight: 'bold' }}>
-              <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
-            </h1>
-          </IonText>
-
-          <IonText color="medium">
-            <p>
-              <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
-            </p>
-          </IonText>
-        </div>
-
-        <IonCardTitle style={{ fontSize: '3rem' }} className="ion-margin-top">
-          <IonSkeletonText animated style={{ height: '3rem', width: '30%', textAlign: 'center' }} />
-        </IonCardTitle>
-
-        <IonGrid className="ion-margin-top">
-          <IonRow>
-            <IonCol size="6">
-              <IonRow className="ion-justify-content-center ion-align-items-center">
-                <IonCol size="3">
-                  <img alt="wind" src="/assets/WeatherDemo/wind.png" height="32" width="32" />
-                </IonCol>
-
-                <IonCol size="9">
-                  <IonCardSubtitle>Wind</IonCardSubtitle>
-                  <IonNote>
-                    <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
-                  </IonNote>
-                </IonCol>
-              </IonRow>
-            </IonCol>
-
-            <IonCol size="6">
-              <IonRow className="ion-justify-content-center ion-align-items-center">
-                <IonCol size="3">
-                  <IonIcon icon={thermometerOutline} color="medium" style={{ fontSize: '2rem' }} />
-                </IonCol>
-
-                <IonCol size="9">
-                  <IonCardSubtitle>Feels like</IonCardSubtitle>
-                  <IonNote>
-                    <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
-                  </IonNote>
-                </IonCol>
-              </IonRow>
-            </IonCol>
-          </IonRow>
-
-          <IonRow className="ion-margin-top">
-            <IonCol size="6">
-              <IonRow className="ion-justify-content-center ion-align-items-center">
-                <IonCol size="3">
-                  <IonIcon icon={sunnyOutline} color="medium" style={{ fontSize: '2rem' }} />
-                </IonCol>
-
-                <IonCol size="9">
-                  <IonCardSubtitle>Index UV</IonCardSubtitle>
-                  <IonNote>
-                    <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
-                  </IonNote>
-                </IonCol>
-              </IonRow>
-            </IonCol>
-
-            <IonCol size="6">
-              <IonRow className="ion-justify-content-center ion-align-items-center">
-                <IonCol size="3">
-                  <IonIcon icon={pulseOutline} color="medium" style={{ fontSize: '2rem' }} />
-                </IonCol>
-
-                <IonCol size="9">
-                  <IonCardSubtitle>Pressure</IonCardSubtitle>
-                  <IonNote>
-                    <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
-                  </IonNote>
-                </IonCol>
-              </IonRow>
-            </IonCol>
-          </IonRow>
-        </IonGrid>
-      </IonCardContent>
-    </IonCard>
-  </IonGrid>
-);
diff --git a/03_source/mobile/src/pages/DemoWeatherApp/components/CurrentWeather/WeatherProperty.tsx b/03_source/mobile/src/pages/DemoWeatherAppUi/components/CurrentWeather/WeatherProperty.tsx
similarity index 100%
rename from 03_source/mobile/src/pages/DemoWeatherApp/components/CurrentWeather/WeatherProperty.tsx
rename to 03_source/mobile/src/pages/DemoWeatherAppUi/components/CurrentWeather/WeatherProperty.tsx
diff --git a/03_source/mobile/src/pages/DemoWeatherApp/components/CurrentWeather/index.tsx b/03_source/mobile/src/pages/DemoWeatherAppUi/components/CurrentWeather/index.tsx
similarity index 100%
rename from 03_source/mobile/src/pages/DemoWeatherApp/components/CurrentWeather/index.tsx
rename to 03_source/mobile/src/pages/DemoWeatherAppUi/components/CurrentWeather/index.tsx
diff --git a/03_source/mobile/src/pages/DemoWeatherApp/components/SkeletonDashboard/index.tsx b/03_source/mobile/src/pages/DemoWeatherAppUi/components/SkeletonDashboard/index.tsx
similarity index 100%
rename from 03_source/mobile/src/pages/DemoWeatherApp/components/SkeletonDashboard/index.tsx
rename to 03_source/mobile/src/pages/DemoWeatherAppUi/components/SkeletonDashboard/index.tsx
diff --git a/03_source/mobile/src/pages/DemoWeatherAppUi/index.tsx b/03_source/mobile/src/pages/DemoWeatherAppUi/index.tsx
index f13bb0b..f7fce78 100644
--- a/03_source/mobile/src/pages/DemoWeatherAppUi/index.tsx
+++ b/03_source/mobile/src/pages/DemoWeatherAppUi/index.tsx
@@ -23,6 +23,7 @@ function DemoWeatherAppUi() {
       </IonRouterOutlet>
 
       {/*  */}
+
       <IonTabBar slot="bottom">
         <IonTabButton tab="tab1" href="/demo-weather-app-ui/tab1">
           <IonIcon icon={cloudOutline} />