louiscklaw/HKSingleParty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update demo-recipe-app,

Browse Source
This commit is contained in:
louiscklaw
2025-06-08 19:08:00 +08:00
parent 9aeb58379d
commit c765bb49a4
19 changed files with 900 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
03_source/mobile/src/pages/DemoRecipeApp/AppPages/Categories.jsx
View File

@@ -26,7 +26,7 @@ import { BookmarkStore } from '../store';
const Categories = () => {
const router = useIonRouter();
const pageRef = useRef();
const pageRef = useRef(null);
const [recipeCategories, setRecipeCategories] = useState([]);
const bookmarks = useStoreState(BookmarkStore, getBookmarks);

2
03_source/mobile/src/pages/DemoRecipeApp/AppPages/Recipe.jsx
View File

@@ -39,7 +39,7 @@ import { useStoreState } from 'pullstate';
import { getBookmarks } from '../store/Selectors';
const Recipe = () => {
const pageRef = useRef();
const pageRef = useRef(null);
const { state } = useLocation();
const [recipe, setRecipe] = useState([]);
const [fromSearch, setFromSearch] = useState(false);

2
03_source/mobile/src/pages/DemoRecipeApp/AppPages/Search.jsx
View File

@@ -25,7 +25,7 @@ import { performSearch } from '../utils';
import { RecipeListItem } from '../components/RecipeListItem';
const Search = () => {
const searchRef = useRef();
const searchRef = useRef(null);
const [searchResults, setSearchResults] = useState([]);
const [showLoader, hideLoader] = useIonLoading();

16
03_source/mobile/src/pages/DemoRecipeApp/TestComponents/Ingredient.jsx Normal file
View File

@@ -0,0 +1,16 @@
import { IonItem, IonLabel } from "@ionic/react";
import styles from "./Ingredient.module.scss";
export const Ingredient = ({ ingredient }) => {
return (
<IonItem lines="full" className={ styles.ingredientItem }>
<img alt="ingredient" src={ ingredient.image } className={ styles.ingredientImage } />
<IonLabel className="ion-text-wrap ion-margin-start">
<h3>{ ingredient.text }</h3>
<p>{ ingredient.weight.toFixed(2) }g</p>
</IonLabel>
</IonItem>
);
}

13
03_source/mobile/src/pages/DemoRecipeApp/TestComponents/Ingredient.module.scss Normal file
View File

@@ -0,0 +1,13 @@
.ingredientImage {
height: 3rem;
width: 3rem;
border-radius: 10px;
border: 1px solid rgb(172, 172, 172);
}
.ingredientItem {
--padding-top: 1rem;
--padding-bottom: 1rem;
}

30
03_source/mobile/src/pages/DemoRecipeApp/TestComponents/IngredientsModal.jsx Normal file
View File

@@ -0,0 +1,30 @@
import { IonButton, IonButtons, IonContent, IonGrid, IonHeader, IonList, IonPage, IonRow, IonTitle, IonToolbar } from "@ionic/react"
import { Ingredient } from "./Ingredient";
const IngredientsModal = ({ dismiss, ingredients}) => {
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>View Ingredients</IonTitle>
<IonButtons slot="start">
<IonButton color="main" onClick={ dismiss }>Close</IonButton>
</IonButtons>
</IonToolbar>
</IonHeader>
<IonContent>
<IonList>
{ ingredients.map((ingredient, index) => {
return <Ingredient key={ `ingredient_${ index }` } ingredient={ ingredient } />;
})}
</IonList>
</IonContent>
</IonPage>
);
}
export default IngredientsModal;

48
03_source/mobile/src/pages/DemoRecipeApp/TestComponents/NutritionModal.jsx Normal file
View File

@@ -0,0 +1,48 @@
import { IonButton, IonButtons, IonCardSubtitle, IonCol, IonContent, IonGrid, IonHeader, IonPage, IonRow, IonTitle, IonToolbar } from "@ionic/react"
import NutritionalFact from "./NutritionalFact";
const NutritionModal = ({ dismiss, recipe }) => {
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>View Nutrition</IonTitle>
<IonButtons slot="start">
<IonButton color="main" onClick={ dismiss }>Close</IonButton>
</IonButtons>
</IonToolbar>
</IonHeader>
<IonContent>
{ (recipe && recipe.digest) &&
<IonGrid>
<IonRow>
<IonCol size="12">
<IonCardSubtitle className="ion-text-center" color="main">
Based on a serving size of { recipe.totalWeight.toFixed(0) }g
</IonCardSubtitle>
<NutritionalFact type="calories" amount={ recipe.calories.toFixed(0) } />
<NutritionalFact type="fat" amount={ recipe.digest[0].total.toFixed(0) } />
<NutritionalFact type="trans_fat" amount={ recipe.digest[0].sub[1].total.toFixed(0) } inset={ true } />
<NutritionalFact type="saturated_fat" amount={ recipe.digest[0].sub[0].total.toFixed(0) } inset={ true } />
<NutritionalFact type="polyunsaturated_fat" amount={ recipe.digest[0].sub[3].total.toFixed(0) } inset={ true } />
<NutritionalFact type="monounsaturated_fat" amount={ recipe.digest[0].sub[2].total.toFixed(0) } inset={ true } />
<NutritionalFact type="carbs" amount={ recipe.digest[1].total.toFixed(0) } />
<NutritionalFact type="sugar" amount={ recipe.digest[1].sub[2].total.toFixed(0) } inset={ true } />
<NutritionalFact type="fibre" amount={ recipe.digest[1].sub[1].total.toFixed(0) } inset={ true } />
<NutritionalFact type="sugars_added" amount={ recipe.digest[1].sub[3].total.toFixed(0) } inset={ true } />
<NutritionalFact type="protein" amount={ recipe.digest[2].total.toFixed(0) } />
</IonCol>
</IonRow>
</IonGrid>
}
</IonContent>
</IonPage>
);
}
export default NutritionModal;

25
03_source/mobile/src/pages/DemoRecipeApp/TestComponents/NutritionalFact.jsx Normal file
View File

@@ -0,0 +1,25 @@
import { IonCardTitle, IonCol, IonRow } from "@ionic/react";
const NutritionalFact = ({ type, amount, inset }) => {
const label = type.replace("_", " ").replace(/(^\w{1})|(\s+\w{1})/g, letter => letter.toUpperCase());
return (
<IonRow style={{ borderBottom: "1px solid #242424", padding: "0.5rem" }}>
<IonCol size="9">
<IonCardTitle style={{ fontSize: "0.9rem", marginLeft: inset ? "1.5rem" : "" }}>
{ label }
</IonCardTitle>
</IonCol>
<IonCol size="3">
<IonCardTitle style={{ fontSize: "0.9rem" }}>
{ amount }{ type !== "calories" && "g" }
</IonCardTitle>
</IonCol>
</IonRow>
);
}
export default NutritionalFact;

18
03_source/mobile/src/pages/DemoRecipeApp/TestComponents/RecipeListItem.jsx Normal file
View File

@@ -0,0 +1,18 @@
import { IonItem, IonLabel } from "@ionic/react";
import { Link } from "react-router-dom";
import styles from "./RecipeListItem.module.scss";
export const RecipeListItem = ({ recipe, fromSearch = false, fromBookmarks = false }) => (
<Link to={{ pathname: `/recipe/${ recipe.label.replace(" ", "").toLowerCase() }`, state: { recipe, fromSearch, fromBookmarks }}}>
<IonItem detail={ true } lines="full" className={ styles.categoryItem }>
<img src={ recipe.image } alt="cover" className={ styles.categoryImage } />
<IonLabel className={ styles.categoryDetails }>
<h2>{ recipe.label }</h2>
<p>{ recipe.dishType && recipe.dishType[0] }</p>
</IonLabel>
</IonItem>
</Link>
);

17
03_source/mobile/src/pages/DemoRecipeApp/TestComponents/RecipeListItem.module.scss Normal file
View File

@@ -0,0 +1,17 @@
.categoryDetails {
margin-left: 1rem;
}
.categoryImage {
width: 5rem;
height: 5rem;
border-radius: 10px;
}
.categoryItem {
--padding-top: 1.5rem;
--padding-bottom: 1.5rem;
}

65
03_source/mobile/src/pages/DemoRecipeApp/pages/Bookmarks.jsx Normal file
View File

@@ -0,0 +1,65 @@
import { IonBackButton, IonButtons, IonCol, IonContent, IonHeader, IonImg, IonList, IonNote, IonPage, IonRow, IonText, IonTitle, IonToolbar } from '@ionic/react';
import { RecipeListItem } from '../components/RecipeListItem';
import { useStoreState } from "pullstate";
import { BookmarkStore } from '../store';
import { getBookmarks } from '../store/Selectors';
const Bookmarks = () => {
const bookmarks = useStoreState(BookmarkStore, getBookmarks);
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonBackButton text="Categories" />
</IonButtons>
<IonTitle>Bookmarks</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">Bookmarks ({ bookmarks.length })</IonTitle>
</IonToolbar>
</IonHeader>
<IonList>
{ bookmarks.map((bookmark, index) => {
return (
<RecipeListItem recipe={ bookmark } key={ `recipe_${ index }` } fromBookmarks={ true } />
);
})}
</IonList>
{ bookmarks.length < 1 &&
<>
<IonRow className="ion-justify-content-center ion-text-center ion-margin-top ion-padding-top">
<IonCol size="8">
<IonText>
You don't have any bookmarks yet
</IonText>
<IonNote>
<p>When viewing a recipe, press the bookmark icon to add it</p>
</IonNote>
</IonCol>
</IonRow>
<IonRow className="ion-justify-content-center">
<IonCol size="8">
<IonImg src="/assets/bookmark.png" />
</IonCol>
</IonRow>
</>
}
</IonContent>
</IonPage>
);
};
export default Bookmarks;

