1 files changed, 41 insertions, 29 deletions

diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index d01ee4b033c..7059a4cfe85 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -5,27 +5,29 @@
   margin-right: auto;
 }
 
-.is-confidential {
+.issuable-warning-icon {
   color: $orange-600;
-  background-color: $orange-50;
+  background-color: $orange-100;
   border-radius: $border-radius-default;
   padding: 5px;
-  margin: 0 3px 0 -4px;
+  margin: 0 $btn-side-margin 0 0;
+  width: $issuable-warning-size;
+  height: $issuable-warning-size;
+  text-align: center;
+
+  &:first-of-type {
+    margin-right: $issuable-warning-icon-margin;
+  }
 }
 
-.is-not-confidential {
+.sidebar-item-icon {
   border-radius: $border-radius-default;
   padding: 5px;
   margin: 0 3px 0 -4px;
-}
 
-.confidentiality {
-  .is-not-confidential {
-    margin: auto;
-  }
-
-  .is-confidential {
-    margin: auto;
+  &.is-active {
+    color: $orange-600;
+    background-color: $orange-50;
   }
 }
 
@@ -70,12 +72,22 @@
     }
   }
 
+  .title-container {
+    display: flex;
+  }
+
   .title {
     padding: 0;
     margin-bottom: 16px;
     border-bottom: none;
   }
 
+  .btn-edit {
+    margin-left: auto;
+    // Set height to match title height
+    height: 2em;
+  }
+
   // Border around images in issue and MR descriptions.
   .description img:not(.emoji) {
     border: 1px solid $white-normal;
@@ -115,6 +127,15 @@
 }
 
 .right-sidebar {
+  position: absolute;
+  top: $header-height;
+  bottom: 0;
+  right: 0;
+  transition: width .3s;
+  background: $gray-light;
+  z-index: 200;
+  overflow: hidden;
+
   a,
   .btn-link {
     color: inherit;
@@ -216,21 +237,10 @@
   .btn-clipboard:hover {
     color: $gl-text-color;
   }
-}
-
-.right-sidebar {
-  position: absolute;
-  top: $new-navbar-height;
-  bottom: 0;
-  right: 0;
-  transition: width .3s;
-  background: $gray-light;
-  z-index: 200;
-  overflow: hidden;
 
   .issuable-sidebar {
     width: calc(100% + 100px);
-    height: calc(100% - #{$new-navbar-height});
+    height: 100%;
     overflow-y: scroll;
     overflow-x: hidden;
     -webkit-overflow-scrolling: touch;
@@ -457,7 +467,7 @@
     }
   }
 
-  a {
+  a:not(.btn-retry) {
     &:hover {
       color: $md-link-color;
       text-decoration: none;
@@ -485,10 +495,10 @@
 }
 
 .with-performance-bar .right-sidebar {
-  top: $new-navbar-height + $performance-bar-height;
+  top: $header-height + $performance-bar-height;
 
   .issuable-sidebar {
-    height: calc(100% - #{$new-navbar-height} - #{$performance-bar-height});
+    height: calc(100% - #{$header-height} - #{$performance-bar-height});
   }
 }
 
@@ -530,7 +540,9 @@
 }
 
 .participants-list {
-  margin: -5px;
+  display: flex;
+  flex-wrap: wrap;
+  margin: -7px;
 }
 
 
@@ -541,7 +553,7 @@
 
 .participants-author {
   display: inline-block;
-  padding: 5px;
+  padding: 7px;
 
   &:nth-of-type(7n) {
     padding-right: 0;