Style suggestion annotation icon

apps/red-ui/src/app/components/annotation-icon/annotation-icon.component.html

@@ -1,4 +1,9 @@
-<div class="icon" [class.hint]="typeValue?.hint" [style.background-color]="typeValue?.hexColor">
+<div
+    [class.hint]="typeValue?.hint"
+    [class.request]="typeValue?.type === 'request'"
+    [style.background-color]="typeValue?.hexColor"
+    class="icon"
+>
     <span>{{ (typeValue?.type)[0] }}</span>
     <!--    {{typeValue | json }}-->
 </div>

apps/red-ui/src/app/components/annotation-icon/annotation-icon.component.scss

@@ -14,13 +14,13 @@
     color: $white;
 }
 
-.suggestion {
+.request {
     width: 0;
     height: 0;
     border: 9px solid transparent;
-    border-bottom-color: $grey-1;
     position: relative;
     top: -9px;
+    background-color: transparent !important;
 
     &:after {
         content: '';
@@ -30,7 +30,6 @@
         width: 0;
         height: 0;
         border: 9px solid transparent;
-        border-top-color: $grey-1;
     }
 
     span {

apps/red-ui/src/app/components/annotation-icon/annotation-icon.component.ts

@@ -11,5 +11,17 @@ export class AnnotationIconComponent implements OnInit {
 
     constructor() {}
 
-    ngOnInit(): void {}
+    ngOnInit(): void {
+        if (this.typeValue?.type === 'request') {
+            let styleSheet = document.styleSheets[0];
+            styleSheet.insertRule(
+                `.request:after { border-top-color: ${this.typeValue.hexColor} !important; }`,
+                styleSheet.cssRules.length
+            );
+            styleSheet.insertRule(
+                `.request { border-bottom-color: ${this.typeValue.hexColor} !important; }`,
+                styleSheet.cssRules.length
+            );
+        }
+    }
 }