Resolve "lock/confidential issuable sidebar custom svg icons iteration"

2 files changed, 22 insertions, 16 deletions

diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 760c7c80aff..7a5dab16561 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -6,28 +6,20 @@
 }
 
 .issuable-warning-icon {
-  color: $orange-600;
   background-color: $orange-100;
   border-radius: $border-radius-default;
-  padding: 5px;
   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;
+  .icon {
+    fill: $orange-600;
+    vertical-align: text-bottom;
   }
-}
 
-.sidebar-item-icon {
-  border-radius: $border-radius-default;
-  padding: 5px;
-  margin: 0 3px 0 -4px;
-
-  &.is-active {
-    color: $orange-600;
-    background-color: $orange-50;
+  &:first-of-type {
+    margin-right: $issuable-warning-icon-margin;
   }
 }
 
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 89f93a92f2e..1e6992cb65e 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -113,6 +113,8 @@
 
   .icon {
     margin-right: $issuable-warning-icon-margin;
+    vertical-align: text-bottom;
+    fill: $orange-600;
   }
 
   + .md-area {
@@ -137,12 +139,24 @@
   }
 }
 
-.sidebar-item-value {
-  .fa {
-    background-color: inherit;
+.sidebar-item-icon {
+  border-radius: $border-radius-default;
+  margin: 0 3px 0 -4px;
+  vertical-align: middle;
+
+  &.is-active {
+    fill: $orange-600;
   }
 }
 
+.sidebar-collapsed-icon .sidebar-item-icon {
+  margin: 0;
+}
+
+.sidebar-item-value .sidebar-item-icon {
+  fill: $theme-gray-700;
+}
+
 .sidebar-item-warning-message {
   line-height: 1.5;
   padding: 16px;