New styling for dismissed reports6079-restyling-dismissed-reports

- Translations for DISMISSED

3 files changed, 19 insertions, 5 deletions

diff --git a/app/assets/javascripts/reports/components/report_item.vue b/app/assets/javascripts/reports/components/report_item.vue
index 839e86bdf17..a53a7d3628c 100644
--- a/app/assets/javascripts/reports/components/report_item.vue
+++ b/app/assets/javascripts/reports/components/report_item.vue
@@ -35,7 +35,7 @@ export default {
 <template>
   <li :class="{ 'is-dismissed': issue.isDismissed }" class="report-block-list-issue">
     <issue-status-icon :status="status" class="append-right-5" />
-
+    <span v-if="issue.isDismissed" class="prepend-top-5 mx-2">{{ __('DISMISSED') }}</span>
     <component :is="component" v-if="component" :issue="issue" :status="status" :is-new="isNew" />
   </li>
 </template>
diff --git a/app/assets/stylesheets/pages/reports.scss b/app/assets/stylesheets/pages/reports.scss
index f7619ccbd20..c21334a6594 100644
--- a/app/assets/stylesheets/pages/reports.scss
+++ b/app/assets/stylesheets/pages/reports.scss
@@ -112,11 +112,22 @@
   display: flex;
   align-items: flex-start;
   align-content: flex-start;
-}
 
-.is-dismissed .report-block-list-issue-description,
-.is-dismissed .vulnerability-name-button {
-  text-decoration: line-through;
+  ~ .is-dismissed {
+    border-top: 1px solid $gray-dark;
+    margin-top: $gl-padding-top;
+    padding-top: $gl-padding-top;
+  }
+
+  .is-dismissed {
+    opacity: .5;
+  
+    + .is-dismissed {
+      border: 0;
+      margin: 0;
+      padding: 0;
+    }
+  }
 }
 
 .report-block-list-issue-description-text::after {
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 92784f2c49d..8b3de7a65df 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -2540,6 +2540,9 @@ msgstr ""
 msgid "CycleAnalyticsStage|Test"
 msgstr ""
 
+msgid "DISMISSED"
+msgstr ""
+
 msgid "DNS"
 msgstr ""