Icon component; header component nearly finished

frontend/src/lib/components/announcement.svelte

@@ -8,14 +8,20 @@
     import { slide } from 'svelte/transition';
     export let message;
     export let color = 'red';
+    export let link;
     let noderef;
 
     let visible = true;
 </script>
 
 {#if visible}
-    <div transition:slide bind:this={noderef} class="announcement" style="background-color: {color};">
-        <span>{message}</span>
+    <div transition:slide bind:this={noderef} class="announcement prevent-select" style="background-color: {color};">
+        {#if link}
+            <a href={link}>{message}</a>
+        {:else}
+            {message}
+        {/if}
+        
         <input class="close-button" type="button" value="" on:click={() => visible = false}>
     </div>
 {/if}
@@ -25,6 +31,7 @@
         display: flex;
         justify-content: center;
         align-items: center;
+        gap: 5px;
         height: 36px;
         font-size: 18px;
         color: white;
@@ -38,7 +45,12 @@
         mask-image: url('$lib/images/icons/ui/cross.svg');
         mask-repeat: no-repeat;
         mask-size: contain;
-        height: 20px;
-        width: 20px;
+        height: 25px;
+        width: 25px;
+    }
+
+    a, a:visited, a:hover, a:active {
+        text-decoration: none; 
+        color: inherit;
     }
 </style>