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 + ); + } + } }