style: Adding new style to profile

src/components/UserProfile/UserProfileLayout.vue

@@ -23,38 +23,38 @@ function toUpdateUserSettings(){
 </script>
 
 <template>
-    <div class="container text-center">
-    <div class="row">
-      <div class="col">
-        <img src="/src/assets/userprofile.png" class="img-fluid">
-        <p class="h2">{{useUserInfoStore().getFirstName}}</p>
-        <p><a class="link-dark" @click="toUpdateUserSettings" href="#">Edit profile</a></p>
-      </div>
+  <div class="container py-5 h-100">
+    <div class="row d-flex justify-content-center align-items-center h-100">
+      <div class="col 12">
+        <div class="card">
+          <div class="rounded-top text-white d-flex flex-row bg-primary" style="height:200px;">
+            <div class="ms-4 mt-5 d-flex flex-column" style="width: 150px;">
+              <img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="Generic placeholder image"
+                class="img-fluid img-thumbnail mt-4 mb-2" style="width: 150px; z-index: 1">
+              <button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-primary"
+                data-mdb-ripple-color="dark" style="z-index: 1;" @click="toUpdateUserSettings">
+                Edit profile
+              </button>
             </div>
-      <div class="row">
-        <div class="col">
-          <img src="/src/assets/icons/fire.png" class="img-fluid" style="width: 30px; height: 30px" alt="dollar">
-          <p>Streak: 10</p>
+            <div class="ms-3" style="margin-top: 130px;">
+              <h1>Andy Horwitz</h1>
             </div>
           </div>
-      <div class="row">
-      <div class="col-12">
-        <img src="/src/assets/icons/dollar.png" class="img-fluid" style="width: 30px; height: 30px" alt="dollar">
-        <p class="">Points: 2000 </p>
+          <div class="p-4 text-black" style="background-color: #f8f9fa;">
+            <div class="d-flex justify-content-end text-center py-1">
+              <div>
+                <p class="mb-1 h2">253 <img src="@/assets/items/pigcoin.png" style="width: 4rem"></p>
+                <p class="small text-muted mb-0">Points</p>
               </div>
+              <div class="px-3">
+                <p class="mb-1 h2">1026 <img src="@/assets/icons/fire.png" style="width: 4rem"></p>
+                <p class="small text-muted mb-0">Streak</p>
               </div>
-
-    <div class="row">
-      <div class="col">
-        total points earned
-      </div>
-      <div class="col">
-        total badges earned
             </div>
           </div>
+          <div class="card-body p-1 text-black">
             <div class="row">
               <div class="col">
-        <!-- Here is the badges of the user -->
                 <div class="container-fluid">
                   <h1 class="mt-5 text-start badges-text">Badges</h1>
                   <div class="scrolling-wrapper-badges row flex-row flex-nowrap mt-4 pb-4 pt-2">
@@ -99,12 +99,14 @@ function toUpdateUserSettings(){
                 <div class="container-fluid mb-5">
                   <h1 class="mt-5 text-start history-text">History</h1>
                   <div class="row scrolling-wrapper-history">
-            <div v-for="index in numberOfHistory" :key="index" class="col-md-4 col-sm-4 col-lg-4 col-xs-4 col-xl-4 control-label">
+                    <div v-for="index in numberOfHistory" :key="index"
+                      class="col-md-4 col-sm-4 col-lg-4 col-xs-4 col-xl-4 control-label">
                       <div class="card history-block">
                         <div class="card mb-3" style="max-width: 540px;">
                           <div class="row g-0">
                             <div class="col-md-4">
-                      <img src="/src/assets/icons/piggybank.svg" class="img-fluid rounded-start h-40 mx-auto d-none d-md-block" alt="...">
+                              <img src="/src/assets/icons/piggybank.svg"
+                                class="img-fluid rounded-start h-40 mx-auto d-none d-md-block" alt="...">
                             </div>
                             <div class="col-md-8">
                               <div class="card-body">
@@ -124,6 +126,10 @@ function toUpdateUserSettings(){
               </div>
             </div>
           </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style scoped>
@@ -156,6 +162,7 @@ function toUpdateUserSettings(){
   background-size: cover;
   transition: all 0.2s ease-in-out !important;
   border-radius: 24px;
+
   &:hover {
     transform: translateY(-5px);
     box-shadow: none;
@@ -173,6 +180,7 @@ function toUpdateUserSettings(){
   transition: all 0.2s ease-in-out !important;
   border-radius: 24px;
   margin: 20px;
+
   &:hover {
     transform: translateY(-5px);
     box-shadow: none;
@@ -230,4 +238,10 @@ function toUpdateUserSettings(){
   background-image: linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);
 
 }
+
+
+/*-------*/
+.rounded-top {
+  background-color: #00DBDE;
+}
 </style>
\ No newline at end of file