Show type indicator in detail screen

index.html

@@ -28,6 +28,7 @@
         <button type="button" id="message-confirm">Weiter</button>
       </div>
       <div id="info-message">
+        <h4 id="info-message-subheadline"></h4>
         <div id="info-message-header">
           <h2 id="info-message-headline">Test</h2>
           <img id="info-message-img" src="" />

src/store.ts

@@ -31,7 +31,7 @@ const store = create<State>(
   devtools((set) => ({
     uid: null,
     showScore: false,
-    currentIntroStep: 0,
+    currentIntroStep: 1,
     revealablesFinished: 0,
     currentScene: Scenes.OVERVIEW,
     currentSubproject: null,

src/ui/info.ts

@@ -14,6 +14,7 @@ export class InfoMessage {
   type: RevealableTypes;
   name: string;
   infoMessage: HTMLElement;
+  infoMessageSubheadline: HTMLElement;
   infoMessageHeadline: HTMLElement;
   infoMessageContents: HTMLElement;
   infoMessageClose: HTMLElement;
@@ -24,6 +25,7 @@ export class InfoMessage {
   constructor() {
     this.infoMessage = document.getElementById('info-message');
     this.infoMessageHeadline = document.getElementById('info-message-headline');
+    this.infoMessageSubheadline = document.getElementById('info-message-subheadline');
     this.infoMessageContents = document.getElementById('info-message-contents');
     this.infoMessageClose = document.getElementById('info-message-close');
     this.infoMessageImgRef = document.getElementById('info-message-img') as HTMLImageElement;
@@ -47,6 +49,8 @@ export class InfoMessage {
         this.type = newMessage.type;
         this.name = newMessage.headline;
 
+        this.infoMessageSubheadline.innerHTML = this.getTextForType();
+
         if (newMessage.imgUrl) {
           this.setImg(newMessage.imgUrl);
         } else {
@@ -64,6 +68,16 @@ export class InfoMessage {
     });
   }
 
+  private getTextForType(): string {
+    if (this.type === RevealableTypes.CONTRIBUTOR) {
+      return 'Contributor';
+    } else if (this.type === RevealableTypes.PACKAGE) {
+      return 'NPM Package';
+    } else {
+      return 'Legacy Alert';
+    }
+  }
+
   private setContents(headline: string, innerHTML: string) {
     this.infoMessageHeadline.innerText = headline;
     this.infoMessageContents.innerHTML = innerHTML;

styles.scss

@@ -233,6 +233,13 @@ textarea {
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
       var(--tw-shadow);
 
+    #info-message-subheadline {
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      font-weight: bold;
+      color: #b0b7bf;
+    }
+
     #info-message-header {
       display: flex;
       justify-content: space-between;