is-active review changes

app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue

@@ -70,11 +70,11 @@ export default {
         :update-confidential-attribute="updateConfidentialAttribute"
       />
       <div v-if="!isConfidential" class="no-value sidebar-item-value">
-        <i class="fa fa-eye not-active"></i>
+        <i class="fa fa-eye sidebar-item-icon"></i>
         Not confidential
       </div>
       <div v-else class="value sidebar-item-value hide-collapsed">
-        <i aria-hidden="true" class="fa fa-eye-slash is-active"></i>
+        <i aria-hidden="true" class="fa fa-eye-slash sidebar-item-icon is-active"></i>
         This issue is confidential
       </div>
     </div>

app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue

@@ -95,12 +95,12 @@ export default {
       />
 
       <div v-if="isLocked" class="value sidebar-item-value">
-        <i aria-hidden="true" class="fa fa-lock is-active"></i>
+        <i aria-hidden="true" class="fa fa-lock sidebar-item-icon is-active"></i>
         {{ __('Locked') }}
       </div>
 
       <div v-else class="no-value sidebar-item-value hide-collapsed">
-        <i aria-hidden="true" class="fa fa-unlock not-active"></i>
+        <i aria-hidden="true" class="fa fa-unlock sidebar-item-icon"></i>
         {{ __('Unlocked') }}
       </div>
     </div>

app/assets/stylesheets/pages/issuable.scss

@@ -16,15 +16,12 @@
   text-align: center;
 }
 
-.issuable-sidebar-item {
-  .not-active,
-  .is-active {
+.sidebar-item-icon {
   border-radius: $border-radius-default;
   padding: 5px;
   margin: 0 3px 0 -4px;
-  }
 
-  .is-active {
+  &.is-active {
     color: $orange-600;
     background-color: $orange-50;
   }