101
03_source/mobile/src/pages/DemoRecipeApp/pages/Categories.jsx Normal file
View File

@@ -0,0 +1,101 @@
import { useEffect, useState } from "react";
import { IonButton, IonButtons, IonCardTitle, IonCol, IonContent, IonGrid, IonHeader, IonIcon, IonPage, IonRow, IonSearchbar, IonTitle, IonToolbar, useIonRouter } from '@ionic/react';
import styles from "./Categories.module.scss";
import { recipes } from "../recipes";
import { useRef } from "react";
import { Link } from "react-router-dom";
import { bookmarkOutline } from "ionicons/icons";
import { getBookmarks } from "../store/Selectors";
import { useStoreState } from "pullstate";
import { BookmarkStore } from "../store";
const Categories = () => {
const router = useIonRouter();
const pageRef = useRef();
const [ recipeCategories, setRecipeCategories ] = useState([]);
const bookmarks = useStoreState(BookmarkStore, getBookmarks)
useEffect(() => {
const getAllRecipes = async () => {
const tempRecipeCategories = [
{
name: "Chicken",
data: recipes.chicken.hits[0]
},
{
name: "Beef",
data: recipes.beef.hits[0]
},
{
name: "Fish",
data: recipes.fish.hits[0]
},
{
name: "Fruit",
data: recipes.fruit.hits[0]
},
{
name: "Salad",
data: recipes.salad.hits[0]
},
{
name: "Vegan",
data: recipes.vegan.hits[0]
}
];
setRecipeCategories(tempRecipeCategories);
}
getAllRecipes();
}, []);
return (
<IonPage ref={ pageRef }>
<IonHeader className="ion-no-border">
<IonToolbar className="ion-no-border">
<IonTitle>Recipe Categories</IonTitle>
<IonButtons slot="end">
<IonButton routerLink="/bookmarks">
<IonIcon icon={ bookmarkOutline } />&nbsp;
{ bookmarks.length }
</IonButton>
</IonButtons>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<div className={ styles.searchArea }>
<IonSearchbar className="ion-justify-content-center" placeholder="Try 'Chicken Piccata'" onClick={ () => router.push("/search") } />
</div>
<IonGrid>
<IonRow className={ styles.row }>
{ recipeCategories.map((category, index) => {
const { name, data } = category;
const { recipe } = data;
return (
<IonCol className={ styles.col } size="6" key={ `recipe_${ index }` }>
<Link to={ `/category/${ name }`}>
<img src={ recipe.image } alt="cover" />
<div className={ styles.categoryName }>
<IonCardTitle>{ name }</IonCardTitle>
</div>
</Link>
</IonCol>
);
})}
</IonRow>
</IonGrid>
</IonContent>
</IonPage>
);
};
export default Categories;

