Improve address reputation widget styling

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,7 +21,15 @@ onMount(async () => {
 </script>
 
 {#if result !== false && offences > 0}
-	<section class:highlight_red={result.banned === true} class:highlight_yellow={result.banned === false}>
+	<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
@@ -29,7 +38,7 @@ onMount(async () => {
 					list of files originating from your IP address which have been
 					blocked:
 				</p>
-		{:else if offences > 0}
+			{:else}
 				<p>
 					Your IP address ({result.address}) has received copyright
 					strikes. At 10 copyright strikes your IP address will be banned
@@ -73,5 +82,24 @@ onMount(async () => {
 				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>