Styling fixes

res/include/style/layout.css

@@ -152,8 +152,8 @@ footer>.footer_content {
 	overflow-y: auto;
 	overflow-x: hidden;
 	background: var(--body_background);
-	border-top-left-radius: 12px;
+	border-top-left-radius: 16px;
-	border-bottom-left-radius: 12px;
+	border-bottom-left-radius: 16px;
 	padding: 8px;
 	transition: margin-left 0.5s;
 }

svelte/src/admin_panel/AbuseReporters.svelte

@@ -97,10 +97,6 @@ const edit_reporter = async reporter => {
 }
 
 const delete_reporter = async reporter => {
-	if (!confirm("Delete this reporter address?\n\n"+reporter.from_address)) {
-		return
-	}
-
 	try {
 		const resp = await fetch(
 			window.api_endpoint+"/admin/abuse_reporter/"+

svelte/src/admin_panel/Home.svelte

@@ -166,7 +166,6 @@ onDestroy(() => {
 <div class="highlight_shaded" style="margin-bottom: 6px;">
 	<button on:click={() => loadGraph(1440, 1, true)}>Day 1m</button>
 	<button on:click={() => loadGraph(10080, 10, true)}>Week 10m</button>
-	<button on:click={() => loadGraph(10080, 60, true)}>Week 1h</button>
 	<button on:click={() => loadGraph(43200, 60, true)}>Month 1h</button>
 	<button on:click={() => loadGraph(131400, 1440, false)}>Quarter 1d</button>
 	<button on:click={() => loadGraph(262800, 1440, false)}>Half-year 1d</button>
@@ -217,7 +216,7 @@ onDestroy(() => {
 			</thead>
 			<tbody>
 				{#each status.peers as peer}
-				<tr style="text-align: left"
+				<tr style="text-align: left; border: none;"
 					class:highlight_red={peer.free_space < peer.min_free_space / 2 || !peer.reachable}
 					class:highlight_yellow={peer.free_space < peer.min_free_space}
 					class:highlight_green={peer.reachable}

svelte/src/file_viewer/FileViewer.svelte

@@ -19,7 +19,6 @@ import Sharebar from "./Sharebar.svelte";
 import GalleryView from "./GalleryView.svelte";
 import Downloader from "./Downloader.svelte";
 import CustomBanner from "./CustomBanner.svelte";
-import UkraineModal from "./UkraineModal.svelte";
 import LoadingIndicator from "../util/LoadingIndicator.svelte";
 
 let loading = true
@@ -607,7 +606,6 @@ const keyboard_event = evt => {
 
 	{#if ads_enabled}
 		<IntroPopup target={button_home}></IntroPopup>
-		<UkraineModal></UkraineModal>
 	{/if}
 
 	<Downloader bind:this={downloader} file={file} list={list}></Downloader>

svelte/src/file_viewer/GalleryView.svelte

@@ -2,6 +2,7 @@
 import { createEventDispatcher } from "svelte"
 import { flip } from "svelte/animate"
 import FilePicker from "./FilePicker.svelte"
+import { file_type } from "./FileUtilities.svelte";
 let dispatch = createEventDispatcher()
 
 export let list = {
@@ -135,6 +136,7 @@ const drop = (e, index) => {
 			<div
 				class="icon_container"
 				class:editing={list.can_edit}
+				class:wide={file_type(file) === "image" || file_type(file) === "video"}
 				style="background-image: url('{file.icon_href}?width=256&height=256');">
 				{#if list.can_edit}
 					<i class="icon" on:click|stopPropagation|preventDefault style="cursor: grab;">drag_indicator</i>
@@ -177,7 +179,7 @@ const drop = (e, index) => {
 	padding: 0;
 	overflow: hidden;
 	border-radius: 8px;
-	box-shadow: 0 0 3px -1px var(--shadow_color);
+	box-shadow: 1px 1px 3px -1px var(--shadow_color);
 	background: var(--input_background);
 	word-break: break-all;
 	text-align: center;
@@ -200,7 +202,8 @@ const drop = (e, index) => {
 	width: 100%;
 	height: 136px;
 	background-position: center;
-	background-size: cover;
+	background-size: contain;
+	background-repeat: no-repeat;
 	font-size: 22px;
 	text-align: left;
 }
@@ -214,4 +217,7 @@ const drop = (e, index) => {
 	color: var(--highlight_color);
 	cursor: pointer;
 }
+.icon_container.wide {
+	background-size: cover;
+}
 </style>

svelte/src/filesystem/filemanager/FileUploader.svelte

@@ -182,38 +182,6 @@ const paste = (e) => {
 };
 </script>
 
-<style>
-	.hidden {
-		display: none;
-	}
-
-	.file_input {
-		display: block;
-		visibility: hidden;
-		width: 0;
-		height: 0;
-	}
-
-	.file_upload {
-		display: block;
-		text-align: left;
-		width: 100%;
-		margin: 6px 0 0 0;
-		padding: 0;
-		background: var(--body_color);
-		box-shadow: 1px 1px 5px var(--shadow_color);
-	}
-
-	.upload_progress_bar {
-		width: 100%;
-		height: 2px;
-	}
-	.upload_progress {
-		background-color: var(--highlight_color);
-		height: 100%;
-	}
-</style>
-
 <svelte:body
 	on:dragover|preventDefault|stopPropagation={dragover}
 	on:dragleave|preventDefault|stopPropagation={dragleave}
@@ -242,3 +210,35 @@ const paste = (e) => {
 		</div>
 	{/each}
 </div>
+
+<style>
+.hidden {
+	display: none;
+}
+
+.file_input {
+	display: block;
+	visibility: hidden;
+	width: 0;
+	height: 0;
+}
+
+.file_upload {
+	display: block;
+	text-align: left;
+	width: 100%;
+	margin: 6px 0 0 0;
+	padding: 0;
+	background: var(--body_color);
+	box-shadow: 1px 1px 4px -1px var(--shadow_color);
+}
+
+.upload_progress_bar {
+	width: 100%;
+	height: 2px;
+}
+.upload_progress {
+	background-color: var(--highlight_color);
+	height: 100%;
+}
+</style>

svelte/src/filesystem/filemanager/GalleryView.svelte

@@ -67,15 +67,16 @@ const node_icon = node => {
 }
 .file{
 	position: relative;
-	width: 180px;
+	width: 200px;
 	max-width: 45%;
-	height: 180px;
+	height: 200px;
 	margin: 8px;
 	padding: 0;
 	overflow: hidden;
 	border-radius: 8px;
-	box-shadow: 1px 1px 4px -1px var(--shadow_color);
+	box-shadow: 1px 1px 3px -1px var(--shadow_color);
 	background: var(--input_background);
+	word-break: break-all;
 	text-align: center;
 	line-height: 1.2em;
 	display: inline-block;
@@ -83,14 +84,14 @@ const node_icon = node => {
 	text-decoration: none;
 	vertical-align: top;
 	color: var(--body_text_color);
+	transition: background 0.2s;
 }
 .file:hover {
-	box-shadow: 0 0 2px 2px var(--highlight_color);
+	background: var(--input_hover_background);
-	text-decoration: none;
 }
 .selected {
-	background: var(--highlight_background);
+	box-shadow: 0 0 2px 2px var(--highlight_color);
-	color: var(--highlight_text_color);
+	text-decoration: none;
 }
 .icon_container {
 	width: 100%;