65
03_source/mobile/src/pages/DemoRecipeApp/pages/Categories.module.scss Normal file
View File

@@ -0,0 +1,65 @@
.categoryName {
position: absolute;
left: 0;
top: 0;
margin: 0 auto;
z-index: 10;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 10px;
height: 100%;
width: 100%;
ion-card-title {
color: white;
margin-left: 0.5rem;
margin-top: 0.5rem;
padding: 0.5rem;
width: fit-content;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 10px;
}
}
.row,
.col,
.card {
padding: 0;
background-color: white;
border-radius: 10px;
}
.col {
border: 5px solid white;
img {
border-radius: 10px;
height: 100%;
width: 100%;
}
}
.searchArea {
background-color: var(--ion-toolbar-background);
padding-bottom: 0.5rem;
ion-searchbar {
color: white;
--background: rgb(49, 49, 49);
--icon-color: rgb(27, 173, 100);
// --border-radius: 0;
}
}
.searchButton {
height: 2.2rem;
margin-top: 0.9rem;
}

50
03_source/mobile/src/pages/DemoRecipeApp/pages/Category.jsx Normal file
View File

@@ -0,0 +1,50 @@
import { IonBackButton, IonButtons, IonContent, IonHeader, IonList, IonPage, IonTitle, IonToolbar } from '@ionic/react';
import { useEffect } from 'react';
import { useState } from 'react';
import { useParams } from 'react-router';
import { RecipeListItem } from '../components/RecipeListItem';
import { recipes } from '../recipes';
const Category = () => {
const { name } = useParams();
const [ categoryRecipes, setCategoryRecipes ] = useState([]);
useEffect(() => {
setCategoryRecipes(recipes[name.toLowerCase()].hits);
}, [ name ]);
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonBackButton text="Categories" />
</IonButtons>
<IonTitle>{ name } Recipes</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">{ name } Recipes</IonTitle>
</IonToolbar>
</IonHeader>
<IonList>
{ categoryRecipes.map((categoryRecipe, index) => {
const { recipe } = categoryRecipe;
return (
<RecipeListItem recipe={ recipe } key={ `recipe_${ index }` } />
);
})}
</IonList>
</IonContent>
</IonPage>
);
};
export default Category;

