Edited ProfilePage style

mostafa-elhaiany · Oct 29, 2023 · 70195e3 · 70195e3
1 parent f67caa6
commit 70195e3
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/DineDevineUI/src/pages/ProfilePage.css b/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;
 }
diff --git a/DineDevineUI/src/pages/ProfilePage.tsx b/DineDevineUI/src/pages/ProfilePage.tsx
@@ -99,7 +99,7 @@ const ProfilePage: React.FC<Profile> = (props: Profile) => {
 
     return (
         <IonPage>
-            <IonHeader>
+            <IonHeader className={"profileHeader"}>
                 <IonToolbar>
                     <IonButtons slot="start">
                         <IonBackButton defaultHref="/"></IonBackButton>
@@ -112,7 +112,7 @@ 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"}>
@@ -179,7 +179,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