Compare commits
7 Commits
develop/mo
...
develop/mo
| Author | SHA1 | Date | |
|---|---|---|---|
|
3f2ac2a285 | ||
|
|
1216de4ff9 | ||
|
|
7966d8abf5 | ||
|
|
e975aebfcd | ||
|
|
7f6970b183 | ||
|
|
e83854ed2a | ||
|
|
6961f058df |
@@ -49,42 +49,67 @@ import {
|
||||
apps,
|
||||
appsOutline,
|
||||
book,
|
||||
bookOutline,
|
||||
brushOutline,
|
||||
calculatorOutline,
|
||||
car,
|
||||
cart,
|
||||
cartOutline,
|
||||
cashOutline,
|
||||
chatbubbleEllipses,
|
||||
chatbubbleEllipsesOutline,
|
||||
chatbubbleOutline,
|
||||
chevronBackOutline,
|
||||
chevronForward,
|
||||
chevronForwardOutline,
|
||||
cloudOutline,
|
||||
codeSlashOutline,
|
||||
codeWorkingOutline,
|
||||
colorPaletteOutline,
|
||||
createOutline,
|
||||
document,
|
||||
documentTextOutline,
|
||||
filmOutline,
|
||||
flashOutline,
|
||||
gift,
|
||||
giftOutline,
|
||||
globeSharp,
|
||||
gridOutline,
|
||||
heart,
|
||||
imageOutline,
|
||||
imagesOutline,
|
||||
keyOutline,
|
||||
languageOutline,
|
||||
layers,
|
||||
layersOutline,
|
||||
list,
|
||||
listCircle,
|
||||
listOutline,
|
||||
logInOutline,
|
||||
logoFacebook,
|
||||
mapOutline,
|
||||
menuOutline,
|
||||
paperPlaneOutline,
|
||||
people,
|
||||
person,
|
||||
personCircleOutline,
|
||||
personOutline,
|
||||
pizzaOutline,
|
||||
qrCodeOutline,
|
||||
refreshOutline,
|
||||
restaurant,
|
||||
restaurantOutline,
|
||||
settingsOutline,
|
||||
shareSocialOutline,
|
||||
statsChart,
|
||||
sunny,
|
||||
swapHorizontal,
|
||||
trashOutline,
|
||||
walkOutline,
|
||||
} from 'ionicons/icons';
|
||||
import AboutPopover from '../../components/AboutPopover';
|
||||
import { OverlayEventDetail } from '@ionic/react/dist/types/components/react-component-lib/interfaces';
|
||||
import paths from '../../paths';
|
||||
import PATHS from '../../PATHS';
|
||||
import { logoutUser, setAccessToken, setIsLoggedIn } from '../../data/user/user.actions';
|
||||
|
||||
interface OwnProps {}
|
||||
@@ -102,7 +127,13 @@ interface DispatchProps {
|
||||
|
||||
interface SettingsProps extends OwnProps, StateProps, DispatchProps {}
|
||||
|
||||
const SettingsPage: React.FC<SettingsProps> = ({ speakers, speakerSessions, logoutUser, setAccessToken, setIsLoggedIn }) => {
|
||||
const DemoList: React.FC<SettingsProps> = ({
|
||||
speakers,
|
||||
speakerSessions,
|
||||
logoutUser,
|
||||
setAccessToken,
|
||||
setIsLoggedIn,
|
||||
}) => {
|
||||
const [events, setEvents] = useState<Event[] | []>([]);
|
||||
const [showPopover, setShowPopover] = useState(false);
|
||||
const [popoverEvent, setPopoverEvent] = useState<MouseEvent>();
|
||||
@@ -122,23 +153,23 @@ const SettingsPage: React.FC<SettingsProps> = ({ speakers, speakerSessions, logo
|
||||
}
|
||||
|
||||
function handleLanguageClick() {
|
||||
router.push(paths.CHANGE_LANGUAGE);
|
||||
router.push(PATHS.CHANGE_LANGUAGE);
|
||||
}
|
||||
|
||||
function handleNotImplementedClick() {
|
||||
router.push(paths.NOT_IMPLEMENTED);
|
||||
router.push(PATHS.NOT_IMPLEMENTED);
|
||||
}
|
||||
|
||||
function handleDemoPageClick() {
|
||||
router.push(paths.DEMO_PAGE);
|
||||
router.push(PATHS.DEMO_PAGE);
|
||||
}
|
||||
|
||||
function handleServiceAgreementClick() {
|
||||
router.push(paths.SERVICE_AGREEMENT);
|
||||
router.push(PATHS.SERVICE_AGREEMENT);
|
||||
}
|
||||
|
||||
function handlePrivacyAgreementClick() {
|
||||
router.push(paths.PRIVACY_AGREEMENT);
|
||||
router.push(PATHS.PRIVACY_AGREEMENT);
|
||||
}
|
||||
|
||||
const [showLogoutConfirmModal, setShowLogoutConfirmModal] = useState<boolean>(false);
|
||||
@@ -158,12 +189,8 @@ const SettingsPage: React.FC<SettingsProps> = ({ speakers, speakerSessions, logo
|
||||
setShowLogoutConfirmModal(false);
|
||||
}
|
||||
|
||||
function handleDemoWeatherApp() {
|
||||
router.push(paths.DEMO_WEATHER_APP);
|
||||
}
|
||||
|
||||
function handleDemoReactShopClick() {
|
||||
router.push(paths.DEMO_REACT_SHOP);
|
||||
router.push(PATHS.DEMO_REACT_SHOP);
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -192,263 +219,29 @@ const SettingsPage: React.FC<SettingsProps> = ({ speakers, speakerSessions, logo
|
||||
</IonHeader>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick={() => handleDemoWeatherApp()}>
|
||||
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_WEATHER_APP_UI)}>
|
||||
<IonIcon slot="start" icon={sunny} size="large"></IonIcon>
|
||||
<IonLabel>Weather App</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
{/* */}
|
||||
{/* */}
|
||||
{/* */}
|
||||
{/* */}
|
||||
{/* */}
|
||||
{/* */}
|
||||
{/* */}
|
||||
{/* */}
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick={() => router.push(paths.DEMO_ACCORDION_TUTORIAL, 'forward')}>
|
||||
<IonIcon slot="start" icon={list} size="large"></IonIcon>
|
||||
<IonLabel>Demo Accordion Tutorial</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick={() => router.push(paths.DEMO_BANKING_UI, 'forward')}>
|
||||
<IonIcon slot="start" icon={cashOutline} size="large"></IonIcon>
|
||||
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_2FA_EXAMPLE, 'forward')}>
|
||||
<IonIcon slot="start" icon={keyOutline} size="large"></IonIcon>
|
||||
<IonLabel>
|
||||
Demo Banking UI <span style={{ fontWeight: 'bold' }}>(in the middle, style outstanding)</span>
|
||||
Demo 2FA Example{' '}
|
||||
<span style={{ fontWeight: 'bold' }}>layout only, not functioning</span>
|
||||
</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick={() => router.push(paths.DEMO_CAPACITOR_GOOGLE_MAPS_TUTORIAL, 'forward')}>
|
||||
<IonIcon slot="start" icon={mapOutline} size="large"></IonIcon>
|
||||
<IonLabel>
|
||||
Demo Capacitor Google Maps Tutorial <span style={{ fontWeight: 'bold' }}>need a google map api key</span>
|
||||
</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick={() => router.push(paths.DEMO_COLOR_TUTORIAL, 'forward')}>
|
||||
<IonIcon slot="start" icon={colorPaletteOutline} size="large"></IonIcon>
|
||||
<IonLabel>Demo Color Tutorial</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
{/*
|
||||
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick={() => router.push(paths.DEMO_ECOMMERCE_EXAMPLE, 'forward')}>
|
||||
<IonIcon slot="start" icon={cartOutline} size="large"></IonIcon>
|
||||
<IonLabel>Demo Ecommerce Example</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick={() => router.push(paths.DEMO_FACEBOOK_CLONE, 'forward')}>
|
||||
<IonIcon slot="start" icon={logoFacebook} size="large"></IonIcon>
|
||||
<IonLabel>Demo Facebook Clone</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick={() => router.push(paths.DEMO_FAST_FOOD_APP, 'forward')}>
|
||||
<IonIcon slot="start" icon={restaurantOutline} size="large"></IonIcon>
|
||||
<IonLabel>Demo Fast Food App</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick={() => router.push(paths.DEMO_FLOATING_TABS, 'forward')}>
|
||||
<IonIcon slot="start" icon={layersOutline} size="large"></IonIcon>
|
||||
<IonLabel>Demo Floating Tabs</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick={() => router.push(paths.DEMO_INSTAGRAM_CLONE, 'forward')}>
|
||||
<IonIcon slot="start" icon={imageOutline} size="large"></IonIcon>
|
||||
<IonLabel>Demo Instagram Clone</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick={() => router.push(paths.DEMO_KANBAN_BOARD, 'forward')}>
|
||||
<IonIcon slot="start" icon={gridOutline} size="large"></IonIcon>
|
||||
<IonLabel>Demo Kanban Board</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick={() => router.push(paths.DEMO_ORDERING_APP, 'forward')}>
|
||||
<IonIcon slot="start" icon={pizzaOutline} size="large"></IonIcon>
|
||||
<IonLabel>Demo Ordering App</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick={() => router.push(paths.DEMO_PROFILE_EXAMPLE, 'forward')}>
|
||||
<IonIcon slot="start" icon={personOutline} size="large"></IonIcon>
|
||||
<IonLabel>Demo Profile Example</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick={() => router.push(paths.DEMO_PULLSTATE_TUTORIAL, 'forward')}>
|
||||
<IonIcon slot="start" icon={codeWorkingOutline} size="large"></IonIcon>
|
||||
<IonLabel>Demo Pullstate Tutorial</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick={() => router.push(paths.DEMO_REACT_ADD_TO_CART, 'forward')}>
|
||||
<IonIcon slot="start" icon={cartOutline} size="large"></IonIcon>
|
||||
<IonLabel>Demo React Add to Cart</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick={() => router.push(paths.DEMO_REACT_CALCULATOR, 'forward')}>
|
||||
<IonIcon slot="start" icon={calculatorOutline} size="large"></IonIcon>
|
||||
<IonLabel>Demo React Calculator</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick={() => router.push(paths.DEMO_REACT_DRAWING_CANVAS, 'forward')}>
|
||||
<IonIcon slot="start" icon={brushOutline} size="large"></IonIcon>
|
||||
<IonLabel>Demo React Drawing Canvas</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick={() => router.push(paths.DEMO_REACT_HOOK_FORM_EXAMPLE, 'forward')}>
|
||||
<IonIcon slot="start" icon={codeSlashOutline} size="large"></IonIcon>
|
||||
<IonLabel>Demo React Hook Form Example</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick={() => router.push(paths.DEMO_REACT_ITEM_LIST, 'forward')}>
|
||||
<IonIcon slot="start" icon={listOutline} size="large"></IonIcon>
|
||||
<IonLabel>Demo React Item List</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick={() => router.push(paths.DEMO_REACT_LIFECYCLES, 'forward')}>
|
||||
<IonIcon slot="start" icon={refreshOutline} size="large"></IonIcon>
|
||||
<IonLabel>Demo React Lifecycles</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick={() => router.push(paths.DEMO_REACT_LOGIN, 'forward')}>
|
||||
<IonIcon slot="start" icon={logInOutline} size="large"></IonIcon>
|
||||
<IonLabel>Demo React Login</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick={() => router.push(paths.DEMO_REACT_MARVEL_APP, 'forward')}>
|
||||
<IonIcon slot="start" icon={flashOutline} size="large"></IonIcon>
|
||||
<IonLabel>Demo React Marvel App</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick={() => router.push(paths.DEMO_REACT_MOVIE_APP_WITH_ALGOLIA, 'forward')}>
|
||||
<IonIcon slot="start" icon={filmOutline} size="large"></IonIcon>
|
||||
<IonLabel>Demo React Movie App with Algolia</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick={() => router.push(paths.DEMO_REACT_NOTES, 'forward')}>
|
||||
<IonIcon slot="start" icon={documentTextOutline} size="large"></IonIcon>
|
||||
<IonLabel>Demo React Notes</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick={() => router.push(paths.DEMO_REACT_ONBOARDING_UI, 'forward')}>
|
||||
<IonIcon slot="start" icon={walkOutline} size="large"></IonIcon>
|
||||
<IonLabel>Demo React Onboarding UI</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick(() => router.push(paths.DEMO_REACT_PROFILE_DASHBOARD_UI, 'forward')):
|
||||
<IonIcon slot="start" icon={personCircleOutline} size="large"></IonIcon>
|
||||
<IonLabel>Demo React Profile Dashboard UI</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick={() => router.push(paths.DEMO_REACT_QR_CODE, 'forward')}>
|
||||
<IonIcon slot="start" icon={qrCodeOutline} size="large"></IonIcon>
|
||||
<IonLabel>Demo React QR Code</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick(() => router.push(paths.DEMO_REACT_QUOTES, 'forward')):
|
||||
<IonIcon slot="start" icon={bookOutline} size="large"></IonIcon>
|
||||
<IonLabel>Demo React Quotes</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick(() => router.push(paths.DEMO_REACT_SHOP_UI, 'forward')):
|
||||
<IonIcon slot="start" icon={cartOutline} size="large"></IonIcon>
|
||||
<IonLabel>Demo React Shop UI</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick(() => router.push(paths.DEMO_REACT_TABS_MENUS_CUSTOM, 'forward')):
|
||||
<IonIcon slot="start" icon={layersOutline} size="large"></IonIcon>
|
||||
<IonLabel>Demo React Tabs Menus Custom</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick(() => router.push(paths.DEMO_REACT_THEME_SWITCHER, 'forward')):
|
||||
<IonItem
|
||||
button={true}
|
||||
onClick={() => router.push(PATHS.DEMO_REACT_THEME_SWITCHER, 'forward')}
|
||||
>
|
||||
<IonIcon slot="start" icon={colorPaletteOutline} size="large"></IonIcon>
|
||||
<IonLabel>Demo React Theme Switcher</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
@@ -456,15 +249,7 @@ const SettingsPage: React.FC<SettingsProps> = ({ speakers, speakerSessions, logo
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick(() => router.push(paths.DEMO_REACT_WHATSAPP_CLONE, 'forward')):
|
||||
<IonIcon slot="start" icon={chatbubbleEllipsesOutline} size="large"></IonIcon>
|
||||
<IonLabel>Demo React WhatsApp Clone</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick(() => router.push(paths.DEMO_SKELETON_TEXT, 'forward')):
|
||||
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_SKELETON_TEXT, 'forward')}>
|
||||
<IonIcon slot="start" icon={codeWorkingOutline} size="large"></IonIcon>
|
||||
<IonLabel>Demo Skeleton Text</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
@@ -472,7 +257,10 @@ const SettingsPage: React.FC<SettingsProps> = ({ speakers, speakerSessions, logo
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick(() => router.push(paths.DEMO_STICKY_BOTTOM_SHEET_EXAMPLE, 'forward')):
|
||||
<IonItem
|
||||
button={true}
|
||||
onClick={() => router.push(PATHS.DEMO_STICKY_BOTTOM_SHEET_EXAMPLE, 'forward')}
|
||||
>
|
||||
<IonIcon slot="start" icon={paperPlaneOutline} size="large"></IonIcon>
|
||||
<IonLabel>Demo Sticky Bottom Sheet Example</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
@@ -480,15 +268,21 @@ const SettingsPage: React.FC<SettingsProps> = ({ speakers, speakerSessions, logo
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick(() => router.push(paths.DEMO_STORAGE_EXAMPLE, 'forward')):
|
||||
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_STORAGE_EXAMPLE, 'forward')}>
|
||||
<IonIcon slot="start" icon={cloudOutline} size="large"></IonIcon>
|
||||
<IonLabel>Demo Storage Example</IonLabel>
|
||||
<IonLabel>
|
||||
Demo Storage Example{' '}
|
||||
<span style={{ fontWeight: 'bold' }}>(need fix, message cannot display)</span>
|
||||
</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick(() => router.push(paths.DEMO_SWIPERJS_TUTORIAL, 'forward')):
|
||||
<IonItem
|
||||
button={true}
|
||||
onClick={() => router.push(PATHS.DEMO_SWIPERJS_TUTORIAL, 'forward')}
|
||||
>
|
||||
<IonIcon slot="start" icon={imagesOutline} size="large"></IonIcon>
|
||||
<IonLabel>Demo SwiperJS Tutorial</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
@@ -496,19 +290,241 @@ const SettingsPage: React.FC<SettingsProps> = ({ speakers, speakerSessions, logo
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick(() => router.push(paths.DEMO_WEATHER_APP_UI, 'forward')):
|
||||
<IonIcon slot="start" icon={sunnyOutline} size="large"></IonIcon>
|
||||
<IonLabel>Demo Weather App UI</IonLabel>
|
||||
<IonItem
|
||||
button={true}
|
||||
onClick={() => router.push(PATHS.DEMO_REACT_DRAWING_CANVAS, 'forward')}
|
||||
>
|
||||
<IonIcon slot="start" icon={brushOutline} size="large"></IonIcon>
|
||||
<IonLabel>Demo React Drawing Canvas</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
*/}
|
||||
<IonList inset={false}>
|
||||
<IonItem
|
||||
button={true}
|
||||
onClick={() => router.push(PATHS.DEMO_REACT_HOOK_FORM_EXAMPLE, 'forward')}
|
||||
>
|
||||
<IonIcon slot="start" icon={codeSlashOutline} size="large"></IonIcon>
|
||||
<IonLabel>Demo React Hook Form Example</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick={() => router.push(paths.DEMO_2FA_EXAMPLE, 'forward')}>
|
||||
<IonIcon slot="start" icon={keyOutline} size="large"></IonIcon>
|
||||
<IonLabel>Demo 2FA Example</IonLabel>
|
||||
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_REACT_ITEM_LIST, 'forward')}>
|
||||
<IonIcon slot="start" icon={listOutline} size="large"></IonIcon>
|
||||
<IonLabel>Demo React Item List</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem
|
||||
button={true}
|
||||
onClick={() => router.push(PATHS.DEMO_REACT_LIFECYCLES, 'forward')}
|
||||
>
|
||||
<IonIcon slot="start" icon={refreshOutline} size="large"></IonIcon>
|
||||
<IonLabel>Demo React Lifecycles</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_REACT_LOGIN, 'forward')}>
|
||||
<IonIcon slot="start" icon={logInOutline} size="large"></IonIcon>
|
||||
<IonLabel>
|
||||
Demo React Login <span style={{ fontWeight: 'bold' }}>(missing back button)</span>
|
||||
</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem
|
||||
button={true}
|
||||
onClick={() => router.push(PATHS.DEMO_REACT_MARVEL_APP, 'forward')}
|
||||
>
|
||||
<IonIcon slot="start" icon={flashOutline} size="large"></IonIcon>
|
||||
<IonLabel>Demo React Marvel App</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem
|
||||
button={true}
|
||||
onClick={() => router.push(PATHS.DEMO_REACT_MOVIE_APP_WITH_ALGOLIA, 'forward')}
|
||||
>
|
||||
<IonIcon slot="start" icon={filmOutline} size="large"></IonIcon>
|
||||
<IonLabel>Demo React Movie App with Algolia</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_REACT_NOTES, 'forward')}>
|
||||
<IonIcon slot="start" icon={documentTextOutline} size="large"></IonIcon>
|
||||
<IonLabel>
|
||||
Demo React Notes{' '}
|
||||
<span style={{ fontWeight: 'bold' }}>TODO: need update IonSlide</span>
|
||||
</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_FACEBOOK_CLONE, 'forward')}>
|
||||
<IonIcon slot="start" icon={logoFacebook} size="large"></IonIcon>
|
||||
<IonLabel>Demo Facebook Clone</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_FAST_FOOD_APP, 'forward')}>
|
||||
<IonIcon slot="start" icon={restaurantOutline} size="large"></IonIcon>
|
||||
<IonLabel>
|
||||
Demo Fast Food App <span style={{ fontWeight: 'bold' }}>ion-slide outstanding</span>
|
||||
</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_FLOATING_TABS, 'forward')}>
|
||||
<IonIcon slot="start" icon={layersOutline} size="large"></IonIcon>
|
||||
<IonLabel>Demo Floating Tabs</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_INSTAGRAM_CLONE, 'forward')}>
|
||||
<IonIcon slot="start" icon={imageOutline} size="large"></IonIcon>
|
||||
<IonLabel>Demo Instagram Clone</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_KANBAN_BOARD, 'forward')}>
|
||||
<IonIcon slot="start" icon={gridOutline} size="large"></IonIcon>
|
||||
<IonLabel>
|
||||
Demo Kanban Board{' '}
|
||||
<span style={{ fontWeight: 'bold' }}>// TODO: fix missing ionslide in new ionic</span>
|
||||
</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_ORDERING_APP, 'forward')}>
|
||||
<IonIcon slot="start" icon={pizzaOutline} size="large"></IonIcon>
|
||||
<IonLabel>
|
||||
Demo Ordering App <span style={{ fontWeight: 'bold' }}>outstanding css</span>
|
||||
</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_PROFILE_EXAMPLE, 'forward')}>
|
||||
<IonIcon slot="start" icon={personOutline} size="large"></IonIcon>
|
||||
<IonLabel>Demo Profile Example</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem
|
||||
button={true}
|
||||
onClick={() => router.push(PATHS.DEMO_PULLSTATE_TUTORIAL, 'forward')}
|
||||
>
|
||||
<IonIcon slot="start" icon={codeWorkingOutline} size="large"></IonIcon>
|
||||
<IonLabel>Demo Pullstate Tutorial</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem
|
||||
button={true}
|
||||
onClick={() => router.push(PATHS.DEMO_REACT_ADD_TO_CART, 'forward')}
|
||||
>
|
||||
<IonIcon slot="start" icon={cartOutline} size="large"></IonIcon>
|
||||
<IonLabel>Demo React Add to Cart</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem
|
||||
button={true}
|
||||
onClick={() => router.push(PATHS.DEMO_REACT_CALCULATOR, 'forward')}
|
||||
>
|
||||
<IonIcon slot="start" icon={calculatorOutline} size="large"></IonIcon>
|
||||
<IonLabel>
|
||||
Demo React Calculator <span style={{ fontWeight: 'bold' }}>css need fix</span>
|
||||
</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem
|
||||
button={true}
|
||||
onClick={() => router.push(PATHS.DEMO_ACCORDION_TUTORIAL, 'forward')}
|
||||
>
|
||||
<IonIcon slot="start" icon={list} size="large"></IonIcon>
|
||||
<IonLabel>Demo Accordion Tutorial</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_BANKING_UI, 'forward')}>
|
||||
<IonIcon slot="start" icon={cashOutline} size="large"></IonIcon>
|
||||
<IonLabel>
|
||||
Demo Banking UI{' '}
|
||||
<span style={{ fontWeight: 'bold' }}>(in the middle, style outstanding)</span>
|
||||
</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem
|
||||
button={true}
|
||||
onClick={() => router.push(PATHS.DEMO_CAPACITOR_GOOGLE_MAPS_TUTORIAL, 'forward')}
|
||||
>
|
||||
<IonIcon slot="start" icon={mapOutline} size="large"></IonIcon>
|
||||
<IonLabel>
|
||||
Demo Capacitor Google Maps Tutorial{' '}
|
||||
<span style={{ fontWeight: 'bold' }}>need a google map api key</span>
|
||||
</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_COLOR_TUTORIAL, 'forward')}>
|
||||
<IonIcon slot="start" icon={colorPaletteOutline} size="large"></IonIcon>
|
||||
<IonLabel>Demo Color Tutorial</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem
|
||||
button={true}
|
||||
onClick={() => router.push(PATHS.DEMO_ECOMMERCE_EXAMPLE, 'forward')}
|
||||
>
|
||||
<IonIcon slot="start" icon={cartOutline} size="large"></IonIcon>
|
||||
<IonLabel>
|
||||
Demo Ecommerce Example{' '}
|
||||
<span style={{ fontWeight: 'bold' }}>(fetch data not available at remote site)</span>
|
||||
</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
@@ -526,27 +542,35 @@ const SettingsPage: React.FC<SettingsProps> = ({ speakers, speakerSessions, logo
|
||||
*/}
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick={() => router.push(paths.DEMO_REACT_POLL_APP, 'forward')}>
|
||||
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_REACT_POLL_APP, 'forward')}>
|
||||
<IonIcon slot="start" icon={statsChart} size="large"></IonIcon>
|
||||
<IonLabel>
|
||||
Demo React Poll App <span style={{ fontWeight: 'bold' }}>(css temporary broken, ignored)</span>
|
||||
Demo React Poll App{' '}
|
||||
<span style={{ fontWeight: 'bold' }}>(css temporary broken, ignored)</span>
|
||||
</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick={() => router.push(paths.DEMO_REACT_SWITCH_TABS, 'forward')}>
|
||||
<IonItem
|
||||
button={true}
|
||||
onClick={() => router.push(PATHS.DEMO_REACT_SWITCH_TABS, 'forward')}
|
||||
>
|
||||
<IonIcon slot="start" icon={swapHorizontal} size="large"></IonIcon>
|
||||
<IonLabel>
|
||||
Demo React Switch Tabs <span style={{ fontWeight: 'bold' }}>(hardcoded back button)</span>
|
||||
Demo React Switch Tabs{' '}
|
||||
<span style={{ fontWeight: 'bold' }}>(hardcoded back button)</span>
|
||||
</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick={() => router.push(paths.DEMO_REACT_OVERLAY_HOOKS, 'forward')}>
|
||||
<IonItem
|
||||
button={true}
|
||||
onClick={() => router.push(PATHS.DEMO_REACT_OVERLAY_HOOKS, 'forward')}
|
||||
>
|
||||
<IonIcon slot="start" icon={layers} size="large"></IonIcon>
|
||||
<IonLabel>Demo React Overlay Hooks</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
@@ -554,20 +578,28 @@ const SettingsPage: React.FC<SettingsProps> = ({ speakers, speakerSessions, logo
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick={() => router.push(paths.DEMO_PINTEREST_FLOATING_TAB_BAR, 'forward')}>
|
||||
<IonItem
|
||||
button={true}
|
||||
onClick={() => router.push(PATHS.DEMO_PINTEREST_FLOATING_TAB_BAR, 'forward')}
|
||||
>
|
||||
<IonIcon slot="start" icon={people} size="large"></IonIcon>
|
||||
<IonLabel>
|
||||
Demo Pinterest Floating Tab Bar <span style={{ fontWeight: 'bold' }}>(css not work well)</span>
|
||||
Demo Pinterest Floating Tab Bar{' '}
|
||||
<span style={{ fontWeight: 'bold' }}>(css not work well)</span>
|
||||
</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick={() => router.push(paths.DEMO_RESTAURANT_FINDER, 'forward')}>
|
||||
<IonItem
|
||||
button={true}
|
||||
onClick={() => router.push(PATHS.DEMO_RESTAURANT_FINDER, 'forward')}
|
||||
>
|
||||
<IonIcon slot="start" icon={restaurant} size="large"></IonIcon>
|
||||
<IonLabel>
|
||||
Demo Restaurant Finder <span style={{ fontWeight: 'bold' }}>need server for map showing</span>
|
||||
Demo Restaurant Finder{' '}
|
||||
<span style={{ fontWeight: 'bold' }}>need server for map showing</span>
|
||||
</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
@@ -585,7 +617,7 @@ const SettingsPage: React.FC<SettingsProps> = ({ speakers, speakerSessions, logo
|
||||
<IonItem
|
||||
button={true}
|
||||
onClick={() => {
|
||||
router.push(paths.DEMO_CLUB_HOUSE, 'forward');
|
||||
router.push(PATHS.DEMO_CLUB_HOUSE, 'forward');
|
||||
}}
|
||||
>
|
||||
<IonIcon slot="start" icon={cart} size="large"></IonIcon>
|
||||
@@ -598,7 +630,7 @@ const SettingsPage: React.FC<SettingsProps> = ({ speakers, speakerSessions, logo
|
||||
<IonItem
|
||||
button={true}
|
||||
onClick={() => {
|
||||
router.push(paths.DEMO_SCORE_BOARD, 'forward');
|
||||
router.push(PATHS.DEMO_SCORE_BOARD, 'forward');
|
||||
}}
|
||||
>
|
||||
<IonIcon slot="start" icon={car} size="large"></IonIcon>
|
||||
@@ -611,7 +643,7 @@ const SettingsPage: React.FC<SettingsProps> = ({ speakers, speakerSessions, logo
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick={() => router.push(paths.DEMO_QUOTE_APP, 'forward')}>
|
||||
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_QUOTE_APP, 'forward')}>
|
||||
<IonIcon slot="start" icon={car} size="large"></IonIcon>
|
||||
<IonLabel>Demo Quote App</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
@@ -619,7 +651,7 @@ const SettingsPage: React.FC<SettingsProps> = ({ speakers, speakerSessions, logo
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick={() => router.push(paths.DEMO_QR_SCANNER, 'forward')}>
|
||||
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_QR_SCANNER, 'forward')}>
|
||||
<IonIcon slot="start" icon={car} size="large"></IonIcon>
|
||||
<IonLabel>Demo Qr scanner</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
@@ -627,7 +659,7 @@ const SettingsPage: React.FC<SettingsProps> = ({ speakers, speakerSessions, logo
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick={() => router.push(paths.DEMO_SHOP_APP_UI, 'forward')}>
|
||||
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_SHOP_APP_UI, 'forward')}>
|
||||
<IonIcon slot="start" icon={cart} size="large"></IonIcon>
|
||||
<IonLabel>Demo Shop App UI</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
@@ -635,7 +667,7 @@ const SettingsPage: React.FC<SettingsProps> = ({ speakers, speakerSessions, logo
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick={() => router.push(paths.DEMO_DICTIONARY_APP, 'forward')}>
|
||||
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_DICTIONARY_APP, 'forward')}>
|
||||
<IonIcon slot="start" icon={cart} size="large"></IonIcon>
|
||||
<IonLabel>Demo Dictionary App</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
@@ -643,7 +675,7 @@ const SettingsPage: React.FC<SettingsProps> = ({ speakers, speakerSessions, logo
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick={() => router.push(paths.DEMO_RECIPE_APP, 'forward')}>
|
||||
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_RECIPE_APP, 'forward')}>
|
||||
<IonIcon slot="start" icon={cart} size="large"></IonIcon>
|
||||
<IonLabel>Demo Recipe App</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
@@ -651,7 +683,7 @@ const SettingsPage: React.FC<SettingsProps> = ({ speakers, speakerSessions, logo
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick={() => router.push(paths.DEMO_SLIDING_PROFILE, 'forward')}>
|
||||
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_SLIDING_PROFILE, 'forward')}>
|
||||
<IonIcon slot="start" icon={person} size="large"></IonIcon>
|
||||
<IonLabel>Demo Sliding Profile</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
@@ -659,7 +691,7 @@ const SettingsPage: React.FC<SettingsProps> = ({ speakers, speakerSessions, logo
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick={() => router.push(paths.DEMO_QUIZ_APP, 'forward')}>
|
||||
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_QUIZ_APP, 'forward')}>
|
||||
<IonIcon slot="start" icon={book} size="large"></IonIcon>
|
||||
<IonLabel>Demo Quiz App</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
@@ -667,7 +699,7 @@ const SettingsPage: React.FC<SettingsProps> = ({ speakers, speakerSessions, logo
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick={() => router.push(paths.DEMO_BLOG_POST_UI, 'forward')}>
|
||||
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_BLOG_POST_UI, 'forward')}>
|
||||
<IonIcon slot="start" icon={document} size="large"></IonIcon>
|
||||
<IonLabel>Demo Blog Post UI</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
@@ -675,7 +707,10 @@ const SettingsPage: React.FC<SettingsProps> = ({ speakers, speakerSessions, logo
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick={() => router.push(paths.DEMO_REACT_TRAVEL_APP, 'forward')}>
|
||||
<IonItem
|
||||
button={true}
|
||||
onClick={() => router.push(PATHS.DEMO_REACT_TRAVEL_APP, 'forward')}
|
||||
>
|
||||
<IonIcon slot="start" icon={globeSharp} size="large"></IonIcon>
|
||||
<IonLabel>
|
||||
Demo React Travel App <span style={{ fontWeight: 'bold' }}>(on hold)</span>
|
||||
@@ -683,10 +718,80 @@ const SettingsPage: React.FC<SettingsProps> = ({ speakers, speakerSessions, logo
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem
|
||||
button={true}
|
||||
onClick={() => router.push(PATHS.DEMO_REACT_PROFILE_DASHBOARD_UI, 'forward')}
|
||||
>
|
||||
<IonIcon slot="start" icon={personCircleOutline} size="large"></IonIcon>
|
||||
<IonLabel>Demo React Profile Dashboard UI</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
{/* TODO: */}
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_REACT_QR_CODE, 'forward')}>
|
||||
<IonIcon slot="start" icon={qrCodeOutline} size="large"></IonIcon>
|
||||
<IonLabel>
|
||||
Demo React QR Code <span style={{ fontWeight: 'bold' }}>need update</span>
|
||||
</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_REACT_QUOTES, 'forward')}>
|
||||
<IonIcon slot="start" icon={bookOutline} size="large"></IonIcon>
|
||||
<IonLabel>Demo React Quotes</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_REACT_SHOP_UI, 'forward')}>
|
||||
<IonIcon slot="start" icon={cartOutline} size="large"></IonIcon>
|
||||
<IonLabel>
|
||||
Demo React Shop UI <span style={{ fontWeight: 'bold' }}>lower priority</span>
|
||||
</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem
|
||||
button={true}
|
||||
onClick={() => router.push(PATHS.DEMO_REACT_TABS_MENUS_CUSTOM, 'forward')}
|
||||
>
|
||||
<IonIcon slot="start" icon={layersOutline} size="large"></IonIcon>
|
||||
<IonLabel>Demo React Tabs Menus Custom</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
|
||||
<IonList inset={false}>
|
||||
<IonItem
|
||||
button={true}
|
||||
onClick={() => router.push(PATHS.DEMO_REACT_ONBOARDING_UI, 'forward')}
|
||||
>
|
||||
<IonIcon slot="start" icon={walkOutline} size="large"></IonIcon>
|
||||
<IonLabel>
|
||||
Demo React Onboarding UI{' '}
|
||||
<span style={{ fontWeight: 'bold' }}>TODO: update IonSlide</span>
|
||||
</IonLabel>
|
||||
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
</IonContent>
|
||||
|
||||
{/* REQ0058/logout */}
|
||||
<IonModal isOpen={showLogoutConfirmModal} initialBreakpoint={0.5} breakpoints={[0, 0.25, 0.5, 0.75]}>
|
||||
<IonModal
|
||||
isOpen={showLogoutConfirmModal}
|
||||
initialBreakpoint={0.5}
|
||||
breakpoints={[0, 0.25, 0.5, 0.75]}
|
||||
>
|
||||
<IonContent
|
||||
className="ion-padding"
|
||||
style={{
|
||||
@@ -752,5 +857,5 @@ export default connect<OwnProps, StateProps, DispatchProps>({
|
||||
setAccessToken,
|
||||
setIsLoggedIn,
|
||||
},
|
||||
component: React.memo(SettingsPage),
|
||||
component: React.memo(DemoList),
|
||||
});
|
||||
|
||||
@@ -51,8 +51,8 @@ import { CompletedCard } from '../components/CompletedCard';
|
||||
import { QuizStats } from '../components/QuizStats';
|
||||
|
||||
const Questions = () => {
|
||||
const mainContainerRef = useRef();
|
||||
const completionContainerRef = useRef();
|
||||
const mainContainerRef = useRef(null);
|
||||
const completionContainerRef = useRef(null);
|
||||
const swiperRef = useRef(null);
|
||||
|
||||
const router = useIonRouter();
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -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/ScoreBoard/img/about/madison.jpg');
|
||||
}
|
||||
|
||||
.about-header .austin {
|
||||
background-image: url('/assets/ScoreBoard/img/about/austin.jpg');
|
||||
}
|
||||
|
||||
.about-header .chicago {
|
||||
background-image: url('/assets/ScoreBoard/img/about/chicago.jpg');
|
||||
}
|
||||
|
||||
.about-header .seattle {
|
||||
background-image: url('/assets/ScoreBoard/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;
|
||||
}
|
||||
|
||||
@@ -1,79 +0,0 @@
|
||||
.demo-react-add-to-cart {
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,83 +0,0 @@
|
||||
.demo-react-calculator {
|
||||
/* 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;
|
||||
}
|
||||
|
||||
:root {
|
||||
--blue-color: rgb(99, 158, 226);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,79 +0,0 @@
|
||||
.demo-react-drawing-canvas {
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -1,79 +0,0 @@
|
||||
.demo-react-hook-form-example {
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user