From 4551dbf4b3f8def55480ac60224d2a4fbebbb4f2 Mon Sep 17 00:00:00 2001
From: CuriousMagpie <eilatan@gmail.com>
Date: Fri, 4 Aug 2023 15:34:05 -0400
Subject: [PATCH] WIP(user profile): styling the top portion of the modal

---
 .../src/components/userMenu/profile.vue       | 50 +++++++++++++------
 1 file changed, 34 insertions(+), 16 deletions(-)

diff --git a/website/client/src/components/userMenu/profile.vue b/website/client/src/components/userMenu/profile.vue
index 329da00461..0dbef65ad3 100644
--- a/website/client/src/components/userMenu/profile.vue
+++ b/website/client/src/components/userMenu/profile.vue
@@ -116,6 +116,7 @@
             >
               <div
                 class="svg-icon dots-icon"
+                :tooltip="$t('moreInfo')"
                 v-html="icons.dots"
               >
               </div>
@@ -362,12 +363,23 @@
       background-color: $white;
       margin-left: 24px;
 
+    .avatar-container {
+      margin-right: -60px;
+    }
+
     .progress-container > .progress {
       background-color: $gray-700 !important;
-      border-radius: 1px;
+      border-radius: 2px;
       height: 16px !important;
+      min-width: 375px !important;
       vertical-align: middle !important;
 
+      > .svg-icon {
+        height: 28px !important;
+        margin-top: -2px !important;
+        width: 28px !important;
+      }
+
       .progress-bar {
         height: 16px !important;
       }
@@ -375,10 +387,10 @@
 
     .profile-first-row,
     .progress-container {
-      margin-left: -8px;
+      margin-left: 4px;
+      margin-top: 4px;
     }
 
-
     .small-text {
       color: $gray-50;
     }
@@ -398,16 +410,16 @@
     }
   }
 
-    .profile-name-character {
+  .profile-name-character {
       margin-left: 4px !important;
     }
   }
 
   .svg-icon {
     display: block;
-    width: 24px;
     height: 24px;
     margin: 0 auto;
+    width: 24px;
     }
 
   .close-icon svg {
@@ -416,14 +428,6 @@
     width: 14px;
   }
 
-  .dots-icon svg {
-    color: $gray-50;
-    height: 16px;
-    margin-left: 1px;
-    margin-top: 3px;
-    width: 4px;
-  }
-
   .message-icon svg {
     height: 11px;
     margin-top: 1px;
@@ -443,12 +447,13 @@
   }
 
   .markdown p {
-      padding-bottom: 24px;
-    }
+    padding-bottom: 24px;
+  }
 
   .standard-page {
     background-color: $gray-700;
-    // padding-left: 12px;
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
     padding-top: 0px;
   }
 
@@ -488,6 +493,19 @@
     }
   }
 
+  .svg-icon {
+     display: block;
+    height: 24px;
+    margin: 0 auto;
+    width: 24px;
+  }
+
+  .dots-icon {
+    color: $gray-50;
+    height: 16px;
+    width: 4px;
+  }
+
   .message-icon,
   .gift-icon {
     color: $gray-100;