Profile Component

LeftOvers/App.js

@@ -1,22 +0,0 @@
-import React from 'react';
-import {StyleSheet, View } from 'react-native';
-import ProfileModification from './components/ProfileModification';
-
-export default function App() {
-    const all = [{title: "Mussels"}, {title: "Skimmed Milk"}, {title: "Nuts"}]
-    const die = [{title: "Dairy free"}, {title: "Porkless"}, {title: "Pescatarian"}]
-  return (
-    <View style={styles.container}>
-      <ProfileModification name="Johnny Silverhand" avatar="plus.png" diets={die} allergies={all}></ProfileModification>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#3F3C42',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});

LeftOvers/App.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import {StyleSheet, View } from 'react-native';
+import ProfileModification from './components/ProfileModification';
+import ValidateButton from './components/ValidateButton';
+
+export default function App() {
+  const all = [{title: "Mussels"}, {title: "Skimmed Milk"}, {title: "Nuts"}]
+  const die = [{title: "Dairy free"}, {title: "Gluten free"}, {title: "Porkless"}, {title: "Vegan"}, {title: "Vegetarian"}, {title: "Pescatarian"}]
+  return (
+    <View style={styles.container}>
+        <View style={styles.background}>
+          <ProfileModification name="Johnny Silverhand" avatar="plus.png" diets={die} allergies={all}></ProfileModification>
+          <View style={{marginTop: 10}}/>
+          <ValidateButton title="Update Profile" image="plus.png" colour="#ACA279" backColour="#F2F0E4"></ValidateButton>
+        </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#3F3C42',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  background: {
+    height: 844,
+    width: 390,
+    backgroundColor: "linear-gradient(#59BDCD, #59BDCD)",
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+  }
+});

LeftOvers/components/HeaderFlatList.tsx

@@ -24,7 +24,7 @@ const styles = StyleSheet.create({
     borderTopLeftRadius: 15,
     borderWidth: 2,
     borderColor: "#ACA279",
-    width: 250,
+    width: 330,
   },
   arrow: {
     height: 20,

LeftOvers/components/ListTab.tsx

@@ -67,13 +67,14 @@ const styles = StyleSheet.create({
       flexDirection: "row",
       alignItems: "flex-start",
       justifyContent: "stretch",
-      width: 250,
+      width: 330,
   },
   itemText: {
-      fontSize: 10,
+      fontSize: 13,
       textAlign: "left",
       flex: 1,
       padding: 5,
+      paddingLeft: 10,
       color: "#3F3C42",
   },
 });

LeftOvers/components/ProfileModification.tsx

@@ -31,6 +31,7 @@ export default function ProfileModification(props: ProfileProps) {
 
 const styles = StyleSheet.create({
   background: {
+    width: 370,
     flexDirection: 'column',
     alignItems: 'center',
     justifyContent: 'center',
@@ -43,7 +44,8 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
     flex: 0.7,
-    width: 250,
+    width: 330,
+    marginBottom: 10,
   },
   avatar: {
     height: 45,
@@ -62,8 +64,8 @@ const styles = StyleSheet.create({
     borderWidth: 2,
     borderStyle: 'dashed',
     borderColor: '#ACA279',
-    alignItems: 'center', // Centre le contenu verticalement
-    justifyContent: 'left', // Centre le contenu horizontalement
+    alignItems: 'center',
+    justifyContent: 'left',
     flex: 0.8,
     marginLeft: 20,
     padding: 5,
@@ -81,16 +83,16 @@ const styles = StyleSheet.create({
 
   filterBar: {
       flexDirection: "row",
-      width: 230,
+      width: 300,
       paddingTop: 10,
-      paddingBottom: 0,
+      paddingBottom: 5,
       alignItems: "flex-end",
       justifyContent: "center",
       flex: 0.2,
   },
   filters: {
       flex: 0.5,
-      fontSize: 15,
+      fontSize: 20,
       color: '#ACA279',
       flex: 1,
       padding: 5,
@@ -98,7 +100,7 @@ const styles = StyleSheet.create({
       paddingBottom: 0,
   },
   nbSelected: {
-      fontSize: 10,
+      fontSize: 11,
       flex: 1,
       color: "#3F3C42",
       textAlign: "right",

LeftOvers/components/ValidateButton.tsx

@@ -14,12 +14,12 @@ export default function ValidateButton(props: ValidateButtonProps) {
     <Pressable style={{
         alignItems: 'center',
         justifyContent: 'center',
-        borderRadius: 20,
-        backgroundColor: props.backColour,}}>
+        borderRadius: 20,}}>
         <View style={{
             borderRadius: 30,
             borderWidth: 2,
             borderColor: props.colour,
+            backgroundColor: props.backColour,
             alignItems: 'center',
             flexDirection: "row",
             padding: 5,
@@ -60,7 +60,7 @@ const styles = StyleSheet.create({
     borderRadius: 20,
     borderWidth: 2,
     borderColor: '#ACA279',
-    alignItems: 'center', // Centre le contenu verticalement
+    alignItems: 'center',
     flex: 1,
     flexDirection: "row",
     paddingLeft: 25,

README.md

@@ -24,7 +24,7 @@ La racine de notre repo est composée de deux dossiers essentiels au projet:
 
 [**Images**](Images) : **Images de l'application**
 
-👉 [**Solution de l'application**](LeftOvers/App.js)
+👉 [**Solution de l'application**](LeftOvers/App.tsx)
 
 # Fonctionnement