From f8ed5401b5b65bf355555894b8caf10447024add Mon Sep 17 00:00:00 2001
From: Rayhan Hassou <Rayhan.HASSOU@etu.uca.fr>
Date: Wed, 8 Nov 2023 11:50:56 +0100
Subject: [PATCH] the desing for the button is finished

---
 LeftOvers/App.js                      | 12 ++++++++++-
 LeftOvers/components/CustomButton.tsx | 30 ++++++++++++++++++---------
 2 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/LeftOvers/App.js b/LeftOvers/App.js
index 4416c6a..69cb932 100644
--- a/LeftOvers/App.js
+++ b/LeftOvers/App.js
@@ -1,14 +1,24 @@
 import { StatusBar } from 'expo-status-bar';
 import React from 'react';
-import { StyleSheet, Text, View} from 'react-native';
+import { StyleSheet, Text, View, Alert } from 'react-native';
+import CustomButton from './components/CustomButton';
 
 export default function App() {
 
+  const handleButtonPress = () => {
+    console.log("test 1");
+  };
+
+  const handleButtonPress2 = () => {
+    console.log("test 2");
+  };
 
   return (
     <View style={styles.container}>
       <Text>Ceci va etre la page qui charge le splashScreen</Text>
       <StatusBar style="auto" />
+      <CustomButton title="Appuyez-moi" onPress={handleButtonPress} />
+      <CustomButton title="Autre test" onPress={handleButtonPress2} />
     </View>
   );
 }
diff --git a/LeftOvers/components/CustomButton.tsx b/LeftOvers/components/CustomButton.tsx
index 0c261f3..5f99086 100644
--- a/LeftOvers/components/CustomButton.tsx
+++ b/LeftOvers/components/CustomButton.tsx
@@ -1,33 +1,43 @@
 import React from 'react';
-import {StyleSheet,Pressable, Text, Image} from 'react-native';
+import {StyleSheet,Pressable, Text, View} from 'react-native';
 
 
 export default function CustomButton(props) {
-    return (
-    <Pressable style={styles.button} >
-      <Text style={styles.text}>{props.title}</Text>
+  return (
+    <Pressable style={styles.button}>
+      <View style={styles.view}>
+        <Text style={styles.text}>{props.title}</Text>
+      </View>
     </Pressable>
-    );
+  );
 }
 
 const styles = StyleSheet.create({
   button: {
     alignItems: 'center',
     justifyContent: 'center',
-    paddingVertical: 12,
-    paddingHorizontal: 32,
+    width : 150,
+    height: 40,
     borderRadius: 4,
     elevation: 3,
     backgroundColor: 'rgba(0, 0, 0, 0.7)',
   },
   text: {
-    width: '100%', // L'image prend toute la largeur du conteneur
-    height: '100%',
-    fontSize: 16,
+    fontSize: 15,
     lineHeight: 21,
     fontWeight: 'bold',
     letterSpacing: 0.25,
     color: 'white',
   },
+  view: {
+    width : 145,
+    height: 35,
+    borderRadius: 4,
+    elevation: 3,
+    borderWidth: 1,
+    borderColor: 'grey',
+    alignItems: 'center', // Centre le contenu verticalement
+    justifyContent: 'center', // Centre le contenu horizontalement
+  },
 });
 
-- 
2.36.3