From c765bb49a4657e1f960386e22adc531a5e235081 Mon Sep 17 00:00:00 2001 From: louiscklaw Date: Sun, 8 Jun 2025 19:08:00 +0800 Subject: [PATCH] update demo-recipe-app, --- .../DemoRecipeApp/AppPages/Categories.jsx | 2 +- .../pages/DemoRecipeApp/AppPages/Recipe.jsx | 2 +- .../pages/DemoRecipeApp/AppPages/Search.jsx | 2 +- .../TestComponents/Ingredient.jsx | 16 ++ .../TestComponents/Ingredient.module.scss | 13 ++ .../TestComponents/IngredientsModal.jsx | 30 ++++ .../TestComponents/NutritionModal.jsx | 48 +++++ .../TestComponents/NutritionalFact.jsx | 25 +++ .../TestComponents/RecipeListItem.jsx | 18 ++ .../TestComponents/RecipeListItem.module.scss | 17 ++ .../pages/DemoRecipeApp/pages/Bookmarks.jsx | 65 +++++++ .../pages/DemoRecipeApp/pages/Categories.jsx | 101 +++++++++++ .../pages/Categories.module.scss | 65 +++++++ .../pages/DemoRecipeApp/pages/Category.jsx | 50 ++++++ .../DemoRecipeApp/pages/Category.module.scss | 0 .../src/pages/DemoRecipeApp/pages/Recipe.jsx | 165 ++++++++++++++++++ .../DemoRecipeApp/pages/Recipe.module.scss | 37 ++++ .../src/pages/DemoRecipeApp/pages/Search.jsx | 106 +++++++++++ .../pages/DemoRecipeApp/theme/variables.css | 141 +++++++++++++++ 19 files changed, 900 insertions(+), 3 deletions(-) create mode 100644 03_source/mobile/src/pages/DemoRecipeApp/TestComponents/Ingredient.jsx create mode 100644 03_source/mobile/src/pages/DemoRecipeApp/TestComponents/Ingredient.module.scss create mode 100644 03_source/mobile/src/pages/DemoRecipeApp/TestComponents/IngredientsModal.jsx create mode 100644 03_source/mobile/src/pages/DemoRecipeApp/TestComponents/NutritionModal.jsx create mode 100644 03_source/mobile/src/pages/DemoRecipeApp/TestComponents/NutritionalFact.jsx create mode 100644 03_source/mobile/src/pages/DemoRecipeApp/TestComponents/RecipeListItem.jsx create mode 100644 03_source/mobile/src/pages/DemoRecipeApp/TestComponents/RecipeListItem.module.scss create mode 100644 03_source/mobile/src/pages/DemoRecipeApp/pages/Bookmarks.jsx create mode 100644 03_source/mobile/src/pages/DemoRecipeApp/pages/Categories.jsx create mode 100644 03_source/mobile/src/pages/DemoRecipeApp/pages/Categories.module.scss create mode 100644 03_source/mobile/src/pages/DemoRecipeApp/pages/Category.jsx create mode 100644 03_source/mobile/src/pages/DemoRecipeApp/pages/Category.module.scss create mode 100644 03_source/mobile/src/pages/DemoRecipeApp/pages/Recipe.jsx create mode 100644 03_source/mobile/src/pages/DemoRecipeApp/pages/Recipe.module.scss create mode 100644 03_source/mobile/src/pages/DemoRecipeApp/pages/Search.jsx create mode 100644 03_source/mobile/src/pages/DemoRecipeApp/theme/variables.css diff --git a/03_source/mobile/src/pages/DemoRecipeApp/AppPages/Categories.jsx b/03_source/mobile/src/pages/DemoRecipeApp/AppPages/Categories.jsx index d068d5d..1269dda 100644 --- a/03_source/mobile/src/pages/DemoRecipeApp/AppPages/Categories.jsx +++ b/03_source/mobile/src/pages/DemoRecipeApp/AppPages/Categories.jsx @@ -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); diff --git a/03_source/mobile/src/pages/DemoRecipeApp/AppPages/Recipe.jsx b/03_source/mobile/src/pages/DemoRecipeApp/AppPages/Recipe.jsx index 57885de..80df3fb 100644 --- a/03_source/mobile/src/pages/DemoRecipeApp/AppPages/Recipe.jsx +++ b/03_source/mobile/src/pages/DemoRecipeApp/AppPages/Recipe.jsx @@ -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); diff --git a/03_source/mobile/src/pages/DemoRecipeApp/AppPages/Search.jsx b/03_source/mobile/src/pages/DemoRecipeApp/AppPages/Search.jsx index fb74bba..1541fbe 100644 --- a/03_source/mobile/src/pages/DemoRecipeApp/AppPages/Search.jsx +++ b/03_source/mobile/src/pages/DemoRecipeApp/AppPages/Search.jsx @@ -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(); diff --git a/03_source/mobile/src/pages/DemoRecipeApp/TestComponents/Ingredient.jsx b/03_source/mobile/src/pages/DemoRecipeApp/TestComponents/Ingredient.jsx new file mode 100644 index 0000000..31f0b6b --- /dev/null +++ b/03_source/mobile/src/pages/DemoRecipeApp/TestComponents/Ingredient.jsx @@ -0,0 +1,16 @@ +import { IonItem, IonLabel } from "@ionic/react"; +import styles from "./Ingredient.module.scss"; + +export const Ingredient = ({ ingredient }) => { + + return ( + + + ingredient + +

{ ingredient.text }

+

{ ingredient.weight.toFixed(2) }g

+ + + ); +} \ No newline at end of file diff --git a/03_source/mobile/src/pages/DemoRecipeApp/TestComponents/Ingredient.module.scss b/03_source/mobile/src/pages/DemoRecipeApp/TestComponents/Ingredient.module.scss new file mode 100644 index 0000000..be3dd16 --- /dev/null +++ b/03_source/mobile/src/pages/DemoRecipeApp/TestComponents/Ingredient.module.scss @@ -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; +} \ No newline at end of file diff --git a/03_source/mobile/src/pages/DemoRecipeApp/TestComponents/IngredientsModal.jsx b/03_source/mobile/src/pages/DemoRecipeApp/TestComponents/IngredientsModal.jsx new file mode 100644 index 0000000..cf1b9d6 --- /dev/null +++ b/03_source/mobile/src/pages/DemoRecipeApp/TestComponents/IngredientsModal.jsx @@ -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 ( + + + + + View Ingredients + + Close + + + + + + + { ingredients.map((ingredient, index) => { + + return ; + })} + + + + ); +} + +export default IngredientsModal; \ No newline at end of file diff --git a/03_source/mobile/src/pages/DemoRecipeApp/TestComponents/NutritionModal.jsx b/03_source/mobile/src/pages/DemoRecipeApp/TestComponents/NutritionModal.jsx new file mode 100644 index 0000000..e2dd127 --- /dev/null +++ b/03_source/mobile/src/pages/DemoRecipeApp/TestComponents/NutritionModal.jsx @@ -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 ( + + + + + View Nutrition + + Close + + + + + + + { (recipe && recipe.digest) && + + + + + + Based on a serving size of { recipe.totalWeight.toFixed(0) }g + + + + + + + + + + + + + + + + } + + + ); +} + +export default NutritionModal; \ No newline at end of file diff --git a/03_source/mobile/src/pages/DemoRecipeApp/TestComponents/NutritionalFact.jsx b/03_source/mobile/src/pages/DemoRecipeApp/TestComponents/NutritionalFact.jsx new file mode 100644 index 0000000..eb2b3ef --- /dev/null +++ b/03_source/mobile/src/pages/DemoRecipeApp/TestComponents/NutritionalFact.jsx @@ -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 ( + + + + + { label } + + + + + + { amount }{ type !== "calories" && "g" } + + + + ); +} + +export default NutritionalFact; \ No newline at end of file diff --git a/03_source/mobile/src/pages/DemoRecipeApp/TestComponents/RecipeListItem.jsx b/03_source/mobile/src/pages/DemoRecipeApp/TestComponents/RecipeListItem.jsx new file mode 100644 index 0000000..e347270 --- /dev/null +++ b/03_source/mobile/src/pages/DemoRecipeApp/TestComponents/RecipeListItem.jsx @@ -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 }) => ( + + + + + cover + + +

{ recipe.label }

+

{ recipe.dishType && recipe.dishType[0] }

+ + + +); \ No newline at end of file diff --git a/03_source/mobile/src/pages/DemoRecipeApp/TestComponents/RecipeListItem.module.scss b/03_source/mobile/src/pages/DemoRecipeApp/TestComponents/RecipeListItem.module.scss new file mode 100644 index 0000000..99b0ab7 --- /dev/null +++ b/03_source/mobile/src/pages/DemoRecipeApp/TestComponents/RecipeListItem.module.scss @@ -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; +} \ No newline at end of file diff --git a/03_source/mobile/src/pages/DemoRecipeApp/pages/Bookmarks.jsx b/03_source/mobile/src/pages/DemoRecipeApp/pages/Bookmarks.jsx new file mode 100644 index 0000000..e6c1520 --- /dev/null +++ b/03_source/mobile/src/pages/DemoRecipeApp/pages/Bookmarks.jsx @@ -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 ( + + + + + + + Bookmarks + + + + + + Bookmarks ({ bookmarks.length }) + + + + + { bookmarks.map((bookmark, index) => { + + return ( + + ); + })} + + + { bookmarks.length < 1 && + + <> + + + + You don't have any bookmarks yet + + + +

When viewing a recipe, press the bookmark icon to add it

+ + + + + + + + + + + } + + + ); +}; + +export default Bookmarks; diff --git a/03_source/mobile/src/pages/DemoRecipeApp/pages/Categories.jsx b/03_source/mobile/src/pages/DemoRecipeApp/pages/Categories.jsx new file mode 100644 index 0000000..204bf85 --- /dev/null +++ b/03_source/mobile/src/pages/DemoRecipeApp/pages/Categories.jsx @@ -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 ( + + + + Recipe Categories + + + +   + { bookmarks.length } + + + + + +
+ router.push("/search") } /> +
+ + + + { recipeCategories.map((category, index) => { + + const { name, data } = category; + const { recipe } = data; + + return ( + + + + cover +
+ { name } +
+ + + ); + })} + + + + + ); +}; + +export default Categories; \ No newline at end of file diff --git a/03_source/mobile/src/pages/DemoRecipeApp/pages/Categories.module.scss b/03_source/mobile/src/pages/DemoRecipeApp/pages/Categories.module.scss new file mode 100644 index 0000000..9382418 --- /dev/null +++ b/03_source/mobile/src/pages/DemoRecipeApp/pages/Categories.module.scss @@ -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; + +} \ No newline at end of file diff --git a/03_source/mobile/src/pages/DemoRecipeApp/pages/Category.jsx b/03_source/mobile/src/pages/DemoRecipeApp/pages/Category.jsx new file mode 100644 index 0000000..513f311 --- /dev/null +++ b/03_source/mobile/src/pages/DemoRecipeApp/pages/Category.jsx @@ -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 ( + + + + + + + { name } Recipes + + + + + + { name } Recipes + + + + + { categoryRecipes.map((categoryRecipe, index) => { + + const { recipe } = categoryRecipe; + + return ( + + ); + })} + + + + ); +}; + +export default Category; diff --git a/03_source/mobile/src/pages/DemoRecipeApp/pages/Category.module.scss b/03_source/mobile/src/pages/DemoRecipeApp/pages/Category.module.scss new file mode 100644 index 0000000..e69de29 diff --git a/03_source/mobile/src/pages/DemoRecipeApp/pages/Recipe.jsx b/03_source/mobile/src/pages/DemoRecipeApp/pages/Recipe.jsx new file mode 100644 index 0000000..fced868 --- /dev/null +++ b/03_source/mobile/src/pages/DemoRecipeApp/pages/Recipe.jsx @@ -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 ( + + + + View Recipe + + + + + + + + + + + + + +
+ main cover +
+

{ recipe.label }

+

{ recipe.dishType && recipe.dishType[0] }

+
+
+ + + + + + + + + serves { recipe.yield && recipe.yield } + + + + + + { recipe.totalTime !== 0 ? `${ recipe.totalWeight && recipe.totalWeight.toFixed(0) } mins` : "N/A" } + + + + + + { recipe.totalWeight && recipe.totalWeight.toFixed(0) }g + + + + + + {/* showIngredientsModal({ + + presentingElement: pageRef.current, + cssClass: "customModal" + })}> +   + View Ingredients + */} + + + showNutritionModal({ + + presentingElement: pageRef.current, + cssClass: "customModal" + })}> +   + View Nutrition + + + + + { recipe.ingredients && + + Ingredients ({ recipe.ingredients.length }) + { recipe.ingredients.map((ingredient, index) => { + + return ; + })} + + } + + + + ); +}; + +export default Recipe; diff --git a/03_source/mobile/src/pages/DemoRecipeApp/pages/Recipe.module.scss b/03_source/mobile/src/pages/DemoRecipeApp/pages/Recipe.module.scss new file mode 100644 index 0000000..4da50a5 --- /dev/null +++ b/03_source/mobile/src/pages/DemoRecipeApp/pages/Recipe.module.scss @@ -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); + } + } +} \ No newline at end of file diff --git a/03_source/mobile/src/pages/DemoRecipeApp/pages/Search.jsx b/03_source/mobile/src/pages/DemoRecipeApp/pages/Search.jsx new file mode 100644 index 0000000..80d3371 --- /dev/null +++ b/03_source/mobile/src/pages/DemoRecipeApp/pages/Search.jsx @@ -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 ( + + + + + Search Recipes + + + + + + + +
+ + + + + + + + Search + + + +
+ + { searchResults.length > 0 && + + { searchResults.map((result, index) => { + + const { recipe } = result; + + return ( + + ); + })} + + } + + { searchResults.length < 1 && + + <> + + + + Search for a recipe then select from the list to view it + + + +

For development purposes, only 20 results will be returned

+ + + + + + + + + + + } + + + ); +} + +export default Search; \ No newline at end of file diff --git a/03_source/mobile/src/pages/DemoRecipeApp/theme/variables.css b/03_source/mobile/src/pages/DemoRecipeApp/theme/variables.css new file mode 100644 index 0000000..b8e62f8 --- /dev/null +++ b/03_source/mobile/src/pages/DemoRecipeApp/theme/variables.css @@ -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; +} \ No newline at end of file