From 9e6a91e755d92d404685685581dacb4224a9e465 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 15 May 2019 16:51:30 -0400
Subject: [PATCH 1/5] refactor css for visibility tray

---
 src/App.scss                                   | 15 ++++-----------
 .../post_status_form/post_status_form.vue      |  8 --------
 .../scope_selector/scope_selector.vue          | 18 +++++++++++++++++-
 3 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 7f895065..962087b5 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -626,17 +626,10 @@ nav {
 }
 
 .visibility-tray {
-  font-size: 1.2em;
-  cursor: pointer;
-
-  .selected {
-    color: $fallback--lightText;
-    color: var(--lightText, $fallback--lightText);
-  }
-
-  div {
-    padding-top: 5px;
-  }
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row-reverse;
+  padding-top: 5px;
 }
 
 .visibility-notice {
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index cb70d199..bdf15844 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -147,14 +147,6 @@
   }
 }
 
-.post-status-form {
-  .visibility-tray {
-    display: flex;
-    justify-content: space-between;
-    flex-direction: row-reverse;
-  }
-}
-
 .post-status-form, .login {
   .form-bottom {
     display: flex;
diff --git a/src/components/scope_selector/scope_selector.vue b/src/components/scope_selector/scope_selector.vue
index 33ea488f..5ebb5d56 100644
--- a/src/components/scope_selector/scope_selector.vue
+++ b/src/components/scope_selector/scope_selector.vue
@@ -1,5 +1,5 @@
 <template>
-<div v-if="!showNothing">
+<div v-if="!showNothing" class="scope-selector">
   <i class="icon-mail-alt"
      :class="css.direct"
      :title="$t('post_status.scope.direct')"
@@ -28,3 +28,19 @@
 </template>
 
 <script src="./scope_selector.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.scope-selector {
+  i {
+    font-size: 1.2em;
+    cursor: pointer;
+
+    &.selected {
+      color: $fallback--lightText;
+      color: var(--lightText, $fallback--lightText);
+    }
+  }
+}
+</style>

From 9adbc2c17fced9328771a5f6e7cfefef54ebfb79 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 15 May 2019 22:01:04 -0400
Subject: [PATCH 2/5] make only screen name as link

---
 src/components/user_card/user_card.vue | 71 ++++++++++++++------------
 1 file changed, 38 insertions(+), 33 deletions(-)

diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 2d02ca03..f21770ce 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -6,7 +6,7 @@
         <router-link :to="userProfileLink(user)">
           <UserAvatar :betterShadow="betterShadow" :user="user"/>
         </router-link>
-        <div class="name-and-screen-name">
+        <div class="user-summary">
           <div class="top-line">
             <div :title="user.name" class='user-name' v-if="user.name_html" v-html="user.name_html"></div>
             <div :title="user.name" class='user-name' v-else>{{user.name}}</div>
@@ -18,12 +18,14 @@
             </a>
           </div>
 
-          <router-link class='user-screen-name' :to="userProfileLink(user)">
-            <span class="handle">@{{user.screen_name}}
+          <div class="bottom-line">
+            <span class="user-screen-name-role">
+              <router-link class="user-screen-name" :to="userProfileLink(user)">@{{user.screen_name}}</router-link>
               <span class="alert staff" v-if="!hideBio && !!visibleRole">{{visibleRole}}</span>
-            </span><span v-if="user.locked"><i class="icon icon-lock"></i></span>
+            </span>
+            <span v-if="user.locked"><i class="icon icon-lock"></i></span>
             <span v-if="!hideUserStatsLocal && !hideBio" class="dailyAvg">{{dailyAvg}} {{ $t('user_card.per_day') }}</span>
-          </router-link>
+          </div>
         </div>
       </div>
       <div class="user-meta">
@@ -232,7 +234,7 @@
     opacity: .8;
   }
 
-  .name-and-screen-name {
+  .user-summary {
     display: block;
     margin-left: 0.6em;
     text-align: left;
@@ -249,6 +251,7 @@
       vertical-align: middle;
       object-fit: contain
     }
+
     .top-line {
       display: flex;
     }
@@ -269,40 +272,42 @@
     }
   }
 
