diff --git a/03_source/mobile/src/pages/DemoStickyBottomSheetExample/index.tsx b/03_source/mobile/src/pages/DemoStickyBottomSheetExample/index.tsx
index c0857ff..35058cb 100644
--- a/03_source/mobile/src/pages/DemoStickyBottomSheetExample/index.tsx
+++ b/03_source/mobile/src/pages/DemoStickyBottomSheetExample/index.tsx
@@ -1,12 +1,12 @@
-import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
+import { IonRouterOutlet, IonTabs } from '@ionic/react';
-import { cloudOutline, searchOutline } from 'ionicons/icons';
import { Route, Redirect } from 'react-router';
import './theme/variables.scss';
import Home from './pages/Home';
+import React from 'react';
-function DemoStickyBottomSheetExample() {
+function DemoStickyBottomSheetExample(): React.JSX.Element {
return (
@@ -20,18 +20,6 @@ function DemoStickyBottomSheetExample() {
to="/demo-sticky-bottom-sheet-example/home"
/>
-
- {/* */}
-
-
-
- Dashboard
-
-
-
- Search
-
-
);
}
diff --git a/03_source/mobile/src/pages/DemoStickyBottomSheetExample/pages/Home.tsx b/03_source/mobile/src/pages/DemoStickyBottomSheetExample/pages/Home.tsx
index 4974f2f..597e11b 100644
--- a/03_source/mobile/src/pages/DemoStickyBottomSheetExample/pages/Home.tsx
+++ b/03_source/mobile/src/pages/DemoStickyBottomSheetExample/pages/Home.tsx
@@ -9,12 +9,12 @@ import {
IonToolbar,
useIonRouter,
} from '@ionic/react';
-import { useState } from 'react';
+import React, { useState } from 'react';
import { BottomSheet } from '../components/BottomSheet';
import './Home.scss';
import { chevronBackOutline } from 'ionicons/icons';
-const Home: React.FC = () => {
+const Home = (): React.JSX.Element => {
const [showBottomSheet, setShowBottomSheet] = useState(true);
const handleClose = () => {
@@ -31,7 +31,7 @@ const Home: React.FC = () => {
return (
-
+
Ionic Sticky Bottom Sheet
diff --git a/03_source/mobile/src/pages/DemoStickyBottomSheetExample/style.scss b/03_source/mobile/src/pages/DemoStickyBottomSheetExample/style.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/03_source/mobile/src/pages/DemoStickyBottomSheetExample/theme/variables.scss b/03_source/mobile/src/pages/DemoStickyBottomSheetExample/theme/variables.scss
index e55b962..284a0fe 100644
--- a/03_source/mobile/src/pages/DemoStickyBottomSheetExample/theme/variables.scss
+++ b/03_source/mobile/src/pages/DemoStickyBottomSheetExample/theme/variables.scss
@@ -3,79 +3,77 @@
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;
+ /** 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;
+ /** 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;
+ /** 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;
+ /** 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;
+ /** 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;
+ /** 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;
+ /** 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;
+ /** 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;
- }
+ /** 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;
@media (prefers-color-scheme: dark) {
/*