user information popout design changes.

src/components/app/Popouts/Popouts/userInformationPopout.vue

@@ -20,7 +20,10 @@
           <div class="uesrname-tag">
             <div class="username">{{user.username}}</div>
             <div class="tag">@{{user.tag}}</div>
-          </div>  
+          </div> 
+            <!-- <div class="details">
+              Pancake • Male • 17-19 • United Kingdom
+            </div>  -->
             <div class="actions" v-if="uniqueID !== selfUniqueID">
               <div class="action-buttons">
                 <div class="button" v-if="this.relationshipStatus === null" @click="AddFriendButton"><div class="material-icons">person_add</div><div>Add Friend</div></div>  
@@ -30,7 +33,7 @@
                 <div class="button warn" v-if="this.relationshipStatus === 2" @click="RemoveFriendButton"><div class="material-icons">person_add_disabled</div><div>Remove Friend</div></div>
                 <div class="button warn"><div class="material-icons">block</div><div>Block</div></div>
               </div>
-          </div>
+            </div>
         </div>
         <div class="scrollable">
           <div class="badges" v-if="user.badges && filteredBadges.length">
@@ -174,7 +177,7 @@ export default {
 
 .drop-background {
   position: absolute;
-  background: rgba(0, 0, 0, 0.521);
+  background: rgba(0, 0, 0, 0.2);
   top: 0;
   left: 0;
   right: 0;
@@ -190,12 +193,22 @@ export default {
   color: white;
   display: flex;
   flex-direction: row;
-  border-radius: 10px;
   position: relative;
-  background: rgba(0, 0, 0, 0.349);
+  background: rgba(0, 0, 0, 0.7);
-  backdrop-filter: blur(10px)
+  backdrop-filter: blur(10px);
-
+  box-shadow: 0px 0px 20px 11px #151515c4;
 }
+
+@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
+  .box{
+    background: rgba(0, 0, 0, 0.3);
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+  }
+}
+
+
+
 .spinner {
   align-self: center;
 }
@@ -205,18 +218,15 @@ export default {
   flex-direction: column;
   width: 100%;
   align-items: center;
-  padding: 10px;
   overflow: auto;
 }
 .scrollable {
-  margin-top: 5px;
   display: flex;
   flex-direction: column;
   width: 100%;
   align-items: center;
   overflow: auto;
-  padding-right: 7px;
+  scrollbar-width: thin;
-  margin-left: 5px;
 }
 .scrollable::-webkit-scrollbar {
     width: 3px;
@@ -225,15 +235,13 @@ export default {
   display: flex;
   flex-direction: column;
   align-content: center;
-  border-bottom: solid 1px rgba(255, 255, 255, 0.15);
   width: 100%;
   align-items: center;
   align-content: center;
   padding-bottom: 10px;
   flex-shrink: 0;
-  background: rgba(41, 41, 41, 0.697);
+  background: rgba(0, 0, 0, 0.3);
   padding-top: 30px;
-  border-radius: 5px;
 }
 
 .uesrname-tag {
@@ -252,7 +260,6 @@ export default {
 .button {
   padding: 8px; 
   align-self: center;
-  border-radius: 5px;
   user-select: none;
   cursor: default;
   transition: 0.3s;
@@ -269,7 +276,6 @@ export default {
   right: 0;
   background: rgb(51, 163, 255);
   z-index: -1;
-  border-radius: 5px;
   opacity: 0.8;
   transition: 0.3s;
 }
@@ -284,8 +290,9 @@ export default {
   display: flex;
   flex-direction: column;
   width: 100%;
-  margin-top: 3px;
+  margin-top: 10px;
-  border-bottom: solid 1px rgba(255, 255, 255, 0.15);
+
+  border-bottom: solid 2px rgba(0, 0, 0, 0.3);
   padding-bottom: 10px;
   user-select: none;
   cursor: default;
@@ -304,12 +311,13 @@ export default {
 .title {
   font-size: 20px;
   margin-bottom: 3px;
-  margin-left: 3px;
+  margin-left: 10px;
 }
 .badges-list{
   display: flex;
   flex-wrap: wrap;
-  flex-shrink: 0
+  flex-shrink: 0;
+  margin-left: 8px;
 }
 .badge {
   border: solid 1px white;
@@ -341,18 +349,14 @@ export default {
   flex-direction: column;
   width: 100%;
   margin-top: 10px;
-  margin-bottom: 5px;
-  border-bottom: solid 1px rgba(255, 255, 255, 0.15);
-  padding-bottom: 10px;
   cursor: default;
   flex-shrink: 0
 }
 .about-item{
   display: flex;
   align-items: center;
-  background: rgba(47, 47, 47, 0.37);
+  margin-top: 2px;
-  margin: 2px;
+  margin-bottom: 2px;
-  border-radius: 5px;
   padding: 10px;
   flex-shrink: 0
 
@@ -408,7 +412,6 @@ export default {
 }
 .action-buttons .button.warn::after {
   background: rgb(255, 53, 53);
-  border-radius: 5px;
 }
 
 .back-button {