0
03_source/mobile/src/pages/DemoRecipeApp/pages/Category.module.scss Normal file
View File

165
03_source/mobile/src/pages/DemoRecipeApp/pages/Recipe.jsx Normal file
View File

@@ -0,0 +1,165 @@
import { IonBackButton, IonButton, IonButtons, IonCardSubtitle, IonCardTitle, IonCol, IonContent, IonGrid, IonHeader, IonIcon, IonList, IonListHeader, IonPage, IonRow, IonTitle, IonToolbar, useIonModal, useIonToast } from '@ionic/react';
import { bookmark, bookmarkOutline, informationCircleOutline, layersOutline, peopleOutline, timeOutline } from 'ionicons/icons';
import { useEffect, useRef } from 'react';
import { useState } from 'react';
import { useLocation } from 'react-router';
import { Ingredient } from '../components/Ingredient';
import IngredientsModal from '../components/IngredientsModal';
import NutritionModal from '../components/NutritionModal';
import BookmarkStore, { addToBookmarks } from '../store/BookmarkStore';
import styles from "./Recipe.module.scss";
import { useStoreState } from "pullstate";
import { getBookmarks } from '../store/Selectors';
const Recipe = () => {
const pageRef = useRef();
const { state } = useLocation();
const [ recipe, setRecipe ] = useState([]);
const [ fromSearch, setFromSearch ] = useState(false);
const [ fromBookmarks, setFromBookmarks ] = useState(false);
const bookmarks = useStoreState(BookmarkStore, getBookmarks);
const [ showToast ] = useIonToast();
const handleDismissIngredientsModal = () => {
hideIngredientsModal();
}
const handleDismissNutritionModal = () => {
hideNutritionModal();
}
const [ showIngredientsModal, hideIngredientsModal ] = useIonModal(IngredientsModal, {
dismiss: handleDismissIngredientsModal,
ingredients: recipe.ingredients
});
const [ showNutritionModal, hideNutritionModal ] = useIonModal(NutritionModal, {
dismiss: handleDismissNutritionModal,
recipe
});
useEffect(() => {
if (state && state.recipe) {
setRecipe(state.recipe);
}
if (state && state.fromSearch) {
setFromSearch(state.fromSearch);
}
if (state && state.fromBookmarks) {
setFromBookmarks(state.fromBookmarks);
}
}, [ state ]);
const addBookmark = async () => {
const added = addToBookmarks(recipe);
showToast({
message: added ? "This recipe has been bookmarked!" : "This recipe has been removed from your bookmarks.",
duration: 2000,
color: "main"
});
}
return (
<IonPage ref={ pageRef }>
<IonHeader>
<IonToolbar>
<IonTitle>View Recipe</IonTitle>
<IonButtons slot="start">
<IonBackButton text={ fromSearch ? "Search" : fromBookmarks ? "Bookmarks" : "Recipes" } color="main" />
</IonButtons>
<IonButtons slot="end">
<IonButton onClick={ addBookmark }>
<IonIcon icon={ bookmarks.includes(recipe) ? bookmark : bookmarkOutline } />
</IonButton>
</IonButtons>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<div className={ styles.headerImage }>
<img src={ recipe.image } alt="main cover" />
<div className={ `${ styles.headerInfo } animate__animated animate__slideInLeft` }>
<h1>{ recipe.label }</h1>
<p>{ recipe.dishType && recipe.dishType[0] }</p>
</div>
</div>
<IonGrid>
<IonRow className="ion-text-center">
<IonCol size="4">
<IonCardTitle>
<IonIcon icon={ peopleOutline } />
</IonCardTitle>
<IonCardSubtitle>serves { recipe.yield && recipe.yield }</IonCardSubtitle>
</IonCol>
<IonCol size="4">
<IonCardTitle>
<IonIcon icon={ timeOutline } />
</IonCardTitle>
<IonCardSubtitle>{ recipe.totalTime !== 0 ? `${ recipe.totalWeight && recipe.totalWeight.toFixed(0) } mins` : "N/A" }</IonCardSubtitle>
</IonCol>
<IonCol size="4">
<IonCardTitle>
<IonIcon icon={ layersOutline } />
</IonCardTitle>
<IonCardSubtitle>{ recipe.totalWeight && recipe.totalWeight.toFixed(0) }g</IonCardSubtitle>
</IonCol>
</IonRow>
<IonRow className="ion-text-center">
<IonCol size="6">
{/* <IonButton color="main" onClick={ () => showIngredientsModal({
presentingElement: pageRef.current,
cssClass: "customModal"
})}>
<IonIcon icon={ informationCircleOutline } />&nbsp;
View Ingredients
</IonButton> */}
</IonCol>
<IonCol size="12">
<IonButton expand="block" color="main" onClick={ () => showNutritionModal({
presentingElement: pageRef.current,
cssClass: "customModal"
})}>
<IonIcon icon={ informationCircleOutline } />&nbsp;
View Nutrition
</IonButton>
</IonCol>
</IonRow>
{ recipe.ingredients &&
<IonList>
<IonListHeader>Ingredients ({ recipe.ingredients.length })</IonListHeader>
{ recipe.ingredients.map((ingredient, index) => {
return <Ingredient key={ `ingredient_${ index }` } ingredient={ ingredient } />;
})}
</IonList>
}
</IonGrid>
</IonContent>
</IonPage>
);
};
export default Recipe;

