1 files changed, 39 insertions, 26 deletions

diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss
index 5b3e1db1b..b95cffbb4 100644
--- a/app/javascript/flavours/glitch/styles/components/accounts.scss
+++ b/app/javascript/flavours/glitch/styles/components/accounts.scss
@@ -30,7 +30,9 @@
     border: 0;
     padding: 0;
 
-    & > .account__avatar-wrapper { margin: 0 8px 0 0 }
+    & > .account__avatar-wrapper {
+      margin: 0 8px 0 0;
+    }
 
     & > .display-name {
       height: 24px;
@@ -60,11 +62,11 @@
 }
 
 .account__avatar {
-  @include avatar-radius();
+  @include avatar-radius;
+
   display: block;
   position: relative;
   cursor: pointer;
-
   width: 36px;
   height: 36px;
   background-size: 36px 36px;
@@ -77,11 +79,13 @@
 
   &-composite {
     @include avatar-radius;
+
     overflow: hidden;
     position: relative;
 
     & div {
       @include avatar-radius;
+
       float: left;
       position: relative;
       box-sizing: border-box;
@@ -102,24 +106,24 @@
 }
 
 .account__avatar-overlay {
-  position: relative;
   @include avatar-size(48px);
 
   position: relative;
 
   &-base {
-    @include avatar-radius();
+    @include avatar-radius;
     @include avatar-size(36px);
 
     img {
       @include avatar-radius;
+
       width: 100%;
       height: 100%;
     }
   }
 
   &-overlay {
-    @include avatar-radius();
+    @include avatar-radius;
     @include avatar-size(24px);
 
     position: absolute;
@@ -129,6 +133,7 @@
 
     img {
       @include avatar-radius;
+
       width: 100%;
       height: 100%;
     }
@@ -379,7 +384,7 @@
       &::before,
       &::after {
         display: block;
-        content: "";
+        content: '';
         position: absolute;
         bottom: 0;
         left: 50%;
@@ -533,14 +538,22 @@
 
   &__tabs {
     display: flex;
-    align-items: flex-start;
+    align-items: flex-end;
     justify-content: space-between;
     padding: 7px 10px;
-    margin-top: -55px;
-    gap: 8px;
+    margin-top: -81px;
+    height: 130px;
     overflow: hidden;
     margin-left: -2px; // aligns the pfp with content below
 
+    .account-role {
+      margin: 0 2px;
+      padding: 4px 0;
+      box-sizing: border-box;
+      min-width: 90px;
+      text-align: center;
+    }
+
     &__buttons {
       display: flex;
       align-items: center;
@@ -702,22 +715,22 @@
         padding: 2px 6px;
         color: $darker-text-color;
 
-  &:hover,
-  &:active,
-  &:focus {
-    color: lighten($darker-text-color, 7%);
-    background-color: rgba($darker-text-color, 0.15);
-  }
+        &:hover,
+        &:active,
+        &:focus {
+          color: lighten($darker-text-color, 7%);
+          background-color: rgba($darker-text-color, 0.15);
+        }
 
-  &:focus {
-    background-color: rgba($darker-text-color, 0.3);
-  }
+        &:focus {
+          background-color: rgba($darker-text-color, 0.3);
+        }
 
-  &[disabled] {
-    color: darken($darker-text-color, 13%);
-    background-color: transparent;
-    cursor: default;
-  }
+        &[disabled] {
+          color: darken($darker-text-color, 13%);
+          background-color: transparent;
+          cursor: default;
+        }
       }
 
       .flex-spacer {
@@ -736,8 +749,6 @@
       display: block;
       box-sizing: border-box;
       width: calc(100% + 20px);
-      margin: 0;
-      margin-top: 5px;
       color: $secondary-text-color;
       background: $ui-base-color;
       padding: 10px;
@@ -764,6 +775,7 @@
   display: flex;
   align-items: center;
   flex-direction: column;
+
   &__message {
     color: $darker-text-color;
     padding: 8px 0;
@@ -774,6 +786,7 @@
     text-align: center;
     margin-bottom: 16px;
   }
+
   &__action {
     display: flex;
     justify-content: space-between;