diff --git a/apps/red-ui/src/app/components/annotation-icon/annotation-icon.component.html b/apps/red-ui/src/app/components/annotation-icon/annotation-icon.component.html
index 44a90abcb..e66fe0a43 100644
--- a/apps/red-ui/src/app/components/annotation-icon/annotation-icon.component.html
+++ b/apps/red-ui/src/app/components/annotation-icon/annotation-icon.component.html
@@ -1,4 +1,9 @@
-
+
{{ (typeValue?.type)[0] }}
diff --git a/apps/red-ui/src/app/components/annotation-icon/annotation-icon.component.scss b/apps/red-ui/src/app/components/annotation-icon/annotation-icon.component.scss
index cb9a7dd42..e34c2741a 100644
--- a/apps/red-ui/src/app/components/annotation-icon/annotation-icon.component.scss
+++ b/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 {
diff --git a/apps/red-ui/src/app/components/annotation-icon/annotation-icon.component.ts b/apps/red-ui/src/app/components/annotation-icon/annotation-icon.component.ts
index 35dc28774..18d7351d8 100644
--- a/apps/red-ui/src/app/components/annotation-icon/annotation-icon.component.ts
+++ b/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
+ );
+ }
+ }
}