37
03_source/mobile/src/pages/DemoRecipeApp/pages/Recipe.module.scss Normal file
View File

@@ -0,0 +1,37 @@
.headerImage {
img {
width: 100%;
margin-top: -5rem;
border-bottom: 5px solid var(--ion-color-main);
}
.headerInfo {
position: absolute;
top: 10rem;
z-index: 10;
background-color: rgba($color: #000000, $alpha: 0.8);
color: white;
padding: 1rem;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
h1 {
font-size: 1.1rem;
padding: 0;
margin: 0;
}
p {
font-size: 0.9rem;
padding: 0;
margin: 0;
color: var(--ion-color-main);
}
}
}

106
03_source/mobile/src/pages/DemoRecipeApp/pages/Search.jsx Normal file
View File

@@ -0,0 +1,106 @@
import { IonBackButton, IonButton, IonButtons, IonCol, IonContent, IonGrid, IonHeader, IonImg, IonList, IonNote, IonPage, IonRow, IonSearchbar, IonText, IonTitle, IonToolbar, useIonLoading, useIonViewDidEnter } from "@ionic/react"
import { useState } from "react";
import { useRef } from "react";
import styles from "./Categories.module.scss";
import { performSearch } from "../utils";
import { RecipeListItem } from "../components/RecipeListItem";
const Search = () => {
const searchRef = useRef();
const [ searchResults, setSearchResults ] = useState([]);
const [ showLoader, hideLoader ] = useIonLoading();
useIonViewDidEnter(() => {
searchRef.current.setFocus();
});
const search = async () => {
showLoader({
cssClass: "customLoader",
message: "Searching...",
duration: 9999999,
spinner: "dots"
});
const searchTerm = searchRef.current.value;
const data = await performSearch(searchTerm);
setSearchResults(data.hits);
setTimeout(() => {
hideLoader();
}, 300);
}
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Search Recipes</IonTitle>
<IonButtons slot="start">
<IonBackButton color="main" text="Categories" />
</IonButtons>
</IonToolbar>
</IonHeader>
<IonContent>
<div className={ styles.searchArea }>
<IonGrid>
<IonRow>
<IonCol size="9">
<IonSearchbar ref={ searchRef } placeholder="Try 'Chicken Piccata'" />
</IonCol>
<IonCol size="3">
<IonButton className={ styles.searchButton } expand="block" color="main" onClick={ search }>Search</IonButton>
</IonCol>
</IonRow>
</IonGrid>
</div>
{ searchResults.length > 0 &&
<IonList>
{ searchResults.map((result, index) => {
const { recipe } = result;
return (
<RecipeListItem recipe={ recipe } key={ `result_${ index }` } fromSearch={ true } />
);
})}
</IonList>
}
{ searchResults.length < 1 &&
<>
<IonRow className="ion-justify-content-center ion-text-center ion-margin-top ion-padding-top">
<IonCol size="8">
<IonText>
Search for a recipe then select from the list to view it
</IonText>
<IonNote>
<p>For development purposes, only 20 results will be returned</p>
</IonNote>
</IonCol>
</IonRow>
<IonRow className="ion-justify-content-center">
<IonCol size="8">
<IonImg src="/assets/placeholder.png" />
</IonCol>
</IonRow>
</>
}
</IonContent>
</IonPage>
);
}
export default Search;

