Fix several styling issues (#495)

* fix minor styles and fonts

* Removed unused property

Author: kyasbal

web/package-lock.json

@@ -18,6 +18,7 @@
     "@angular/platform-browser": "^21.0.6",
     "@angular/platform-browser-dynamic": "^21.0.6",
     "@angular/router": "^21.0.6",
+    "@fontsource/google-sans-code": "^5.2.3",
     "@fontsource/roboto": "^5.2.9",
     "angular-split": "^20.0.0",
     "highlight.js": "^11.11.1",

web/package.json

@@ -15,10 +15,10 @@
 -->
 
 <div class="container">
-  <p class="label">
-    <mat-icon class="icon">{{ icon }}</mat-icon
-    >{{ label }}
-  </p>
+  <div class="label">
+    <mat-icon class="icon">{{ icon }}</mat-icon>
+    <p class="label-text">{{ label }}</p>
+  </div>
   @if (value | async; as valueResolved) {
     <p class="value" (click)="onValueClick(valueResolved)">
       <span class="copy-icon-container"

web/src/app/annotator/common-field-annotator.component.html

@@ -17,7 +17,7 @@
 @use "@angular/material" as mat;
 
 $ICON_SIZE: 18px;
-$FONT_SIZE: 12px;
+$FONT_SIZE: 10px;
 $LABEL_WIDTH: 100px;
 $LABEL_BACKGROUND: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, 600);
 $BACKGROUND: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, 100);
@@ -31,7 +31,7 @@ $COPY_BUTTON_SIZE: 15px;
   column-gap: 3px;
   background-color: $BACKGROUND;
   color: $LABEL_COLOR;
-  line-height: 1.7;
+  align-items: center;
 
   .icon {
     width: $FONT_SIZE;
@@ -43,12 +43,13 @@ $COPY_BUTTON_SIZE: 15px;
     user-select: none;
     font-weight: 600;
     font-size: $FONT_SIZE;
-    margin: 0.5px 0 0.5px 0;
     width: $LABEL_WIDTH;
     background-color: $LABEL_BACKGROUND;
-
-    .icon {
-      margin: 3px 3px -3px 1px;
+    display: flex;
+    align-items: center;
+    .label-text {
+      flex: 1;
+      text-align: center;
     }
   }
 
@@ -76,7 +77,6 @@ $COPY_BUTTON_SIZE: 15px;
     font-size: $FONT_SIZE;
     flex: 1;
     margin: 0;
-    line-height: 1.7;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;

web/src/app/annotator/common-field-annotator.component.scss

@@ -16,18 +16,17 @@
 
 @use "@angular/material" as mat;
 
-$BUTTON_SIZE: 25px;
+$BUTTON_SIZE: 20px;
 $ICON_SIZE_DIFF: 8px;
 $BUTTON_COLOR: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, 600);
 $BUTTON_HOVER_COLOR: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, 500);
 $ICON_COLOR: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, 100);
 
 .button {
-  height: 25px;
+  height: $BUTTON_SIZE;
   appearance: none;
   border: none;
   width: $BUTTON_SIZE;
-  height: $BUTTON_SIZE;
   display: flex;
   justify-content: center;
   align-items: center;

web/src/app/annotator/common-toolbar-button.component.scss

@@ -41,13 +41,6 @@ export function getDefaultLogAnnotatorResolver(): LogAnnotatorResolver {
         (l) => l['insertId'],
       ),
     ),
