💄 Site > Viewer > Add removed line icon

site/src/components/files-tree-file/index.vue

@@ -1,3 +1,3 @@
 <template src="./template.html"></template>
 <script src="./script.js"></script>
-<style src="./style.styl" lang="stylus"></style>
+<style src="./style.styl" lang="stylus" scoped></style>

site/src/components/files-tree-folder/style.styl

@@ -1,2 +1,12 @@
 .name
-    cursor pointer
+    cursor pointer
+
+.icon
+    display inline-block
+    width 12px
+    height 12px
+
+    img
+        display inline-block
+        width 100%
+        height 100%

site/src/components/viewer/style.styl

@@ -59,8 +59,21 @@
 
         .removed
             height 1px
-            background #FD4141
-            opacity 0.4
+
+            &::after
+                content ''
+                position absolute
+                top 0
+                left 0
+                width 100%
+                height 100%
+                background #FD4141
+                opacity 0.4
+
+            .icon
+                position absolute
+                left 8px
+                top -8px
 
         .active
             height 20px

site/src/components/viewer/template.html

@@ -4,7 +4,9 @@
             <div class="line" v-for="line in linesCount">
                 <span class="highlight active" v-if="line === currentLine">!</span>
                 <span class="highlight added" v-if="version.addedLines.indexOf(line - 1) !== -1 && differencesActive"></span>
-                <span class="highlight removed" v-if="version.removedLines.indexOf(line - 1) !== -1 && differencesActive"></span>
+                <span class="highlight removed" v-if="version.removedLines.indexOf(line - 1) !== -1 && differencesActive">
+                    <img width="7" height="17" class="icon" src="../../../static/svg/removed.svg" alt="">
+                </span>
                 <span class="index">{{ line }}.</span>
                 <span class="question" @click.prevent="onLineClick(line)">?</span>
             </div>