-  .user-screen-name {
-    color: $fallback--lightText;
-    color: var(--lightText, $fallback--lightText);
-    display: inline-block;
+  .bottom-line {
+    display: flex;
     font-weight: light;
     font-size: 15px;
     padding-right: 0.1em;
     width: 100%;
-    display: flex;
+  }
 
-    .dailyAvg {
-      min-width: 1px;
-      flex: 0 0 auto;
-      margin-left: 1em;
-      font-size: 0.7em;
-      color: $fallback--text;
-      color: var(--text, $fallback--text);
-    }
+  .user-screen-name-role {
+    min-width: 1px;
+    flex: 0 1 auto;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
 
-    .handle {
-      min-width: 1px;
-      flex: 0 1 auto;
-      text-overflow: ellipsis;
-      overflow: hidden;
-    }
+  .user-screen-name {
+    color: $fallback--lightText;
+    color: var(--lightText, $fallback--lightText);
+  }
 
-    // TODO use proper colors
-    .staff {
-      text-transform: capitalize;
-      color: $fallback--text;
-      color: var(--btnText, $fallback--text);
-      background-color: $fallback--fg;
-      background-color: var(--btn, $fallback--fg);
-    }
+  .dailyAvg {
+    min-width: 1px;
+    flex: 0 0 auto;
+    margin-left: 1em;
+    font-size: 0.7em;
+    color: $fallback--text;
+    color: var(--text, $fallback--text);
+  }
+
+  // TODO use proper colors
+  .staff {
+    text-transform: capitalize;
+    color: $fallback--text;
+    color: var(--btnText, $fallback--text);
+    background-color: $fallback--fg;
+    background-color: var(--btn, $fallback--fg);
   }
 
   .user-meta {

From 34ffcb028a9cf195f430a33d8c029ac4cc8b191d Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 15 May 2019 22:01:31 -0400
Subject: [PATCH 3/5] refactor css

---
 src/components/user_card/user_card.vue | 54 +++++++++++++-------------
 1 file changed, 26 insertions(+), 28 deletions(-)

diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index f21770ce..530f56e0 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -276,38 +276,36 @@
     display: flex;
     font-weight: light;
     font-size: 15px;
-    padding-right: 0.1em;
-    width: 100%;
-  }
 
-  .user-screen-name-role {
-    min-width: 1px;
-    flex: 0 1 auto;
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
+    .user-screen-name-role {
+      min-width: 1px;
+      flex: 0 1 auto;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
 
-  .user-screen-name {
-    color: $fallback--lightText;
-    color: var(--lightText, $fallback--lightText);
-  }
+    .user-screen-name {
+      color: $fallback--lightText;
+      color: var(--lightText, $fallback--lightText);
+    }
 
-  .dailyAvg {
-    min-width: 1px;
-    flex: 0 0 auto;
-    margin-left: 1em;
-    font-size: 0.7em;
-    color: $fallback--text;
-    color: var(--text, $fallback--text);
-  }
+    .dailyAvg {
+      min-width: 1px;
+      flex: 0 0 auto;
+      margin-left: 1em;
+      font-size: 0.7em;
+      color: $fallback--text;
+      color: var(--text, $fallback--text);
+    }
 
-  // TODO use proper colors
-  .staff {
-    text-transform: capitalize;
-    color: $fallback--text;
-    color: var(--btnText, $fallback--text);
-    background-color: $fallback--fg;
-    background-color: var(--btn, $fallback--fg);
+    // TODO use proper colors
+    .staff {
+      text-transform: capitalize;
+      color: $fallback--text;
+      color: var(--btnText, $fallback--text);
+      background-color: $fallback--fg;
+      background-color: var(--btn, $fallback--fg);
+    }
   }
 
   .user-meta {

From e01ffc67c687f3f916466f6838d4eefc3f5aa86d Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 15 May 2019 22:21:06 -0400
Subject: [PATCH 4/5] move visibility-tray css in local scope

---
 src/App.scss                                         | 7 -------
 src/components/post_status_form/post_status_form.vue | 9 +++++++++
 src/components/user_settings/user_settings.vue       | 4 ++++
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 962087b5..4a3ce144 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -625,13 +625,6 @@ nav {
   text-align: right;
 }
 
-.visibility-tray {
-  display: flex;
-  justify-content: space-between;
-  flex-direction: row-reverse;
-  padding-top: 5px;
-}
-
 .visibility-notice {
   padding: .5em;
   border: 1px solid $fallback--faint;
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index bdf15844..a841a17c 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -147,6 +147,15 @@
   }
 }
 
+.post-status-form {
+  .visibility-tray {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row-reverse;
+    padding-top: 5px;
+  }
+}
+
 .post-status-form, .login {
   .form-bottom {
     display: flex;
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index 8a94f0b8..2cb8b37a 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -251,6 +251,10 @@
     margin: 0;
   }
 
+  .visibility-tray {
+    padding-top: 5px;
+  }
+
   input[type=file] {
     padding: 5px;
     height: auto;

From 205a9821e630fae9864a518824e52dea4fd0de28 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Sun, 19 May 2019 14:25:02 -0400
Subject: [PATCH 5/5] make staff label visible

---
 src/components/user_card/user_card.vue | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 530f56e0..b4495673 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -19,10 +19,8 @@
           </div>
 
           <div class="bottom-line">
-            <span class="user-screen-name-role">
-              <router-link class="user-screen-name" :to="userProfileLink(user)">@{{user.screen_name}}</router-link>
-              <span class="alert staff" v-if="!hideBio && !!visibleRole">{{visibleRole}}</span>
-            </span>
+            <router-link class="user-screen-name" :to="userProfileLink(user)">@{{user.screen_name}}</router-link>
+            <span class="alert staff" v-if="!hideBio && !!visibleRole">{{visibleRole}}</span>
             <span v-if="user.locked"><i class="icon icon-lock"></i></span>
             <span v-if="!hideUserStatsLocal && !hideBio" class="dailyAvg">{{dailyAvg}} {{ $t('user_card.per_day') }}</span>
           </div>
@@ -277,14 +275,11 @@
     font-weight: light;
     font-size: 15px;
 
-    .user-screen-name-role {
+    .user-screen-name {
       min-width: 1px;
       flex: 0 1 auto;
       text-overflow: ellipsis;
       overflow: hidden;
-    }
-
-    .user-screen-name {
       color: $fallback--lightText;
       color: var(--lightText, $fallback--lightText);
     }
@@ -300,6 +295,7 @@
 
     // TODO use proper colors
     .staff {
+      flex: none;
       text-transform: capitalize;
       color: $fallback--text;
       color: var(--btnText, $fallback--text);