-    new Annotator(
-      CommonFieldAnnotatorComponent,
-      CommonFieldAnnotatorComponent.inputMapperForSummary(
-        'summarize',
-        'Summary',
-      ),
-    ),
     new Annotator(
       ResourceReferenceListAnnotatorComponent,
       ResourceReferenceListAnnotatorComponent.inputMapper,

web/src/app/annotator/log/default.ts

@@ -31,6 +31,8 @@ $VALUE_COLOR: black;
   color: $LABEL_COLOR;
   white-space: nowrap;
   text-overflow: ellipsis;
+  display: flex;
+  align-items: center;
 
   mat-icon {
     margin-right: 3px;

web/src/app/annotator/log/resource-reference-list.component.scss

@@ -15,12 +15,18 @@
 -->
 
 <div class="container">
-  <p class="log-type">
-    <span class="label"> <mat-icon>article_shortcut</mat-icon> Type</span>
-    <span class="value" [ngClass]="logType">{{ logType }}</span>
-  </p>
-  <p class="log-severity">
-    <span class="label"> <mat-icon>warning</mat-icon> Severity</span>
-    <span class="value" [ngClass]="severity | lowercase">{{ severity }}</span>
+  <p
+    class="log-type"
+    [ngClass]="logType"
+    matTooltip="Type of the log. Usually it represents its source."
+  >
+    Type: <span class="value">{{ logType }}</span>
   </p>
+  @if (severity === "UNKNOWN") {
+    <p class="log-severity-empty"></p>
+  } @else {
+    <p class="log-severity" [ngClass]="severity | lowercase">
+      Severity: <span class="value">{{ severity }}</span>
+    </p>
+  }
 </div>

web/src/app/annotator/log/type-severity-annotator.component.html

@@ -22,31 +22,12 @@ $FONT_SIZE: 12px;
 $LABEL_BACKGROUND: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, 600);
 $BACKGROUND: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, 100);
 $LABEL_COLOR: white;
-$LABEL_WIDTH: 100px;
-
-mat-icon {
-  width: $FONT_SIZE;
-  height: $FONT_SIZE;
-  font-size: $FONT_SIZE;
-  margin: 3px 3px -3px 1px;
-}
 
 .container {
   color: $LABEL_COLOR;
   background-color: $BACKGROUND;
   display: flex;
-  flex-wrap: wrap;
-  column-gap: 10px;
-
-  .label {
-    display: inline-block;
-    width: $LABEL_WIDTH;
-    white-space: nowrap;
-    font-weight: bold;
-    margin-right: 10px;
-    font-size: $FONT_SIZE;
-    background-color: $LABEL_BACKGROUND;
-  }
+  user-select: none;
 
   .value {
     text-align: center;
@@ -57,32 +38,31 @@ mat-icon {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    min-width: 200px;
   }
 }
 
 .log-type {
   flex: 1;
+  @include gen.log-type-shape-colors-for-all;
 
-  .value {
-    @include gen.log-type-shape-colors-for-all;
-
-    color: white;
-    padding: 0px 8px;
-    border-radius: 8px;
-    font-size: $FONT_SIZE;
-  }
+  color: white;
+  padding: 0px 8px;
+  font-size: $FONT_SIZE;
 }
 
 .log-severity {
   flex: 1;
+  @include gen.log-severity-colors-for-all;
 
-  .value {
-    @include gen.log-severity-colors-for-all;
+  color: white;
+  padding: 0px 8px;
+  font-size: $FONT_SIZE;
+}
 
-    color: white;
-    padding: 0px 8px;
-    border-radius: 8px;
-    font-size: $FONT_SIZE;
-  }
+.log-severity-empty {
+  flex: 1;
+}
+
+.value {
+  font-weight: 600;
 }

web/src/app/annotator/log/type-severity-annotator.component.scss

@@ -20,12 +20,13 @@ import { MatIconModule } from '@angular/material/icon';
 import { AnnotationDecider } from '../annotator';
 import { LogTypeMetadata } from 'src/app/zzz-generated';
 import { LogEntry } from 'src/app/store/log';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 @Component({
   standalone: true,
   templateUrl: './type-severity-annotator.component.html',
   styleUrls: ['./type-severity-annotator.component.scss'],
-  imports: [CommonModule, MatIconModule],
+  imports: [CommonModule, MatIconModule, MatTooltipModule],
 })
 export class TypeSeverityAnnotatorComponent {
   @Input()