Merge branch 'ui' of https://github.com/mostafa-elhaiany/DineDevine i…

…nto ui

# Conflicts:
#	DineDevineUI/src/pages/OnboardingPage.tsx

DineDevineUI/README.md

@@ -0,0 +1,64 @@
+# Ionic React Capacitor Frontend PWA App
+
+|                                               |                                                |
+| --------------------------------------------- | ---------------------------------------------- |
+| ![Screenshot 1](./public/img/screenshot1.png) | ![Screenshot 2](./public/img/screenshot2.png)  |
+
+This is an Ionic React Capacitor-based Progressive Web App (PWA) for building cross-platform web and mobile applications.
+
+## Getting Started
+
+Before you begin, make sure you have Node.js and npm installed. You will also need the Ionic CLI. If not, you can install it globally:
+
+```
+npm install -g @ionic/cli
+```
+
+
+## Installation
+
+1. Clone this repository:
+
+```
+git clone git@github.com:mostafa-elhaiany/DineDevine.git
+cd DineDevine
+cd DineDevineUI
+```
+
+2. Install project dependencies:
+
+````
+npm install
+````
+
+3. Build the app for your target device (web, iOS, Android):
+
+````
+ionic build
+````
+
+4. Add platform-specific code to your project, depending on your target device:
+
+### For iOS:
+
+```
+ionic cap add ios
+ionic cap open ios
+```
+This command will open Xcode. You can run the app in the iOS simulator and perform testing.
+
+
+### For Android:
+```
+ionic cap add android
+ionic cap open android
+```
+This command will open Android Studio. You can run the app in the Android emulator and perform testing.
+
+### For web development:
+```
+ionic serve
+```
+This will start a local development server and open the app in your web browser. You can make changes and see them immediately.
+
+![GIF Example](./public/match-placeholder-unscreen.gif)

DineDevineUI/src/hooks/usePhotoGallery.tsx

@@ -71,25 +71,30 @@ export function usePhotoGallery() {
         loadSaved();
     }, []);
 
-    const takePhoto = async () => {
+    const takePhoto = async () :Promise<string> => {
         try {
             const photo = await Camera.getPhoto({
                 resultType: CameraResultType.Uri,
                 source: CameraSource.Camera,
                 quality: 100,
             });
 
+
+
             const fileName = Date.now() + '.jpeg';
             const savedFileImage = await savePicture(photo, fileName);
             const newPhotos = [savedFileImage, ...photos];
             setPhotos(newPhotos);
 
+            return base64FromPath(savedFileImage.webviewPath!!)
+
             // Store the updated photos in Preferences
             Preferences.set({ key: PHOTO_STORAGE, value: JSON.stringify(newPhotos) });
         } catch (error) {
             console.error('Error taking photo:', error);
             // Handle the error as needed
         }
+
     };
 
     return {

DineDevineUI/src/pages/ProfilePage.css

@@ -62,4 +62,12 @@
 
 .persoSelect {
     width: 20%;
+}
+
+.profileContainer {
+    --ion-background-color: linear-gradient(0deg, #FDF9F6, #FFFAF5);
+}
+
+.profileHeader {
+    --ion-background-color: white;
 }

DineDevineUI/src/pages/ProfilePage.tsx

@@ -56,6 +56,15 @@ const ProfilePage: React.FC<Profile> = (props: Profile) => {
     const [name, setName] = useState(localStorage.getItem("name"))
     const [email, setEmail] = useState(localStorage.getItem("email"))
     const [personalityType, setPersonalityType] = useState<string>(localStorage.getItem("personality") ?? "Default")
+    const [photo, setPhoto] = useState(localStorage.getItem("photo") ?? "")
+
+    function getAvatar() {
+        if (photo == "") {
+            return "/public/test.png"
+        }
+        return photo
+
+    }
 
     useEffect(() => {
         localStorage.setItem('interests', JSON.stringify(interestsTAG));
@@ -99,7 +108,7 @@ const ProfilePage: React.FC<Profile> = (props: Profile) => {
 
     return (
         <IonPage>
-            <IonHeader>
+            <IonHeader className={"profileHeader"}>
                 <IonToolbar>
                     <IonButtons slot="start">
                         <IonBackButton defaultHref="/"></IonBackButton>
@@ -112,18 +121,18 @@ const ProfilePage: React.FC<Profile> = (props: Profile) => {
                     </IonButtons>
                 </IonToolbar>
             </IonHeader>
-            <IonContent fullscreen>
+            <IonContent fullscreen class={"profileContainer"}>
                 <IonGrid class={"ion-margin-top"}>
                     <IonRow class={"ion-margin-top ion-margin-bottom"}>
                         <IonCol className={"avatarContainer"}>
                             <IonAvatar class={"avatar ion-margin-end"}>
-                                <img className={"image"}  src={"/public/test.png"}/>
+                                <img className={"image"}  src={getAvatar()}/>
                             </IonAvatar>
                         </IonCol>
 
                         <IonCol class={"ion-margin-start"}>
                             <h1 className="no-text-wrap profileHeadline">{name}</h1>
-                            E-Mail: {email}
+                            {email}
                         </IonCol>
                     </IonRow>
                     <IonRow>
@@ -179,7 +188,7 @@ const ProfilePage: React.FC<Profile> = (props: Profile) => {
                     <IonRow>
                         <IonCol>
                             <IonCard className="achievements-card">
-                                <h1 className="ion-margin-start">Achievements</h1>
+                                <h1 className="ion-margin-start profileHeadline">Achievements</h1>
                                 <IonRow>
                                     <IonCol className="ion-col"> {/* Use "ion-col" class here */}
                                         <IonImg

package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "@ionic/pwa-elements": "^3.2.2"
+  }
+}