From 0e0f821484a6bfa485c531f28b89ef2e2ccda903 Mon Sep 17 00:00:00 2001
From: Nikola Ganchev <nikolamihailovg@gmail.com>
Date: Wed, 25 Oct 2023 13:55:04 +0300
Subject: [PATCH] Redesign announcements

---
 ...nouncement.svelte => Announcements.svelte} | 33 +++++++++++++++----
 src/lib/Navbar.svelte                         |  6 ++--
 src/lib/Notification.svelte                   |  3 ++
 3 files changed, 32 insertions(+), 10 deletions(-)
 rename src/lib/{Announcement.svelte => Announcements.svelte} (58%)
 create mode 100644 src/lib/Notification.svelte

diff --git a/src/lib/Announcement.svelte b/src/lib/Announcements.svelte
similarity index 58%
rename from src/lib/Announcement.svelte
rename to src/lib/Announcements.svelte
index fef6e5a..8256bed 100644
--- a/src/lib/Announcement.svelte
+++ b/src/lib/Announcements.svelte
@@ -1,22 +1,43 @@
 <script>
 	import OpenInNew from "$lib/OpenInNew.svelte";
 
-	export let announcement;
+	export let announcements;
 </script>
-
-<div class="announcement">
-	<a href="{announcement.link}">{announcement.text}<div class="open-in-new"><OpenInNew /></div></a>
+<div class="container">
+	{#each announcements as announcement}
+		<div class="announcement">
+			<a href="{announcement.link}">{announcement.text}<div class="open-in-new"><OpenInNew /></div></a>
+		</div>
+	{/each}
 </div>
 
 <style>
-	.announcement {
-		background-color: #7D0B09;
+	.container {
+		min-height: 2.5rem;
+		display: flex;
+		flex-wrap: wrap;
 		width: 100%;
+        background-color: #7D0B09;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.5rem;
+	}
+
+	.announcement {
 		display: flex;
 		justify-content: center;
 		align-items: center;
 		pointer-events: auto;
         min-height: 28px;
+		padding-left: 1rem;
+        padding-right: 1rem;
+        flex: 1 1 auto;
+		height: 100%;
+		text-align: center;
+	}
+
+	.announcement:first-child {
+		border-left: none;
 	}
 
 	.announcement a {
diff --git a/src/lib/Navbar.svelte b/src/lib/Navbar.svelte
index 3779781..a8b4735 100644
--- a/src/lib/Navbar.svelte
+++ b/src/lib/Navbar.svelte
@@ -3,7 +3,7 @@
     import { onMount } from "svelte";
     import DesktopNav from "$lib/DesktopNav.svelte";
     import ProgressBar from "$lib/ProgressBar.svelte";
-    import Announcement from "$lib/Announcement.svelte";
+    import Announcements from "$lib/Announcements.svelte";
 
     const navigationLinksLeft = [
         { key: "Новини", href: "/news" },
@@ -59,9 +59,7 @@
 
     <ProgressBar />
     {#if fixed}
-        {#each announcements as announcement}
-            <Announcement announcement="{announcement}" />
-        {/each}
+        <Announcements announcements="{announcements}"></Announcements>
     {/if}
     <div class="navbar">
         <div class="background" class:scrolled="{scrollMode}"></div>
diff --git a/src/lib/Notification.svelte b/src/lib/Notification.svelte
new file mode 100644
index 0000000..338c9db
--- /dev/null
+++ b/src/lib/Notification.svelte
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+	<path d="M160-200v-80h80v-280q0-83 50-147.5T420-792v-28q0-25 17.5-42.5T480-880q25 0 42.5 17.5T540-820v28q80 20 130 84.5T720-560v280h80v80H160Zm320-300Zm0 420q-33 0-56.5-23.5T400-160h160q0 33-23.5 56.5T480-80ZM320-280h320v-280q0-66-47-113t-113-47q-66 0-113 47t-47 113v280Z"/>
+</svg>