Update branding to show support for Ukraine

svelte/src/file_viewer/FileViewer.svelte

@@ -20,6 +20,7 @@ import GalleryView from "./GalleryView.svelte";
 import Spinner from "../util/Spinner.svelte";
 import Downloader from "./Downloader.svelte";
 import CustomBanner from "./CustomBanner.svelte";
+import UkrainePopup from "./UkrainePopup.svelte";
 
 let loading = true
 let embedded = false
@@ -400,6 +401,10 @@ const keyboard_event = evt => {
 		{/if}
 	</div>
 
+	{#if ads_enabled}
+		<UkrainePopup></UkrainePopup>
+	{/if}
+
 	{#if is_list && view === "file"}
 		<ListNavigator
 			bind:this={list_navigator}
@@ -591,14 +596,6 @@ const keyboard_event = evt => {
 		<AdLeaderboard></AdLeaderboard>
 	{:else if custom_footer}
 		<CustomBanner src={custom_footer}></CustomBanner>
-	{:else if !window.viewer_data.user_ads_enabled && !embedded}
-		<div style="text-align: center; line-height: 1.3em; font-size: 13px;">
-			Thank you for supporting pixeldrain!
-		</div>
-	{:else if !ads_enabled && !embedded}
-		<div style="text-align: center; line-height: 1.3em; font-size: 13px;">
-			The uploader of this file disabled advertisements. You can do the same for <a href="/#pro">only €2 per month</a>!
-		</div>
 	{/if}
 
 	<Modal bind:this={details_window} on:is_visible={e => {details_visible = e.detail}} title="File details" width="1200px">
@@ -621,7 +618,9 @@ const keyboard_event = evt => {
 		<ReportWindow file={file} list={list}></ReportWindow>
 	</Modal>
 
-	<IntroPopup target={button_home}></IntroPopup>
+	{#if ads_enabled}
+		<IntroPopup target={button_home}></IntroPopup>
+	{/if}
 
 	<Downloader bind:this={downloader} file={file} list={list}></Downloader>
 </div>

svelte/src/file_viewer/UkrainePopup.svelte

@@ -0,0 +1,45 @@
+<script>
+import { onMount } from "svelte";
+import { fade } from "svelte/transition";
+
+let visible = false
+
+const close = () => {
+	localStorage.setItem("ukraine_popup_dismissed", "🇺🇦")
+	visible = false
+}
+onMount(() => {
+	if (localStorage.getItem("ukraine_popup_dismissed") !== "🇺🇦") {
+		visible = true
+	}
+})
+</script>
+
+{#if visible}
+	<div in:fade out:fade class="notice highlight_yellow">
+		<div class="text">
+			🇺🇦 Russia has invaded Ukraine and is murdering its citizens! 🇺🇦<br/>
+			There are a number of ways you can help:
+			<a href="https://helpukrainewin.org/" rel="noreferrer" target="_blank">Click here for more information</a>.
+		</div>
+		<button on:click={close} class="close button_highlight round">
+			<i class="icon">close</i>
+		</button>
+	</div>
+{/if}
+
+<style>
+.notice {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+}
+.text {
+	display: inline;
+	flex: 1 1 auto;
+}
+.close {
+	flex: 0 0 auto;
+	margin: 0;
+}
+</style>