BC-6391 - status alerts (Bug Hunt Table 9) (#3079)

* fix icon alignment and padding list items
* fix icon opacity
* fix alert title line-height

---------

Co-authored-by: Murat Merdoglu <[email protected]>

src/components/topbar/StatusAlerts.vue

@@ -10,29 +10,30 @@
 			v-for="(item, index) in statusAlerts"
 			:key="index"
 			:data-test-id="`alert-item-${index}`"
-			class="alert-item"
+			class="alert-item py-2"
 		>
-			<template v-slot:prepend="">
+			<template v-slot:prepend>
 				<v-icon
 					:color="`rgba(var(--v-theme-${getIconTag(item.status).color}))`"
+					class="item-icon"
 				>
 					{{ getIconTag(item.status).icon }}
 				</v-icon>
 			</template>
 			<v-list-item-title
 				:data-testid="`alert-title-${index}`"
-				class="text-subtitle-1 ma-0"
+				class="item-title ma-0"
 			>
 				{{ item.title }}
 			</v-list-item-title>
 			<v-list-item-subtitle
 				:data-testid="`alert-text-${index}`"
-				class="text-subtitle-2 text--primary ma-0 mt-1"
+				class="item-subtitle text-black ma-0 mt-1"
 			>
 				{{ item.text }}
 			</v-list-item-subtitle>
 			<v-list-item-subtitle
-				class="text-left text-caption d-flex flex-row alert-date text--secondary mt-0 mt-2"
+				class="text-left text-caption d-flex flex-row alert-date text-black mt-0 mt-2"
 				:data-testid="`alert-date-${index}`"
 			>
 				<template v-if="item.timestamp !== item.createdAt">
@@ -93,19 +94,30 @@ export default defineComponent({
 		&:first-child {
 			border-top: none;
 		}
+
+		:deep(.v-list-item__prepend) {
+			align-self: start;
+		}
+	}
+
+	.item-icon {
+		opacity: unset;
 	}
 
-	.subtitle-1 {
+	.item-title {
 		overflow: visible;
 		text-overflow: clip;
 		white-space: normal;
+		word-break: break-word;
+		line-height: 1rem;
 	}
-	.subtitle-2 {
+	.item-subtitle {
 		overflow: unset;
 		text-overflow: unset;
 		white-space: unset;
 		display: flex;
 		flex-wrap: wrap;
+		word-break: break-word;
 	}
 }
 </style>