Resolve "Add status message from within user menu"

5 files changed, 98 insertions, 62 deletions

diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 11a30d83f03..c430009bfe0 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -529,9 +529,10 @@
 }
 
 .header-user {
-  .dropdown-menu {
+  &.show .dropdown-menu {
     width: auto;
     min-width: unset;
+    max-height: 323px;
     margin-top: 4px;
     color: $gl-text-color;
     left: auto;
@@ -542,6 +543,18 @@
       .user-name {
         display: block;
       }
+
+      .user-status-emoji {
+        margin-right: 0;
+        display: block;
+        vertical-align: text-top;
+        max-width: 148px;
+        font-size: 12px;
+
+        gl-emoji {
+          font-size: $gl-font-size;
+        }
+      }
     }
 
     svg {
@@ -573,3 +586,24 @@
     }
   }
 }
+
+.set-user-status-modal {
+  .modal-body {
+    min-height: unset;
+  }
+
+  .input-lg {
+    max-width: unset;
+  }
+
+  .no-emoji-placeholder,
+  .clear-user-status {
+    svg {
+      fill: $gl-text-color-secondary;
+    }
+  }
+
+  .emoji-menu-toggle-button {
+    @include emoji-menu-toggle-button;
+  }
+}
diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index 7f37dd3de91..11597c7e85e 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -266,3 +266,59 @@
     border-radius: 50%;
   }
 }
+
+@mixin emoji-menu-toggle-button {
+  line-height: 1;
+  padding: 0;
+  min-width: 16px;
+  color: $gray-darkest;
+  fill: $gray-darkest;
+
+  .fa {
+    position: relative;
+    font-size: 16px;
+  }
+
+  svg {
+    @include btn-svg;
+    margin: 0;
+  }
+
+  .award-control-icon-positive,
+  .award-control-icon-super-positive {
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+  }
+
+  &:hover,
+  &.is-active {
+    .danger-highlight {
+      color: $red-500;
+    }
+
+    .link-highlight {
+      color: $blue-600;
+      fill: $blue-600;
+    }
+
+    .award-control-icon-neutral {
+      opacity: 0;
+    }
+
+    .award-control-icon-positive {
+      opacity: 1;
+    }
+  }
+
+  &.is-active {
+    .award-control-icon-positive {
+      opacity: 0;
+    }
+
+    .award-control-icon-super-positive {
+      opacity: 1;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 837016db67b..b7a95f604b8 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -314,7 +314,8 @@ $diff-jagged-border-gradient-color: darken($white-normal, 8%);
 $monospace-font: 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas', 'Ubuntu Mono',
   'Courier New', 'andale mono', 'lucida console', monospace;
 $regular-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
-  'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+  'Noto Color Emoji';
 
 /*
 * Dropdowns
@@ -634,5 +635,4 @@ Modals
 */
 $modal-body-height: 134px;
 
-
 $priority-label-empty-state-width: 114px;
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index c9e0899425f..a2070087963 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -519,59 +519,7 @@ ul.notes {
 }
 
 .note-action-button {
-  line-height: 1;
-  padding: 0;
-  min-width: 16px;
-  color: $gray-darkest;
-  fill: $gray-darkest;
-
-  .fa {
-    position: relative;
-    font-size: 16px;
-  }
-
-  svg {
-    @include btn-svg;
-    margin: 0;
-  }
-
-  .award-control-icon-positive,
-  .award-control-icon-super-positive {
-    position: absolute;
-    top: 0;
-    left: 0;
-    opacity: 0;
-  }
-
-  &:hover,
-  &.is-active {
-    .danger-highlight {
-      color: $red-500;
-    }
-
-    .link-highlight {
-      color: $blue-600;
-      fill: $blue-600;
-    }
-
-    .award-control-icon-neutral {
-      opacity: 0;
-    }
-
-    .award-control-icon-positive {
-      opacity: 1;
-    }
-  }
-
-  &.is-active {
-    .award-control-icon-positive {
-      opacity: 0;
-    }
-
-    .award-control-icon-super-positive {
-      opacity: 1;
-    }
-  }
+  @include emoji-menu-toggle-button;
 }
 
 .discussion-toggle-button {
diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index caa839c32a5..f084adaf5d3 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -81,14 +81,14 @@
 // Middle dot divider between each element in a list of items.
 .middle-dot-divider {
   &::after {
-    content: "\00B7"; // Middle Dot
+    content: '\00B7'; // Middle Dot
     padding: 0 6px;
     font-weight: $gl-font-weight-bold;
   }
 
   &:last-child {
     &::after {
-      content: "";
+      content: '';
       padding: 0;
     }
   }
@@ -191,7 +191,6 @@
     @include media-breakpoint-down(xs) {
       width: auto;
     }
-
   }
 
   .profile-crop-image-container {
@@ -215,7 +214,6 @@
   }
 }
 
-
 .user-profile {
   .cover-controls a {
     margin-left: 5px;
@@ -418,7 +416,7 @@ table.u2f-registrations {
     }
 
     &.unverified {
-      @include status-color($gray-dark, color("gray"), $common-gray-dark);
+      @include status-color($gray-dark, color('gray'), $common-gray-dark);
     }
   }
 }
@@ -431,7 +429,7 @@ table.u2f-registrations {
   }
 
   .emoji-menu-toggle-button {
-    @extend .note-action-button;
+    @include emoji-menu-toggle-button;
 
     .no-emoji-placeholder {
       position: relative;