1 files changed, 28 insertions, 2 deletions
diff --git a/app/javascript/flavours/glitch/styles/components/account.scss b/app/javascript/flavours/glitch/styles/components/account.scss
index e6f71fd30..efeea836c 100644
--- a/app/javascript/flavours/glitch/styles/components/account.scss
+++ b/app/javascript/flavours/glitch/styles/components/account.scss
@@ -1,6 +1,8 @@
 .account {
   padding: 10px;
   border-bottom: 1px solid lighten($ui-base-color, 8%);
+  color: inherit;
+  text-decoration: none;
 
   .account__display-name {
     flex: 1 1 auto;
@@ -10,6 +12,18 @@
     text-decoration: none;
     font-size: 14px;
   }
+
+  &.small {
+    border: none;
+    padding: 0;
+
+    & > .account__avatar-wrapper { margin: 0 8px 0 0 }
+
+    & > .display-name {
+      height: 24px;
+      line-height: 24px;
+    }
+  }
 }
 
 .account__wrapper {
@@ -18,8 +32,7 @@
 
 .account__avatar-wrapper {
   float: left;
-  margin-left: 12px;
-  margin-right: 12px;
+  margin: 6px 16px 6px 6px;
 }
 
 .account__avatar {
@@ -59,6 +72,11 @@
   white-space: nowrap;
 }
 
+.account__header__wrapper {
+  flex: 0 0 auto;
+  background: lighten($ui-base-color, 4%);
+}
+
 .account__header {
   flex: 0 0 auto;
   background: lighten($ui-base-color, 4%);
@@ -67,6 +85,14 @@
   background-position: center;
   position: relative;
 
+  .account__avatar {
+    @include avatar-radius();
+    @include avatar-size(90px);
+    display: block;
+    margin: 0 auto 10px;
+    overflow: hidden;
+  }
+
   &.inactive {
     opacity: 0.5;