From 5131a717bf7cbecb0ed70e3124608822373ddc68 Mon Sep 17 00:00:00 2001 From: Remi REGNAULT Date: Tue, 21 Nov 2023 08:50:47 +0100 Subject: [PATCH 01/27] add navigation --- .gitignore | 1 + LeftOvers/App.tsx | 25 ++++-- LeftOvers/package-lock.json | 174 ++++++++++++++++++++++++++++++++++++ LeftOvers/package.json | 3 + 4 files changed, 195 insertions(+), 8 deletions(-) diff --git a/.gitignore b/.gitignore index 239ae30..64401bf 100644 --- a/.gitignore +++ b/.gitignore @@ -246,6 +246,7 @@ dist .pnp.* ### Node Patch ### +**/package-lock.json # Serverless Webpack directories .webpack/ diff --git a/LeftOvers/App.tsx b/LeftOvers/App.tsx index 8a8b1b2..7e3cb85 100644 --- a/LeftOvers/App.tsx +++ b/LeftOvers/App.tsx @@ -6,6 +6,10 @@ import { LinearGradient } from 'expo-linear-gradient'; import RecipeSuggestion from './screens/RecipeSuggestion'; import RecipeDetails from './screens/RecipeDetails'; import IngredientSelection from './screens/IngredientSelection'; +import { NavigationContainer } from '@react-navigation/native'; +import { createNativeStackNavigator } from '@react-navigation/native-stack'; + +const Stack = createNativeStackNavigator(); export default function App() { const all = [{value: "Mussels"}, {value: "Skimmed Milk"}, {value: "Nuts"}] @@ -37,15 +41,20 @@ export default function App() { const ingredients = generateList(); return ( - + + + + + + // /**/ - /**/ + /**/ ); } diff --git a/LeftOvers/package-lock.json b/LeftOvers/package-lock.json index 31f60a2..1b9d0a5 100644 --- a/LeftOvers/package-lock.json +++ b/LeftOvers/package-lock.json @@ -9,6 +9,8 @@ "version": "1.0.0", "dependencies": { "@expo/webpack-config": "^19.0.0", + "@react-navigation/native": "^6.1.9", + "@react-navigation/native-stack": "^6.9.17", "@types/react": "~18.2.14", "expo": "~49.0.15", "expo-linear-gradient": "~12.3.0", @@ -20,6 +22,7 @@ "react-native-dropdown-select-list": "^2.0.5", "react-native-paper": "^5.11.1", "react-native-safe-area-context": "^4.7.4", + "react-native-screens": "^3.27.0", "react-native-splash-screen": "^3.3.0", "react-native-web": "~0.19.6", "typescript": "^5.1.3" @@ -5957,6 +5960,99 @@ "react-native": "*" } }, + "node_modules/@react-navigation/core": { + "version": "6.4.10", + "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-6.4.10.tgz", + "integrity": "sha512-oYhqxETRHNHKsipm/BtGL0LI43Hs2VSFoWMbBdHK9OqgQPjTVUitslgLcPpo4zApCcmBWoOLX2qPxhsBda644A==", + "dependencies": { + "@react-navigation/routers": "^6.1.9", + "escape-string-regexp": "^4.0.0", + "nanoid": "^3.1.23", + "query-string": "^7.1.3", + "react-is": "^16.13.0", + "use-latest-callback": "^0.1.7" + }, + "peerDependencies": { + "react": "*" + } + }, + "node_modules/@react-navigation/core/node_modules/escape-string-regexp": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", + "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@react-navigation/core/node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, + "node_modules/@react-navigation/elements": { + "version": "1.3.21", + "resolved": "https://registry.npmjs.org/@react-navigation/elements/-/elements-1.3.21.tgz", + "integrity": "sha512-eyS2C6McNR8ihUoYfc166O1D8VYVh9KIl0UQPI8/ZJVsStlfSTgeEEh+WXge6+7SFPnZ4ewzEJdSAHH+jzcEfg==", + "peerDependencies": { + "@react-navigation/native": "^6.0.0", + "react": "*", + "react-native": "*", + "react-native-safe-area-context": ">= 3.0.0" + } + }, + "node_modules/@react-navigation/native": { + "version": "6.1.9", + "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-6.1.9.tgz", + "integrity": "sha512-AMuJDpwXE7UlfyhIXaUCCynXmv69Kb8NzKgKJO7v0k0L+u6xUTbt6xvshmJ79vsvaFyaEH9Jg5FMzek5/S5qNw==", + "dependencies": { + "@react-navigation/core": "^6.4.10", + "escape-string-regexp": "^4.0.0", + "fast-deep-equal": "^3.1.3", + "nanoid": "^3.1.23" + }, + "peerDependencies": { + "react": "*", + "react-native": "*" + } + }, + "node_modules/@react-navigation/native-stack": { + "version": "6.9.17", + "resolved": "https://registry.npmjs.org/@react-navigation/native-stack/-/native-stack-6.9.17.tgz", + "integrity": "sha512-X8p8aS7JptQq7uZZNFEvfEcPf6tlK4PyVwYDdryRbG98B4bh2wFQYMThxvqa+FGEN7USEuHdv2mF0GhFKfX0ew==", + "dependencies": { + "@react-navigation/elements": "^1.3.21", + "warn-once": "^0.1.0" + }, + "peerDependencies": { + "@react-navigation/native": "^6.0.0", + "react": "*", + "react-native": "*", + "react-native-safe-area-context": ">= 3.0.0", + "react-native-screens": ">= 3.0.0" + } + }, + "node_modules/@react-navigation/native/node_modules/escape-string-regexp": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", + "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@react-navigation/routers": { + "version": "6.1.9", + "resolved": "https://registry.npmjs.org/@react-navigation/routers/-/routers-6.1.9.tgz", + "integrity": "sha512-lTM8gSFHSfkJvQkxacGM6VJtBt61ip2XO54aNfswD+KMw6eeZ4oehl7m0me3CR9hnDE4+60iAZR8sAhvCiI3NA==", + "dependencies": { + "nanoid": "^3.1.23" + } + }, "node_modules/@segment/loosely-validate-event": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/@segment/loosely-validate-event/-/loosely-validate-event-2.0.0.tgz", @@ -8480,6 +8576,14 @@ "node": ">=0.10.0" } }, + "node_modules/decode-uri-component": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.2.tgz", + "integrity": "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==", + "engines": { + "node": ">=0.10" + } + }, "node_modules/deep-extend": { "version": "0.6.0", "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz", @@ -9702,6 +9806,14 @@ "node": ">=8" } }, + "node_modules/filter-obj": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-1.1.0.tgz", + "integrity": "sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/finalhandler": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz", @@ -14660,6 +14772,23 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/query-string": { + "version": "7.1.3", + "resolved": "https://registry.npmjs.org/query-string/-/query-string-7.1.3.tgz", + "integrity": "sha512-hh2WYhq4fi8+b+/2Kg9CEge4fDPvHS534aOOvOZeQ3+Vf2mCFsaFBYj0i+iXcAq6I9Vzp5fjMFBlONvayDC1qg==", + "dependencies": { + "decode-uri-component": "^0.2.2", + "filter-obj": "^1.1.0", + "split-on-first": "^1.0.0", + "strict-uri-encode": "^2.0.0" + }, + "engines": { + "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/querystringify": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz", @@ -14796,6 +14925,17 @@ "loose-envify": "^1.1.0" } }, + "node_modules/react-freeze": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/react-freeze/-/react-freeze-1.0.3.tgz", + "integrity": "sha512-ZnXwLQnGzrDpHBHiC56TXFXvmolPeMjTn1UOm610M4EXGzbEDR7oOIyS2ZiItgbs6eZc4oU/a0hpk8PrcKvv5g==", + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": ">=17.0.0" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -14883,6 +15023,19 @@ "react-native": "*" } }, + "node_modules/react-native-screens": { + "version": "3.27.0", + "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-3.27.0.tgz", + "integrity": "sha512-FzSUygZ7yLQyhDJZsl7wU68LwRpVtVdqOPWribmEU3Tf26FohFGGcfJx1D8lf2V2Teb8tI+IaLnXCKbyh2xffA==", + "dependencies": { + "react-freeze": "^1.0.0", + "warn-once": "^0.1.0" + }, + "peerDependencies": { + "react": "*", + "react-native": "*" + } + }, "node_modules/react-native-splash-screen": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/react-native-splash-screen/-/react-native-splash-screen-3.3.0.tgz", @@ -15864,6 +16017,14 @@ "node": "*" } }, + "node_modules/split-on-first": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz", + "integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==", + "engines": { + "node": ">=6" + } + }, "node_modules/sprintf-js": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", @@ -15945,6 +16106,14 @@ "node": ">= 0.10.0" } }, + "node_modules/strict-uri-encode": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz", + "integrity": "sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ==", + "engines": { + "node": ">=4" + } + }, "node_modules/string_decoder": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", @@ -16814,6 +16983,11 @@ "makeerror": "1.0.12" } }, + "node_modules/warn-once": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/warn-once/-/warn-once-0.1.1.tgz", + "integrity": "sha512-VkQZJbO8zVImzYFteBXvBOZEl1qL175WH8VmZcxF2fZAoudNhNDvHi+doCaAEdU2l2vtcIwa2zn0QK5+I1HQ3Q==" + }, "node_modules/watchpack": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz", diff --git a/LeftOvers/package.json b/LeftOvers/package.json index e3e3094..b5b9b78 100644 --- a/LeftOvers/package.json +++ b/LeftOvers/package.json @@ -10,6 +10,8 @@ }, "dependencies": { "@expo/webpack-config": "^19.0.0", + "@react-navigation/native": "^6.1.9", + "@react-navigation/native-stack": "^6.9.17", "@types/react": "~18.2.14", "expo": "~49.0.15", "expo-linear-gradient": "~12.3.0", @@ -21,6 +23,7 @@ "react-native-dropdown-select-list": "^2.0.5", "react-native-paper": "^5.11.1", "react-native-safe-area-context": "^4.7.4", + "react-native-screens": "^3.27.0", "react-native-splash-screen": "^3.3.0", "react-native-web": "~0.19.6", "typescript": "^5.1.3" From 22a084f0d8402681fb61e7cf911bd4f3f9ae79c0 Mon Sep 17 00:00:00 2001 From: Remi REGNAULT Date: Tue, 21 Nov 2023 11:03:19 +0100 Subject: [PATCH 02/27] bottom bar is working but as no images for now --- LeftOvers/App.tsx | 66 +++++++++-------- LeftOvers/components/ValidateButton.tsx | 14 ++-- LeftOvers/navigation/HomeStackScreen.tsx | 71 ++++++++++++++++++ LeftOvers/navigation/ProfileStackScreen.tsx | 44 ++++++++++++ LeftOvers/navigation/place_holder | 0 LeftOvers/package-lock.json | 80 +++++++++++++++++++++ LeftOvers/package.json | 1 + LeftOvers/screens/HomePage.tsx | 5 +- LeftOvers/screens/Profiles.tsx | 2 +- 9 files changed, 243 insertions(+), 40 deletions(-) create mode 100644 LeftOvers/navigation/HomeStackScreen.tsx create mode 100644 LeftOvers/navigation/ProfileStackScreen.tsx delete mode 100644 LeftOvers/navigation/place_holder diff --git a/LeftOvers/App.tsx b/LeftOvers/App.tsx index 7e3cb85..4653f54 100644 --- a/LeftOvers/App.tsx +++ b/LeftOvers/App.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import {StyleSheet, View } from 'react-native'; +import {StyleSheet, View, Image, Text } from 'react-native'; import ProfileModification from './components/ProfileModification'; import ValidateButton from './components/ValidateButton'; import { LinearGradient } from 'expo-linear-gradient'; @@ -7,44 +7,48 @@ import RecipeSuggestion from './screens/RecipeSuggestion'; import RecipeDetails from './screens/RecipeDetails'; import IngredientSelection from './screens/IngredientSelection'; import { NavigationContainer } from '@react-navigation/native'; -import { createNativeStackNavigator } from '@react-navigation/native-stack'; +import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; -const Stack = createNativeStackNavigator(); +import HomeStackScreen from './navigation/HomeStackScreen'; +import ProfilesStackScreen from './navigation/ProfileStackScreen'; + +const Tab = createBottomTabNavigator(); export default function App() { - const all = [{value: "Mussels"}, {value: "Skimmed Milk"}, {value: "Nuts"}] - const die = [{value: "Dairy free"}, {value: "Gluten free"}, {value: "Porkless"}, {value: "Vegan"}, {value: "Vegetarian"}, {value: "Pescatarian"}] - const ingredient = [{value: "Chocolate"}, {value: "Skimmed Milk"}, {value: "Eggs"}, , {value: "Farine"}] - const ustensils = [{value: "Bol"}, {value: "Fouet"}, {value: "Casserole"}] - const steps = [{value: "Chauffer chocolat"}, - {value: "1. Casser oeuf"}, - {value: "2. Melanger la farine, le lait et les oeufs"}, - {value: "3. Battre fort"}, - {value: "4. Voler la montre de Louison"}, - {value: "5. Melanger avec le chocolat"}, - {value: "6. Mettre au four"}, -] + // const all = [{value: "Mussels"}, {value: "Skimmed Milk"}, {value: "Nuts"}] + // const die = [{value: "Dairy free"}, {value: "Gluten free"}, {value: "Porkless"}, {value: "Vegan"}, {value: "Vegetarian"}, {value: "Pescatarian"}] + // const ingredient = [{value: "Chocolate"}, {value: "Skimmed Milk"}, {value: "Eggs"}, , {value: "Farine"}] + // const ustensils = [{value: "Bol"}, {value: "Fouet"}, {value: "Casserole"}] + // const steps = [{value: "Chauffer chocolat"}, + // {value: "1. Casser oeuf"}, + // {value: "2. Melanger la farine, le lait et les oeufs"}, + // {value: "3. Battre fort"}, + // {value: "4. Voler la montre de Louison"}, + // {value: "5. Melanger avec le chocolat"}, + // {value: "6. Mettre au four"}, + // ] - function generateList() { - const list = []; - list.push("Meat"); - list.push("Meat"); - list.push("Meat"); - list.push("Meat"); - list.push("Teat"); - list.push("Meat"); - list.push("Meat"); - list.push("Meat"); - return list; -} + // function generateList() { + // const list = []; + // list.push("Meat"); + // list.push("Meat"); + // list.push("Meat"); + // list.push("Meat"); + // list.push("Teat"); + // list.push("Meat"); + // list.push("Meat"); + // list.push("Meat"); + // return list; + // } -const ingredients = generateList(); + // const ingredients = generateList(); return ( - - - + + + + // /**/ diff --git a/LeftOvers/components/ValidateButton.tsx b/LeftOvers/components/ValidateButton.tsx index 1ad4d82..5c91946 100644 --- a/LeftOvers/components/ValidateButton.tsx +++ b/LeftOvers/components/ValidateButton.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import {StyleSheet, Pressable, Text, View, Image} from 'react-native'; +import {StyleSheet, Pressable, Text, View, Image, GestureResponderEvent} from 'react-native'; type ValidateButtonProps = { @@ -7,14 +7,18 @@ type ValidateButtonProps = { image: string colour: string backColour: string + todo: (event: GestureResponderEvent) => void } export default function ValidateButton(props: ValidateButtonProps) { return ( - + + ( + + + + ), + headerTitle: () => ( + + LeftOvers + + ), + headerRight: () => ( + + ), + headerTitleAlign: 'center' + }} + /> + + + ) +} + +const styles = StyleSheet.create({ + headerBarContainer: { + flexDirection: 'row', + width: "100%", + alignItems: 'center', + justifyContent: 'center', + backgroundColor: '#F2F0E4', + padding: 5, + }, + headerTitle: { + fontSize: 20, + fontWeight: "bold", + color: '#3F3C42', + textAlign: "center", + textAlignVertical: 'center', + flex: 0.8, + }, + headerAppIcon: { + width: 35, + height: 35 + }, + headerAppIconContainer: { + + } +}) \ No newline at end of file diff --git a/LeftOvers/navigation/ProfileStackScreen.tsx b/LeftOvers/navigation/ProfileStackScreen.tsx new file mode 100644 index 0000000..48c6987 --- /dev/null +++ b/LeftOvers/navigation/ProfileStackScreen.tsx @@ -0,0 +1,44 @@ +import React from 'react' +import { View, Image, Text, StyleSheet } from 'react-native' +import { createNativeStackNavigator } from '@react-navigation/native-stack'; + +import Profiles from '../screens/Profiles'; + +const ProfilesStack = createNativeStackNavigator() + +export default function ProfilesStackScreen() { + return ( + + + + ) +} + +const styles = StyleSheet.create({ + headerBarContainer: { + flexDirection: 'row', + width: "100%", + alignItems: 'center', + justifyContent: 'center', + backgroundColor: '#F2F0E4', + padding: 5, + }, + headerTitle: { + fontSize: 20, + fontWeight: "bold", + color: '#3F3C42', + textAlign: "center", + textAlignVertical: 'center', + flex: 0.8, + }, + headerAppIcon: { + width: 35, + height: 35 + }, + headerAppIconContainer: { + + } +}) \ No newline at end of file diff --git a/LeftOvers/navigation/place_holder b/LeftOvers/navigation/place_holder deleted file mode 100644 index e69de29..0000000 diff --git a/LeftOvers/package-lock.json b/LeftOvers/package-lock.json index cf2bb40..52c1a1d 100644 --- a/LeftOvers/package-lock.json +++ b/LeftOvers/package-lock.json @@ -9,6 +9,7 @@ "version": "1.0.0", "dependencies": { "@expo/webpack-config": "^19.0.0", + "@react-navigation/bottom-tabs": "^6.5.11", "@react-navigation/native": "^6.1.9", "@react-navigation/native-stack": "^6.9.17", "@types/react": "~18.2.14", @@ -5960,6 +5961,51 @@ "react-native": "*" } }, + "node_modules/@react-navigation/bottom-tabs": { + "version": "6.5.11", + "resolved": "https://registry.npmjs.org/@react-navigation/bottom-tabs/-/bottom-tabs-6.5.11.tgz", + "integrity": "sha512-CBN/NOdxnMvmjw+AJQI1kltOYaClTZmGec5pQ3ZNTPX86ytbIOylDIITKMfTgHZcIEFQDymx1SHeS++PIL3Szw==", + "dependencies": { + "@react-navigation/elements": "^1.3.21", + "color": "^4.2.3", + "warn-once": "^0.1.0" + }, + "peerDependencies": { + "@react-navigation/native": "^6.0.0", + "react": "*", + "react-native": "*", + "react-native-safe-area-context": ">= 3.0.0", + "react-native-screens": ">= 3.0.0" + } + }, + "node_modules/@react-navigation/bottom-tabs/node_modules/color": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz", + "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==", + "dependencies": { + "color-convert": "^2.0.1", + "color-string": "^1.9.0" + }, + "engines": { + "node": ">=12.5.0" + } + }, + "node_modules/@react-navigation/bottom-tabs/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/@react-navigation/bottom-tabs/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" + }, "node_modules/@react-navigation/core": { "version": "6.4.10", "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-6.4.10.tgz", @@ -21816,6 +21862,40 @@ "nullthrows": "^1.1.1" } }, + "@react-navigation/bottom-tabs": { + "version": "6.5.11", + "resolved": "https://registry.npmjs.org/@react-navigation/bottom-tabs/-/bottom-tabs-6.5.11.tgz", + "integrity": "sha512-CBN/NOdxnMvmjw+AJQI1kltOYaClTZmGec5pQ3ZNTPX86ytbIOylDIITKMfTgHZcIEFQDymx1SHeS++PIL3Szw==", + "requires": { + "@react-navigation/elements": "^1.3.21", + "color": "^4.2.3", + "warn-once": "^0.1.0" + }, + "dependencies": { + "color": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz", + "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==", + "requires": { + "color-convert": "^2.0.1", + "color-string": "^1.9.0" + } + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" + } + } + }, "@react-navigation/core": { "version": "6.4.10", "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-6.4.10.tgz", diff --git a/LeftOvers/package.json b/LeftOvers/package.json index b5b9b78..9d8e5ed 100644 --- a/LeftOvers/package.json +++ b/LeftOvers/package.json @@ -10,6 +10,7 @@ }, "dependencies": { "@expo/webpack-config": "^19.0.0", + "@react-navigation/bottom-tabs": "^6.5.11", "@react-navigation/native": "^6.1.9", "@react-navigation/native-stack": "^6.9.17", "@types/react": "~18.2.14", diff --git a/LeftOvers/screens/HomePage.tsx b/LeftOvers/screens/HomePage.tsx index dcf7ce7..b1bc1f5 100644 --- a/LeftOvers/screens/HomePage.tsx +++ b/LeftOvers/screens/HomePage.tsx @@ -12,7 +12,7 @@ import {SafeAreaProvider} from 'react-native-safe-area-context'; import bracketLeft from '../assets/images/angle_bracket_left.png'; import bracketRight from '../assets/images/angle_bracket_right.png'; -export default function HomePage(props) { +export default function HomePage(props, { navigation }) { const profiles = [ {name: "Johnny Silverhand", avatar: "plus_small.png", isActive: "flex"}, {name: "Panam Palmer", avatar: "plus_small.png", isActive: "none"}, @@ -69,7 +69,7 @@ export default function HomePage(props) { - + navigation.navigate('Profiles')}/> @@ -190,7 +190,6 @@ const styles = StyleSheet.create({ marginHorizontal: 10, padding: 5 }, - appName: { fontSize: 20, fontWeight: "bold", diff --git a/LeftOvers/screens/Profiles.tsx b/LeftOvers/screens/Profiles.tsx index 0f2e83e..cedf8bf 100644 --- a/LeftOvers/screens/Profiles.tsx +++ b/LeftOvers/screens/Profiles.tsx @@ -6,7 +6,7 @@ import TopBar from '../components/TopBar'; import {LinearGradient} from 'expo-linear-gradient'; import {SafeAreaProvider} from 'react-native-safe-area-context'; -export default function ModifyProfile(props) { +export default function Profiles(props) { const allJohnny = [{value: "Coconut"}, {value: "Skimmed Milk"}, {value: "Nuts"}] const dieJohnny = [{value: "Gluten free"}, {value: "Porkless"}, {value: "Pescatarian"}] From 983555ba204559f937877333995ef0583ff180c5 Mon Sep 17 00:00:00 2001 From: Remi REGNAULT Date: Tue, 21 Nov 2023 11:15:30 +0100 Subject: [PATCH 03/27] navigation: Home -> Profiles using manage button is working --- LeftOvers/navigation/CookingStackScreen.tsx | 0 LeftOvers/screens/HomePage.tsx | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) create mode 100644 LeftOvers/navigation/CookingStackScreen.tsx diff --git a/LeftOvers/navigation/CookingStackScreen.tsx b/LeftOvers/navigation/CookingStackScreen.tsx new file mode 100644 index 0000000..e69de29 diff --git a/LeftOvers/screens/HomePage.tsx b/LeftOvers/screens/HomePage.tsx index b1bc1f5..e35d220 100644 --- a/LeftOvers/screens/HomePage.tsx +++ b/LeftOvers/screens/HomePage.tsx @@ -12,7 +12,7 @@ import {SafeAreaProvider} from 'react-native-safe-area-context'; import bracketLeft from '../assets/images/angle_bracket_left.png'; import bracketRight from '../assets/images/angle_bracket_right.png'; -export default function HomePage(props, { navigation }) { +export default function HomePage({ navigation , props}) { const profiles = [ {name: "Johnny Silverhand", avatar: "plus_small.png", isActive: "flex"}, {name: "Panam Palmer", avatar: "plus_small.png", isActive: "none"}, From 579db32a9201f617f09bb45ea81748f1798e5282 Mon Sep 17 00:00:00 2001 From: Remi REGNAULT Date: Tue, 21 Nov 2023 14:07:34 +0100 Subject: [PATCH 04/27] custom header bar --- LeftOvers/App.tsx | 8 +- LeftOvers/components/TopBar.tsx | 13 ++- LeftOvers/navigation/CookingStackScreen.tsx | 21 ++++ LeftOvers/navigation/HomeStackScreen.tsx | 100 +++++++++++--------- LeftOvers/navigation/ProfileStackScreen.tsx | 16 +++- LeftOvers/screens/HomePage.tsx | 84 ++++++---------- 6 files changed, 129 insertions(+), 113 deletions(-) diff --git a/LeftOvers/App.tsx b/LeftOvers/App.tsx index 4653f54..a1a079d 100644 --- a/LeftOvers/App.tsx +++ b/LeftOvers/App.tsx @@ -11,6 +11,7 @@ import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import HomeStackScreen from './navigation/HomeStackScreen'; import ProfilesStackScreen from './navigation/ProfileStackScreen'; +import CookingStackScreen from './navigation/CookingStackScreen'; const Tab = createBottomTabNavigator(); @@ -45,9 +46,10 @@ export default function App() { return ( - - - + + + + // diff --git a/LeftOvers/components/TopBar.tsx b/LeftOvers/components/TopBar.tsx index 5a7f0c0..ee4bd4d 100644 --- a/LeftOvers/components/TopBar.tsx +++ b/LeftOvers/components/TopBar.tsx @@ -7,20 +7,19 @@ interface TopBarProps{ } export default function TopBar(props) { - const _goBack = () => console.log('Went back'); const _handleSearch = () => console.log('Searching'); const _handleMore = () => console.log('Shown more'); return ( - - {props.isVisible &&( - <> - - + {props.isVisible && ( + <> + + + )} - + ); } \ No newline at end of file diff --git a/LeftOvers/navigation/CookingStackScreen.tsx b/LeftOvers/navigation/CookingStackScreen.tsx index e69de29..836eca3 100644 --- a/LeftOvers/navigation/CookingStackScreen.tsx +++ b/LeftOvers/navigation/CookingStackScreen.tsx @@ -0,0 +1,21 @@ +import React from 'react' +import { StyleSheet } from 'react-native' +import { createNativeStackNavigator } from '@react-navigation/native-stack'; + +import IngredientSelection from '../screens/IngredientSelection'; + +const CookingStack = createNativeStackNavigator() + +export default function CookingStackScreen() { + return ( + + + + ) +} + +const styles = StyleSheet.create({ +}) \ No newline at end of file diff --git a/LeftOvers/navigation/HomeStackScreen.tsx b/LeftOvers/navigation/HomeStackScreen.tsx index fb0a616..4a0e77d 100644 --- a/LeftOvers/navigation/HomeStackScreen.tsx +++ b/LeftOvers/navigation/HomeStackScreen.tsx @@ -8,64 +8,74 @@ import appLogo from '../assets/images/icon.png'; const HomeStack = createNativeStackNavigator() +function AppIcon() { + return ( + + ) +} + +function TextTitle(props) { + return ( + + {props.title} + + ) +} + export default function HomeStackScreen() { - return ( - - ( - - - - ), - headerTitle: () => ( - - LeftOvers - - ), - headerRight: () => ( - - ), - headerTitleAlign: 'center' - }} - /> - - - ) + return ( + + ( + + ), + + headerTitle: () => ( + + ), + headerTitleAlign: 'center', + + headerRight: () => ( + + ), + }} + /> + ( + + ) + }} + /> + + ) } const styles = StyleSheet.create({ headerBarContainer: { - flexDirection: 'row', - width: "100%", - alignItems: 'center', - justifyContent: 'center', backgroundColor: '#F2F0E4', - padding: 5, }, headerTitle: { fontSize: 20, fontWeight: "bold", color: '#3F3C42', - textAlign: "center", - textAlignVertical: 'center', - flex: 0.8, }, headerAppIcon: { width: 35, - height: 35 - }, - headerAppIconContainer: { - + height: 35, + borderRadius: 20, + overflow:'hidden', + marginHorizontal: 10, } }) \ No newline at end of file diff --git a/LeftOvers/navigation/ProfileStackScreen.tsx b/LeftOvers/navigation/ProfileStackScreen.tsx index 48c6987..a268479 100644 --- a/LeftOvers/navigation/ProfileStackScreen.tsx +++ b/LeftOvers/navigation/ProfileStackScreen.tsx @@ -1,18 +1,24 @@ import React from 'react' -import { View, Image, Text, StyleSheet } from 'react-native' +import { View, StyleSheet } from 'react-native' import { createNativeStackNavigator } from '@react-navigation/native-stack'; import Profiles from '../screens/Profiles'; +import TopBar from '../components/TopBar'; const ProfilesStack = createNativeStackNavigator() export default function ProfilesStackScreen() { return ( - + ( + + ) + }} + /> ) } diff --git a/LeftOvers/screens/HomePage.tsx b/LeftOvers/screens/HomePage.tsx index e35d220..c886d86 100644 --- a/LeftOvers/screens/HomePage.tsx +++ b/LeftOvers/screens/HomePage.tsx @@ -42,11 +42,6 @@ export default function HomePage({ navigation , props}) { return ( - - - LeftOvers - - @@ -109,23 +104,22 @@ export default function HomePage({ navigation , props}) { } const styles = StyleSheet.create({ - container: { - height: "100%", - width: "100%", - flex: 1, - backgroundColor: '#3F3C42', - alignItems: 'center', - justifyContent: 'center', - }, - linearGradient: { - height: "100%", - width: "100%", - flex: 1, - padding: 10, - paddingTop: 0, - }, - - filterBar: { + container: { + height: "100%", + width: "100%", + flex: 1, + backgroundColor: '#3F3C42', + alignItems: 'center', + justifyContent: 'center', + }, + linearGradient: { + height: "100%", + width: "100%", + flex: 1, + padding: 10, + paddingTop: 0, + }, + filterBar: { flexDirection: "row", width: 300, paddingTop: 10, @@ -133,8 +127,8 @@ const styles = StyleSheet.create({ alignItems: "flex-end", justifyContent: "center", flex: 0.2, - }, - filters: { + }, + filters: { flex: 0.8, fontSize: 20, color: '#ACA279', @@ -142,14 +136,13 @@ const styles = StyleSheet.create({ padding: 5, paddingLeft: 0, paddingBottom: 0, - }, - nbSelected: { + }, + nbSelected: { fontSize: 11, color: "#3F3C42", textAlign: "right", - }, - - profilesSelection: { + }, + profilesSelection: { flexDirection: 'column', alignItems: 'center', justifyContent: 'center', @@ -157,8 +150,8 @@ const styles = StyleSheet.create({ backgroundColor: '#F2F0E4', paddingTop: 5, marginHorizontal: 10, - }, - welcome: { + }, + welcome: { flexDirection: 'column', alignItems: 'center', justifyContent: 'center', @@ -167,18 +160,18 @@ const styles = StyleSheet.create({ paddingVertical: 10, paddingHorizontal: 25, marginHorizontal: 10, - }, - text: { + }, + text: { fontSize: 20, color: '#ACA279', - }, - name: { + }, + name: { fontSize: 20, fontWeight: "bold", color: '#59BDCD', textAlign: "left", - }, - ingredientSelection: { + }, + ingredientSelection: { flexDirection: 'column', width: "90%", alignItems: 'center', @@ -189,20 +182,5 @@ const styles = StyleSheet.create({ borderColor: "#ACA279", marginHorizontal: 10, padding: 5 - }, - appName: { - fontSize: 20, - fontWeight: "bold", - color: '#3F3C42', - textAlign: "center", - flex: 0.8, - }, - topBar: { - flexDirection: 'row', - width: "100%", - alignItems: 'center', - justifyContent: 'center', - backgroundColor: '#F2F0E4', - padding: 5, - }, + }, }); \ No newline at end of file From 3b6eff8f3bfe60befb5b184a353beced1a9a0708 Mon Sep 17 00:00:00 2001 From: Remi REGNAULT Date: Tue, 21 Nov 2023 15:19:38 +0100 Subject: [PATCH 05/27] add navigation for profile --- LeftOvers/components/ProfileDetails.tsx | 7 +- LeftOvers/components/ProfileModification.tsx | 3 +- LeftOvers/navigation/HomeStackScreen.tsx | 29 ++---- LeftOvers/navigation/ProfileStackScreen.tsx | 103 +++++++++++++------ LeftOvers/navigation/Utils.tsx | 19 ++++ LeftOvers/screens/ModifyProfile.tsx | 1 - LeftOvers/screens/Profiles.tsx | 14 +-- 7 files changed, 110 insertions(+), 66 deletions(-) create mode 100644 LeftOvers/navigation/Utils.tsx diff --git a/LeftOvers/components/ProfileDetails.tsx b/LeftOvers/components/ProfileDetails.tsx index deb63f7..cd0aae5 100644 --- a/LeftOvers/components/ProfileDetails.tsx +++ b/LeftOvers/components/ProfileDetails.tsx @@ -2,6 +2,7 @@ import {React, useState} from 'react'; import {StyleSheet, Text, TextInput, View, Image, Pressable} from 'react-native'; import ValidateButton from './ValidateButton'; import ListWithoutSelect from './ListWithoutSelect'; +import { useNavigation } from '@react-navigation/native'; type ProfileProps = { name: string @@ -9,9 +10,11 @@ type ProfileProps = { diets: list allergies: list onDeleteProfile: () => void + navigation } export default function ProfileDetails(props: ProfileProps) { + const [display, setDisplay] = useState("none") const changeListVisibility = () => { if (display == "none"){ @@ -27,7 +30,9 @@ export default function ProfileDetails(props: ProfileProps) { {props.name} - + props.navigation.navigate('ProfileModification')}> + + diff --git a/LeftOvers/components/ProfileModification.tsx b/LeftOvers/components/ProfileModification.tsx index 7f66760..8188c8d 100644 --- a/LeftOvers/components/ProfileModification.tsx +++ b/LeftOvers/components/ProfileModification.tsx @@ -1,4 +1,5 @@ -import {React, useState} from 'react'; +import React from 'react'; +import { useState } from 'react'; import {StyleSheet, Text, TextInput, View, Image} from 'react-native'; import ValidateButton from './ValidateButton'; import ListSelect from './ListSelect'; diff --git a/LeftOvers/navigation/HomeStackScreen.tsx b/LeftOvers/navigation/HomeStackScreen.tsx index 4a0e77d..f93d07c 100644 --- a/LeftOvers/navigation/HomeStackScreen.tsx +++ b/LeftOvers/navigation/HomeStackScreen.tsx @@ -1,10 +1,11 @@ import React from 'react'; -import { View, Image, Text, StyleSheet } from 'react-native'; +import { Image, Text, StyleSheet } from 'react-native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import HomePage from '../screens/HomePage'; import Profiles from '../screens/Profiles'; -import appLogo from '../assets/images/icon.png'; +import { HeaderTitle } from './Utils'; +import appLogo from '../assets/images/logo.png'; const HomeStack = createNativeStackNavigator() @@ -16,15 +17,6 @@ function AppIcon() { ) } -function TextTitle(props) { - return ( - - {props.title} - - ) -} - export default function HomeStackScreen() { return ( @@ -39,7 +31,7 @@ export default function HomeStackScreen() { ), headerTitle: () => ( - + ), headerTitleAlign: 'center', @@ -54,7 +46,7 @@ export default function HomeStackScreen() { options={{ headerStyle: styles.headerBarContainer, headerTitle: () => ( - + ) }} /> @@ -66,16 +58,9 @@ const styles = StyleSheet.create({ headerBarContainer: { backgroundColor: '#F2F0E4', }, - headerTitle: { - fontSize: 20, - fontWeight: "bold", - color: '#3F3C42', - }, headerAppIcon: { - width: 35, - height: 35, - borderRadius: 20, - overflow:'hidden', + width: 45, + height: 45, marginHorizontal: 10, } }) \ No newline at end of file diff --git a/LeftOvers/navigation/ProfileStackScreen.tsx b/LeftOvers/navigation/ProfileStackScreen.tsx index a268479..1a18c12 100644 --- a/LeftOvers/navigation/ProfileStackScreen.tsx +++ b/LeftOvers/navigation/ProfileStackScreen.tsx @@ -1,50 +1,85 @@ import React from 'react' -import { View, StyleSheet } from 'react-native' +import { StyleSheet, View, Image, Pressable } from 'react-native' import { createNativeStackNavigator } from '@react-navigation/native-stack'; import Profiles from '../screens/Profiles'; -import TopBar from '../components/TopBar'; +import CreateProfile from '../screens/CreateProfile'; +import ModifyProfile from '../screens/ModifyProfile'; + +import { HeaderTitle } from './Utils'; + +import SearchIcon from '../assets/images/search.png'; +import AddIcon from '../assets/images/plus.png' const ProfilesStack = createNativeStackNavigator() -export default function ProfilesStackScreen() { - return ( - - ( - - ) - }} - /> - - ) +export default function ProfilesStackScreen({ navigation }) { + const _handleSearch = () => console.log('Searching'); + const _handleHeaderAdd = () => navigation.navigate('ProfileCreation'); + + return ( + + ( + + ), + headerRight: () => ( + + + + + + + + + ) + }} + /> + ( + + ) + }} + /> + ( + + ) + }} + /> + + ) } const styles = StyleSheet.create({ headerBarContainer: { - flexDirection: 'row', - width: "100%", - alignItems: 'center', - justifyContent: 'center', backgroundColor: '#F2F0E4', - padding: 5, }, - headerTitle: { - fontSize: 20, - fontWeight: "bold", - color: '#3F3C42', - textAlign: "center", - textAlignVertical: 'center', - flex: 0.8, - }, - headerAppIcon: { - width: 35, - height: 35 + headerBarRightContainer: { + display: 'flex', + flexDirection: 'row', + alignContent: 'space-between', + marginHorizontal: 10, }, - headerAppIconContainer: { - + headerBarIcon: { + width: 30, + height: 30, + marginHorizontal: 10 } }) \ No newline at end of file diff --git a/LeftOvers/navigation/Utils.tsx b/LeftOvers/navigation/Utils.tsx new file mode 100644 index 0000000..f0811dc --- /dev/null +++ b/LeftOvers/navigation/Utils.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { Text, StyleSheet } from 'react-native'; + +export function HeaderTitle(props) { + return ( + + {props.title} + + ) +} + +const styles = StyleSheet.create({ + headerTitle: { + fontSize: 20, + fontWeight: "bold", + color: '#3F3C42', + } +}) \ No newline at end of file diff --git a/LeftOvers/screens/ModifyProfile.tsx b/LeftOvers/screens/ModifyProfile.tsx index 1a8b096..b4cf97d 100644 --- a/LeftOvers/screens/ModifyProfile.tsx +++ b/LeftOvers/screens/ModifyProfile.tsx @@ -11,7 +11,6 @@ export default function ModifyProfile(props) { const die = [{value: "Dairy free"}, {value: "Gluten free"}, {value: "Porkless"}, {value: "Vegan"}, {value: "Vegetarian"}, {value: "Pescatarian"}] return ( - diff --git a/LeftOvers/screens/Profiles.tsx b/LeftOvers/screens/Profiles.tsx index cedf8bf..4286cbe 100644 --- a/LeftOvers/screens/Profiles.tsx +++ b/LeftOvers/screens/Profiles.tsx @@ -1,4 +1,5 @@ -import {React, useState} from 'react'; +import React from 'react'; +import { useState } from 'react'; import {StyleSheet, View, Modal, Pressable, Text, Image} from 'react-native'; import ProfileDetails from '../components/ProfileDetails'; import ProfileDelete from '../components/ProfileDelete'; @@ -6,7 +7,7 @@ import TopBar from '../components/TopBar'; import {LinearGradient} from 'expo-linear-gradient'; import {SafeAreaProvider} from 'react-native-safe-area-context'; -export default function Profiles(props) { +export default function Profiles({props, navigation}) { const allJohnny = [{value: "Coconut"}, {value: "Skimmed Milk"}, {value: "Nuts"}] const dieJohnny = [{value: "Gluten free"}, {value: "Porkless"}, {value: "Pescatarian"}] @@ -34,16 +35,15 @@ export default function Profiles(props) { - - + - + - + - + From 908162d016d0431405662a6edd7b1aa0428ed2a6 Mon Sep 17 00:00:00 2001 From: Remi REGNAULT Date: Tue, 21 Nov 2023 15:24:15 +0100 Subject: [PATCH 06/27] profile navigation from home --- LeftOvers/navigation/HomeStackScreen.tsx | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/LeftOvers/navigation/HomeStackScreen.tsx b/LeftOvers/navigation/HomeStackScreen.tsx index f93d07c..5c55f2c 100644 --- a/LeftOvers/navigation/HomeStackScreen.tsx +++ b/LeftOvers/navigation/HomeStackScreen.tsx @@ -6,6 +6,8 @@ import HomePage from '../screens/HomePage'; import Profiles from '../screens/Profiles'; import { HeaderTitle } from './Utils'; import appLogo from '../assets/images/logo.png'; +import CreateProfile from '../screens/CreateProfile'; +import ModifyProfile from '../screens/ModifyProfile'; const HomeStack = createNativeStackNavigator() @@ -50,6 +52,16 @@ export default function HomeStackScreen() { ) }} /> + ( + + ) + }} + /> ) } From 49790445e152c774ed9a2559afae18bbf384f04d Mon Sep 17 00:00:00 2001 From: Remi REGNAULT Date: Tue, 21 Nov 2023 15:37:29 +0100 Subject: [PATCH 07/27] fix: some error message on ValidateButton props todo is not assigned --- LeftOvers/components/ValidateButton.tsx | 37 +++++++++++++------------ LeftOvers/screens/HomePage.tsx | 17 ++++++------ 2 files changed, 29 insertions(+), 25 deletions(-) diff --git a/LeftOvers/components/ValidateButton.tsx b/LeftOvers/components/ValidateButton.tsx index 5c91946..a075fc4 100644 --- a/LeftOvers/components/ValidateButton.tsx +++ b/LeftOvers/components/ValidateButton.tsx @@ -19,23 +19,26 @@ export default function ValidateButton(props: ValidateButtonProps) { borderRadius: 20, }} onPress={props.todo}> - - + + Ingredient Stocks - + console.log('ManageStocks')}/> @@ -93,9 +94,9 @@ export default function HomePage({ navigation , props}) { - + console.log('Chnge Selected Ingredient')}/> - + console.log('Go and search for recipe')}/> From d0ace4f2558292b5730787067728d8d03e22af13 Mon Sep 17 00:00:00 2001 From: Remi REGNAULT Date: Wed, 22 Nov 2023 10:49:54 +0100 Subject: [PATCH 08/27] feat add style to bottom bar --- LeftOvers/App.tsx | 166 ++++++++++++-------- LeftOvers/assets/images/home.png | Bin 0 -> 9167 bytes LeftOvers/assets/images/person_icon.png | Bin 0 -> 12737 bytes LeftOvers/navigation/CookingStackScreen.tsx | 22 ++- LeftOvers/package-lock.json | 15 ++ LeftOvers/package.json | 1 + 6 files changed, 136 insertions(+), 68 deletions(-) create mode 100644 LeftOvers/assets/images/home.png create mode 100644 LeftOvers/assets/images/person_icon.png diff --git a/LeftOvers/App.tsx b/LeftOvers/App.tsx index a1a079d..b33d099 100644 --- a/LeftOvers/App.tsx +++ b/LeftOvers/App.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import {StyleSheet, View, Image, Text } from 'react-native'; +import {StyleSheet, View, Image, Text, Pressable } from 'react-native'; import ProfileModification from './components/ProfileModification'; import ValidateButton from './components/ValidateButton'; import { LinearGradient } from 'expo-linear-gradient'; @@ -8,77 +8,119 @@ import RecipeDetails from './screens/RecipeDetails'; import IngredientSelection from './screens/IngredientSelection'; import { NavigationContainer } from '@react-navigation/native'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; +import { BlurView } from 'expo-blur'; import HomeStackScreen from './navigation/HomeStackScreen'; import ProfilesStackScreen from './navigation/ProfileStackScreen'; import CookingStackScreen from './navigation/CookingStackScreen'; +import HomeIcon from './assets/images/home.png'; +import ProfileIcon from './assets/images/person_icon.png'; +import CookingIcon from './assets/images/cook.png'; + const Tab = createBottomTabNavigator(); export default function App() { - // const all = [{value: "Mussels"}, {value: "Skimmed Milk"}, {value: "Nuts"}] - // const die = [{value: "Dairy free"}, {value: "Gluten free"}, {value: "Porkless"}, {value: "Vegan"}, {value: "Vegetarian"}, {value: "Pescatarian"}] - // const ingredient = [{value: "Chocolate"}, {value: "Skimmed Milk"}, {value: "Eggs"}, , {value: "Farine"}] - // const ustensils = [{value: "Bol"}, {value: "Fouet"}, {value: "Casserole"}] - // const steps = [{value: "Chauffer chocolat"}, - // {value: "1. Casser oeuf"}, - // {value: "2. Melanger la farine, le lait et les oeufs"}, - // {value: "3. Battre fort"}, - // {value: "4. Voler la montre de Louison"}, - // {value: "5. Melanger avec le chocolat"}, - // {value: "6. Mettre au four"}, - // ] - - // function generateList() { - // const list = []; - // list.push("Meat"); - // list.push("Meat"); - // list.push("Meat"); - // list.push("Meat"); - // list.push("Teat"); - // list.push("Meat"); - // list.push("Meat"); - // list.push("Meat"); - // return list; - // } + // const all = [{value: "Mussels"}, {value: "Skimmed Milk"}, {value: "Nuts"}] + // const die = [{value: "Dairy free"}, {value: "Gluten free"}, {value: "Porkless"}, {value: "Vegan"}, {value: "Vegetarian"}, {value: "Pescatarian"}] + // const ingredient = [{value: "Chocolate"}, {value: "Skimmed Milk"}, {value: "Eggs"}, , {value: "Farine"}] + // const ustensils = [{value: "Bol"}, {value: "Fouet"}, {value: "Casserole"}] + // const steps = [{value: "Chauffer chocolat"}, + // {value: "1. Casser oeuf"}, + // {value: "2. Melanger la farine, le lait et les oeufs"}, + // {value: "3. Battre fort"}, + // {value: "4. Voler la montre de Louison"}, + // {value: "5. Melanger avec le chocolat"}, + // {value: "6. Mettre au four"}, + // ] + + // function generateList() { + // const list = []; + // list.push("Meat"); + // list.push("Meat"); + // list.push("Meat"); + // list.push("Meat"); + // list.push("Teat"); + // list.push("Meat"); + // list.push("Meat"); + // list.push("Meat"); + // return list; + // } + + return ( + + ({ + tabBarIcon: ({ focused }) => { + let icon; + + if (route.name === 'Home') { + icon = HomeIcon; + } else if (route.name === 'Profile') { + icon = ProfileIcon; + } else if (route.name === 'Cooking') { + icon = CookingIcon; + } - // const ingredients = generateList(); - - return ( - - - - - - - - // - /**/ - /**/ - ); + // You can return any component that you like here! + return ; + }, + tabBarActiveTintColor: '#59BDCD', + tabBarInactiveTintColor: '#F2F0E4', + headerShown: false, + tabBarStyle: {position: 'absolute', height: 70}, + tabBarBackground: () => ( + + ), + tabBarItemStyle: {marginVertical: 5}, + tabBarLabelStyle: {fontSize: 15} + })}> + + + + + + + // + /**/ + /**/ + ); } const styles = StyleSheet.create({ - container: { - flex: 1, - backgroundColor: '#3F3C42', - alignItems: 'center', - justifyContent: 'center', - }, - linearGradient: { - //height: 844, - //width: 390, - flex: 1, - padding: 10, - paddingTop: 0, - //backgroundColor: "#59BDCD", - //alignItems: 'center', - //justifyContent: 'flex-start', - }, + container: { + flex: 1, + backgroundColor: '#3F3C42', + alignItems: 'center', + justifyContent: 'center', + }, + linearGradient: { + //height: 844, + //width: 390, + flex: 1, + padding: 10, + paddingTop: 0, + //backgroundColor: "#59BDCD", + //alignItems: 'center', + //justifyContent: 'flex-start', + }, }); \ No newline at end of file diff --git a/LeftOvers/assets/images/home.png b/LeftOvers/assets/images/home.png new file mode 100644 index 0000000000000000000000000000000000000000..4c1f9c7a6682451d3949c539480e2f7550c5eedf GIT binary patch literal 9167 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 literal 0 HcmV?d00001 diff --git a/LeftOvers/navigation/CookingStackScreen.tsx b/LeftOvers/navigation/CookingStackScreen.tsx index 836eca3..e974f41 100644 --- a/LeftOvers/navigation/CookingStackScreen.tsx +++ b/LeftOvers/navigation/CookingStackScreen.tsx @@ -3,19 +3,29 @@ import { StyleSheet } from 'react-native' import { createNativeStackNavigator } from '@react-navigation/native-stack'; import IngredientSelection from '../screens/IngredientSelection'; +import { HeaderTitle } from './Utils'; const CookingStack = createNativeStackNavigator() export default function CookingStackScreen() { return ( - - - + + ( + + ) + }} + /> + ) } const styles = StyleSheet.create({ + headerBarContainer: { + backgroundColor: '#F2F0E4', + }, }) \ No newline at end of file diff --git a/LeftOvers/package-lock.json b/LeftOvers/package-lock.json index 52c1a1d..e074240 100644 --- a/LeftOvers/package-lock.json +++ b/LeftOvers/package-lock.json @@ -14,6 +14,7 @@ "@react-navigation/native-stack": "^6.9.17", "@types/react": "~18.2.14", "expo": "~49.0.15", + "expo-blur": "^12.6.0", "expo-linear-gradient": "~12.3.0", "expo-splash-screen": "~0.20.5", "expo-status-bar": "~1.6.0", @@ -9199,6 +9200,14 @@ "url-parse": "^1.5.9" } }, + "node_modules/expo-blur": { + "version": "12.6.0", + "resolved": "https://registry.npmjs.org/expo-blur/-/expo-blur-12.6.0.tgz", + "integrity": "sha512-yrZYu4mQX4ZJtSrjNVMuB9kCMB8Xerk5Zn5iES6ojmGAk+yxJ/jdyhaUVqbpaA8LBmspdKgQz2dW8+9wa8dSAg==", + "peerDependencies": { + "expo": "*" + } + }, "node_modules/expo-constants": { "version": "14.4.2", "resolved": "https://registry.npmjs.org/expo-constants/-/expo-constants-14.4.2.tgz", @@ -24365,6 +24374,12 @@ "url-parse": "^1.5.9" } }, + "expo-blur": { + "version": "12.6.0", + "resolved": "https://registry.npmjs.org/expo-blur/-/expo-blur-12.6.0.tgz", + "integrity": "sha512-yrZYu4mQX4ZJtSrjNVMuB9kCMB8Xerk5Zn5iES6ojmGAk+yxJ/jdyhaUVqbpaA8LBmspdKgQz2dW8+9wa8dSAg==", + "requires": {} + }, "expo-constants": { "version": "14.4.2", "resolved": "https://registry.npmjs.org/expo-constants/-/expo-constants-14.4.2.tgz", diff --git a/LeftOvers/package.json b/LeftOvers/package.json index 9d8e5ed..a671046 100644 --- a/LeftOvers/package.json +++ b/LeftOvers/package.json @@ -15,6 +15,7 @@ "@react-navigation/native-stack": "^6.9.17", "@types/react": "~18.2.14", "expo": "~49.0.15", + "expo-blur": "^12.6.0", "expo-linear-gradient": "~12.3.0", "expo-splash-screen": "~0.20.5", "expo-status-bar": "~1.6.0", From 1b06f401cc495fb999d123ce18280c4d127e7092 Mon Sep 17 00:00:00 2001 From: Remi REGNAULT Date: Wed, 22 Nov 2023 15:33:36 +0100 Subject: [PATCH 09/27] modify bottom bar to be able to add theme button --- LeftOvers/App.tsx | 112 ++--------------------- LeftOvers/navigation/BottomBar.tsx | 142 +++++++++++++++++++++++++++++ 2 files changed, 150 insertions(+), 104 deletions(-) create mode 100644 LeftOvers/navigation/BottomBar.tsx diff --git a/LeftOvers/App.tsx b/LeftOvers/App.tsx index b33d099..2e84e61 100644 --- a/LeftOvers/App.tsx +++ b/LeftOvers/App.tsx @@ -1,11 +1,5 @@ import React from 'react'; -import {StyleSheet, View, Image, Text, Pressable } from 'react-native'; -import ProfileModification from './components/ProfileModification'; -import ValidateButton from './components/ValidateButton'; -import { LinearGradient } from 'expo-linear-gradient'; -import RecipeSuggestion from './screens/RecipeSuggestion'; -import RecipeDetails from './screens/RecipeDetails'; -import IngredientSelection from './screens/IngredientSelection'; +import { StyleSheet, Image } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { BlurView } from 'expo-blur'; @@ -13,114 +7,24 @@ import { BlurView } from 'expo-blur'; import HomeStackScreen from './navigation/HomeStackScreen'; import ProfilesStackScreen from './navigation/ProfileStackScreen'; import CookingStackScreen from './navigation/CookingStackScreen'; +import BottomBar from './navigation/BottomBar'; import HomeIcon from './assets/images/home.png'; import ProfileIcon from './assets/images/person_icon.png'; import CookingIcon from './assets/images/cook.png'; + const Tab = createBottomTabNavigator(); export default function App() { - // const all = [{value: "Mussels"}, {value: "Skimmed Milk"}, {value: "Nuts"}] - // const die = [{value: "Dairy free"}, {value: "Gluten free"}, {value: "Porkless"}, {value: "Vegan"}, {value: "Vegetarian"}, {value: "Pescatarian"}] - // const ingredient = [{value: "Chocolate"}, {value: "Skimmed Milk"}, {value: "Eggs"}, , {value: "Farine"}] - // const ustensils = [{value: "Bol"}, {value: "Fouet"}, {value: "Casserole"}] - // const steps = [{value: "Chauffer chocolat"}, - // {value: "1. Casser oeuf"}, - // {value: "2. Melanger la farine, le lait et les oeufs"}, - // {value: "3. Battre fort"}, - // {value: "4. Voler la montre de Louison"}, - // {value: "5. Melanger avec le chocolat"}, - // {value: "6. Mettre au four"}, - // ] - - // function generateList() { - // const list = []; - // list.push("Meat"); - // list.push("Meat"); - // list.push("Meat"); - // list.push("Meat"); - // list.push("Teat"); - // list.push("Meat"); - // list.push("Meat"); - // list.push("Meat"); - // return list; - // } return ( - ({ - tabBarIcon: ({ focused }) => { - let icon; - - if (route.name === 'Home') { - icon = HomeIcon; - } else if (route.name === 'Profile') { - icon = ProfileIcon; - } else if (route.name === 'Cooking') { - icon = CookingIcon; - } - - // You can return any component that you like here! - return ; - }, - tabBarActiveTintColor: '#59BDCD', - tabBarInactiveTintColor: '#F2F0E4', - headerShown: false, - tabBarStyle: {position: 'absolute', height: 70}, - tabBarBackground: () => ( - - ), - tabBarItemStyle: {marginVertical: 5}, - tabBarLabelStyle: {fontSize: 15} - })}> - - - + }> + + + - - // - /**/ - /**/ ); -} - -const styles = StyleSheet.create({ - container: { - flex: 1, - backgroundColor: '#3F3C42', - alignItems: 'center', - justifyContent: 'center', - }, - linearGradient: { - //height: 844, - //width: 390, - flex: 1, - padding: 10, - paddingTop: 0, - //backgroundColor: "#59BDCD", - //alignItems: 'center', - //justifyContent: 'flex-start', - }, -}); \ No newline at end of file +} \ No newline at end of file diff --git a/LeftOvers/navigation/BottomBar.tsx b/LeftOvers/navigation/BottomBar.tsx new file mode 100644 index 0000000..ce666a8 --- /dev/null +++ b/LeftOvers/navigation/BottomBar.tsx @@ -0,0 +1,142 @@ +import React, { useEffect, useState } from 'react'; +import { View, Text, TouchableOpacity, Image, Pressable } from 'react-native'; +import { GestureResponderEvent, StyleSheet } from 'react-native'; +import {Appearance } from 'react-native'; +import type { AppearancePreferences, ColorSchemeName } from 'react-native/Libraries/Utilities/NativeAppearance'; +import { BlurView } from 'expo-blur'; + +import HomeIcon from '../assets/images/home.png'; +import ProfileIcon from '../assets/images/person_icon.png'; +import CookingIcon from '../assets/images/cook.png'; +import LightIcon from '../assets/images/update.png'; +import DarkIcon from '../assets/images/validate.png'; + +export default function BottomBar({ state, descriptors, navigation }) { + const [colorScheme, setScheme] = useState( + Appearance.getColorScheme(), + ); + const [iconThemeButton, setThemeIconButton] = useState(( colorScheme === 'dark' ) ? LightIcon : DarkIcon) + const [textThemeButton, setTextThemeButton] = useState(( colorScheme === 'dark' ) ? 'Light' : 'Dark'); + + + + useEffect(() => { + const subscription = Appearance.addChangeListener( + (preferences: AppearancePreferences) => { + const {colorScheme: scheme} = preferences; + setScheme(scheme); + }, + ); + + return () => subscription?.remove(); + }, [setScheme]); + + const onThemeButtonPress = (event: GestureResponderEvent) => { + if (textThemeButton === "Light") { + setThemeIconButton(ProfileIcon); + setTextThemeButton("Dark"); + //Appearance.setColorScheme('light') + } else { + setThemeIconButton(HomeIcon); + setTextThemeButton("Light"); + //Appearance.setColorScheme('dark') + } + console.log('TextThemeButton is now: ' + textThemeButton); + } + + return ( + + + {state.routes.map((route, index) => { + const { options } = descriptors[route.key]; + const label = + options.tabBarLabel !== undefined + ? options.tabBarLabel + : options.title !== undefined + ? options.title + : route.name; + + let icon; + if (route.name === 'Home') { + icon = HomeIcon; + } else if (route.name === 'Profile') { + icon = ProfileIcon; + } else if (route.name === 'Cooking') { + icon = CookingIcon; + } + + const isFocused = state.index === index; + + const onPress = () => { + const event = navigation.emit({ + type: 'tabPress', + target: route.key, + canPreventDefault: true, + }); + + if (!isFocused && !event.defaultPrevented) { + navigation.navigate(route.name, route.params); + } + }; + + return ( + + + + {label} + + + ); + })} + + + + {textThemeButton} + + + + + ); +} + +const styles = StyleSheet.create({ + BottomBarMainContainer: { + position: 'absolute', + bottom: 0, + right: 0, + left: 0, + height: 70 + }, + BottomBarBlurContainer: { + flexDirection: 'row', + alignItems: 'center', + alignContent: 'space-around', + padding: 2, + borderBlockColor: '#F2F0E4', + borderWidth: 3, + borderLeftColor: '#F2F0E4', + borderLeftWidth: 3, + borderRightColor: '#F2F0E4', + borderRightWidth: 3 + }, + BottomBarIcon: { + width: 35, + height: 35 + }, + BottomBarElementContainer: { + flexDirection: 'column', + alignItems: 'center', + margin: 3 + } +}) \ No newline at end of file From b46f72d98411c76d79d4f3a11e8a6a56ee938e54 Mon Sep 17 00:00:00 2001 From: Remi REGNAULT Date: Wed, 22 Nov 2023 15:34:03 +0100 Subject: [PATCH 10/27] modify bottom bar to be able to add theme button --- LeftOvers/navigation/BottomBar.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/LeftOvers/navigation/BottomBar.tsx b/LeftOvers/navigation/BottomBar.tsx index ce666a8..67be5f2 100644 --- a/LeftOvers/navigation/BottomBar.tsx +++ b/LeftOvers/navigation/BottomBar.tsx @@ -18,8 +18,6 @@ export default function BottomBar({ state, descriptors, navigation }) { const [iconThemeButton, setThemeIconButton] = useState(( colorScheme === 'dark' ) ? LightIcon : DarkIcon) const [textThemeButton, setTextThemeButton] = useState(( colorScheme === 'dark' ) ? 'Light' : 'Dark'); - - useEffect(() => { const subscription = Appearance.addChangeListener( (preferences: AppearancePreferences) => { From f24803afaeb22931085c8146190057cd53632219 Mon Sep 17 00:00:00 2001 From: Remi REGNAULT Date: Wed, 22 Nov 2023 16:15:07 +0100 Subject: [PATCH 11/27] feat : add theme context for dark and light mode --- LeftOvers/App.tsx | 17 ++--- LeftOvers/navigation/BottomBar.tsx | 99 +++++++++++++----------------- LeftOvers/package-lock.json | 54 ++++++++++++++++ LeftOvers/package.json | 1 + LeftOvers/theme/ThemeContext.tsx | 42 +++++++++++++ 5 files changed, 151 insertions(+), 62 deletions(-) create mode 100644 LeftOvers/theme/ThemeContext.tsx diff --git a/LeftOvers/App.tsx b/LeftOvers/App.tsx index 2e84e61..0a3b7a1 100644 --- a/LeftOvers/App.tsx +++ b/LeftOvers/App.tsx @@ -8,6 +8,7 @@ import HomeStackScreen from './navigation/HomeStackScreen'; import ProfilesStackScreen from './navigation/ProfileStackScreen'; import CookingStackScreen from './navigation/CookingStackScreen'; import BottomBar from './navigation/BottomBar'; +import { ThemeProvider } from './theme/ThemeContext'; import HomeIcon from './assets/images/home.png'; import ProfileIcon from './assets/images/person_icon.png'; @@ -19,12 +20,14 @@ const Tab = createBottomTabNavigator(); export default function App() { return ( - - }> - - - - - + + + }> + + + + + + ); } \ No newline at end of file diff --git a/LeftOvers/navigation/BottomBar.tsx b/LeftOvers/navigation/BottomBar.tsx index 67be5f2..4f49f36 100644 --- a/LeftOvers/navigation/BottomBar.tsx +++ b/LeftOvers/navigation/BottomBar.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import React, { useContext, useEffect, useState } from 'react'; import { View, Text, TouchableOpacity, Image, Pressable } from 'react-native'; import { GestureResponderEvent, StyleSheet } from 'react-native'; import {Appearance } from 'react-native'; @@ -10,44 +10,64 @@ import ProfileIcon from '../assets/images/person_icon.png'; import CookingIcon from '../assets/images/cook.png'; import LightIcon from '../assets/images/update.png'; import DarkIcon from '../assets/images/validate.png'; +import ThemeContext from '../theme/ThemeContext'; export default function BottomBar({ state, descriptors, navigation }) { - const [colorScheme, setScheme] = useState( - Appearance.getColorScheme(), - ); - const [iconThemeButton, setThemeIconButton] = useState(( colorScheme === 'dark' ) ? LightIcon : DarkIcon) - const [textThemeButton, setTextThemeButton] = useState(( colorScheme === 'dark' ) ? 'Light' : 'Dark'); - - useEffect(() => { - const subscription = Appearance.addChangeListener( - (preferences: AppearancePreferences) => { - const {colorScheme: scheme} = preferences; - setScheme(scheme); - }, - ); - - return () => subscription?.remove(); - }, [setScheme]); + const {theme, toggleTheme} = useContext(ThemeContext) + const [iconThemeButton, setThemeIconButton] = useState(( theme === 'dark' ) ? LightIcon : DarkIcon) + const [textThemeButton, setTextThemeButton] = useState(( theme === 'dark' ) ? 'Light' : 'Dark'); const onThemeButtonPress = (event: GestureResponderEvent) => { if (textThemeButton === "Light") { - setThemeIconButton(ProfileIcon); + setThemeIconButton(DarkIcon); setTextThemeButton("Dark"); - //Appearance.setColorScheme('light') + toggleTheme('light'); } else { - setThemeIconButton(HomeIcon); + setThemeIconButton(LightIcon); setTextThemeButton("Light"); - //Appearance.setColorScheme('dark') + toggleTheme('dark') } console.log('TextThemeButton is now: ' + textThemeButton); } + const styles = StyleSheet.create({ + BottomBarMainContainer: { + position: 'absolute', + bottom: 0, + right: 0, + left: 0, + height: 70, + backgroundColor: theme === 'dark' ? "#3F3C42": "transparent" + }, + BottomBarBlurContainer: { + flexDirection: 'row', + alignItems: 'center', + alignContent: 'space-around', + padding: 2, + borderBlockColor: theme === 'light' ? '#F2F0E4' : '#222222', + borderWidth: 3, + borderLeftColor: theme === 'light'? '#F2F0E4' : '#222222', + borderLeftWidth: 3, + borderRightColor: theme === 'light'? '#F2F0E4' : '#222222', + borderRightWidth: 3 + }, + BottomBarIcon: { + width: 35, + height: 35 + }, + BottomBarElementContainer: { + flexDirection: 'column', + alignItems: 'center', + margin: 3 + } + }) + return ( {state.routes.map((route, index) => { const { options } = descriptors[route.key]; @@ -90,7 +110,7 @@ export default function BottomBar({ state, descriptors, navigation }) { onPress={onPress} style={[styles.BottomBarElementContainer, { flex: 1 }]} > - + {label} @@ -106,35 +126,4 @@ export default function BottomBar({ state, descriptors, navigation }) { ); -} - -const styles = StyleSheet.create({ - BottomBarMainContainer: { - position: 'absolute', - bottom: 0, - right: 0, - left: 0, - height: 70 - }, - BottomBarBlurContainer: { - flexDirection: 'row', - alignItems: 'center', - alignContent: 'space-around', - padding: 2, - borderBlockColor: '#F2F0E4', - borderWidth: 3, - borderLeftColor: '#F2F0E4', - borderLeftWidth: 3, - borderRightColor: '#F2F0E4', - borderRightWidth: 3 - }, - BottomBarIcon: { - width: 35, - height: 35 - }, - BottomBarElementContainer: { - flexDirection: 'column', - alignItems: 'center', - margin: 3 - } -}) \ No newline at end of file +} \ No newline at end of file diff --git a/LeftOvers/package-lock.json b/LeftOvers/package-lock.json index e074240..6e908f5 100644 --- a/LeftOvers/package-lock.json +++ b/LeftOvers/package-lock.json @@ -9,6 +9,7 @@ "version": "1.0.0", "dependencies": { "@expo/webpack-config": "^19.0.0", + "@react-native-async-storage/async-storage": "^1.19.7", "@react-navigation/bottom-tabs": "^6.5.11", "@react-navigation/native": "^6.1.9", "@react-navigation/native-stack": "^6.9.17", @@ -3942,6 +3943,17 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/@react-native-async-storage/async-storage": { + "version": "1.19.7", + "resolved": "https://registry.npmjs.org/@react-native-async-storage/async-storage/-/async-storage-1.19.7.tgz", + "integrity": "sha512-zvfhOWWnjzeP4exfgNwDUot7MQafEEJnbjjNsVKWRxRuQT521GLSHUJQHjMTLg19QPT+HbsGjL7rJzKkmXuq7w==", + "dependencies": { + "merge-options": "^3.0.4" + }, + "peerDependencies": { + "react-native": "^0.0.0-0 || >=0.60 <1.0" + } + }, "node_modules/@react-native-community/cli": { "version": "11.3.7", "resolved": "https://registry.npmjs.org/@react-native-community/cli/-/cli-11.3.7.tgz", @@ -12269,6 +12281,25 @@ "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==" }, + "node_modules/merge-options": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/merge-options/-/merge-options-3.0.4.tgz", + "integrity": "sha512-2Sug1+knBjkaMsMgf1ctR1Ujx+Ayku4EdJN4Z+C2+JzoeF7A3OZ9KM2GY0CpQS51NR61LTurMJrRKPhSs3ZRTQ==", + "dependencies": { + "is-plain-obj": "^2.1.0" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/merge-options/node_modules/is-plain-obj": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz", + "integrity": "sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==", + "engines": { + "node": ">=8" + } + }, "node_modules/merge-stream": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", @@ -20455,6 +20486,14 @@ } } }, + "@react-native-async-storage/async-storage": { + "version": "1.19.7", + "resolved": "https://registry.npmjs.org/@react-native-async-storage/async-storage/-/async-storage-1.19.7.tgz", + "integrity": "sha512-zvfhOWWnjzeP4exfgNwDUot7MQafEEJnbjjNsVKWRxRuQT521GLSHUJQHjMTLg19QPT+HbsGjL7rJzKkmXuq7w==", + "requires": { + "merge-options": "^3.0.4" + } + }, "@react-native-community/cli": { "version": "11.3.7", "resolved": "https://registry.npmjs.org/@react-native-community/cli/-/cli-11.3.7.tgz", @@ -26667,6 +26706,21 @@ "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==" }, + "merge-options": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/merge-options/-/merge-options-3.0.4.tgz", + "integrity": "sha512-2Sug1+knBjkaMsMgf1ctR1Ujx+Ayku4EdJN4Z+C2+JzoeF7A3OZ9KM2GY0CpQS51NR61LTurMJrRKPhSs3ZRTQ==", + "requires": { + "is-plain-obj": "^2.1.0" + }, + "dependencies": { + "is-plain-obj": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz", + "integrity": "sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==" + } + } + }, "merge-stream": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", diff --git a/LeftOvers/package.json b/LeftOvers/package.json index a671046..a224bbe 100644 --- a/LeftOvers/package.json +++ b/LeftOvers/package.json @@ -10,6 +10,7 @@ }, "dependencies": { "@expo/webpack-config": "^19.0.0", + "@react-native-async-storage/async-storage": "^1.19.7", "@react-navigation/bottom-tabs": "^6.5.11", "@react-navigation/native": "^6.1.9", "@react-navigation/native-stack": "^6.9.17", diff --git a/LeftOvers/theme/ThemeContext.tsx b/LeftOvers/theme/ThemeContext.tsx new file mode 100644 index 0000000..080fec7 --- /dev/null +++ b/LeftOvers/theme/ThemeContext.tsx @@ -0,0 +1,42 @@ +import React, {createContext, useState, useEffect} from 'react'; +import AsyncStorage from '@react-native-async-storage/async-storage'; + + +interface ThemeContextType { + theme: string, + toggleTheme: (any)=> void +}; + +const ThemeContext = createContext(null); + +export const ThemeProvider = ({children}) => { + const [theme, setTheme] = useState('light'); + + useEffect(() => { + // Load saved theme from storage + const getTheme = async () => { + try { + const savedTheme = await AsyncStorage.getItem('theme'); + if (savedTheme) { + setTheme(savedTheme); + } + } catch (error) { + console.log('Error loading theme:', error); + } + }; + getTheme(); + }, []); + + const toggleTheme = newTheme => { + setTheme(newTheme); + AsyncStorage.setItem('theme', newTheme) + }; + + return ( + + {children} + + ); +}; + +export default ThemeContext; \ No newline at end of file From ffb0ccc81035f4bb28922a4b39900b05bad1e104 Mon Sep 17 00:00:00 2001 From: Remi REGNAULT Date: Wed, 22 Nov 2023 16:22:03 +0100 Subject: [PATCH 12/27] fix: add the correct icons for dark and light theme --- LeftOvers/assets/images/moon.png | Bin 0 -> 14156 bytes LeftOvers/assets/images/sun.png | Bin 0 -> 11172 bytes LeftOvers/navigation/BottomBar.tsx | 11 +++++------ 3 files changed, 5 insertions(+), 6 deletions(-) create mode 100644 LeftOvers/assets/images/moon.png create mode 100644 LeftOvers/assets/images/sun.png diff --git a/LeftOvers/assets/images/moon.png b/LeftOvers/assets/images/moon.png new file mode 100644 index 0000000000000000000000000000000000000000..e3bcf69e6762009bfa7ddd9862683d422c315721 GIT binary patch literal 14156 zcmYj&c|26__xPO|J3|OrvSbUP&AyCenIVxvc4eutPRPEDHY9uYwG2fGWe?p-Nkpaz zAtpi;MvtK>fSIr}-!dCoaE+2*u4noEoef*>>wYhnvQNbp}I#K8uB ztVK|^zz>!XW866o@F#}DD+&D0Nx(XWKoD;?^DiPtg;yLr6b&^!A9^;(Cp7#*us0MQ z9Yd|!M|Ut?|18et8kqx!baXYUO>7mCQbeMD@O zXH;O6YxLqlXY}@S)dZyrpVx<>YW@f)BBD}Xdu`r;bjw&d7fmGDSs|KPn?>Ibz<$L2 zxEHjXev}WY1=Ui!wxNeZ-?*zG4pqC&B)Ag4-g>H6uYxadD{(gV8ka|8xLpzI?t6} zA$c=o6NC30KGJw#z3%{33zk25<))E=CrWxYXm7nDfroH>VPxmV$J={n@zkTX$7mtc zq0!)TN5vr}YjH$kcHFlY$!m;Rk5?PGOzesZL`HZu7AlW&(dwt!bk3=6VccGGNYCxsd}&$uFlZ@HQ2XQ zz|~Q<=C`ZyvI#5uEs}bQDo#pGl&e{#!KL*2Pny2wU;DNGX;$9*NW$2j8bh;7Pa) z5+wTJ()nx5T@W@(X)Ik_zr5y{zRN?VKy2JpS8X==^+8QI5v#>DaG*2R<|Kpm8C%$WJ5}F@iHEl@XfH$1BbJ^%ZDg^O0n*`!P@No@{o&U|i0>HDC)YuC?jYvzX5?s9oN2i)O9sQ*Z8 z<%|2xV!4dA8)XR!hGU9K?s*xKC%fd^GcxD6h+7x-;uD`Z(r49`g3OUx$V*TW+sM)T zfR|29L2Y)r_CjHi+-%_9dOg|&vUi^&O#XP=jEE*iEpSltU`ZfyTlTl8M8t}s!O;jo zbk~`WmeAtO2DqB^oS~JhYMRv!z?6i#!woN+)>5?)HO|fuM%utl7H1X8NyAa+ei%pf z3PD$Aw8;Vm?mJn9zpzv`v9OBr4d|iZ47TpqHoHeKFqGp0xl;$}{Nzg>t6E%R&_mZx z31wM-S2qN*NMncM*J(;5)ti^j{7Ai~3HkOUkhJ_a!&GriMLZq++K7DAgrxK7e}Jc2 z-J5H(Q~5vLvnVJ%#HDOE0~d@m{qdvNb3qzP&?CF)D6)2&%~sP=C(Tcy{<`eLLPhTkI`hvX2v6La-W5HR&d)iyKyu2Y5mP4g&ktuDQU!540o`Ue~x5d zxLS~X?Pmrl%f&c~?|s0~&Bj+nP}9>h@Fn6dtR9c^{aiw_tTaFKE)N5|M@RuV#WpF( zL~&7##!3~3pHiL1K(xoE|J~j@s@1+n<9!HezM@R>{jrnrPZ%q1&>VVuP#sk&we@fM z-Y(mMPfbp^i#Ye=7BZ&JdaT$R1iH_19d#XB4 zeCPNzv{C0IviRnU;KoTQW{KYX?_=3N#IXY@w(bV# z7+$&ptJ}Q0xHwTa_D1OT`_%G94eVC%3uNo9waWO7k1rhlH7hKYG++qu$1-JS*(ZN2 z`%;mod7tBK!qgs&@Tq@}#_fkRmxM0aDNpE<{2Yg}``0vE zAa}X1vCF9)4L%u?>31XrtF~Q?qWaJJ7Nd!elFPiRv?5uw(W8R17d;uj)sOUTEai#e zWj%yf1wVx5ZIW7!N+zf;zyH8PJ}Wfj+1*(BfQWhXli^!mO`mlSX2YszJ)mlAyKMHo zcpOpUZa13Lc+Ya}#<8V&Luz)!M%*%E*4@5ipicP|>l4MeR|Uhzuu-AEv|XmvUmhoi zOb^Yx9|7$4s&?wAWip$@^LPAtwKLF zg-$`Y*?%h2J=u|wfQ!Z09D4F)x6+h^*pV>uxx3+6nqIdh9p+|3{O6lWj#n=jS~EAEwrS-Bf5QGbVy zbBvzLDxE2-|NE&DX(hY#X^+8M-$7}7_TvRVjH~VbzpTOnm?M4zzl+itHojG>bZh`` zn`F@aoSi;RIJ?`rzi{S*`G*bF=^n=q1(su7;r#?fi<&pbsgl!*mulPCwJ(l7BaveZ z=?(TF1Ja#u&XF^4a9wg)v4)QlL9BkD{t~WIk8Pzk`MoFXoQN^Cbu~j_4#Zs>&i70B zdJALfOWdEZ*`3}tc9er5SU*X7fUOx6NiHKbc^fVqv2-6kn|L*0JV`3NX;zZDu39Wr zZ4r-M%&1WGwb~S|_f}CfPd&^8(p-GPw?nS>Z7IEV3OmP1y^%X`r|`RavQ)H& zH!m$0{C2Kd6h7H)J?s?BUyrxEWM=hSmt4v_G*g$$5Xk>RF342YkZiq8?{zxq1{qp7 zvDv%&KQcs<%Wk*uU~=L7vF`NOV!u5-EK=r8YQ`kt1JjBD*?;5+{*M$*QXAE22Ua~BdL1o% zpSt|cbE=miU{(cNdN-{-X6&t##PD2)i|7rb-}QMVMi)6VeYFbLenqZz2l%oj49-*; z{*K&@n{R>VRLjt~m|S}DIHjL`a(JuS=K41O>P$oLW;j{TQm*O8;h0VAi(rwiW`|xM zl0&~)dar_y=t9&BlBT~!yOL@YQtJo?F&wmg?%_+bOwFj+R=koO%(){rq!NH@KcN~Gqp36nNBfb|_FFTzF*NRLY_hJ-Ji~3;Mkl(H-)kaD z72*zP$-BRbecKeZA|Dr{DSsXA8P{WE*{`3SRtyn5Y83U@(y3%&^zugVlg<~NuhsE( ziu{;@qKr3ia)4y?=h^4o>7Nw5Anmpfp6Ym^V^_GzZe9rdxEJ2a&D`l}n&hL(OHhP+ zbfO!1k&#d5bd3^5CbmRV?Q)L5som+H$usKl)#j%a;*9f3S>d1K2DF-io+PP9l|Ak| zw&|^FQ?V|89aMavKS@$`l|9e5DLlwZmJJ$ye9%Rdw9`{ynsGs_lihyR8>(pF!HBrHUs`t|u5^ZR!oWiB!7D zwVK^d(dU!+xFh3GIeD77g6Zzut}Ok6K5xwERy$%z)M}1@XIH%n8+50S+lB}oZdj^N z!#A0sM))xemi^NB-LPuAGKIK_+(NyC)G^HWtl{s2NoAvzb7%KU1by~XHoQ2FFNK=% zyBU^F*$Y6&4_0}-ntrY%NwvuP$kYe1_c)WCicd4Xs~x%Y%?j%~SVdBQ`lG?wiEY)? z$#!rFaY#1qT3)U@LQq$GvSu73hzYaouih`=hkM;xOz(Ad3S_GaB|NrkaX_dGVB#$M z(yvrnEw+X4!L(WST_<&pSB90~7<5(D7U*YKaJ_u(7ddjC;~I;)QVOwCS7)?lk~gBd z_N%^?lSU@R^ML^7rDfl9U7e2t1h&>EE_&G9`ghjvjs5%aoXxDc z0+?Ht??v=<$yvA7)w``}S;72=t14twH`}MeLPQ6&s@2_6|82Kqe}Nm*(i-oE)&3cY z{~3wQ|1y-Bd;GDK0H)WnH^yUrfcF^-td%U)Q|Tp2xNL6jNUr}Y^VLPrV94^FG{N{% zq9c+#b6S}f4kfTnBb(sBkssIQTI(NMk=kgzi8LsjYy(5 zxEK#C(e_#T4h1EZ{gD4YULxs%mtT>IJCv94fS9VM|2E5saC}v;^Tx!<_CS@ZeSHD7 zvnAjqTy0wxJ-IYG7y5TKiddQR%Zd@9CNm!%MU-!vBTOqsac-JCU_bBl<^?~dG-OcU zf1COtVL?n)$YAe(0Cn=2088J*_I%chw_@ZE803Y;gvvMl zLQX42FK-fh%pIcI8erM(^o8PQ`$ii+p$=7R=s~D%YkF}AtJ?OX@HE-DQ}dD=TX|;8 zH0PJjr6cucnY$|gBukCx%p*KXPV+q>4g2#PIuQ42zIYITuXGq=Id8#e9nk6dAF@B) z)_;pbj&)r<)w%9C-E(zdwICkPa!MhfPSoIA$OnjE^dH1CaA$Y=lFKueskI0E$93C@ zMv90}_fy`DVvr*yBKOR6ct$nblkRK_62e3IZ9kid%&h}7)qWbT(POvQ=w)sTFR~|-rPs$e=?cA{+jv@! zwsTYq?`G4}Fg=X4cCizwk3nkqHl#oEtHe3nQd>41SLT_v2%!5l=&0@1sf}C>v8i;c zp3R&3N!$-a_)!CXGi3U(VKS|6_tBp>Kaixtm~8qJOpnCZ4<~YNT@hXN)Nh%%VU>CO zq5|?yQW?GNjn;N`S=IC$=274CcAbZ|>YoXm)LQuNj{`^7Hh&-~mxB%jbW{pSvc~Oo zz0v4`M#Iq+-0wbKC3SwOjMLF&j?P3AZq34ekW= za{#kWBbJpK;Sm$cU$D8Kmh$5O<#Hm`yTvY+FJBx0eOjdjtt6>QpLF}@@S^S2TCh68 zJzdSXruP;sFrBv(d^=qlFE?S#I6tWLq*ck%$_=4i8melmQf#(ml(pq8=#dAA4T%Ex z{{S_)u0MlH)|r1zGPV|CyVKW;e{1jTIa5{Gjyx=+eW*RDznJ$>nwoLy{BoB1MnKG( zwb+>zS>_%~th!I;7XJ9*MEYu}B^$B!xlXw)M&l|gwe<(`Xow^Y8_Mt7;hL~8Wa{-j z4@M1{V*SY7Y##bu(_wZGOhw9-Bfc!nc1gJs8#S%`AveCqBCaN8fw0K#WiJTfcNzKS^AFIS(@LC*8#~#-k=Zc;uz1URD(?^{8u}rW~{gMhu zIoly||CdGptH-~42RF6IeHo;kJNBqQ?~ z@#T*Lq;I3p@sSTFGtFN40d>988DhoOUbaOYMg$oBm&|o>_omRVkE;-5f zJs13v#CPE37y6icYH>-!H8}YA)5ZTVvIU0in)>d9NL$pW^DIGrJZ=Hl~Ff+{2pSIeV;hsFHQ`Q zcT{ZDpgrjn<3Kx9?P_%yieb}ND+l1vtd z;yJDbPe$(uYhIYM+Oe+}^D-X@^F66H3;C|ACKs|lN$VrTLxG2A#%cS0MT z@q)`f7)7ny{eJrg@?2#AfCyh5jd|oDuLT93C~W0SJ`jQO@P$Yhb0(lxBosn?em}(~ zr#VGU8l?#-7ov^6sJ)iQrgrqgRZLOX14q)b2!Ir3G_W*LuQ#JjJg<$ANQ|L#^z@f4h(PE&QPvBoqj|>T@C6ofNeL`Dmip zy>2%6=dRkW%D`JDp_716w}TCcQJ^m-)`LaB$`YOf>x%+!diVgM39LqEToB-2^qGsO zdeczE%Q+|=oJzi*yO4*8f2{v|>B*#jXRWIp3rO zrJIRJuUp{JMoZ2aT`c`TS9i}H;y{<-wgP?PyRr-PQ2TU&Cu$3Qr0v#mlGNn=Qe>6Va-l{+o z4_Mt+lOBZ*V}J`gFlhw5>9<360l|RTQdYK#l>covyhg${xg*a5O;Ic>HJ~O8D;15s zeeRz;a7k8d=Q$8%gwJcWCmC5LL;`>H6}->QF()bEdpAprI97)-v>M~IxqTFz93E~+ zn~J*>z&=A;5n!tO%LZFQzI(-q!4cc;LvKw0D^~z3>N((@I8Im*+FScqi0J))SZw}r z5!GeRG>(ZwD=*Jfj6!!`vl$IpY<2u#7l$+~aDwfBEuldWnHN8IahC#P0L)7Osb5A7 zv9f>y?|-Ow#KOAoLbLS`sD zI4mhD0P8+*%G9*5teCDIC5pWUXh3QC#8OaYF^F{(6?qM)k129_XqNhgX%@)xw+8`h z+X_Yw(B10*qYo3K1rwtR^xsxAh-FNBWxmBP2g=yxf7v`f{eO>E5H`G}$!gL}pJE~e zHpCwCKO`ErfLJtv+aXJV0p+VezC1vIr&836UI`IZ|Ig_DMNh7HJ0g2ze{-8Qqp4T6u>;cTv+AD%-0<_Da z{4c>14)A1@W1o=g4HkWH%GNLa=gYt$+(HovZ&APE8vO*nvMv)IY z5&2x;_`5-=B?F^eG5Tvq0un?+uo^I~ugbNEh@-$h>uv+CB=3MYsb>xXb02V?K%@H- z6Cxmt`9tUQ#feWx0S6n|lI)MaJYnv9ia3}uD5b)#4yBul@cV0d7=!4q!ReO}3%G0t@yX^77sPyxU=AYJsHl2xwFi&~Xp-3^s`9uV*V z5HM5H^Zupn#2yanIv}(}xdGU;IN5;K1iyd11h9jC%Nypy?adh_co@(WAqByHxVpvM z+h;GLXnSZEfx!PV)f^`U*jGSB1JPc+529v9qe$e3zjwe&ATR*IM4&k4b7U!>=@Equo=@)t8f=vTCvL|P=6PPJ38f?c+)v?Xb`M1e;91N6_5>r` zQq>o2FMv}Fwj-V-m>a!`=2u4@+F+hkVZa&vbnDNC@(U1LLE55i2%zlOguL~Rw?mxt z{~qlb1<66R9rFY|>5D4YZ$)O@VM|L@GxoLXMH2_59%yAoN)hjWy{*6|X!ZD+qd1v%AIsruMZe)1T|iwJ^QYZqoT z%uSyQGcC|;@_#AoWeA*l>_=xWa2lfPpKhRL0Oi9ZPBgqu63_76nEQd0qk@Qa^e9R^ z#QQOL&JC-AY=MgPC}DD(0431;6r&pfGsq6$;K?wI@g0yLE6CZB!UZrQ!S5wJE;^W>TfAQN80u#Y z93iNlhallj<}5(E+5yz3gzF%YSyyApH5JLsT!8fe$@ZV`vOzJ7%WW9oyPu~^E3NSb z-91IiKDqO39Hq1lZmfehi=XZtt$HM@yl#_i55Ya@xq4!w$3YIc(gV2lIYa~L2x-B#j{x5B^olSe@@1u9BA3&K1POwZ zb?s#sYycijE0I&M!sa6PeN$N_*+CwXRd5Ms&C;KuX0q-(%>}!V-M+_BNh7F1HsGoz zpT$_*SV6lH>!Xm>Y`J3>Dr5U8rhqOU8{C`vAD!%i7{1_sq{j@nL{oCAzOuAV41&wX zJ4q6shtm7c%uA5h<^2;PMvHAn;7{G*^tSK6mU$mgn$-E38@XX0=55#0$`!E>isJ{i zmd4)9Ow;w4X}T4Qp@{2^MGA!tqJj&>(WAojY$kU_3FClQid6RBr3{L!AShg`ug+#& zBKErOKU1v-3TTqw3oV~(KgqJ6N$j@%Rs1`Fi84nN+!g0fJh_58R-HI`fx9d=sqhHoDBH%QmE!^)ob5lhlfV@YD>3goU%I5sYGM^FeWMF8%2FH z3%yi!7DOx3e%uO2QYm|z4o@u)la0rAQAHN38JQge8?#rnFoSH!w{_X(DSB! zg0H9tcS1H`xjzhUsYtPD5=JPRfORWe-JhKRppykNRQjG5jd{*7%jeI$oi3J8<0b~^ z8o*?NZz~J55H-Wcy!cmxOOsO{am7p|v+XJ|XnI@Mb|maTSH<8Fb7qY|&7b#>d>rq0 zNp*J%0|I(ATc>3LYoK!C{ot4G!GwupeD0!;4Ij=bz_Vtk9^g&|Rz!AU(Y2p8C6X`0 z&+%M3P%l*Nm_@m_4(!P!e64Nv40+v5>6%JN?W_T_?se7I84;1$$l1F*bkobnfNbTM z$3AjT*C0KerFoh_Jw$B-g0kIj5~En=DU5Iq1I3clsR$oI47bUilu<57k?X^w=#@wqTd( zc_U6oo?pXXF61^!f*MeAv1i7Zcnp&G2ue-5f329i+E5O^NX@Bi%kpu^`9eJ+=YA>I>SNBCnoGAOcjadl zBmO)YJ2ztpsYEAJSis2z3<#B*p(&MV2D-CatXo*$pJ8&fV>%9%nvdD_Eo0cr{De_; z3-lirB?Y*#lA}?Kyt^mJ3YTmxW6=I%c0cuiN%#NjM;F zL?W@zT-UJO_L2+hk3-?ev!Ebs+tg*r=>DKHm?b8Umy5kgZ*ae;#`-p#&{3(pWYnIl z5H&p~F=bMfsVNk3i@6v_v}U`k$~f%)O_Y2~Ob-N;hFYw6y32l`mWKQ_`7p0g8P+kO zGM)^lX3VN<^s*!J*Z2Y=SNAYy1n8T&Ut~+zXpDbXsq1=*LHb}2j`|q}ik-Y2>GUh^ zzQQQ;#@OykuFf>j?J@59-#)R{%>UN149DfrGq%%;{+yBKpb)wUizi9_k)KzZkTnt; zP5|8{furf6p5@1F2NdHb@`}xgwc`dqYy;v<8D6R~4%AO_VmjmBeqMY2VL!YU#@A8U z!?&yvO$?pM91c_=-;&KU6S=S4FW>oM2L55prI{M4Giy#N5tgrgd$T+Ir@Yr5?S|K$ zhnoBhsGuJcyU@lt`Vh1(>^#-UdCqGlsxsU_3}AT2Yq}>!Fc?*Tp{U2L<}DxSr&WHB zBmcfn392CW0fMdGrH-;-A2k`&-=*W6EY!NAEsq}!Q&>7BYA{!n;W*mi(8IU*%>d<( z__f~^E7OcpfbvX4?!S%Z%I5)9AuOt&C5<%>sW0V{ayO@dOiJsTC{G3segzK~#SmercXQ_5nruELc6& z;n>m=DKPq=_L#KBgp?rWh-KeOLUoCRe>M6O*4=4nrW5CA)UIwMu#oEYEU7HNayFQp znqZ6ROrbYSHXcG5k_T`Zg}*?N+B;b%g<^!;UK5<|i4y$7N}lAlT^|5ln%w+4&^@Ts z?3e3QmyUX@b!1AhbK_*qST1Zlt>~4!X#)BfzCFF&>3^!`d_87{t#49Jfr@AEd0;Tv zOheUksr>0K`7(9rTw5|Ycdg$F{5e1{`IqS8`{g+G3cz;u8AN}bJ9vv?)FXi5xBP&l zer!%}rL=p}0!p|0rD>5JZ4N?uiS*?2zMz%V1Z*%j_B#E_vwx+g+aM?9ZAhR-bgW=DTd4V+0$SbPuys=Q6#WvCg$r&B0A;Ix{~kt~AN z`}TThu6lOl@*p34TTZ9}BUe$=if#)4RSht$ri&PI)8daKZfBpcHV4dp$5xIDg2FmU z#Xudo68LA-vX;JYb>?~VA?dG)-?(p5BI2zXH~fr2pRzIXSEYSS8GY5&^9ftC)Xo}q zwvc7wB*V+k;`HmUZz;~%v|!hB!kJ?Kj=V0FueM=F^d*(~TlE&et<3|(#<1~e1-HyL zfl>VEGdZC}?r!U+3bO(p+yAYZU#O5QkS7UsT}{+GV~c-_9NB~EExbGR?ccl4&bvUM zuF*cIAhBf=T;&(xd}{`apY1X#%x_)}>v!aKXtGk2OHrfar(9+S+;P&H(e3Lb3@J8- z2#}ig@wuF4v}!IWyj1@-YpC(gvD^A_m3PM4iEo0)#hZ9$d%!RI_dWubp=vo>zQvf7 zUX-oI5e!Q6^7c8bU!#iK(>~Q_#F4rs5>8%w?>^}`V~r!>NWJD51(HUz;PPC7XWZ#A zyq)s!6h9`juy7Mz1>IJBs-Y1hLbI-4nt;Gpnkf%xlPmm(1gon>p&gM)k@Dr(H2SK) zeOV6k$Bp!?iTd|==eWh@rv9qngIkPa3$yCBiVCO~3ULxe-;Qw5-_w9M7(pp!HhbkgJuajrC0cz*q4O3+oaJ*e z9uDYE_x$AMgOWlGN6sqcOfT^sl8d`f$tpt~bJ9IV?h7!B5;0xdr@1sQN(~}fxm~fZ z^Z?C|Ym~c@qyRJXrr=;wjz6b9ma$K>WY(0*}!8AvW z*3C7)BT*fNJ99Yl{7W-z>~T&ydKEQE(l?3ndRJ*w+v`O&p6;nxhZ+?(rK`Un$a%&;Jeun1G~pisY!zhc+JVQ1ra@)iJ4vYxD;E#oyr6UkH9e z$-&5U4k<_36gACTPy-?iY&|G%n;Pg*(zb2I~?7I$qb>vh}j&alFy|jR7_9qMa zDAG2|X~eL(hGTkTw#(YS3bSsK!ZTkW)cGkF_tKOmjz9d%lcDx= zYx+o2fW-2N$wqyyn1aT0kLUF6t~Iy)xN^zN@YxmFBUkY}ZoHR$mrr25GIhe&^D@%ICG1lN~VGw4q);)=H#BmT%7 z4Hok|S}#J7UNB6(PUCi059g;LuFaRDjbaU17~GnOrfAOAl15{iGr14HEZynjwDd)6 zRB$wJjXU0*oUKi+5r)cGx^RWp?*RmBr^%_Faag>!WkNLZr^EYH(l*E4($-N#1iJp% z!d&Ne!a}BL^}dlTx2+KCP?^3j5as6wlAm>U1^1a@HsW(I$Gb!_-;;OA&BJy3IR9ww z8g{aoq|Pu%a3v_YFGcgy{irIW&AVuEV*8SLl;ZlGAI9fMZ5XhcQK)8)q%4ud_D)yI=JECz8Si zC?B)-;usj57vbA(IYDi^x2t(`tw19|NX6l2wq~ao`(wSesVancX6~Gp+d|m`Ff5P$ zN85eW_|zMoLb*!^{J1MG4k1pl4zTiq%WM{xmUx5|!H%&1_3zV!6YaVG%&7f8jOD6r z)H9ctr&5t!jF(z>@HY`u#gp+E76&k2ZI_;1`eaLN0bh7v6uNAemmN60g_4lUI$j)t zEz4^$5h1I^&*H6k6~BrcmS@g!emo1C6aU=jUbu@U4*Oi9J|Oi}$l-deiG10mK1#V- z2;YD}*(LnW48W^|`h#<4^qi&VVIoo;UPtq57poYiuKM%~wltYen@9YN!w!0B z2r%UtM3nnXWu^Xs^Kjy4LGhG0)+E0$2gly$&LkQBQzaZFTnd%hrW!!LBPZdP@Wy}7 z9lLT?P8?tBlLAwyC5~oMy3{LFw04@DM$Zylgw?Ci^zDte1LgDAe2Rn92@&!u%wMXBM`c11ys~ z6XLG#u%MpZ*(_KsIw}if;gq77z=r_cOMy2+(E8XXcmwwcs(Y<));2Ep1w3E%!}!4F zx5sh1Sri_BVV6WXgg!Te760W$6u{ephg%YWcn?(jzF;wg^u=7UY7-pT?Z3xq_GG_f zBCKFS*>DgcC1+6iJ#W{-1@RF(hM)`M6;I$6TgtL0C+9_WeL-&|GgO4Yu@E`l2Il5{ zpIl;!dpd7d4Aiy{7G;Hf-FgkwpmF=fmh*Qm;(dMIj*>=1qM)5^%iOoRo#s|PP^z;U zGmFs0|B-g6lxzCQ4qstTncwZ^bDsU~LAJW4$0U(s1Co+An0}xMz!vMX#3VMRPyghOHeUehYXO6!!GLO)xDsM*QS@Y)(G2!nP#qa4%!q^ z%2b5B7wBYpS>dY)R4;W{vtAe{8^liw2XpQv*2 zDz7SFV+heM!QEh6?PLu2-eCkAw0sryKaW$V;uMB>9hwY+FO zVIzB4a8#~UxVm}{+T~%$9@YZ%L=|wtIMPURm)D&I+%n4W*2Y(?GOSG=e)TMAmv+30 z;=>VMaA>@?*aFuA{~<6)-G#= zHUPYsk_>agpSyR*jw7DDN`I+D=34ba?(RM>-j2#n-0H?&O z&g*`eTeB_j3*@EDzds#NUm$GBIHz_2Fl-5z6iRImE@=9nB;hPURSW^zIva0MJz0{9 z3=~-sWy>jy!pLurz2MlFq-rkP%VxA#t3;Z=H-(b8J!qk_M!`97IyTx>Ule?<;(?M*y|VxxA@y)g8I2{_EIv3v6(e8Weuf*NSMGw( zWKug)6I!4iggMpk_GdkHC=WHC9kx&;=#=^t%zVEo}OI%}2dVJ!tEB_(-#a_hqF8g)Vmp!@dkCu6&Bf_^pw=c0Z@$)>D;%FJfp& zD?9hEI{Oo7j(xb|7VWi(a!(Yz180&xCv4MvUMYyNEX#FXpBA9ndIVlJ^#yICY8UYg zw+k__&0p4GbS<{zJckP(BW>;Bq+RRw6Xw`IMZ%L@3h^GWk(6D^-0l82C8Zeqa*9u1$i9T4 zSZQ?*7b*VwwwZ_S!cx*%hd=Wy;CqTr4#C77!?ZQ8*YAgCXVY~-9hzr5R;k{ja`*2c y8u??{pTyr2%JJ?yQ>8Moy@M~^S86D`?1z(HN;WpEx_~d=Ae`xGlPAU=*Zv>4L0|>| literal 0 HcmV?d00001 diff --git a/LeftOvers/assets/images/sun.png b/LeftOvers/assets/images/sun.png new file mode 100644 index 0000000000000000000000000000000000000000..d42c52e79c43ac12b487d05387719ebb9a7139a2 GIT binary patch literal 11172 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 Jchc+Xe*vWJo1Xvx literal 0 HcmV?d00001 diff --git a/LeftOvers/navigation/BottomBar.tsx b/LeftOvers/navigation/BottomBar.tsx index 4f49f36..dd4460d 100644 --- a/LeftOvers/navigation/BottomBar.tsx +++ b/LeftOvers/navigation/BottomBar.tsx @@ -1,16 +1,15 @@ -import React, { useContext, useEffect, useState } from 'react'; +import React, { useContext, useState } from 'react'; import { View, Text, TouchableOpacity, Image, Pressable } from 'react-native'; import { GestureResponderEvent, StyleSheet } from 'react-native'; -import {Appearance } from 'react-native'; -import type { AppearancePreferences, ColorSchemeName } from 'react-native/Libraries/Utilities/NativeAppearance'; import { BlurView } from 'expo-blur'; +import ThemeContext from '../theme/ThemeContext'; import HomeIcon from '../assets/images/home.png'; import ProfileIcon from '../assets/images/person_icon.png'; import CookingIcon from '../assets/images/cook.png'; -import LightIcon from '../assets/images/update.png'; -import DarkIcon from '../assets/images/validate.png'; -import ThemeContext from '../theme/ThemeContext'; +import LightIcon from '../assets/images/sun.png'; +import DarkIcon from '../assets/images/moon.png'; + export default function BottomBar({ state, descriptors, navigation }) { const {theme, toggleTheme} = useContext(ThemeContext) From 0b47411de065145b828cd48dd3d28444bada7644 Mon Sep 17 00:00:00 2001 From: Remi REGNAULT Date: Thu, 23 Nov 2023 15:41:48 +0100 Subject: [PATCH 13/27] fix: some errors from merge corrected and versions of modules modified --- LeftOvers/App.tsx | 6 +-- LeftOvers/components/ProfileDetails.tsx | 17 ++++---- LeftOvers/navigation/BottomBar.tsx | 7 +-- LeftOvers/package-lock.json | 58 ++++++++++++------------- LeftOvers/package.json | 8 ++-- LeftOvers/screens/CreateProfile.tsx | 3 +- LeftOvers/screens/HomePage.tsx | 22 +++------- LeftOvers/screens/ModifyProfile.tsx | 2 +- LeftOvers/screens/Profiles.tsx | 40 ++++++++++++----- 9 files changed, 87 insertions(+), 76 deletions(-) diff --git a/LeftOvers/App.tsx b/LeftOvers/App.tsx index 3e99a61..a828d17 100644 --- a/LeftOvers/App.tsx +++ b/LeftOvers/App.tsx @@ -17,9 +17,9 @@ export default function App() { }> - - - + + + diff --git a/LeftOvers/components/ProfileDetails.tsx b/LeftOvers/components/ProfileDetails.tsx index 4942d5a..9b7ef35 100644 --- a/LeftOvers/components/ProfileDetails.tsx +++ b/LeftOvers/components/ProfileDetails.tsx @@ -1,5 +1,5 @@ -import {React, useState} from 'react'; -import {StyleSheet, Text, TextInput, View, Image, Pressable} from 'react-native'; +import React, { useState } from 'react'; +import {StyleSheet, Text, TextInput, View, Image, Pressable, FlexStyle} from 'react-native'; import ValidateButton from './ValidateButton'; import ListWithoutSelect from './ListWithoutSelect'; import { useNavigation } from '@react-navigation/native'; @@ -10,11 +10,10 @@ type ProfileProps = { diets: list allergies: list onDeleteProfile: () => void - navigation } -export default function ProfileDetails(props: ProfileProps) { - +export default function ProfileDetails(props) { + const navigation = useNavigation() const [display, setDisplay] = useState("none") const changeListVisibility = () => { if (display == "none"){ @@ -27,10 +26,10 @@ export default function ProfileDetails(props: ProfileProps) { let imageSource - if (props.avatar == "plus.png"){ + if (props.avatar === "plus.png"){ imageSource = require('../assets/images/plus.png') } - else if (props.avatar == "plus_small.png"){ + else if (props.avatar === "plus_small.png"){ imageSource = require('../assets/images/plus_small.png') } else{ @@ -42,7 +41,7 @@ export default function ProfileDetails(props: ProfileProps) { {props.name} - props.navigation.navigate('ProfileModification')}> + navigation.navigate('ProfileModification')}> @@ -56,7 +55,7 @@ export default function ProfileDetails(props: ProfileProps) { - + diff --git a/LeftOvers/navigation/BottomBar.tsx b/LeftOvers/navigation/BottomBar.tsx index dd4460d..69d4496 100644 --- a/LeftOvers/navigation/BottomBar.tsx +++ b/LeftOvers/navigation/BottomBar.tsx @@ -78,11 +78,11 @@ export default function BottomBar({ state, descriptors, navigation }) { : route.name; let icon; - if (route.name === 'Home') { + if (route.name === 'HOME') { icon = HomeIcon; - } else if (route.name === 'Profile') { + } else if (route.name === 'PROFILE') { icon = ProfileIcon; - } else if (route.name === 'Cooking') { + } else if (route.name === 'COOKING') { icon = CookingIcon; } @@ -108,6 +108,7 @@ export default function BottomBar({ state, descriptors, navigation }) { testID={options.tabBarTestID} onPress={onPress} style={[styles.BottomBarElementContainer, { flex: 1 }]} + key={route.name} > diff --git a/LeftOvers/package-lock.json b/LeftOvers/package-lock.json index 6e908f5..f369f06 100644 --- a/LeftOvers/package-lock.json +++ b/LeftOvers/package-lock.json @@ -9,13 +9,13 @@ "version": "1.0.0", "dependencies": { "@expo/webpack-config": "^19.0.0", - "@react-native-async-storage/async-storage": "^1.19.7", + "@react-native-async-storage/async-storage": "^1.18.2", "@react-navigation/bottom-tabs": "^6.5.11", "@react-navigation/native": "^6.1.9", "@react-navigation/native-stack": "^6.9.17", "@types/react": "~18.2.14", "expo": "~49.0.15", - "expo-blur": "^12.6.0", + "expo-blur": "^12.4.1", "expo-linear-gradient": "~12.3.0", "expo-splash-screen": "~0.20.5", "expo-status-bar": "~1.6.0", @@ -24,8 +24,8 @@ "react-native": "0.72.6", "react-native-dropdown-select-list": "^2.0.5", "react-native-paper": "^5.11.1", - "react-native-safe-area-context": "^4.7.4", - "react-native-screens": "^3.27.0", + "react-native-safe-area-context": "^4.6.3", + "react-native-screens": "^3.22.0", "react-native-splash-screen": "^3.3.0", "react-native-web": "~0.19.6", "typescript": "^5.1.3" @@ -3944,14 +3944,14 @@ } }, "node_modules/@react-native-async-storage/async-storage": { - "version": "1.19.7", - "resolved": "https://registry.npmjs.org/@react-native-async-storage/async-storage/-/async-storage-1.19.7.tgz", - "integrity": "sha512-zvfhOWWnjzeP4exfgNwDUot7MQafEEJnbjjNsVKWRxRuQT521GLSHUJQHjMTLg19QPT+HbsGjL7rJzKkmXuq7w==", + "version": "1.18.2", + "resolved": "https://registry.npmjs.org/@react-native-async-storage/async-storage/-/async-storage-1.18.2.tgz", + "integrity": "sha512-dM8AfdoeIxlh+zqgr0o5+vCTPQ0Ru1mrPzONZMsr7ufp5h+6WgNxQNza7t0r5qQ6b04AJqTlBNixTWZxqP649Q==", "dependencies": { "merge-options": "^3.0.4" }, "peerDependencies": { - "react-native": "^0.0.0-0 || >=0.60 <1.0" + "react-native": "^0.0.0-0 || 0.60 - 0.72 || 1000.0.0" } }, "node_modules/@react-native-community/cli": { @@ -9213,9 +9213,9 @@ } }, "node_modules/expo-blur": { - "version": "12.6.0", - "resolved": "https://registry.npmjs.org/expo-blur/-/expo-blur-12.6.0.tgz", - "integrity": "sha512-yrZYu4mQX4ZJtSrjNVMuB9kCMB8Xerk5Zn5iES6ojmGAk+yxJ/jdyhaUVqbpaA8LBmspdKgQz2dW8+9wa8dSAg==", + "version": "12.4.1", + "resolved": "https://registry.npmjs.org/expo-blur/-/expo-blur-12.4.1.tgz", + "integrity": "sha512-lGN8FS9LuGUlEriULTC62cCWyg5V7zSVQeJ6Duh1wSq8aAETinZ2/7wrT6o+Uhd/XVVxFNON2T25AGCOtMG6ew==", "peerDependencies": { "expo": "*" } @@ -14955,18 +14955,18 @@ } }, "node_modules/react-native-safe-area-context": { - "version": "4.7.4", - "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.7.4.tgz", - "integrity": "sha512-3LR3DCq9pdzlbq6vsHGWBFehXAKDh2Ljug6jWhLWs1QFuJHM6AS2+mH2JfKlB2LqiSFZOBcZfHQFz0sGaA3uqg==", + "version": "4.6.3", + "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.6.3.tgz", + "integrity": "sha512-3CeZM9HFXkuqiU9HqhOQp1yxhXw6q99axPWrT+VJkITd67gnPSU03+U27Xk2/cr9XrLUnakM07kj7H0hdPnFiQ==", "peerDependencies": { "react": "*", "react-native": "*" } }, "node_modules/react-native-screens": { - "version": "3.27.0", - "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-3.27.0.tgz", - "integrity": "sha512-FzSUygZ7yLQyhDJZsl7wU68LwRpVtVdqOPWribmEU3Tf26FohFGGcfJx1D8lf2V2Teb8tI+IaLnXCKbyh2xffA==", + "version": "3.22.0", + "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-3.22.0.tgz", + "integrity": "sha512-csLypBSXIt/egh37YJmokETptZJCtZdoZBsZNLR9n31GesDyVogprT+MM22dEPDuxPxt/mFWq+lSpVwk7khuTw==", "dependencies": { "react-freeze": "^1.0.0", "warn-once": "^0.1.0" @@ -20487,9 +20487,9 @@ } }, "@react-native-async-storage/async-storage": { - "version": "1.19.7", - "resolved": "https://registry.npmjs.org/@react-native-async-storage/async-storage/-/async-storage-1.19.7.tgz", - "integrity": "sha512-zvfhOWWnjzeP4exfgNwDUot7MQafEEJnbjjNsVKWRxRuQT521GLSHUJQHjMTLg19QPT+HbsGjL7rJzKkmXuq7w==", + "version": "1.18.2", + "resolved": "https://registry.npmjs.org/@react-native-async-storage/async-storage/-/async-storage-1.18.2.tgz", + "integrity": "sha512-dM8AfdoeIxlh+zqgr0o5+vCTPQ0Ru1mrPzONZMsr7ufp5h+6WgNxQNza7t0r5qQ6b04AJqTlBNixTWZxqP649Q==", "requires": { "merge-options": "^3.0.4" } @@ -24414,9 +24414,9 @@ } }, "expo-blur": { - "version": "12.6.0", - "resolved": "https://registry.npmjs.org/expo-blur/-/expo-blur-12.6.0.tgz", - "integrity": "sha512-yrZYu4mQX4ZJtSrjNVMuB9kCMB8Xerk5Zn5iES6ojmGAk+yxJ/jdyhaUVqbpaA8LBmspdKgQz2dW8+9wa8dSAg==", + "version": "12.4.1", + "resolved": "https://registry.npmjs.org/expo-blur/-/expo-blur-12.4.1.tgz", + "integrity": "sha512-lGN8FS9LuGUlEriULTC62cCWyg5V7zSVQeJ6Duh1wSq8aAETinZ2/7wrT6o+Uhd/XVVxFNON2T25AGCOtMG6ew==", "requires": {} }, "expo-constants": { @@ -28640,15 +28640,15 @@ } }, "react-native-safe-area-context": { - "version": "4.7.4", - "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.7.4.tgz", - "integrity": "sha512-3LR3DCq9pdzlbq6vsHGWBFehXAKDh2Ljug6jWhLWs1QFuJHM6AS2+mH2JfKlB2LqiSFZOBcZfHQFz0sGaA3uqg==", + "version": "4.6.3", + "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.6.3.tgz", + "integrity": "sha512-3CeZM9HFXkuqiU9HqhOQp1yxhXw6q99axPWrT+VJkITd67gnPSU03+U27Xk2/cr9XrLUnakM07kj7H0hdPnFiQ==", "requires": {} }, "react-native-screens": { - "version": "3.27.0", - "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-3.27.0.tgz", - "integrity": "sha512-FzSUygZ7yLQyhDJZsl7wU68LwRpVtVdqOPWribmEU3Tf26FohFGGcfJx1D8lf2V2Teb8tI+IaLnXCKbyh2xffA==", + "version": "3.22.0", + "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-3.22.0.tgz", + "integrity": "sha512-csLypBSXIt/egh37YJmokETptZJCtZdoZBsZNLR9n31GesDyVogprT+MM22dEPDuxPxt/mFWq+lSpVwk7khuTw==", "requires": { "react-freeze": "^1.0.0", "warn-once": "^0.1.0" diff --git a/LeftOvers/package.json b/LeftOvers/package.json index a224bbe..511aab3 100644 --- a/LeftOvers/package.json +++ b/LeftOvers/package.json @@ -10,13 +10,13 @@ }, "dependencies": { "@expo/webpack-config": "^19.0.0", - "@react-native-async-storage/async-storage": "^1.19.7", + "@react-native-async-storage/async-storage": "^1.18.2", "@react-navigation/bottom-tabs": "^6.5.11", "@react-navigation/native": "^6.1.9", "@react-navigation/native-stack": "^6.9.17", "@types/react": "~18.2.14", "expo": "~49.0.15", - "expo-blur": "^12.6.0", + "expo-blur": "^12.4.1", "expo-linear-gradient": "~12.3.0", "expo-splash-screen": "~0.20.5", "expo-status-bar": "~1.6.0", @@ -25,8 +25,8 @@ "react-native": "0.72.6", "react-native-dropdown-select-list": "^2.0.5", "react-native-paper": "^5.11.1", - "react-native-safe-area-context": "^4.7.4", - "react-native-screens": "^3.27.0", + "react-native-safe-area-context": "^4.6.3", + "react-native-screens": "^3.22.0", "react-native-splash-screen": "^3.3.0", "react-native-web": "~0.19.6", "typescript": "^5.1.3" diff --git a/LeftOvers/screens/CreateProfile.tsx b/LeftOvers/screens/CreateProfile.tsx index 864cd33..6cdd97e 100644 --- a/LeftOvers/screens/CreateProfile.tsx +++ b/LeftOvers/screens/CreateProfile.tsx @@ -11,13 +11,12 @@ export default function CreateProfile(props) { const die = [{value: "Dairy free"}, {value: "Gluten free"}, {value: "Porkless"}, {value: "Vegan"}, {value: "Vegetarian"}, {value: "Pescatarian"}] return ( - - + (console.log("Profile Created"))}> diff --git a/LeftOvers/screens/HomePage.tsx b/LeftOvers/screens/HomePage.tsx index e18fe58..d904b4d 100644 --- a/LeftOvers/screens/HomePage.tsx +++ b/LeftOvers/screens/HomePage.tsx @@ -1,19 +1,16 @@ -import React from 'react'; -import { useState } from 'react'; -import {StyleSheet, View, Text, Pressable, Image, ScrollView, SafeAreaView} from 'react-native'; -import ProfileModification from '../components/ProfileModification'; +import React, { useState } from 'react'; +import { StyleSheet, View, Text, Pressable, Image, ScrollView } from 'react-native'; +import {LinearGradient} from 'expo-linear-gradient'; +import {SafeAreaProvider} from 'react-native-safe-area-context'; + import ValidateButton from '../components/ValidateButton'; -import TopBar from '../components/TopBar'; -import ListSelect from '../components/ListSelect'; -import ListWithoutSelect from '../components/ListWithoutSelect'; import ProfileSelection from '../components/ProfileSelection'; import FoodElementText from '../components/FoodElementText'; -import {LinearGradient} from 'expo-linear-gradient'; -import {SafeAreaProvider} from 'react-native-safe-area-context'; + import bracketLeft from '../assets/images/angle_bracket_left.png'; import bracketRight from '../assets/images/angle_bracket_right.png'; -export default function HomePage({ navigation , props}) { +export default function HomePage({ navigation, props }) { const profiles = [ {name: "Johnny Silverhand", avatar: "plus_small.png", isActive: "flex"}, {name: "Panam Palmer", avatar: "plus_small.png", isActive: "none"}, @@ -44,11 +41,6 @@ export default function HomePage({ navigation , props}) { return ( - - - LeftOvers - - diff --git a/LeftOvers/screens/ModifyProfile.tsx b/LeftOvers/screens/ModifyProfile.tsx index e78197c..1272356 100644 --- a/LeftOvers/screens/ModifyProfile.tsx +++ b/LeftOvers/screens/ModifyProfile.tsx @@ -16,7 +16,7 @@ export default function ModifyProfile(props) { - + (console.log("Profile Modified"))}> diff --git a/LeftOvers/screens/Profiles.tsx b/LeftOvers/screens/Profiles.tsx index 2acef8f..c9c9ba1 100644 --- a/LeftOvers/screens/Profiles.tsx +++ b/LeftOvers/screens/Profiles.tsx @@ -1,13 +1,13 @@ -import React from 'react'; -import { useState } from 'react'; -import { StyleSheet, View, Modal, Pressable, Text, Image, ScrollView } from 'react-native'; -import {LinearGradient} from 'expo-linear-gradient'; -import {SafeAreaProvider} from 'react-native-safe-area-context'; +import React, { useState } from 'react'; +import { StyleSheet, View, Modal, Pressable, Text, Image, ScrollView, useWindowDimensions } from 'react-native'; + +import { LinearGradient } from 'expo-linear-gradient'; +import { SafeAreaProvider } from 'react-native-safe-area-context'; import ProfileDetails from '../components/ProfileDetails'; import ProfileDelete from '../components/ProfileDelete'; -export default function Profiles({props, navigation}) { +export default function Profiles({navigation, props}) { const allJohnny = [{value: "Coconut"}, {value: "Skimmed Milk"}, {value: "Nuts"}] const dieJohnny = [{value: "Gluten free"}, {value: "Porkless"}, {value: "Pescatarian"}] @@ -37,13 +37,33 @@ export default function Profiles({props, navigation}) { - + - + - + - + From 300ee8f8ba21710f7a11e2175a45e133786660c1 Mon Sep 17 00:00:00 2001 From: Remi REGNAULT Date: Thu, 23 Nov 2023 15:53:07 +0100 Subject: [PATCH 14/27] modifi --- LeftOvers/screens/CreateProfile.tsx | 6 +++--- LeftOvers/screens/FiltersSelection.tsx | 12 ++++++------ LeftOvers/screens/IngredientSelection.tsx | 5 ++--- LeftOvers/screens/ModifyProfile.tsx | 6 +++--- LeftOvers/screens/RecipeDetails.tsx | 3 +-- LeftOvers/screens/RecipeSuggestion.tsx | 6 ++++-- 6 files changed, 19 insertions(+), 19 deletions(-) diff --git a/LeftOvers/screens/CreateProfile.tsx b/LeftOvers/screens/CreateProfile.tsx index 6cdd97e..d77b825 100644 --- a/LeftOvers/screens/CreateProfile.tsx +++ b/LeftOvers/screens/CreateProfile.tsx @@ -1,11 +1,11 @@ import React from 'react'; import {StyleSheet, View, ScrollView, useWindowDimensions} from 'react-native'; -import ProfileModification from '../components/ProfileModification'; -import ValidateButton from '../components/ValidateButton'; -import TopBar from '../components/TopBar'; import { LinearGradient } from 'expo-linear-gradient'; import { SafeAreaProvider } from 'react-native-safe-area-context'; +import ProfileModification from '../components/ProfileModification'; +import ValidateButton from '../components/ValidateButton'; + export default function CreateProfile(props) { const all = [] const die = [{value: "Dairy free"}, {value: "Gluten free"}, {value: "Porkless"}, {value: "Vegan"}, {value: "Vegetarian"}, {value: "Pescatarian"}] diff --git a/LeftOvers/screens/FiltersSelection.tsx b/LeftOvers/screens/FiltersSelection.tsx index 642f92c..e83a329 100644 --- a/LeftOvers/screens/FiltersSelection.tsx +++ b/LeftOvers/screens/FiltersSelection.tsx @@ -1,13 +1,13 @@ import React from 'react'; import {StyleSheet, View, Text, ScrollView, useWindowDimensions} from 'react-native'; -import ProfileModification from '../components/ProfileModification'; +import {LinearGradient} from 'expo-linear-gradient'; +import {SafeAreaProvider} from 'react-native-safe-area-context'; + import ValidateButton from '../components/ValidateButton'; import TopBar from '../components/TopBar'; import ListSelect from '../components/ListSelect'; import ListWithoutSelect from '../components/ListWithoutSelect'; import ProfileSelection from '../components/ProfileSelection'; -import {LinearGradient} from 'expo-linear-gradient'; -import {SafeAreaProvider} from 'react-native-safe-area-context'; export default function FiltersSelection(props) { const profiles = [ @@ -55,7 +55,7 @@ export default function FiltersSelection(props) { - + console.log("change selected profile")}> @@ -76,10 +76,10 @@ export default function FiltersSelection(props) { - + console.log("add allergy")}> - + console.log("save filters")}> diff --git a/LeftOvers/screens/IngredientSelection.tsx b/LeftOvers/screens/IngredientSelection.tsx index 5ddc0bd..3b90812 100644 --- a/LeftOvers/screens/IngredientSelection.tsx +++ b/LeftOvers/screens/IngredientSelection.tsx @@ -1,11 +1,11 @@ import React from 'react'; import {View, StyleSheet, Text, Image, Pressable, ScrollView} from 'react-native'; import {SafeAreaProvider} from 'react-native-safe-area-context'; -import TopBar from '../components/TopBar'; import {Searchbar} from 'react-native-paper'; -import brochette from '../assets/images/brochette.png'; + import FoodElementText from '../components/FoodElementText'; import CustomButton from '../components/CustomButton'; + import plus from '../assets/images/plus.png'; import moins from '../assets/images/minus.png'; import meat from '../assets/images/meat_icon.png'; @@ -41,7 +41,6 @@ const ChooseItem = ({value}: ItemProps) => ( return ( - diff --git a/LeftOvers/screens/ModifyProfile.tsx b/LeftOvers/screens/ModifyProfile.tsx index 1272356..282c582 100644 --- a/LeftOvers/screens/ModifyProfile.tsx +++ b/LeftOvers/screens/ModifyProfile.tsx @@ -1,11 +1,11 @@ import React from 'react'; import {StyleSheet, View, ScrollView, useWindowDimensions} from 'react-native'; -import ProfileModification from '../components/ProfileModification'; -import ValidateButton from '../components/ValidateButton'; -import TopBar from '../components/TopBar'; import { LinearGradient } from 'expo-linear-gradient'; import { SafeAreaProvider } from 'react-native-safe-area-context'; +import ProfileModification from '../components/ProfileModification'; +import ValidateButton from '../components/ValidateButton'; + export default function ModifyProfile(props) { const all = [{value: "Mussels"}, {value: "Skimmed Milk"}, {value: "Nuts"}] const die = [{value: "Dairy free"}, {value: "Gluten free"}, {value: "Porkless"}, {value: "Vegan"}, {value: "Vegetarian"}, {value: "Pescatarian"}] diff --git a/LeftOvers/screens/RecipeDetails.tsx b/LeftOvers/screens/RecipeDetails.tsx index 6412252..fbe5a74 100644 --- a/LeftOvers/screens/RecipeDetails.tsx +++ b/LeftOvers/screens/RecipeDetails.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { View, StyleSheet, Text} from 'react-native'; import { SafeAreaProvider } from 'react-native-safe-area-context'; -import TopBar from '../components/TopBar'; + import RecipeElementReduce from '../components/RecipeElementReduce'; import AllergiesTab from '../components/AllergiesTab'; @@ -9,7 +9,6 @@ import AllergiesTab from '../components/AllergiesTab'; export default function RecipeDetails(props) { return ( - Date: Fri, 24 Nov 2023 11:40:38 +0100 Subject: [PATCH 15/27] feat : header bar is now following theme --- LeftOvers/App.tsx | 4 +- LeftOvers/navigation/BottomBar.tsx | 2 +- LeftOvers/navigation/CookingStackScreen.tsx | 33 +++++++++------- LeftOvers/navigation/HomeStackScreen.tsx | 19 ++++----- LeftOvers/navigation/ProfileStackScreen.tsx | 44 ++++++++++++--------- LeftOvers/navigation/Utils.tsx | 24 ++++++----- 6 files changed, 70 insertions(+), 56 deletions(-) diff --git a/LeftOvers/App.tsx b/LeftOvers/App.tsx index a828d17..d804abb 100644 --- a/LeftOvers/App.tsx +++ b/LeftOvers/App.tsx @@ -16,8 +16,8 @@ export default function App() { return ( - }> - + }> + diff --git a/LeftOvers/navigation/BottomBar.tsx b/LeftOvers/navigation/BottomBar.tsx index 69d4496..0dda8b9 100644 --- a/LeftOvers/navigation/BottomBar.tsx +++ b/LeftOvers/navigation/BottomBar.tsx @@ -36,7 +36,7 @@ export default function BottomBar({ state, descriptors, navigation }) { right: 0, left: 0, height: 70, - backgroundColor: theme === 'dark' ? "#3F3C42": "transparent" + backgroundColor: theme === 'dark' ? "#3F3C42" : "transparent" }, BottomBarBlurContainer: { flexDirection: 'row', diff --git a/LeftOvers/navigation/CookingStackScreen.tsx b/LeftOvers/navigation/CookingStackScreen.tsx index e974f41..b94c8d8 100644 --- a/LeftOvers/navigation/CookingStackScreen.tsx +++ b/LeftOvers/navigation/CookingStackScreen.tsx @@ -1,27 +1,30 @@ -import React from 'react' +import React, { useContext } from 'react' import { StyleSheet } from 'react-native' import { createNativeStackNavigator } from '@react-navigation/native-stack'; import IngredientSelection from '../screens/IngredientSelection'; import { HeaderTitle } from './Utils'; +import ThemeContext from '../theme/ThemeContext'; const CookingStack = createNativeStackNavigator() export default function CookingStackScreen() { - return ( - - ( - - ) - }} - /> - - ) + const {theme, toggleTheme} = useContext(ThemeContext); + + return ( + + ( + + ) + }} + /> + + ) } const styles = StyleSheet.create({ diff --git a/LeftOvers/navigation/HomeStackScreen.tsx b/LeftOvers/navigation/HomeStackScreen.tsx index 5c55f2c..631a7c1 100644 --- a/LeftOvers/navigation/HomeStackScreen.tsx +++ b/LeftOvers/navigation/HomeStackScreen.tsx @@ -1,13 +1,15 @@ -import React from 'react'; +import React, { useContext } from 'react'; import { Image, Text, StyleSheet } from 'react-native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import HomePage from '../screens/HomePage'; import Profiles from '../screens/Profiles'; -import { HeaderTitle } from './Utils'; -import appLogo from '../assets/images/logo.png'; import CreateProfile from '../screens/CreateProfile'; import ModifyProfile from '../screens/ModifyProfile'; +import ThemeContext from '../theme/ThemeContext'; +import { HeaderTitle } from './Utils'; + +import appLogo from '../assets/images/logo.png'; const HomeStack = createNativeStackNavigator() @@ -20,13 +22,15 @@ function AppIcon() { } export default function HomeStackScreen() { + const {theme, toggleTheme} = useContext(ThemeContext) + return ( ( @@ -46,7 +50,7 @@ export default function HomeStackScreen() { name='Profiles' component={Profiles} options={{ - headerStyle: styles.headerBarContainer, + headerStyle: {backgroundColor: theme === 'light' ? '#F2F0E4' : '#3F3C42'}, headerTitle: () => ( ) @@ -56,7 +60,7 @@ export default function HomeStackScreen() { name='ProfileModification' component={ModifyProfile} options={{ - headerStyle: styles.headerBarContainer, + headerStyle: {backgroundColor: theme === 'light' ? '#F2F0E4' : '#3F3C42'}, headerTitle: () => ( ) @@ -67,9 +71,6 @@ export default function HomeStackScreen() { } const styles = StyleSheet.create({ - headerBarContainer: { - backgroundColor: '#F2F0E4', - }, headerAppIcon: { width: 45, height: 45, diff --git a/LeftOvers/navigation/ProfileStackScreen.tsx b/LeftOvers/navigation/ProfileStackScreen.tsx index 1a18c12..ea88a7f 100644 --- a/LeftOvers/navigation/ProfileStackScreen.tsx +++ b/LeftOvers/navigation/ProfileStackScreen.tsx @@ -1,10 +1,11 @@ -import React from 'react' +import React, { useContext } from 'react' import { StyleSheet, View, Image, Pressable } from 'react-native' import { createNativeStackNavigator } from '@react-navigation/native-stack'; import Profiles from '../screens/Profiles'; import CreateProfile from '../screens/CreateProfile'; import ModifyProfile from '../screens/ModifyProfile'; +import ThemeContext from '../theme/ThemeContext'; import { HeaderTitle } from './Utils'; @@ -14,6 +15,25 @@ import AddIcon from '../assets/images/plus.png' const ProfilesStack = createNativeStackNavigator() export default function ProfilesStackScreen({ navigation }) { + const {theme, toggleTheme} = useContext(ThemeContext); + + const styles = StyleSheet.create({ + headerBarContainer: { + backgroundColor: theme === 'light' ? '#F2F0E4' : '#3F3C42', + }, + headerBarRightContainer: { + display: 'flex', + flexDirection: 'row', + alignContent: 'space-between', + marginHorizontal: 10, + }, + headerBarIcon: { + width: 30, + height: 30, + marginHorizontal: 10 + } + }) + const _handleSearch = () => console.log('Searching'); const _handleHeaderAdd = () => navigation.navigate('ProfileCreation'); @@ -32,12 +52,14 @@ export default function ProfilesStackScreen({ navigation }) { + style={styles.headerBarIcon} + tintColor={theme === 'light' ? '#3F3C42' : '#F2F0E4'}/> + style={styles.headerBarIcon} + tintColor={theme === 'light' ? '#3F3C42' : '#F2F0E4'}/> ) @@ -67,19 +89,3 @@ export default function ProfilesStackScreen({ navigation }) { ) } -const styles = StyleSheet.create({ - headerBarContainer: { - backgroundColor: '#F2F0E4', - }, - headerBarRightContainer: { - display: 'flex', - flexDirection: 'row', - alignContent: 'space-between', - marginHorizontal: 10, - }, - headerBarIcon: { - width: 30, - height: 30, - marginHorizontal: 10 - } -}) \ No newline at end of file diff --git a/LeftOvers/navigation/Utils.tsx b/LeftOvers/navigation/Utils.tsx index f0811dc..ddcf8d3 100644 --- a/LeftOvers/navigation/Utils.tsx +++ b/LeftOvers/navigation/Utils.tsx @@ -1,19 +1,23 @@ -import React from 'react'; +import React, { useContext } from 'react'; import { Text, StyleSheet } from 'react-native'; +import ThemeContext from '../theme/ThemeContext'; + export function HeaderTitle(props) { + const {theme, toggleTheme} = useContext(ThemeContext); + + const styles = StyleSheet.create({ + headerTitle: { + fontSize: 20, + fontWeight: "bold", + color: theme === 'light' ? '#3F3C42' : '#F2F0E4', + } + }) + return ( {props.title} ) -} - -const styles = StyleSheet.create({ - headerTitle: { - fontSize: 20, - fontWeight: "bold", - color: '#3F3C42', - } -}) \ No newline at end of file +} \ No newline at end of file From 07a865b9c81145f4bd96ca493e0ff05a8740ebd1 Mon Sep 17 00:00:00 2001 From: Remi REGNAULT Date: Mon, 27 Nov 2023 09:17:49 +0100 Subject: [PATCH 16/27] profiles was not displayed as it should, now working --- LeftOvers/components/ListSelect.tsx | 2 +- LeftOvers/components/ProfileDetails.tsx | 16 +++++++--------- 2 files changed, 8 insertions(+), 10 deletions(-) diff --git a/LeftOvers/components/ListSelect.tsx b/LeftOvers/components/ListSelect.tsx index 55d9704..e4fc101 100644 --- a/LeftOvers/components/ListSelect.tsx +++ b/LeftOvers/components/ListSelect.tsx @@ -6,7 +6,7 @@ import { MultipleSelectList, SelectList } from 'react-native-dropdown-select-lis type ListProps = { title: string - content : list + content : string[] } export default function ListSelect(props: ListProps) { diff --git a/LeftOvers/components/ProfileDetails.tsx b/LeftOvers/components/ProfileDetails.tsx index 9b7ef35..78d73a5 100644 --- a/LeftOvers/components/ProfileDetails.tsx +++ b/LeftOvers/components/ProfileDetails.tsx @@ -1,14 +1,14 @@ import React, { useState } from 'react'; -import {StyleSheet, Text, TextInput, View, Image, Pressable, FlexStyle} from 'react-native'; -import ValidateButton from './ValidateButton'; -import ListWithoutSelect from './ListWithoutSelect'; +import { StyleSheet, Text, View, Image, Pressable } from 'react-native'; import { useNavigation } from '@react-navigation/native'; +import ListWithoutSelect from './ListWithoutSelect'; + type ProfileProps = { name: string avatar: string - diets: list - allergies: list + diets: string[] + allergies: string[] onDeleteProfile: () => void } @@ -41,9 +41,7 @@ export default function ProfileDetails(props) { {props.name} - navigation.navigate('ProfileModification')}> - - + @@ -55,7 +53,7 @@ export default function ProfileDetails(props) { - + From da8075e30317a68096ea48baedd65ebf374421aa Mon Sep 17 00:00:00 2001 From: Remi REGNAULT Date: Mon, 27 Nov 2023 15:49:37 +0100 Subject: [PATCH 17/27] feat add colors context see next push if its working --- LeftOvers/App.tsx | 17 ++- LeftOvers/components/ProfileElement.tsx | 2 +- LeftOvers/components/ValidateButton.tsx | 15 +- LeftOvers/navigation/BottomBar.tsx | 8 +- LeftOvers/screens/HomePage.tsx | 177 +++++++++++------------- LeftOvers/theme/ColorContext.tsx | 42 ++++++ LeftOvers/theme/ThemeContext.tsx | 2 +- LeftOvers/theme/colors.ts | 57 ++++++++ 8 files changed, 207 insertions(+), 113 deletions(-) create mode 100644 LeftOvers/theme/ColorContext.tsx create mode 100644 LeftOvers/theme/colors.ts diff --git a/LeftOvers/App.tsx b/LeftOvers/App.tsx index d804abb..9ef8c57 100644 --- a/LeftOvers/App.tsx +++ b/LeftOvers/App.tsx @@ -7,6 +7,7 @@ import ProfilesStackScreen from './navigation/ProfileStackScreen'; import CookingStackScreen from './navigation/CookingStackScreen'; import BottomBar from './navigation/BottomBar'; import { ThemeProvider } from './theme/ThemeContext'; +import { ColorProvider } from './theme/ColorContext'; const Tab = createBottomTabNavigator(); @@ -15,13 +16,15 @@ export default function App() { return ( - - }> - - - - - + + + }> + + + + + + ); } \ No newline at end of file diff --git a/LeftOvers/components/ProfileElement.tsx b/LeftOvers/components/ProfileElement.tsx index f7c392d..fb8bd35 100644 --- a/LeftOvers/components/ProfileElement.tsx +++ b/LeftOvers/components/ProfileElement.tsx @@ -1,4 +1,4 @@ -import {React, useState} from 'react'; +import React, { useState } from 'react'; import {StyleSheet,Pressable, Text, View, Image} from 'react-native'; type Profile = { diff --git a/LeftOvers/components/ValidateButton.tsx b/LeftOvers/components/ValidateButton.tsx index fa517a6..9a8d544 100644 --- a/LeftOvers/components/ValidateButton.tsx +++ b/LeftOvers/components/ValidateButton.tsx @@ -72,15 +72,14 @@ export default function ValidateButton(props: ValidateButtonProps) { padding: "2%", paddingRight: "3%",}}> - + height: "90%", + width: "9%", + marginLeft: "2%", + marginRight: "3%", + resizeMode: "contain",}} + tintColor={props.colour}/> - + @@ -102,96 +182,3 @@ export default function HomePage({ navigation, props }) { ); } -const styles = StyleSheet.create({ - container: { - width: "100%", - flex: 1, - backgroundColor: '#3F3C42', - alignItems: 'center', - justifyContent: 'center', - }, - linearGradient: { - width: "100%", - flex: 1, - padding: "2%", - paddingTop: 0, - }, - separator: { - marginTop: "6%" - }, - - filterBar: { - flexDirection: "row", - width: "85%", - paddingTop: "3%", - paddingBottom: "2%", - alignItems: "flex-end", - justifyContent: "center", - }, - filters: { - fontSize: 20, - color: '#ACA279', - flex: 1, - }, - nbSelected: { - fontSize: 11, - color: "#3F3C42", - textAlign: "right", - }, - - profilesSelection: { - alignItems: 'center', - justifyContent: 'center', - borderRadius: 20, - backgroundColor: '#F2F0E4', - marginHorizontal: "3%", - paddingBottom: "3%", - }, - - welcome: { - alignItems: 'center', - justifyContent: 'center', - borderRadius: 20, - backgroundColor: '#F2F0E4', - paddingVertical: "3%", - paddingHorizontal: "7%", - marginHorizontal: "3%", - }, - text: { - fontSize: 20, - color: '#ACA279', - }, - name: { - fontSize: 20, - fontWeight: "bold", - color: '#59BDCD', - }, - - ingredientSelection: { - width: "90%", - alignItems: 'center', - justifyContent: 'center', - borderRadius: 20, - backgroundColor: '#E3DEC9', - borderWidth: 2, - borderColor: "#ACA279", - padding: "2%" - }, - - appName: { - fontSize: 20, - fontWeight: "bold", - color: '#3F3C42', - textAlign: "center", - flex: 0.8, - }, - topBar: { - flexDirection: 'row', - width: "100%", - height: "11%", - alignItems: 'center', - justifyContent: 'center', - backgroundColor: '#F2F0E4', - paddingTop: "8%", - }, -}); \ No newline at end of file diff --git a/LeftOvers/theme/ColorContext.tsx b/LeftOvers/theme/ColorContext.tsx new file mode 100644 index 0000000..5cad2ce --- /dev/null +++ b/LeftOvers/theme/ColorContext.tsx @@ -0,0 +1,42 @@ +import React, {createContext, useState, useEffect} from 'react'; +import AsyncStorage from '@react-native-async-storage/async-storage'; + +import { DarkTheme, LightTheme, Theme } from './colors'; + +interface ColorContextType { + colors: Theme, + toggleColor: (Theme) => void +}; + +const ColorContext = createContext(null); + +export const ColorProvider = ({ children }) => { + const [colors, setColors] = useState(LightTheme); + + useEffect(() => { + const getColors = async () => { + try { + const savedColors = await AsyncStorage.getItem('colors'); + if (savedColors) { + setColors(JSON.parse(savedColors)); + } + } catch (error) { + console.log('Error loading colors:', error); + } + }; + getColors(); + }, []); + + const toggleColor = (newColors: Theme) => { + setColors(newColors); + AsyncStorage.setItem('colors', JSON.stringify(newColors)) + }; + + return ( + + {children} + + ); +}; + +export default ColorContext; \ No newline at end of file diff --git a/LeftOvers/theme/ThemeContext.tsx b/LeftOvers/theme/ThemeContext.tsx index 080fec7..e8e9817 100644 --- a/LeftOvers/theme/ThemeContext.tsx +++ b/LeftOvers/theme/ThemeContext.tsx @@ -9,7 +9,7 @@ interface ThemeContextType { const ThemeContext = createContext(null); -export const ThemeProvider = ({children}) => { +export const ThemeProvider = ({ children }) => { const [theme, setTheme] = useState('light'); useEffect(() => { diff --git a/LeftOvers/theme/colors.ts b/LeftOvers/theme/colors.ts new file mode 100644 index 0000000..2ce4786 --- /dev/null +++ b/LeftOvers/theme/colors.ts @@ -0,0 +1,57 @@ +const Ecru = '#ACA279' +const Alabaster = '#F2F0E4' +const Jet = '#3F3C42' +const Moonstone = '#59BDCD' +const Cerulean = '#2680AA' +const Celeste = '#ADF3EA' +const Tan = '#E0C293' +const Pearl = '#E3DEC9' +const EerieBlack = '#222222' +const CarolinaBlue = '#8DB4D9' +const SteelBlue = '#5882A8' + +export interface Theme { + primary: string, + primaryComplement: string, + cardBackground: string, + cardTitle: string, + cardDetail: string, + cardElementBackground: string, + cardElementText: string, + cardElementBorder: string, + cardElementTitle: string + ingredientBackground: string, + ingredientContent: string, + ingredientBorder: string, +} + +export const LightTheme : Theme = { + primary: Cerulean, + primaryComplement: Moonstone, + cardBackground: Alabaster, + cardTitle: Ecru, + cardDetail: Jet, + cardElementBackground: Pearl, + cardElementText: Jet, + cardElementBorder: Ecru, + cardElementTitle: Jet, + ingredientBackground: Pearl, + ingredientBorder: EerieBlack, + ingredientContent: Jet, +} + +export const DarkTheme : Theme = { + primary: EerieBlack, + primaryComplement: Jet, + cardBackground: Jet, + cardTitle: Ecru, + cardDetail: Alabaster, + cardElementBackground: SteelBlue, + cardElementText: Jet, + cardElementTitle: Alabaster, + cardElementBorder: SteelBlue, + ingredientBackground: EerieBlack, + ingredientBorder: SteelBlue, + ingredientContent: Alabaster +} + From 3c1c537a1ae65da75e516f79821f6477ebee0148 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9mi=20REGNAULT?= Date: Tue, 28 Nov 2023 08:21:52 +0100 Subject: [PATCH 18/27] =?UTF-8?q?Mise=20=C3=A0=20jour=20de=20'.drone.yml'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .drone.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.drone.yml b/.drone.yml index a4fc85b..002ca6e 100644 --- a/.drone.yml +++ b/.drone.yml @@ -12,7 +12,7 @@ steps: commands: - cd ./LeftOvers/ - npm install - - npm run + - npm run android - name: code-analysis image: node:latest From 243b56ed07344012119b6d765b743e91e0035c4f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9mi=20REGNAULT?= Date: Tue, 28 Nov 2023 08:54:46 +0100 Subject: [PATCH 19/27] =?UTF-8?q?Mise=20=C3=A0=20jour=20de=20'.drone.yml'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .drone.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.drone.yml b/.drone.yml index 002ca6e..b422864 100644 --- a/.drone.yml +++ b/.drone.yml @@ -12,7 +12,7 @@ steps: commands: - cd ./LeftOvers/ - npm install - - npm run android + - npm run web - name: code-analysis image: node:latest From 62cc0f3a111c0d67f4188e6b2ee8544d11b4a912 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9mi=20REGNAULT?= Date: Tue, 28 Nov 2023 09:19:33 +0100 Subject: [PATCH 20/27] =?UTF-8?q?Mise=20=C3=A0=20jour=20de=20'.drone.yml'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .drone.yml | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/.drone.yml b/.drone.yml index b422864..c44865f 100644 --- a/.drone.yml +++ b/.drone.yml @@ -28,5 +28,4 @@ steps: - unzip -o $HOME/.sonar/sonar-scanner.zip -d $HOME/.sonar/ - export PATH=$SONAR_SCANNER_HOME/bin:$PATH - export SONAR_SCANNER_OPTS="-server" - - sonar-scanner -D sonar.projectKey=LeftOvers -D sonar.sources=. -D sonar.host.url=https://codefirst.iut.uca.fr/sonar - depends_on: [ app-build ] \ No newline at end of file + - sonar-scanner -D sonar.projectKey=LeftOvers -D sonar.sources=. -D sonar.host.url=https://codefirst.iut.uca.fr/sonar \ No newline at end of file From 7a7703b1727b6290e1962bd364005bad4c7c3047 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9mi=20REGNAULT?= Date: Tue, 28 Nov 2023 09:20:09 +0100 Subject: [PATCH 21/27] =?UTF-8?q?Mise=20=C3=A0=20jour=20de=20'.drone.yml'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .drone.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.drone.yml b/.drone.yml index c44865f..cc83ec8 100644 --- a/.drone.yml +++ b/.drone.yml @@ -12,7 +12,7 @@ steps: commands: - cd ./LeftOvers/ - npm install - - npm run web + - npm run - name: code-analysis image: node:latest From e1223f380675044ac648271319a6c3b9a5fb8dca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9mi=20REGNAULT?= Date: Tue, 28 Nov 2023 09:32:55 +0100 Subject: [PATCH 22/27] add .java exclusions --- .drone.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.drone.yml b/.drone.yml index cc83ec8..7f1dcbe 100644 --- a/.drone.yml +++ b/.drone.yml @@ -28,4 +28,4 @@ steps: - unzip -o $HOME/.sonar/sonar-scanner.zip -d $HOME/.sonar/ - export PATH=$SONAR_SCANNER_HOME/bin:$PATH - export SONAR_SCANNER_OPTS="-server" - - sonar-scanner -D sonar.projectKey=LeftOvers -D sonar.sources=. -D sonar.host.url=https://codefirst.iut.uca.fr/sonar \ No newline at end of file + - sonar-scanner -D sonar.projectKey=LeftOvers -D sonar.sources=. -D sonar.host.url=https://codefirst.iut.uca.fr/sonar -D sonar.exclusions=**/*.java \ No newline at end of file From 13d10fddd8401393ecca6a8424f9b298d7368672 Mon Sep 17 00:00:00 2001 From: Remi REGNAULT Date: Tue, 28 Nov 2023 11:04:20 +0100 Subject: [PATCH 23/27] tried to build from android --- LeftOvers/.gitattributes | 10 +- LeftOvers/.gitignore | 6 + LeftOvers/package-lock.json | 250 ++++++++++++++++++++++++++++++------ 3 files changed, 229 insertions(+), 37 deletions(-) diff --git a/LeftOvers/.gitattributes b/LeftOvers/.gitattributes index d42ff18..097f9f9 100644 --- a/LeftOvers/.gitattributes +++ b/LeftOvers/.gitattributes @@ -1 +1,9 @@ -*.pbxproj -text +# +# https://help.github.com/articles/dealing-with-line-endings/ +# +# Linux start script should use lf +/gradlew text eol=lf + +# These are Windows script files and should use crlf +*.bat text eol=crlf + diff --git a/LeftOvers/.gitignore b/LeftOvers/.gitignore index 05647d5..34b9dee 100644 --- a/LeftOvers/.gitignore +++ b/LeftOvers/.gitignore @@ -33,3 +33,9 @@ yarn-error.* # typescript *.tsbuildinfo + +# Ignore Gradle project-specific cache directory +.gradle + +# Ignore Gradle build output directory +build diff --git a/LeftOvers/package-lock.json b/LeftOvers/package-lock.json index f369f06..8270eaa 100644 --- a/LeftOvers/package-lock.json +++ b/LeftOvers/package-lock.json @@ -2022,9 +2022,9 @@ } }, "node_modules/@expo/cli": { - "version": "0.10.14", - "resolved": "https://registry.npmjs.org/@expo/cli/-/cli-0.10.14.tgz", - "integrity": "sha512-IIZ9mYYHpNkK9XJAWLPtwTwZmasDq/NJsHLPjLtw5la4ANjWWwKYUcl3XKBECKovSDn9WHEQHGsBz6cyKS88Mg==", + "version": "0.10.16", + "resolved": "https://registry.npmjs.org/@expo/cli/-/cli-0.10.16.tgz", + "integrity": "sha512-EwgnRN5AMElg0JJjFLJTPk5hYkVXxnNMLIvZBiTfGoCq+rDw6u7Mg5l2Bbm/geSHOoplaHyPZ/Wr23FAuZWehA==", "dependencies": { "@babel/runtime": "^7.20.0", "@expo/code-signing-certificates": "0.0.5", @@ -7928,9 +7928,12 @@ "integrity": "sha512-W6Af2Iw1z4CB7q4uU4hv646dW9GQuBM+YpC0UvUCWSD8w90SJjp+ujJuXaEMtAXBtSqGfMPuFOVn4/+FlaqfBA==" }, "node_modules/component-type": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/component-type/-/component-type-1.2.1.tgz", - "integrity": "sha512-Kgy+2+Uwr75vAi6ChWXgHuLvd+QLD7ssgpaRq2zCvt80ptvAfMc/hijcJxXkBa2wMlEZcJvC2H8Ubo+A9ATHIg==" + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/component-type/-/component-type-1.2.2.tgz", + "integrity": "sha512-99VUHREHiN5cLeHm3YLq312p6v+HUEcwtLCAtelvUDI6+SH5g5Cr85oNR2S1o6ywzL0ykMbuwLzM2ANocjEOIA==", + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } }, "node_modules/compressible": { "version": "2.0.18", @@ -9161,12 +9164,12 @@ } }, "node_modules/expo": { - "version": "49.0.16", - "resolved": "https://registry.npmjs.org/expo/-/expo-49.0.16.tgz", - "integrity": "sha512-1TcpWUEpzCQ7FjtwO1j+l/UvNgrEDZWfQm4kOo9eVZVDNKavYo+KL4XXHeljSAOOGhI/plmpD3bvhfYoywOAFQ==", + "version": "49.0.21", + "resolved": "https://registry.npmjs.org/expo/-/expo-49.0.21.tgz", + "integrity": "sha512-JpHL6V0yt8/fzsmkAdPdtsah+lU6Si4ac7MDklLYvzEil7HAFEsN/pf06wQ21ax4C+BL27hI6JJoD34tzXUCJA==", "dependencies": { "@babel/runtime": "^7.20.0", - "@expo/cli": "0.10.14", + "@expo/cli": "0.10.16", "@expo/config": "8.1.2", "@expo/config-plugins": "7.2.5", "@expo/vector-icons": "^13.0.0", @@ -9174,11 +9177,11 @@ "expo-application": "~5.3.0", "expo-asset": "~8.10.1", "expo-constants": "~14.4.2", - "expo-file-system": "~15.4.4", + "expo-file-system": "~15.4.5", "expo-font": "~11.4.0", "expo-keep-awake": "~12.3.0", "expo-modules-autolinking": "1.5.1", - "expo-modules-core": "1.5.11", + "expo-modules-core": "1.5.12", "fbemitter": "^3.0.0", "invariant": "^2.2.4", "md5-file": "^3.2.3", @@ -9233,9 +9236,9 @@ } }, "node_modules/expo-file-system": { - "version": "15.4.4", - "resolved": "https://registry.npmjs.org/expo-file-system/-/expo-file-system-15.4.4.tgz", - "integrity": "sha512-F0xS88D85F7qVQ61r0qBnzh6VW/s6iIl+VaQEEi2nAIOQHw1JIEj4yCXPLTtbyn5VmArbe2dSL3KYz1V+BLkKA==", + "version": "15.4.5", + "resolved": "https://registry.npmjs.org/expo-file-system/-/expo-file-system-15.4.5.tgz", + "integrity": "sha512-xy61KaTaDgXhT/dllwYDHm3ch026EyO8j4eC6wSVr/yE12MMMxAC09yGwy4f7kkOs6ztGVQF5j7ldRzNLN4l0Q==", "dependencies": { "uuid": "^3.4.0" }, @@ -9384,9 +9387,9 @@ } }, "node_modules/expo-modules-core": { - "version": "1.5.11", - "resolved": "https://registry.npmjs.org/expo-modules-core/-/expo-modules-core-1.5.11.tgz", - "integrity": "sha512-1Dj2t74nVjxq6xEQf2b9WFfAMhPzVnR0thY0PfRFgob4STyj3sq1U4PIHVWvKQBtDKIa227DrNRb+Hu+LqKWQg==", + "version": "1.5.12", + "resolved": "https://registry.npmjs.org/expo-modules-core/-/expo-modules-core-1.5.12.tgz", + "integrity": "sha512-mY4wTDU458dhwk7IVxLNkePlYXjs9BTgk4NQHBUXf0LapXsvr+i711qPZaFNO4egf5qq6fQV+Yfd/KUguHstnQ==", "dependencies": { "compare-versions": "^3.4.0", "invariant": "^2.2.4" @@ -11884,6 +11887,139 @@ "lightningcss-win32-x64-msvc": "1.19.0" } }, + "node_modules/lightningcss-darwin-arm64": { + "version": "1.19.0", + "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.19.0.tgz", + "integrity": "sha512-wIJmFtYX0rXHsXHSr4+sC5clwblEMji7HHQ4Ub1/CznVRxtCFha6JIt5JZaNf8vQrfdZnBxLLC6R8pC818jXqg==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-darwin-x64": { + "version": "1.19.0", + "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.19.0.tgz", + "integrity": "sha512-Lif1wD6P4poaw9c/4Uh2z+gmrWhw/HtXFoeZ3bEsv6Ia4tt8rOJBdkfVaUJ6VXmpKHALve+iTyP2+50xY1wKPw==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-arm-gnueabihf": { + "version": "1.19.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.19.0.tgz", + "integrity": "sha512-P15VXY5682mTXaiDtbnLYQflc8BYb774j2R84FgDLJTN6Qp0ZjWEFyN1SPqyfTj2B2TFjRHRUvQSSZ7qN4Weig==", + "cpu": [ + "arm" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-arm64-gnu": { + "version": "1.19.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.19.0.tgz", + "integrity": "sha512-zwXRjWqpev8wqO0sv0M1aM1PpjHz6RVIsBcxKszIG83Befuh4yNysjgHVplF9RTU7eozGe3Ts7r6we1+Qkqsww==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-arm64-musl": { + "version": "1.19.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.19.0.tgz", + "integrity": "sha512-vSCKO7SDnZaFN9zEloKSZM5/kC5gbzUjoJQ43BvUpyTFUX7ACs/mDfl2Eq6fdz2+uWhUh7vf92c4EaaP4udEtA==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-x64-gnu": { + "version": "1.19.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.19.0.tgz", + "integrity": "sha512-0AFQKvVzXf9byrXUq9z0anMGLdZJS+XSDqidyijI5njIwj6MdbvX2UZK/c4FfNmeRa2N/8ngTffoIuOUit5eIQ==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-x64-musl": { + "version": "1.19.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.19.0.tgz", + "integrity": "sha512-SJoM8CLPt6ECCgSuWe+g0qo8dqQYVcPiW2s19dxkmSI5+Uu1GIRzyKA0b7QqmEXolA+oSJhQqCmJpzjY4CuZAg==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, "node_modules/lightningcss-win32-x64-msvc": { "version": "1.19.0", "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.19.0.tgz", @@ -18989,9 +19125,9 @@ } }, "@expo/cli": { - "version": "0.10.14", - "resolved": "https://registry.npmjs.org/@expo/cli/-/cli-0.10.14.tgz", - "integrity": "sha512-IIZ9mYYHpNkK9XJAWLPtwTwZmasDq/NJsHLPjLtw5la4ANjWWwKYUcl3XKBECKovSDn9WHEQHGsBz6cyKS88Mg==", + "version": "0.10.16", + "resolved": "https://registry.npmjs.org/@expo/cli/-/cli-0.10.16.tgz", + "integrity": "sha512-EwgnRN5AMElg0JJjFLJTPk5hYkVXxnNMLIvZBiTfGoCq+rDw6u7Mg5l2Bbm/geSHOoplaHyPZ/Wr23FAuZWehA==", "requires": { "@babel/runtime": "^7.20.0", "@expo/code-signing-certificates": "0.0.5", @@ -23482,9 +23618,9 @@ "integrity": "sha512-W6Af2Iw1z4CB7q4uU4hv646dW9GQuBM+YpC0UvUCWSD8w90SJjp+ujJuXaEMtAXBtSqGfMPuFOVn4/+FlaqfBA==" }, "component-type": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/component-type/-/component-type-1.2.1.tgz", - "integrity": "sha512-Kgy+2+Uwr75vAi6ChWXgHuLvd+QLD7ssgpaRq2zCvt80ptvAfMc/hijcJxXkBa2wMlEZcJvC2H8Ubo+A9ATHIg==" + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/component-type/-/component-type-1.2.2.tgz", + "integrity": "sha512-99VUHREHiN5cLeHm3YLq312p6v+HUEcwtLCAtelvUDI6+SH5g5Cr85oNR2S1o6ywzL0ykMbuwLzM2ANocjEOIA==" }, "compressible": { "version": "2.0.18", @@ -24367,12 +24503,12 @@ } }, "expo": { - "version": "49.0.16", - "resolved": "https://registry.npmjs.org/expo/-/expo-49.0.16.tgz", - "integrity": "sha512-1TcpWUEpzCQ7FjtwO1j+l/UvNgrEDZWfQm4kOo9eVZVDNKavYo+KL4XXHeljSAOOGhI/plmpD3bvhfYoywOAFQ==", + "version": "49.0.21", + "resolved": "https://registry.npmjs.org/expo/-/expo-49.0.21.tgz", + "integrity": "sha512-JpHL6V0yt8/fzsmkAdPdtsah+lU6Si4ac7MDklLYvzEil7HAFEsN/pf06wQ21ax4C+BL27hI6JJoD34tzXUCJA==", "requires": { "@babel/runtime": "^7.20.0", - "@expo/cli": "0.10.14", + "@expo/cli": "0.10.16", "@expo/config": "8.1.2", "@expo/config-plugins": "7.2.5", "@expo/vector-icons": "^13.0.0", @@ -24380,11 +24516,11 @@ "expo-application": "~5.3.0", "expo-asset": "~8.10.1", "expo-constants": "~14.4.2", - "expo-file-system": "~15.4.4", + "expo-file-system": "~15.4.5", "expo-font": "~11.4.0", "expo-keep-awake": "~12.3.0", "expo-modules-autolinking": "1.5.1", - "expo-modules-core": "1.5.11", + "expo-modules-core": "1.5.12", "fbemitter": "^3.0.0", "invariant": "^2.2.4", "md5-file": "^3.2.3", @@ -24429,9 +24565,9 @@ } }, "expo-file-system": { - "version": "15.4.4", - "resolved": "https://registry.npmjs.org/expo-file-system/-/expo-file-system-15.4.4.tgz", - "integrity": "sha512-F0xS88D85F7qVQ61r0qBnzh6VW/s6iIl+VaQEEi2nAIOQHw1JIEj4yCXPLTtbyn5VmArbe2dSL3KYz1V+BLkKA==", + "version": "15.4.5", + "resolved": "https://registry.npmjs.org/expo-file-system/-/expo-file-system-15.4.5.tgz", + "integrity": "sha512-xy61KaTaDgXhT/dllwYDHm3ch026EyO8j4eC6wSVr/yE12MMMxAC09yGwy4f7kkOs6ztGVQF5j7ldRzNLN4l0Q==", "requires": { "uuid": "^3.4.0" } @@ -24540,9 +24676,9 @@ } }, "expo-modules-core": { - "version": "1.5.11", - "resolved": "https://registry.npmjs.org/expo-modules-core/-/expo-modules-core-1.5.11.tgz", - "integrity": "sha512-1Dj2t74nVjxq6xEQf2b9WFfAMhPzVnR0thY0PfRFgob4STyj3sq1U4PIHVWvKQBtDKIa227DrNRb+Hu+LqKWQg==", + "version": "1.5.12", + "resolved": "https://registry.npmjs.org/expo-modules-core/-/expo-modules-core-1.5.12.tgz", + "integrity": "sha512-mY4wTDU458dhwk7IVxLNkePlYXjs9BTgk4NQHBUXf0LapXsvr+i711qPZaFNO4egf5qq6fQV+Yfd/KUguHstnQ==", "requires": { "compare-versions": "^3.4.0", "invariant": "^2.2.4" @@ -26399,6 +26535,48 @@ "lightningcss-win32-x64-msvc": "1.19.0" } }, + "lightningcss-darwin-arm64": { + "version": "1.19.0", + "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.19.0.tgz", + "integrity": "sha512-wIJmFtYX0rXHsXHSr4+sC5clwblEMji7HHQ4Ub1/CznVRxtCFha6JIt5JZaNf8vQrfdZnBxLLC6R8pC818jXqg==", + "optional": true + }, + "lightningcss-darwin-x64": { + "version": "1.19.0", + "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.19.0.tgz", + "integrity": "sha512-Lif1wD6P4poaw9c/4Uh2z+gmrWhw/HtXFoeZ3bEsv6Ia4tt8rOJBdkfVaUJ6VXmpKHALve+iTyP2+50xY1wKPw==", + "optional": true + }, + "lightningcss-linux-arm-gnueabihf": { + "version": "1.19.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.19.0.tgz", + "integrity": "sha512-P15VXY5682mTXaiDtbnLYQflc8BYb774j2R84FgDLJTN6Qp0ZjWEFyN1SPqyfTj2B2TFjRHRUvQSSZ7qN4Weig==", + "optional": true + }, + "lightningcss-linux-arm64-gnu": { + "version": "1.19.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.19.0.tgz", + "integrity": "sha512-zwXRjWqpev8wqO0sv0M1aM1PpjHz6RVIsBcxKszIG83Befuh4yNysjgHVplF9RTU7eozGe3Ts7r6we1+Qkqsww==", + "optional": true + }, + "lightningcss-linux-arm64-musl": { + "version": "1.19.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.19.0.tgz", + "integrity": "sha512-vSCKO7SDnZaFN9zEloKSZM5/kC5gbzUjoJQ43BvUpyTFUX7ACs/mDfl2Eq6fdz2+uWhUh7vf92c4EaaP4udEtA==", + "optional": true + }, + "lightningcss-linux-x64-gnu": { + "version": "1.19.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.19.0.tgz", + "integrity": "sha512-0AFQKvVzXf9byrXUq9z0anMGLdZJS+XSDqidyijI5njIwj6MdbvX2UZK/c4FfNmeRa2N/8ngTffoIuOUit5eIQ==", + "optional": true + }, + "lightningcss-linux-x64-musl": { + "version": "1.19.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.19.0.tgz", + "integrity": "sha512-SJoM8CLPt6ECCgSuWe+g0qo8dqQYVcPiW2s19dxkmSI5+Uu1GIRzyKA0b7QqmEXolA+oSJhQqCmJpzjY4CuZAg==", + "optional": true + }, "lightningcss-win32-x64-msvc": { "version": "1.19.0", "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.19.0.tgz", From bd54ec2fa1b1c844df6b1a84232c325b9a09ce55 Mon Sep 17 00:00:00 2001 From: Remi REGNAULT Date: Tue, 28 Nov 2023 11:52:20 +0100 Subject: [PATCH 24/27] color provider is working, use color context from now to define colors ! --- LeftOvers/navigation/BottomBar.tsx | 6 +- LeftOvers/navigation/HomeStackScreen.tsx | 8 +- LeftOvers/navigation/Utils.tsx | 6 +- LeftOvers/screens/HomePage.tsx | 317 ++++++++++++----------- LeftOvers/theme/ColorContext.tsx | 8 +- LeftOvers/theme/colors.ts | 16 +- 6 files changed, 188 insertions(+), 173 deletions(-) diff --git a/LeftOvers/navigation/BottomBar.tsx b/LeftOvers/navigation/BottomBar.tsx index 804f662..56f9419 100644 --- a/LeftOvers/navigation/BottomBar.tsx +++ b/LeftOvers/navigation/BottomBar.tsx @@ -16,7 +16,7 @@ import DarkIcon from '../assets/images/moon.png'; export default function BottomBar({ state, descriptors, navigation }) { const {theme, toggleTheme} = useContext(ThemeContext); - const {colors, toggleColor} = useContext(ColorContext) + const {colors, toggleColors} = useContext(ColorContext) const [iconThemeButton, setThemeIconButton] = useState(( theme === 'dark' ) ? LightIcon : DarkIcon) const [textThemeButton, setTextThemeButton] = useState(( theme === 'dark' ) ? 'Light' : 'Dark'); @@ -25,12 +25,12 @@ export default function BottomBar({ state, descriptors, navigation }) { setThemeIconButton(DarkIcon); setTextThemeButton("Dark"); toggleTheme('light'); - toggleColor(LightTheme) + toggleColors(LightTheme) } else { setThemeIconButton(LightIcon); setTextThemeButton("Light"); toggleTheme('dark') - toggleColor(DarkTheme) + toggleColors(DarkTheme) } console.log('TextThemeButton is now: ' + textThemeButton); } diff --git a/LeftOvers/navigation/HomeStackScreen.tsx b/LeftOvers/navigation/HomeStackScreen.tsx index 631a7c1..6864e34 100644 --- a/LeftOvers/navigation/HomeStackScreen.tsx +++ b/LeftOvers/navigation/HomeStackScreen.tsx @@ -7,6 +7,7 @@ import Profiles from '../screens/Profiles'; import CreateProfile from '../screens/CreateProfile'; import ModifyProfile from '../screens/ModifyProfile'; import ThemeContext from '../theme/ThemeContext'; +import ColorContext from '../theme/ColorContext'; import { HeaderTitle } from './Utils'; import appLogo from '../assets/images/logo.png'; @@ -23,6 +24,7 @@ function AppIcon() { export default function HomeStackScreen() { const {theme, toggleTheme} = useContext(ThemeContext) + const {colors, toggleColors} = useContext(ColorContext) return ( @@ -30,7 +32,7 @@ export default function HomeStackScreen() { name='Home' component={HomePage} options={{ - headerStyle: {backgroundColor: theme === 'light' ? '#F2F0E4' : '#3F3C42'}, + headerStyle: {backgroundColor: colors.cardBackground}, headerLeft: () => ( @@ -50,7 +52,7 @@ export default function HomeStackScreen() { name='Profiles' component={Profiles} options={{ - headerStyle: {backgroundColor: theme === 'light' ? '#F2F0E4' : '#3F3C42'}, + headerStyle: {backgroundColor: colors.cardBackground}, headerTitle: () => ( ) @@ -60,7 +62,7 @@ export default function HomeStackScreen() { name='ProfileModification' component={ModifyProfile} options={{ - headerStyle: {backgroundColor: theme === 'light' ? '#F2F0E4' : '#3F3C42'}, + headerStyle: {backgroundColor: colors.cardBackground}, headerTitle: () => ( ) diff --git a/LeftOvers/navigation/Utils.tsx b/LeftOvers/navigation/Utils.tsx index ddcf8d3..0a6c072 100644 --- a/LeftOvers/navigation/Utils.tsx +++ b/LeftOvers/navigation/Utils.tsx @@ -1,16 +1,16 @@ import React, { useContext } from 'react'; import { Text, StyleSheet } from 'react-native'; -import ThemeContext from '../theme/ThemeContext'; +import ColorContext from '../theme/ColorContext'; export function HeaderTitle(props) { - const {theme, toggleTheme} = useContext(ThemeContext); + const {colors, toggleColors} = useContext(ColorContext) const styles = StyleSheet.create({ headerTitle: { fontSize: 20, fontWeight: "bold", - color: theme === 'light' ? '#3F3C42' : '#F2F0E4', + color: colors.cardDetail, } }) diff --git a/LeftOvers/screens/HomePage.tsx b/LeftOvers/screens/HomePage.tsx index ffe651e..8de9bbe 100644 --- a/LeftOvers/screens/HomePage.tsx +++ b/LeftOvers/screens/HomePage.tsx @@ -6,179 +6,180 @@ import {SafeAreaProvider} from 'react-native-safe-area-context'; import ValidateButton from '../components/ValidateButton'; import ProfileSelection from '../components/ProfileSelection'; import FoodElementText from '../components/FoodElementText'; -import ThemeContext from '../theme/ThemeContext'; +import ColorContext from '../theme/ColorContext'; import bracketLeft from '../assets/images/angle_bracket_left.png'; import bracketRight from '../assets/images/angle_bracket_right.png'; + export default function HomePage({ navigation, props }) { - const {theme, toggleTheme} = useContext(ThemeContext); + const {colors, toggleColors} = useContext(ColorContext); - const profiles = [ - {name: "Johnny Silverhand", avatar: "plus_small.png", isActive: "flex"}, - {name: "Panam Palmer", avatar: "plus_small.png", isActive: "none"}, - {name: "Goro Takemura", avatar: "plus_small.png", isActive: "none"}, - {name: "David Martinez", avatar: "plus_small.png", isActive: "flex"}, - ] + const profiles = [ + {name: "Johnny Silverhand", avatar: "plus_small.png", isActive: "flex"}, + {name: "Panam Palmer", avatar: "plus_small.png", isActive: "none"}, + {name: "Goro Takemura", avatar: "plus_small.png", isActive: "none"}, + {name: "David Martinez", avatar: "plus_small.png", isActive: "flex"}, + ] - const ingredientList = [{title: "Carrot"}, {title: "Potato"}, {title: "Peach"}] + const ingredientList = [{title: "Carrot"}, {title: "Potato"}, {title: "Peach"}] - const [cpt, setCpt] = useState(0); - const decreaseCounter = () => { - if (cpt > 0) { - setCpt(cpt - 1); - } - else { - setCpt(ingredientList.length - 1); - } - }; - const increaseCounter = () => { - if (cpt < ingredientList.length - 1) { - setCpt(cpt + 1); - } - else { - setCpt(0); - } - }; + const [cpt, setCpt] = useState(0); + const decreaseCounter = () => { + if (cpt > 0) { + setCpt(cpt - 1); + } + else { + setCpt(ingredientList.length - 1); + } + }; + const increaseCounter = () => { + if (cpt < ingredientList.length - 1) { + setCpt(cpt + 1); + } + else { + setCpt(0); + } + }; - const styles = StyleSheet.create({ - container: { - width: "100%", - flex: 1, - backgroundColor: '#3F3C42', - alignItems: 'center', - justifyContent: 'center', - }, - linearGradient: { - width: "100%", - flex: 1, - padding: "2%", - paddingTop: 0, - }, - separator: { - marginTop: "6%" - }, - - filterBar: { - flexDirection: "row", - width: "85%", - paddingTop: "3%", - paddingBottom: "2%", - alignItems: "flex-end", - justifyContent: "center", - }, - filters: { - fontSize: 20, - color: '#ACA279', - flex: 1, - }, - nbSelected: { - fontSize: 11, - color: "#3F3C42", - textAlign: "right", - }, - - profilesSelection: { - alignItems: 'center', - justifyContent: 'center', - borderRadius: 20, - backgroundColor: '#F2F0E4', - marginHorizontal: "3%", - paddingBottom: "3%", - }, - - welcome: { - alignItems: 'center', - justifyContent: 'center', - borderRadius: 20, - backgroundColor: '#F2F0E4', - paddingVertical: "3%", - paddingHorizontal: "7%", - marginHorizontal: "3%", - }, - text: { - fontSize: 20, - color: '#ACA279', - }, - name: { - fontSize: 20, - fontWeight: "bold", - color: '#59BDCD', - }, - - ingredientSelection: { - width: "90%", - alignItems: 'center', - justifyContent: 'center', - borderRadius: 20, - backgroundColor: '#E3DEC9', - borderWidth: 2, - borderColor: "#ACA279", - padding: "2%" - } - }); + const styles = StyleSheet.create({ + container: { + width: "100%", + flex: 1, + backgroundColor: '#3F3C42', + alignItems: 'center', + justifyContent: 'center', + }, + linearGradient: { + width: "100%", + flex: 1, + padding: "2%", + paddingTop: 0, + }, + separator: { + marginTop: "6%" + }, + + filterBar: { + flexDirection: "row", + width: "85%", + paddingTop: "3%", + paddingBottom: "2%", + alignItems: "flex-end", + justifyContent: "center", + }, + filters: { + fontSize: 20, + color: colors.cardTitle, + flex: 1, + }, + nbSelected: { + fontSize: 11, + color: colors.cardDetail, + textAlign: "right", + }, + + profilesSelection: { + alignItems: 'center', + justifyContent: 'center', + borderRadius: 20, + backgroundColor: colors.cardBackground, + marginHorizontal: "3%", + paddingBottom: "3%", + }, + + welcome: { + alignItems: 'center', + justifyContent: 'center', + borderRadius: 20, + backgroundColor: colors.cardBackground, + paddingVertical: "3%", + paddingHorizontal: "7%", + marginHorizontal: "3%", + }, + text: { + fontSize: 20, + color: colors.welcomeText, + }, + name: { + fontSize: 20, + fontWeight: "bold", + color: colors.welcomeName, + }, + + ingredientSelection: { + width: "90%", + alignItems: 'center', + justifyContent: 'center', + borderRadius: 20, + backgroundColor: '#E3DEC9', + borderWidth: 2, + borderColor: "#ACA279", + padding: "2%" + } + }); - return ( - - - - - - - - Welcome - Rayhân - , + return ( + + + + + + + + Welcome + Rayhân + , + + Glad to see you again! - Glad to see you again! - - - - - - Profiles - 2 selected - - - - navigation.navigate('Profiles')}/> - - - - - Ingredient Stocks + + + + Profiles + 2 selected + + + + + navigation.navigate('Profiles')}/> - - console.log('ManageStocks')}/> - - - - - Cooking + + + + Ingredient Stocks + + + console.log('ManageStocks')}/> - - - Selected Ingredient - - - - - - - - + + + + Cooking + + + + Selected Ingredient + + + + + + + + + + + console.log('Chnge Selected Ingredient')}/> + + console.log('Go and search for recipe')}/> - - console.log('Chnge Selected Ingredient')}/> - - console.log('Go and search for recipe')}/> - - - - - - ); + + + + + ); } diff --git a/LeftOvers/theme/ColorContext.tsx b/LeftOvers/theme/ColorContext.tsx index 5cad2ce..7b82415 100644 --- a/LeftOvers/theme/ColorContext.tsx +++ b/LeftOvers/theme/ColorContext.tsx @@ -1,11 +1,11 @@ import React, {createContext, useState, useEffect} from 'react'; import AsyncStorage from '@react-native-async-storage/async-storage'; -import { DarkTheme, LightTheme, Theme } from './colors'; +import { LightTheme, Theme } from './colors'; interface ColorContextType { colors: Theme, - toggleColor: (Theme) => void + toggleColors: (Theme) => void }; const ColorContext = createContext(null); @@ -27,13 +27,13 @@ export const ColorProvider = ({ children }) => { getColors(); }, []); - const toggleColor = (newColors: Theme) => { + const toggleColors = (newColors: Theme) => { setColors(newColors); AsyncStorage.setItem('colors', JSON.stringify(newColors)) }; return ( - + {children} ); diff --git a/LeftOvers/theme/colors.ts b/LeftOvers/theme/colors.ts index 2ce4786..be3fbd2 100644 --- a/LeftOvers/theme/colors.ts +++ b/LeftOvers/theme/colors.ts @@ -23,6 +23,10 @@ export interface Theme { ingredientBackground: string, ingredientContent: string, ingredientBorder: string, + buttonBackground: string, + buttonDetail: string, + welcomeText: string, + welcomeName: string, } export const LightTheme : Theme = { @@ -38,13 +42,17 @@ export const LightTheme : Theme = { ingredientBackground: Pearl, ingredientBorder: EerieBlack, ingredientContent: Jet, + buttonBackground: Pearl, + buttonDetail: Moonstone, + welcomeText: Ecru, + welcomeName: Moonstone } export const DarkTheme : Theme = { primary: EerieBlack, primaryComplement: Jet, cardBackground: Jet, - cardTitle: Ecru, + cardTitle: Alabaster, cardDetail: Alabaster, cardElementBackground: SteelBlue, cardElementText: Jet, @@ -52,6 +60,10 @@ export const DarkTheme : Theme = { cardElementBorder: SteelBlue, ingredientBackground: EerieBlack, ingredientBorder: SteelBlue, - ingredientContent: Alabaster + ingredientContent: Alabaster, + buttonBackground: Jet, + buttonDetail: CarolinaBlue, + welcomeText: SteelBlue, + welcomeName:Alabaster } From 1ab6ce5f9d0f37cb5fdc850e7570f63c68bcfe83 Mon Sep 17 00:00:00 2001 From: Remi REGNAULT Date: Tue, 28 Nov 2023 14:14:14 +0100 Subject: [PATCH 25/27] fix: home page is now using colorContext --- LeftOvers/components/FoodElementText.tsx | 84 ++++---- LeftOvers/components/ProfileElement.tsx | 231 +++++++++++----------- LeftOvers/components/ProfileSelection.tsx | 101 +++++----- LeftOvers/screens/HomePage.tsx | 18 +- LeftOvers/theme/colors.ts | 13 +- 5 files changed, 233 insertions(+), 214 deletions(-) diff --git a/LeftOvers/components/FoodElementText.tsx b/LeftOvers/components/FoodElementText.tsx index e1d3ea3..33c075c 100644 --- a/LeftOvers/components/FoodElementText.tsx +++ b/LeftOvers/components/FoodElementText.tsx @@ -1,50 +1,52 @@ -import React from 'react'; -import {StyleSheet,Pressable, Text, View, Image} from 'react-native'; -import Separator from '../components/Separator'; +import React, { useContext } from 'react'; +import { StyleSheet,Pressable, Text, View } from 'react-native'; + +import ColorContext from '../theme/ColorContext'; interface foodElementImageProps { - title : string + title : string } export default function FoodElementText(props : any) { - return ( - - - - {props.title} - - - - ); -} + const {colors, toggleColors } = useContext(ColorContext) -const styles = StyleSheet.create({ - button: { - alignItems: 'center', - justifyContent: 'center', - width: "80%", - borderRadius: 5, - backgroundColor: '#E3DEC9', - }, - text: { - fontSize: 10, - fontWeight: 'bold', - padding : "2%", - color: 'black', - }, - view: { - alignItems: 'flex-start', - justifyContent: 'center', - }, - container: { - width: "100%", - borderRadius: 5, - borderWidth: 1, - borderColor: '#3F3C42', - flexDirection: 'column', - justifyContent: 'center', - }, -}); + const styles = StyleSheet.create({ + button: { + alignItems: 'center', + justifyContent: 'center', + width: "80%", + borderRadius: 5, + backgroundColor: colors.carrouselBackground, + }, + text: { + fontSize: 10, + fontWeight: 'bold', + padding : "2%", + color: colors.cardDetail, + }, + view: { + alignItems: 'flex-start', + justifyContent: 'center', + }, + container: { + width: "100%", + borderRadius: 5, + borderWidth: 1, + borderColor: colors.cardDetail, + flexDirection: 'column', + justifyContent: 'center', + }, + }); + return ( + + + + {props.title} + + + + ); +} diff --git a/LeftOvers/components/ProfileElement.tsx b/LeftOvers/components/ProfileElement.tsx index fb8bd35..f3ecf30 100644 --- a/LeftOvers/components/ProfileElement.tsx +++ b/LeftOvers/components/ProfileElement.tsx @@ -1,124 +1,127 @@ -import React, { useState } from 'react'; +import React, { useContext, useState } from 'react'; import {StyleSheet,Pressable, Text, View, Image} from 'react-native'; +import ColorContext from '../theme/ColorContext'; type Profile = { - name: string - avatar: string - isActive: string - disableSelection: boolean + name: string + avatar: string + isActive: string + disableSelection: boolean } export default function ProfileElement(props : Profile) { - const [waiting, setWaiting] = useState("none") - const [separator, setSeparator] = useState("none") - const changeStatus = () => { - if (props.disableSelection){ - setWaiting("none") - } - else if (waiting == "flex"){ - setWaiting("none") - } - else{ - setWaiting("flex") - } - if (props.disableSelection){ - setSeparator("none") - } - else if (props.isActive == "flex" && waiting == "none"){ - setSeparator("flex") - } - else{ - setSeparator("none") - } - console.log(waiting, separator, props.name) - } + const { colors, toggleColors } = useContext(ColorContext) - let imageSource - if (props.avatar == "plus.png"){ - imageSource = require('../assets/images/plus.png') - } - else if (props.avatar == "plus_small.png"){ - imageSource = require('../assets/images/plus_small.png') - } - else{ - imageSource = require('../assets/images/logo.png') - } + const [waiting, setWaiting] = useState("none") + const [separator, setSeparator] = useState("none") + const changeStatus = () => { + if (props.disableSelection){ + setWaiting("none") + } + else if (waiting == "flex"){ + setWaiting("none") + } + else{ + setWaiting("flex") + } + if (props.disableSelection){ + setSeparator("none") + } + else if (props.isActive == "flex" && waiting == "none"){ + setSeparator("flex") + } + else{ + setSeparator("none") + } + console.log(waiting, separator, props.name) + } - return ( - - - - - {props.name} - - - - Activated - - - - Waiting... - - - - - ); -} - -const styles = StyleSheet.create({ - button: { - alignItems: 'center', - justifyContent: 'flex-start', - height: "80%", - width: "78%", - marginVertical: "3%", - }, - pseudoBar: { - flexDirection: "row", - alignItems: "center", - justifyContent: "center", - width: "100%", - marginHorizontal: "3%", - marginBottom: "3%", - }, - avatar: { - padding: "5%", - resizeMode: 'contain', - borderWidth: 2, - borderColor: "#ACA279", - borderRadius: 45, - height: "100%", - flex: 0.01, - }, - text: { - fontSize: 15, - color: '#ACA279', - alignItems: 'center', - textAlign: 'left', - flex: 0.9, - marginLeft: "10%", - padding: "2%", - }, + let imageSource + if (props.avatar == "plus.png"){ + imageSource = require('../assets/images/plus.png') + } + else if (props.avatar == "plus_small.png"){ + imageSource = require('../assets/images/plus_small.png') + } + else{ + imageSource = require('../assets/images/logo.png') + } - active: { - borderWidth: 1, - borderRadius: 20, - borderColor: "#59BDCD", - padding: "1%", - }, - textActive: { - fontSize: 10, - color: "#59BDCD", - }, + const styles = StyleSheet.create({ + button: { + alignItems: 'center', + justifyContent: 'flex-start', + height: "80%", + width: "78%", + marginVertical: "3%", + }, + pseudoBar: { + flexDirection: "row", + alignItems: "center", + justifyContent: "center", + width: "100%", + marginHorizontal: "3%", + marginBottom: "3%", + }, + avatar: { + padding: "5%", + resizeMode: 'contain', + borderWidth: 2, + borderColor: colors.carrouselText, + borderRadius: 45, + height: "100%", + flex: 0.01, + }, + text: { + fontSize: 15, + color: colors.carrouselText, + alignItems: 'center', + textAlign: 'left', + flex: 0.9, + marginLeft: "10%", + padding: "2%", + }, + + active: { + borderWidth: 1, + borderRadius: 20, + borderColor: colors.carrouselDetail, + padding: "1%", + }, + textActive: { + fontSize: 10, + color: colors.carrouselDetail, + }, + + waiting: { + borderWidth: 1, + borderRadius: 20, + borderColor: "#ACA279", + padding: "1%", + }, + textWaiting: { + fontSize: 10, + color: "#ACA279", + }, + }); - waiting: { - borderWidth: 1, - borderRadius: 20, - borderColor: "#ACA279", - padding: "1%", - }, - textWaiting: { - fontSize: 10, - color: "#ACA279", - }, -}); \ No newline at end of file + return ( + + + + + {props.name} + + + + Activated + + + + Waiting... + + + + + ); +} \ No newline at end of file diff --git a/LeftOvers/components/ProfileSelection.tsx b/LeftOvers/components/ProfileSelection.tsx index 60ee2c8..87d349e 100644 --- a/LeftOvers/components/ProfileSelection.tsx +++ b/LeftOvers/components/ProfileSelection.tsx @@ -1,12 +1,15 @@ -import {React, useState} from 'react'; -import {View, StyleSheet, Pressable, Image, Text} from 'react-native'; +import React, { useContext, useState } from 'react'; +import {View, StyleSheet, Pressable, Image} from 'react-native'; + +import ProfileElement from './ProfileElement' +import ColorContext from '../theme/ColorContext'; + import bracketLeft from '../assets/images/angle_bracket_left.png'; import bracketRight from '../assets/images/angle_bracket_right.png'; -import ProfileElement from './ProfileElement' type ProfileSelectionProps = { - listProfile: Profile[] - disableSelection: boolean + listProfile: Profile[] + disableSelection: boolean } type Profile = { @@ -16,47 +19,49 @@ type Profile = { } export default function ProfileSelection(props: ProfileSelectionProps) { - const [cpt, setCpt] = useState(0); - const decreaseCounter = () => { - if (cpt > 0) { - setCpt(cpt - 1); - } - else { - setCpt(props.listProfile.length - 1); - } - }; - const increaseCounter = () => { - if (cpt < props.listProfile.length - 1) { - setCpt(cpt + 1); - } - else { - setCpt(0); - } - }; - - return ( - - - - - - - - - - ); -} + const { colors, toggleColors } = useContext(ColorContext); + + const [cpt, setCpt] = useState(0); + const decreaseCounter = () => { + if (cpt > 0) { + setCpt(cpt - 1); + } + else { + setCpt(props.listProfile.length - 1); + } + }; + const increaseCounter = () => { + if (cpt < props.listProfile.length - 1) { + setCpt(cpt + 1); + } + else { + setCpt(0); + } + }; + + const styles = StyleSheet.create({ + background: { + width: "92%", + height: 80, + borderRadius: 20, + borderWidth: 2, + borderColor: colors.carrouselText, + backgroundColor: colors.carrouselBackground, + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + }, + }); -const styles = StyleSheet.create({ - background: { - width: "92%", - height: 80, - borderRadius: 20, - borderWidth: 2, - borderColor: '#ACA279', - backgroundColor: '#E3DEC9', - flexDirection: 'row', - justifyContent: 'center', - alignItems: 'center', - }, -}); \ No newline at end of file + return ( + + + + + + + + + + ); +} \ No newline at end of file diff --git a/LeftOvers/screens/HomePage.tsx b/LeftOvers/screens/HomePage.tsx index 8de9bbe..24dc8e1 100644 --- a/LeftOvers/screens/HomePage.tsx +++ b/LeftOvers/screens/HomePage.tsx @@ -112,9 +112,9 @@ export default function HomePage({ navigation, props }) { alignItems: 'center', justifyContent: 'center', borderRadius: 20, - backgroundColor: '#E3DEC9', + backgroundColor: colors.carrouselBackground, borderWidth: 2, - borderColor: "#ACA279", + borderColor: colors.carrouselText, padding: "2%" } }); @@ -143,7 +143,7 @@ export default function HomePage({ navigation, props }) { - navigation.navigate('Profiles')}/> + navigation.navigate('Profiles')}/> @@ -151,7 +151,7 @@ export default function HomePage({ navigation, props }) { Ingredient Stocks - console.log('ManageStocks')}/> + console.log('ManageStocks')}/> @@ -160,21 +160,21 @@ export default function HomePage({ navigation, props }) { - Selected Ingredient + Selected Ingredient - + - + - console.log('Chnge Selected Ingredient')}/> + console.log('Chnge Selected Ingredient')}/> - console.log('Go and search for recipe')}/> + console.log('Go and search for recipe')}/> diff --git a/LeftOvers/theme/colors.ts b/LeftOvers/theme/colors.ts index be3fbd2..035ed75 100644 --- a/LeftOvers/theme/colors.ts +++ b/LeftOvers/theme/colors.ts @@ -27,6 +27,9 @@ export interface Theme { buttonDetail: string, welcomeText: string, welcomeName: string, + carrouselBackground: string, + carrouselText: string, + carrouselDetail: string } export const LightTheme : Theme = { @@ -45,7 +48,10 @@ export const LightTheme : Theme = { buttonBackground: Pearl, buttonDetail: Moonstone, welcomeText: Ecru, - welcomeName: Moonstone + welcomeName: Moonstone, + carrouselBackground: Pearl, + carrouselText: Ecru, + carrouselDetail: Moonstone } export const DarkTheme : Theme = { @@ -64,6 +70,9 @@ export const DarkTheme : Theme = { buttonBackground: Jet, buttonDetail: CarolinaBlue, welcomeText: SteelBlue, - welcomeName:Alabaster + welcomeName:Alabaster, + carrouselBackground: CarolinaBlue, + carrouselText: SteelBlue, + carrouselDetail: Alabaster } From fb5aacd48adc003b7cb8df59896c53ba760c8434 Mon Sep 17 00:00:00 2001 From: Remi REGNAULT Date: Tue, 28 Nov 2023 14:52:53 +0100 Subject: [PATCH 26/27] fix: profiles page uses colorcontext --- LeftOvers/components/FoodElementText.tsx | 1 - LeftOvers/components/ListWithoutSelect.tsx | 142 +++++------ LeftOvers/components/ProfileDetails.tsx | 263 +++++++++++---------- LeftOvers/screens/Profiles.tsx | 261 ++++++++++---------- LeftOvers/theme/colors.ts | 5 +- 5 files changed, 342 insertions(+), 330 deletions(-) diff --git a/LeftOvers/components/FoodElementText.tsx b/LeftOvers/components/FoodElementText.tsx index 33c075c..8be216e 100644 --- a/LeftOvers/components/FoodElementText.tsx +++ b/LeftOvers/components/FoodElementText.tsx @@ -4,7 +4,6 @@ import { StyleSheet,Pressable, Text, View } from 'react-native'; import ColorContext from '../theme/ColorContext'; - interface foodElementImageProps { title : string } diff --git a/LeftOvers/components/ListWithoutSelect.tsx b/LeftOvers/components/ListWithoutSelect.tsx index 3ae3bc5..804f65a 100644 --- a/LeftOvers/components/ListWithoutSelect.tsx +++ b/LeftOvers/components/ListWithoutSelect.tsx @@ -1,17 +1,85 @@ -import React from 'react'; +import React, { useContext } from 'react'; import {StyleSheet, Text, TextInput, View, Image, FlatList, Pressable} from 'react-native'; import ValidateButton from './ValidateButton'; import HeaderFlatList from './HeaderFlatList'; import { MultipleSelectList, SelectList } from 'react-native-dropdown-select-list' +import ColorContext from '../theme/ColorContext'; type ListProps = { title: string - content : list + content: list } export default function ListWithoutSelect(props: ListProps) { - const [selected, setSelected] = React.useState([]); - return ( + const [selected, setSelected] = React.useState([]); + const { colors, toggleColors } = useContext(ColorContext); + + const styles = StyleSheet.create({ + titleBar: { + flexDirection: "row", + alignItems: "center", + justifyContent: "stretch", + backgroundColor: colors.cardElementTitleBackground, + borderTopRightRadius: 15, + borderTopLeftRadius: 15, + borderBottomRightRadius: 0, + borderBottomLeftRadius: 0, + borderWidth: 2, + borderColor: colors.cardElementBorder, + minWidth: "92%", + maxWidth: "92%", + marginBottom: 0, + overflow: "hidden", + }, + arrow: { + resizeMode: 'contain', + tintColor: colors.cardElementTitle, + flex: 0.1, + }, + title: { + fontSize: 15, + color: colors.cardElementTitle, + alignItems: 'center', + textAlign: "left", + flex: 0.9, + }, + + itemList: { + flexDirection: "row", + alignItems: "flex-start", + justifyContent: "stretch", + borderWidth: 0, + borderTopRightRadius: 0, + borderTopLeftRadius: 0, + borderBottomRightRadius: 15, + borderBottomLeftRadius: 15, + backgroundColor: colors.cardElementBackground, + minWidth: "92%", + maxWidth: "92%", + }, + itemCell: { + padding: 0, + paddingTop: "5%", + width: "100%", + minWidth: 250, + maxWidth: 250, + }, + itemText: { + fontSize: 13, + textAlign: "left", + flex: 1, + padding: 5, + paddingLeft: 10, + color: "#3F3C42", + }, + + box: { + borderWidth: 0, + flex: 0, + } + }); + + return ( - ); + ); } -const styles = StyleSheet.create({ - titleBar: { - flexDirection: "row", - alignItems: "center", - justifyContent: "stretch", - backgroundColor: "#F2F0E4", - borderTopRightRadius: 15, - borderTopLeftRadius: 15, - borderBottomRightRadius: 0, - borderBottomLeftRadius: 0, - borderWidth: 2, - borderColor: "#ACA279", - minWidth: "92%", - maxWidth: "92%", - marginBottom: 0, - overflow: "hidden", - }, - arrow: { - resizeMode: 'contain', - tintColor: "#3F3C42", - flex: 0.1, - }, - title: { - fontSize: 15, - color: '#3F3C42', - alignItems: 'center', - textAlign: "left", - flex: 0.9, - }, - - itemList: { - flexDirection: "row", - alignItems: "flex-start", - justifyContent: "stretch", - borderWidth: 0, - borderTopRightRadius: 0, - borderTopLeftRadius: 0, - borderBottomRightRadius: 15, - borderBottomLeftRadius: 15, - backgroundColor: "#E3DEC9", - minWidth: "92%", - maxWidth: "92%", - }, - itemCell: { - padding: 0, - paddingTop: "5%", - width: "100%", - minWidth: 250, - maxWidth: 250, - }, - itemText: { - fontSize: 13, - textAlign: "left", - flex: 1, - padding: 5, - paddingLeft: 10, - color: "#3F3C42", - }, - - box: { - borderWidth: 0, - flex: 0, - } -}); \ No newline at end of file diff --git a/LeftOvers/components/ProfileDetails.tsx b/LeftOvers/components/ProfileDetails.tsx index 78d73a5..ea8ab6e 100644 --- a/LeftOvers/components/ProfileDetails.tsx +++ b/LeftOvers/components/ProfileDetails.tsx @@ -1,149 +1,152 @@ -import React, { useState } from 'react'; +import React, { useContext, useState } from 'react'; import { StyleSheet, Text, View, Image, Pressable } from 'react-native'; import { useNavigation } from '@react-navigation/native'; import ListWithoutSelect from './ListWithoutSelect'; +import ColorContext from '../theme/ColorContext'; type ProfileProps = { - name: string - avatar: string - diets: string[] - allergies: string[] - onDeleteProfile: () => void + name: string + avatar: string + diets: string[] + allergies: string[] + onDeleteProfile: () => void } export default function ProfileDetails(props) { - const navigation = useNavigation() - const [display, setDisplay] = useState("none") - const changeListVisibility = () => { - if (display == "none"){ - setDisplay("flex") + const { colors, toggleColors } = useContext(ColorContext) + const navigation = useNavigation() + const [display, setDisplay] = useState("none") + const changeListVisibility = () => { + if (display == "none"){ + setDisplay("flex") + } + else{ + setDisplay("none") + } + }; + + let imageSource + + if (props.avatar === "plus.png"){ + imageSource = require('../assets/images/plus.png') + } + else if (props.avatar === "plus_small.png"){ + imageSource = require('../assets/images/plus_small.png') } else{ - setDisplay("none") + imageSource = require('../assets/images/logo.png') } - }; - - let imageSource - if (props.avatar === "plus.png"){ - imageSource = require('../assets/images/plus.png') - } - else if (props.avatar === "plus_small.png"){ - imageSource = require('../assets/images/plus_small.png') - } - else{ - imageSource = require('../assets/images/logo.png') - } + const styles = StyleSheet.create({ + background: { + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + borderRadius: 15, + backgroundColor: colors.cardBackground, + padding: "3%", + marginHorizontal: "3%", + }, + + pseudoBar: { + flexDirection: "row", + alignItems: "center", + justifyContent: "center", + width: "100%", + marginHorizontal: "3%", + marginBottom: "3%", + }, + avatar: { + padding: "5%", + resizeMode: 'contain', + borderWidth: 2, + borderColor: colors.cardElementBorder, + borderRadius: 45, + height: "100%", + flex: 0.03, + }, + text: { + flex: 1, + fontSize: 20, + color: colors.cardElementBorder, + alignItems: 'center', + textAlign: 'left', + marginLeft: "3%", + padding: "2%", + height: "100%", + }, + modify: { + height: "100%", + tintColor: colors.cardElementBorder, + resizeMode: 'contain', + flex: 0.1, + marginLeft: "3%", + }, + delete: { + height: "100%", + width: "100%", + tintColor: colors.cardElementBorder, + resizeMode: 'contain', + flex: 1, + }, + + filterBar: { + flexDirection: "row", + width: "85%", + paddingTop: "3%", + paddingBottom: "1%", + alignItems: "flex-end", + justifyContent: "center", + flex: 1, + }, + filters: { + fontSize: 20, + color: colors.cardElementBorder, + flex: 1, + padding: "2%", + paddingLeft: 0, + paddingBottom: 0, + }, + nbSelected: { + fontSize: 11, + flex: 1, + color: colors.cardDetail, + textAlign: "right", + marginRight: "3%", + }, + arrow: { + height: "100%", + resizeMode: 'contain', + tintColor: colors.cardDetail, + flex: 0.1, + }, + }); - return ( - - - - {props.name} - - - + return ( + + + + {props.name} + + + + + + + + Filters + {props.diets.length} selected + + - - - - Filters - {props.diets.length} selected - + + + + + - - - - - - - - ); + ); } -const styles = StyleSheet.create({ - background: { - flexDirection: 'column', - alignItems: 'center', - justifyContent: 'center', - borderRadius: 15, - backgroundColor: '#F2F0E4', - padding: "3%", - marginHorizontal: "3%", - }, - - pseudoBar: { - flexDirection: "row", - alignItems: "center", - justifyContent: "center", - width: "100%", - marginHorizontal: "3%", - marginBottom: "3%", - }, - avatar: { - padding: "5%", - resizeMode: 'contain', - borderWidth: 2, - borderColor: "#ACA279", - borderRadius: 45, - height: "100%", - flex: 0.03, - }, - text: { - flex: 1, - fontSize: 20, - color: '#ACA279', - alignItems: 'center', - textAlign: 'left', - marginLeft: "3%", - padding: "2%", - height: "100%", - }, - modify: { - height: "100%", - tintColor: "#ACA279", - resizeMode: 'contain', - flex: 0.1, - marginLeft: "3%", - }, - delete: { - height: "100%", - width: "100%", - tintColor: "#ACA279", - resizeMode: 'contain', - flex: 1, - }, - - filterBar: { - flexDirection: "row", - width: "85%", - paddingTop: "3%", - paddingBottom: "1%", - alignItems: "flex-end", - justifyContent: "center", - flex: 1, - }, - filters: { - fontSize: 20, - color: '#ACA279', - flex: 1, - padding: "2%", - paddingLeft: 0, - paddingBottom: 0, - }, - nbSelected: { - fontSize: 11, - flex: 1, - color: "#3F3C42", - textAlign: "right", - marginRight: "3%", - }, - arrow: { - height: "100%", - resizeMode: 'contain', - tintColor: "#3F3C42", - flex: 0.1, - }, -}); \ No newline at end of file diff --git a/LeftOvers/screens/Profiles.tsx b/LeftOvers/screens/Profiles.tsx index c9c9ba1..9f27345 100644 --- a/LeftOvers/screens/Profiles.tsx +++ b/LeftOvers/screens/Profiles.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useContext, useState } from 'react'; import { StyleSheet, View, Modal, Pressable, Text, Image, ScrollView, useWindowDimensions } from 'react-native'; import { LinearGradient } from 'expo-linear-gradient'; @@ -6,36 +6,148 @@ import { SafeAreaProvider } from 'react-native-safe-area-context'; import ProfileDetails from '../components/ProfileDetails'; import ProfileDelete from '../components/ProfileDelete'; +import ColorContext from '../theme/ColorContext'; export default function Profiles({navigation, props}) { - const allJohnny = [{value: "Coconut"}, {value: "Skimmed Milk"}, {value: "Nuts"}] - const dieJohnny = [{value: "Gluten free"}, {value: "Porkless"}, {value: "Pescatarian"}] + const { colors, toggleColors } = useContext(ColorContext) - const allJackie = [{value: "Tomato"}, {value: "Relic"}] - const dieJackie = [{value: "Porkless"}, {value: "Vegetarian"}] + const allJohnny = [{value: "Coconut"}, {value: "Skimmed Milk"}, {value: "Nuts"}] + const dieJohnny = [{value: "Gluten free"}, {value: "Porkless"}, {value: "Pescatarian"}] - const allGoro = [] - const dieGoro = [{value: "Pescatarian"}] + const allJackie = [{value: "Tomato"}, {value: "Relic"}] + const dieJackie = [{value: "Porkless"}, {value: "Vegetarian"}] - const allViktor = [{value: "Pasta"}, {value: "Fish"}] - const dieViktor = [{value: "Dairy free"}, {value: "Vegan"}] + const allGoro = [] + const dieGoro = [{value: "Pescatarian"}] - const [visible, setVisible] = useState(false); - const [opacity, setOpacity] = useState(1); - const raisePopUp = () => { + const allViktor = [{value: "Pasta"}, {value: "Fish"}] + const dieViktor = [{value: "Dairy free"}, {value: "Vegan"}] + + const [visible, setVisible] = useState(false); + const [opacity, setOpacity] = useState(1); + const raisePopUp = () => { setVisible(true) setOpacity(0.3) - } - const erasePopUp = () => { + } + const erasePopUp = () => { setVisible(false) setOpacity(1) - } + } + + const styles = StyleSheet.create({ + container: { + height: "100%", + width: "100%", + flex: 1, + backgroundColor: '#3F3C42', + alignItems: 'center', + justifyContent: 'center', + marginBottom: 10, + }, + linearGradient: { + height: "100%", + width: "100%", + flex: 1, + padding: 10, + paddingTop: 0, + }, + separator: { + marginTop: "6%" + }, + + modal: { + position: 'absolute', + top: '8%', + justifyContent: "center", + alignItems: "center", + width: "100%", + }, + viewModal: { + flexDirection: "column", + padding: "3%", + alignItems: "center", + justifyContent: "center", + width: "100%", + flex: 1, + }, + + profileValidation: { + width: "100%", + alignItems: "center", + justifyContent: "center", + marginBottom: "6%", + flex: 0.7, + }, + decisionBarVertical: { + flexDirection: "column", + width: "90%", + padding: "3%", + borderRadius: 15, + alignItems: "center", + justifyContent: "center", + backgroundColor: "#F2F0E4", + }, + validationQuestion: { + fontSize: 20, + color: '#ACA279', + alignItems: 'center', + justifyContent: 'center', + flex: 0.3, + marginBottom: "2%", + marginHorizontal: "2%", + }, + decisionBar: { + flexDirection: "row", + flex: 0.7, + width: "100%", + alignItems: "center", + justifyContent: "center", + }, + yesButton: { + flexDirection: "row", + flex: 0.5, + padding: "2%", + marginHorizontal: "5%", + width: "90%", + borderRadius: 20, + alignItems: "center", + justifyContent: "center", + backgroundColor: "#59BDCD", + }, + yesText: { + fontSize: 20, + color: '#3F3C42', + alignItems: 'center', + justifyContent: 'center', + flex: 0.7, + padding: "4%", + }, + noButton: { + flexDirection: "row", + flex: 0.5, + padding: "2%", + marginHorizontal: "5%", + width: "90%", + borderRadius: 20, + alignItems: "center", + justifyContent: "center", + backgroundColor: "#8A0000", + }, + noText: { + fontSize: 20, + color: '#F2F0E4', + alignItems: 'center', + justifyContent: 'center', + flex: 0.7, + padding: "4%", + }, + }); - return ( + return ( - - + + - ); -} - -const styles = StyleSheet.create({ - container: { - height: "100%", - width: "100%", - flex: 1, - backgroundColor: '#3F3C42', - alignItems: 'center', - justifyContent: 'center', - marginBottom: 10, - }, - linearGradient: { - height: "100%", - width: "100%", - flex: 1, - padding: 10, - paddingTop: 0, - }, - separator: { - marginTop: "6%" - }, - - modal: { - position: 'absolute', - top: '8%', - justifyContent: "center", - alignItems: "center", - width: "100%", - }, - viewModal: { - flexDirection: "column", - padding: "3%", - alignItems: "center", - justifyContent: "center", - width: "100%", - flex: 1, - }, - - profileValidation: { - width: "100%", - alignItems: "center", - justifyContent: "center", - marginBottom: "6%", - flex: 0.7, - }, - decisionBarVertical: { - flexDirection: "column", - width: "90%", - padding: "3%", - borderRadius: 15, - alignItems: "center", - justifyContent: "center", - backgroundColor: "#F2F0E4", - }, - validationQuestion: { - fontSize: 20, - color: '#ACA279', - alignItems: 'center', - justifyContent: 'center', - flex: 0.3, - marginBottom: "2%", - marginHorizontal: "2%", - }, - decisionBar: { - flexDirection: "row", - flex: 0.7, - width: "100%", - alignItems: "center", - justifyContent: "center", - }, - yesButton: { - flexDirection: "row", - flex: 0.5, - padding: "2%", - marginHorizontal: "5%", - width: "90%", - borderRadius: 20, - alignItems: "center", - justifyContent: "center", - backgroundColor: "#59BDCD", - }, - yesText: { - fontSize: 20, - color: '#3F3C42', - alignItems: 'center', - justifyContent: 'center', - flex: 0.7, - padding: "4%", - }, - noButton: { - flexDirection: "row", - flex: 0.5, - padding: "2%", - marginHorizontal: "5%", - width: "90%", - borderRadius: 20, - alignItems: "center", - justifyContent: "center", - backgroundColor: "#8A0000", - }, - noText: { - fontSize: 20, - color: '#F2F0E4', - alignItems: 'center', - justifyContent: 'center', - flex: 0.7, - padding: "4%", - }, -}); \ No newline at end of file + ); +} \ No newline at end of file diff --git a/LeftOvers/theme/colors.ts b/LeftOvers/theme/colors.ts index 035ed75..0e8f062 100644 --- a/LeftOvers/theme/colors.ts +++ b/LeftOvers/theme/colors.ts @@ -19,7 +19,8 @@ export interface Theme { cardElementBackground: string, cardElementText: string, cardElementBorder: string, - cardElementTitle: string + cardElementTitle: string, + cardElementTitleBackground: string, ingredientBackground: string, ingredientContent: string, ingredientBorder: string, @@ -42,6 +43,7 @@ export const LightTheme : Theme = { cardElementText: Jet, cardElementBorder: Ecru, cardElementTitle: Jet, + cardElementTitleBackground: Alabaster, ingredientBackground: Pearl, ingredientBorder: EerieBlack, ingredientContent: Jet, @@ -64,6 +66,7 @@ export const DarkTheme : Theme = { cardElementText: Jet, cardElementTitle: Alabaster, cardElementBorder: SteelBlue, + cardElementTitleBackground: CarolinaBlue, ingredientBackground: EerieBlack, ingredientBorder: SteelBlue, ingredientContent: Alabaster, From 510aaf525ec4f321b6222a4f682db293f6f27443 Mon Sep 17 00:00:00 2001 From: Remi REGNAULT Date: Tue, 28 Nov 2023 15:16:23 +0100 Subject: [PATCH 27/27] fix: Profile creation page uses color context --- LeftOvers/components/ListSelect.tsx | 174 ++++++++-------- LeftOvers/components/ListWithoutSelect.tsx | 4 +- LeftOvers/components/ProfileModification.tsx | 207 ++++++++++--------- LeftOvers/screens/CreateProfile.tsx | 62 +++--- 4 files changed, 223 insertions(+), 224 deletions(-) diff --git a/LeftOvers/components/ListSelect.tsx b/LeftOvers/components/ListSelect.tsx index e4fc101..a4ff431 100644 --- a/LeftOvers/components/ListSelect.tsx +++ b/LeftOvers/components/ListSelect.tsx @@ -1,8 +1,9 @@ -import React from 'react'; +import React, { useContext } from 'react'; import {StyleSheet, Text, TextInput, View, Image, FlatList} from 'react-native'; import ValidateButton from './ValidateButton'; import HeaderFlatList from './HeaderFlatList'; import { MultipleSelectList, SelectList } from 'react-native-dropdown-select-list' +import ColorContext from '../theme/ColorContext'; type ListProps = { title: string @@ -10,91 +11,92 @@ type ListProps = { } export default function ListSelect(props: ListProps) { - const [selected, setSelected] = React.useState([]); - return ( - setSelected(val)} - data={props.content} - save="value" - search={false} - arrowicon={} - boxStyles={styles.titleBar} - inputStyles={styles.title} - dropdownStyles={styles.itemList} - dropdownItemStyles={styles.itemCell} - dropdownTextStyles={styles.itemText} - badgeStyles={styles.badges} - badgeTextStyles={styles.badgesText} - notFoundText="All Diets Already Selected" - placeholder={props.title} - label={props.title}/> - ); -} + const [selected, setSelected] = React.useState([]); + const { colors, toggleColors } = useContext(ColorContext); -const styles = StyleSheet.create({ - titleBar: { - flexDirection: "row", - alignItems: "center", - justifyContent: "stretch", - backgroundColor: "#F2F0E4", - borderTopRightRadius: 15, - borderTopLeftRadius: 15, - borderBottomRightRadius: 0, - borderBottomLeftRadius: 0, - borderWidth: 2, - borderColor: "#ACA279", - minWidth: "92%", - maxWidth: "92%", - marginBottom: 0, - overflow: "hidden", - }, - arrow: { - resizeMode: 'contain', - tintColor: "#3F3C42", - flex: 0.1, - }, - title: { - fontSize: 15, - color: '#3F3C42', - alignItems: 'center', - textAlign: "left", - flex: 0.9, - }, + const styles = StyleSheet.create({ + titleBar: { + flexDirection: "row", + alignItems: "center", + backgroundColor: colors.cardElementTitleBackground, + borderTopRightRadius: 15, + borderTopLeftRadius: 15, + borderBottomRightRadius: 0, + borderBottomLeftRadius: 0, + borderWidth: 2, + borderColor: colors.cardElementBorder, + minWidth: "92%", + maxWidth: "92%", + marginBottom: 0, + overflow: "hidden", + }, + arrow: { + resizeMode: 'contain', + tintColor: colors.cardElementTitle, + flex: 0.1, + }, + title: { + fontSize: 15, + color: colors.cardElementTitle, + alignItems: 'center', + textAlign: "left", + flex: 0.9, + }, + + itemList: { + flexDirection: "row", + alignItems: "flex-start", + borderWidth: 0, + borderTopRightRadius: 0, + borderTopLeftRadius: 0, + borderBottomRightRadius: 15, + borderBottomLeftRadius: 15, + backgroundColor: colors.cardElementBackground, + minWidth: "92%", + maxWidth: "92%", + }, + itemCell: { + padding: 0, + paddingTop: "5%", + width: "100%", + minWidth: 250, + maxWidth: 250, + }, + itemText: { + fontSize: 13, + textAlign: "left", + flex: 1, + padding: "1%", + paddingLeft: "3%", + color: colors.cardElementText, + }, + + badges: { + backgroundColor: colors.cardElementBackground, + }, + badgesText: { + fontSize: 15, + color: colors.cardElementText, + }, + }); - itemList: { - flexDirection: "row", - alignItems: "flex-start", - justifyContent: "stretch", - borderWidth: 0, - borderTopRightRadius: 0, - borderTopLeftRadius: 0, - borderBottomRightRadius: 15, - borderBottomLeftRadius: 15, - backgroundColor: "#E3DEC9", - minWidth: "92%", - maxWidth: "92%", - }, - itemCell: { - padding: 0, - paddingTop: "5%", - width: "100%", - minWidth: 250, - maxWidth: 250, - }, - itemText: { - fontSize: 13, - textAlign: "left", - flex: 1, - padding: "1%", - paddingLeft: "3%", - color: "#3F3C42", - }, + return ( + setSelected(val)} + data={props.content} + save="value" + search={false} + arrowicon={} + boxStyles={styles.titleBar} + inputStyles={styles.title} + dropdownStyles={styles.itemList} + dropdownItemStyles={styles.itemCell} + dropdownTextStyles={styles.itemText} + badgeStyles={styles.badges} + badgeTextStyles={styles.badgesText} + notFoundText="All Diets Already Selected" + placeholder={props.title} + label={props.title}/> + ); +} - badges: { - backgroundColor: "#59BDCD", - }, - badgesText: { - fontSize: 15, - color: "#F2F0E4", - }, -}); \ No newline at end of file diff --git a/LeftOvers/components/ListWithoutSelect.tsx b/LeftOvers/components/ListWithoutSelect.tsx index 804f65a..758c0ff 100644 --- a/LeftOvers/components/ListWithoutSelect.tsx +++ b/LeftOvers/components/ListWithoutSelect.tsx @@ -7,7 +7,7 @@ import ColorContext from '../theme/ColorContext'; type ListProps = { title: string - content: list + content: string[] } export default function ListWithoutSelect(props: ListProps) { @@ -18,7 +18,6 @@ export default function ListWithoutSelect(props: ListProps) { titleBar: { flexDirection: "row", alignItems: "center", - justifyContent: "stretch", backgroundColor: colors.cardElementTitleBackground, borderTopRightRadius: 15, borderTopLeftRadius: 15, @@ -47,7 +46,6 @@ export default function ListWithoutSelect(props: ListProps) { itemList: { flexDirection: "row", alignItems: "flex-start", - justifyContent: "stretch", borderWidth: 0, borderTopRightRadius: 0, borderTopLeftRadius: 0, diff --git a/LeftOvers/components/ProfileModification.tsx b/LeftOvers/components/ProfileModification.tsx index ebf9cf4..52dbc0e 100644 --- a/LeftOvers/components/ProfileModification.tsx +++ b/LeftOvers/components/ProfileModification.tsx @@ -1,116 +1,119 @@ -import React from 'react'; -import { useState } from 'react'; +import React, { useContext, useState } from 'react'; import {StyleSheet, Text, TextInput, View, Image} from 'react-native'; + import ValidateButton from './ValidateButton'; import ListSelect from './ListSelect'; import ListWithoutSelect from './ListWithoutSelect'; +import ColorContext from '../theme/ColorContext'; type ProfileProps = { - name: string - avatar: string - diets: list - allergies: list + name: string + avatar: string + diets: string[] + allergies: string[] } export default function ProfileModification(props: ProfileProps) { - const [name, onChangeName] = useState(props.name); + const [name, onChangeName] = useState(props.name); + const { colors, toggleColors } = useContext(ColorContext); - let imageSource - if (props.avatar == "plus.png"){ - imageSource = require('../assets/images/plus.png') - } - else if (props.avatar == "plus_small.png"){ - imageSource = require('../assets/images/plus_small.png') - } - else{ - imageSource = require('../assets/images/logo.png') - } + let imageSource + if (props.avatar == "plus.png"){ + imageSource = require('../assets/images/plus.png') + } + else if (props.avatar == "plus_small.png"){ + imageSource = require('../assets/images/plus_small.png') + } + else{ + imageSource = require('../assets/images/logo.png') + } - return ( - - - - - - - - Filters - 3 selected + const styles = StyleSheet.create({ + background: { + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + borderRadius: 15, + backgroundColor: colors.cardBackground, + padding: "3%", + marginHorizontal: "3%", + }, + + pseudoBar: { + flexDirection: "row", + alignItems: "center", + justifyContent: "center", + width: "100%", + marginHorizontal: "3%", + marginBottom: "3%", + }, + avatar: { + padding: "5%", + resizeMode: 'contain', + borderWidth: 2, + borderColor: colors.cardTitle, + borderRadius: 45, + height: "100%", + flex: 0.04, + }, + textInput: { + fontSize: 15, + color: colors.cardTitle, + borderRadius: 10, + borderWidth: 2, + borderStyle: 'dashed', + borderColor: colors.cardTitle, + alignItems: 'center', + textAlign: 'left', + flex: 0.8, + marginLeft: "7%", + padding: "2%", + }, + modify: { + height: "100%", + tintColor: colors.cardTitle, + resizeMode: 'contain', + flex: 0.1, + marginLeft: "3%", + }, + + filterBar: { + flexDirection: "row", + width: "85%", + paddingTop: "3%", + paddingBottom: "2%", + alignItems: "flex-end", + justifyContent: "center", + }, + filters: { + fontSize: 20, + color: colors.cardTitle, + flex: 1, + }, + nbSelected: { + fontSize: 11, + color: colors.cardDetail, + textAlign: "right", + } + }); + + return ( + + + + + + + + Filters + 3 selected + + + + + + console.log("Create Profile...")}/> - - - - - - - ); + ); } -const styles = StyleSheet.create({ - background: { - flexDirection: 'column', - alignItems: 'center', - justifyContent: 'center', - borderRadius: 15, - backgroundColor: '#F2F0E4', - padding: "3%", - marginHorizontal: "3%", - }, - - pseudoBar: { - flexDirection: "row", - alignItems: "center", - justifyContent: "center", - width: "100%", - marginHorizontal: "3%", - marginBottom: "3%", - }, - avatar: { - padding: "5%", - resizeMode: 'contain', - borderWidth: 2, - borderColor: "#ACA279", - borderRadius: 45, - height: "100%", - flex: 0.04, - }, - textInput: { - fontSize: 15, - color: '#ACA279', - borderRadius: 10, - borderWidth: 2, - borderStyle: 'dashed', - borderColor: '#ACA279', - alignItems: 'center', - textAlign: 'left', - flex: 0.8, - marginLeft: "7%", - padding: "2%", - }, - modify: { - height: "100%", - tintColor: "#ACA279", - resizeMode: 'contain', - flex: 0.1, - marginLeft: "3%", - }, - - filterBar: { - flexDirection: "row", - width: "85%", - paddingTop: "3%", - paddingBottom: "2%", - alignItems: "flex-end", - justifyContent: "center", - }, - filters: { - fontSize: 20, - color: '#ACA279', - flex: 1, - }, - nbSelected: { - fontSize: 11, - color: "#3F3C42", - textAlign: "right", - } -}); \ No newline at end of file diff --git a/LeftOvers/screens/CreateProfile.tsx b/LeftOvers/screens/CreateProfile.tsx index d77b825..a8fe93d 100644 --- a/LeftOvers/screens/CreateProfile.tsx +++ b/LeftOvers/screens/CreateProfile.tsx @@ -1,43 +1,39 @@ -import React from 'react'; +import React, { useContext } from 'react'; import {StyleSheet, View, ScrollView, useWindowDimensions} from 'react-native'; import { LinearGradient } from 'expo-linear-gradient'; import { SafeAreaProvider } from 'react-native-safe-area-context'; import ProfileModification from '../components/ProfileModification'; import ValidateButton from '../components/ValidateButton'; +import ColorContext from '../theme/ColorContext'; export default function CreateProfile(props) { - const all = [] - const die = [{value: "Dairy free"}, {value: "Gluten free"}, {value: "Porkless"}, {value: "Vegan"}, {value: "Vegetarian"}, {value: "Pescatarian"}] - return ( - - - - - - - (console.log("Profile Created"))}> - - - - - ); + const { colors, toggleColors } = useContext(ColorContext) + const all = [] + const die = [{value: "Dairy free"}, {value: "Gluten free"}, {value: "Porkless"}, {value: "Vegan"}, {value: "Vegetarian"}, {value: "Pescatarian"}] + + const styles = StyleSheet.create({ + linearGradient: { + height: "100%", + width: "100%", + flex: 1, + padding: "2%", + paddingTop: 0, + }, + }); + + return ( + + + + + + + (console.log("Profile Created"))}> + + + + + ); } -const styles = StyleSheet.create({ - container: { - height: "100%", - width: "100%", - flex: 1, - backgroundColor: '#3F3C42', - alignItems: 'center', - justifyContent: 'center', - }, - linearGradient: { - height: "100%", - width: "100%", - flex: 1, - padding: "2%", - paddingTop: 0, - }, -}); \ No newline at end of file