From 4e5d80d84bda256f8dd65ce49decfed898c431c8 Mon Sep 17 00:00:00 2001
From: Fornax <wim@fornaxian.tech>
Date: Sat, 24 Dec 2022 12:42:23 +0100
Subject: [PATCH] Improve address reputation widget styling

---
 svelte/src/home_page/AddressReputation.svelte | 126 +++++++++++-------
 1 file changed, 77 insertions(+), 49 deletions(-)

diff --git a/svelte/src/home_page/AddressReputation.svelte b/svelte/src/home_page/AddressReputation.svelte
index 3f1dbb0..1cb13ef 100644
--- a/svelte/src/home_page/AddressReputation.svelte
+++ b/svelte/src/home_page/AddressReputation.svelte
@@ -1,5 +1,6 @@
 <script>
 import { onMount } from "svelte";
+import Expandable from "../util/Expandable.svelte";
 import { formatDate } from "../util/Formatting.svelte";
 
 let result = false;
@@ -20,58 +21,85 @@ onMount(async () => {
 </script>
 
 {#if result !== false && offences > 0}
-	<section class:highlight_red={result.banned === true} class:highlight_yellow={result.banned === false}>
-		{#if result.banned === true}
-			<p>
-				Your IP address ({result.address}) has been banned from
-				uploading to pixeldrain due to violation of the
-				<a href="/about#content-policy">content policy</a>. Below is a
-				list of files originating from your IP address which have been
-				blocked:
-			</p>
-		{:else if offences > 0}
-			<p>
-				Your IP address ({result.address}) has received copyright
-				strikes. At 10 copyright strikes your IP address will be banned
-				and you will be unable to upload files to pixeldrain. Below is a
-				list of files originating from your IP address which have been
-				blocked:
-			</p>
-		{/if}
+	<section>
+		<Expandable click_expand>
+			<div slot="header" class="header" class:red={result.banned === true} class:yellow={result.banned === false}>
+				{#if result.banned === true}
+					Your IP address has been banned, click for details
+				{:else}
+					Your IP address has received a copyright strike, click for details
+				{/if}
+			</div>
+			{#if result.banned === true}
+				<p>
+					Your IP address ({result.address}) has been banned from
+					uploading to pixeldrain due to violation of the
+					<a href="/about#content-policy">content policy</a>. Below is a
+					list of files originating from your IP address which have been
+					blocked:
+				</p>
+			{:else}
+				<p>
+					Your IP address ({result.address}) has received copyright
+					strikes. At 10 copyright strikes your IP address will be banned
+					and you will be unable to upload files to pixeldrain. Below is a
+					list of files originating from your IP address which have been
+					blocked:
+				</p>
+			{/if}
 
-		<div class="table_scroll">
-			<table>
-				<tr>
-					<td>Reason</td>
-					<td>Reporter</td>
-					<td>Ban date</td>
-					<td>Expiry date</td>
-					<td>File</td>
-				</tr>
-				{#each result.offences as offence (offence.ban_time)}
+			<div class="table_scroll">
+				<table>
 					<tr>
-						<td>{offence.reason}</td>
-						<td>{offence.reporter}</td>
-						<td>{formatDate(offence.ban_time, false, false, false)}</td>
-						<td>{formatDate(offence.expire_time, false, false, false)}</td>
-						<td>
-							{#if offence.file_public_id}
-								<a href="/u/{offence.file_public_id}" target="_blank" rel="noreferrer">
-									{offence.file_name}
-								</a>
-							{/if}
-						</td>
+						<td>Reason</td>
+						<td>Reporter</td>
+						<td>Ban date</td>
+						<td>Expiry date</td>
+						<td>File</td>
 					</tr>
-				{/each}
-			</table>
-		</div>
+					{#each result.offences as offence (offence.ban_time)}
+						<tr>
+							<td>{offence.reason}</td>
+							<td>{offence.reporter}</td>
+							<td>{formatDate(offence.ban_time, false, false, false)}</td>
+							<td>{formatDate(offence.expire_time, false, false, false)}</td>
+							<td>
+								{#if offence.file_public_id}
+									<a href="/u/{offence.file_public_id}" target="_blank" rel="noreferrer">
+										{offence.file_name}
+									</a>
+								{/if}
+							</td>
+						</tr>
+					{/each}
+				</table>
+			</div>
 
-		<p>
-			If you would like to dispute your IP ban you can mail me at
-			support@pixeldrain.com. Please do not mail unless you have a good
-			reason. If you do not provide a valid reason why the IP ban should
-			be reversed your e-mail will be ignored. And do not forget to put
-			your IP address ({result.address}) in the e-mail.
-		</p>
+			<p>
+				If you would like to dispute your IP ban you can mail me at
+				support@pixeldrain.com. Please do not mail unless you have a good
+				reason. If you do not provide a valid reason why the IP ban should
+				be reversed your e-mail will be ignored. And do not forget to put
+				your IP address ({result.address}) in the e-mail.
+			</p>
+		</Expandable>
 	</section>
 {/if}
+
+<style>
+
+.header {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 100%;
+	background-color: rgba(255, 0, 0, 0.2);
+	border-radius: 6px;
+}
+.red {
+	background-color: rgba(255, 0, 0, 0.2);
+}
+.yellow {
+	background-color: rgba(255, 255, 0, 0.2);
+}
+</style>