From d3d95469ea92cc04bd331a7934b5d99cee394bb5 Mon Sep 17 00:00:00 2001 From: louiscklaw Date: Sat, 7 Jun 2025 09:41:52 +0800 Subject: [PATCH] update demo-react-profile-dashboard-ui, --- .../AppPages/{Tab1.jsx => Tab1.tsx} | 2 +- .../AppPages/{Tab2.jsx => Tab2.tsx} | 4 +- .../DemoReactProfileDashboardUi/index.tsx | 37 ++-- .../pages/Home.module.scss | 105 ++++++++++ .../pages/Home.tsx | 183 ++++++++++++++++++ .../DemoReactProfileDashboardUi/style.scss | 103 ---------- .../theme/variables.scss | 88 +++++++++ 7 files changed, 392 insertions(+), 130 deletions(-) rename 03_source/mobile/src/pages/DemoReactProfileDashboardUi/AppPages/{Tab1.jsx => Tab1.tsx} (98%) rename 03_source/mobile/src/pages/DemoReactProfileDashboardUi/AppPages/{Tab2.jsx => Tab2.tsx} (94%) create mode 100644 03_source/mobile/src/pages/DemoReactProfileDashboardUi/pages/Home.module.scss create mode 100644 03_source/mobile/src/pages/DemoReactProfileDashboardUi/pages/Home.tsx create mode 100644 03_source/mobile/src/pages/DemoReactProfileDashboardUi/theme/variables.scss diff --git a/03_source/mobile/src/pages/DemoReactProfileDashboardUi/AppPages/Tab1.jsx b/03_source/mobile/src/pages/DemoReactProfileDashboardUi/AppPages/Tab1.tsx similarity index 98% rename from 03_source/mobile/src/pages/DemoReactProfileDashboardUi/AppPages/Tab1.jsx rename to 03_source/mobile/src/pages/DemoReactProfileDashboardUi/AppPages/Tab1.tsx index a24d76a..d0c5dc7 100644 --- a/03_source/mobile/src/pages/DemoReactProfileDashboardUi/AppPages/Tab1.jsx +++ b/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); diff --git a/03_source/mobile/src/pages/DemoReactProfileDashboardUi/AppPages/Tab2.jsx b/03_source/mobile/src/pages/DemoReactProfileDashboardUi/AppPages/Tab2.tsx similarity index 94% rename from 03_source/mobile/src/pages/DemoReactProfileDashboardUi/AppPages/Tab2.jsx rename to 03_source/mobile/src/pages/DemoReactProfileDashboardUi/AppPages/Tab2.tsx index c258179..480465c 100644 --- a/03_source/mobile/src/pages/DemoReactProfileDashboardUi/AppPages/Tab2.jsx +++ b/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(false); const performSearch = async () => { getAddress(search); diff --git a/03_source/mobile/src/pages/DemoReactProfileDashboardUi/index.tsx b/03_source/mobile/src/pages/DemoReactProfileDashboardUi/index.tsx index 741bc42..4045cf1 100644 --- a/03_source/mobile/src/pages/DemoReactProfileDashboardUi/index.tsx +++ b/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 ( - + - - - - - + + - + - - {/* */} - - - - Dashboard - - - - Search - - ); } diff --git a/03_source/mobile/src/pages/DemoReactProfileDashboardUi/pages/Home.module.scss b/03_source/mobile/src/pages/DemoReactProfileDashboardUi/pages/Home.module.scss new file mode 100644 index 0000000..7e83fa8 --- /dev/null +++ b/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; + } +} diff --git a/03_source/mobile/src/pages/DemoReactProfileDashboardUi/pages/Home.tsx b/03_source/mobile/src/pages/DemoReactProfileDashboardUi/pages/Home.tsx new file mode 100644 index 0000000..b7471b2 --- /dev/null +++ b/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 ( + + + + + handleBackClick()} color="light"> + + + + + + + + + + + + +
+ + + + + + + + + avatar + + + + + + +

Alan Montgomery

+ + +

Mobile Team Lead

+ + + + + + + 109 + Followinig + + + + 1.2k + Followers + + + + + + + + + Message + + + + + + +   Follow + + + + + + + + + + + + + + + Status + + + + +

+ I love posting content related to Ionic React! Make sure to check out the + Ionic React Hub! +

+ + + + + + + + + + + + 147 + Photos + + + + + + + + + 63 + Bookmarks + + + + + + + + + + + View latest project + + + + + + + + + + ); +}; + +export default Home; diff --git a/03_source/mobile/src/pages/DemoReactProfileDashboardUi/style.scss b/03_source/mobile/src/pages/DemoReactProfileDashboardUi/style.scss index 37c1e1a..e69de29 100644 --- a/03_source/mobile/src/pages/DemoReactProfileDashboardUi/style.scss +++ b/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; -} diff --git a/03_source/mobile/src/pages/DemoReactProfileDashboardUi/theme/variables.scss b/03_source/mobile/src/pages/DemoReactProfileDashboardUi/theme/variables.scss new file mode 100644 index 0000000..8172582 --- /dev/null +++ b/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; + } +}