141
03_source/mobile/src/pages/DemoRecipeApp/theme/variables.css Normal file
View File

@@ -0,0 +1,141 @@
/* 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-color-main: #1BAD64;
--ion-color-main-rgb: 27,173,100;
--ion-color-main-contrast: #ffffff;
--ion-color-main-contrast-rgb: 255,255,255;
--ion-color-main-shade: #189858;
--ion-color-main-tint: #32b574;
--ion-background-color: white;
--ion-tab-bar-background: rgb(36, 36, 36);
--ion-toolbar-background: rgb(36, 36, 36);
--ion-tab-bar-color-selected: rgb(27, 173, 100);
--ion-tab-bar-color: rgb(97, 97, 97);
}
.ion-color-main {
--ion-color-base: var(--ion-color-main);
--ion-color-base-rgb: var(--ion-color-main-rgb);
--ion-color-contrast: var(--ion-color-main-contrast);
--ion-color-contrast-rgb: var(--ion-color-main-contrast-rgb);
--ion-color-shade: var(--ion-color-main-shade);
--ion-color-tint: var(--ion-color-main-tint);
}
ion-toolbar ion-title {
--color: white;
}
ion-toolbar ion-back-button,
ion-toolbar ion-button {
--color: rgb(27, 173, 100);
}
ion-content ion-toolbar ion-title {
color: rgb(36, 36, 36);
}
* {
font-family: 'Ubuntu', sans-serif;
}
ion-toolbar {
--border-style: none;
}
.customLoader {
--background: var(--ion-toolbar-background);
--spinner-color: var(--ion-tab-bar-color-selected);
color: white;
}
.customModal {
--background: var(--ion-toolbar-background);
}
a {
text-decoration: none;
}