From df605f0f8ba795a10cf67095429bfeb7c362b7c9 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Sat, 5 Aug 2017 04:24:58 +0200
Subject: Add "signed in as" header to some pages (#4523)

---
 app/javascript/styles/basics.scss     |  2 +-
 app/javascript/styles/containers.scss | 54 ++++++++++++++++++++++++++++++++++-
 app/javascript/styles/forms.scss      |  2 +-
 3 files changed, 55 insertions(+), 3 deletions(-)

(limited to 'app/javascript')

diff --git a/app/javascript/styles/basics.scss b/app/javascript/styles/basics.scss
index 182ea36a4..4e51b555c 100644
--- a/app/javascript/styles/basics.scss
+++ b/app/javascript/styles/basics.scss
@@ -47,7 +47,7 @@ body {
     padding: 0;
   }
 
-  @media screen and (max-width: 360px) {
+  @media screen and (max-width: 400px) {
     padding-bottom: 0;
   }
 }
diff --git a/app/javascript/styles/containers.scss b/app/javascript/styles/containers.scss
index 7dcf2c006..d366a46ec 100644
--- a/app/javascript/styles/containers.scss
+++ b/app/javascript/styles/containers.scss
@@ -13,8 +13,9 @@
   margin: 100px auto;
   margin-bottom: 50px;
 
-  @media screen and (max-width: 360px) {
+  @media screen and (max-width: 400px) {
     margin: 30px auto;
+    margin-bottom: 20px;
   }
 
   h1 {
@@ -42,3 +43,54 @@
     }
   }
 }
+
+.account-header {
+  width: 400px;
+  margin: 0 auto;
+  display: flex;
+  font-size: 13px;
+  line-height: 18px;
+  box-sizing: border-box;
+  padding: 20px 0;
+  padding-bottom: 0;
+  margin-bottom: -30px;
+  margin-top: 40px;
+
+  @media screen and (max-width: 400px) {
+    width: 100%;
+    margin: 0;
+    margin-bottom: 10px;
+    padding: 20px;
+    padding-bottom: 0;
+  }
+
+  .avatar {
+    width: 40px;
+    height: 40px;
+    margin-right: 8px;
+
+    img {
+      width: 100%;
+      height: 100%;
+      display: block;
+      margin: 0;
+      border-radius: 4px;
+    }
+  }
+
+  .name {
+    flex: 1 1 auto;
+    color: $ui-secondary-color;
+
+    .username {
+      display: block;
+      font-weight: 500;
+    }
+  }
+
+  .logout-link {
+    display: block;
+    font-size: 32px;
+    line-height: 40px;
+  }
+}
diff --git a/app/javascript/styles/forms.scss b/app/javascript/styles/forms.scss
index cffb6f197..62094e98e 100644
--- a/app/javascript/styles/forms.scss
+++ b/app/javascript/styles/forms.scss
@@ -317,7 +317,7 @@ code {
 }
 
 .flash-message {
-  background: $ui-base-color;
+  background: lighten($ui-base-color, 8%);
   color: $ui-primary-color;
   border-radius: 4px;
   padding: 15px 10px;
-- 
cgit