From 7f674f4b0d4e0beb76c716715292caf057139ffa Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Wed, 26 Jun 2024 12:03:35 +0200
Subject: [PATCH] Index page layout tweaks

---
 public/css/index-tailwind-output.css    | 22 ++++++++++++++++++----
 src/UI/BigComponents/ThemeButton.svelte |  6 +++---
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/public/css/index-tailwind-output.css b/public/css/index-tailwind-output.css
index 7fe879a304..1364f4a1d5 100644
--- a/public/css/index-tailwind-output.css
+++ b/public/css/index-tailwind-output.css
@@ -7150,6 +7150,11 @@ svg.apply-fill path {
     margin-right: 0.25rem;
   }
 
+  .sm\:mx-2 {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+
   .sm\:mt-2 {
     margin-top: 0.5rem;
   }
@@ -7158,10 +7163,6 @@ svg.apply-fill path {
     margin-right: 0.25rem;
   }
 
-  .sm\:mr-2 {
-    margin-right: 0.5rem;
-  }
-
   .sm\:mb-0 {
     margin-bottom: 0px;
   }
@@ -7182,6 +7183,10 @@ svg.apply-fill path {
     height: 6rem;
   }
 
+  .sm\:h-11 {
+    height: 2.75rem;
+  }
+
   .sm\:h-64 {
     height: 16rem;
   }
@@ -7206,6 +7211,10 @@ svg.apply-fill path {
     width: 50%;
   }
 
+  .sm\:w-11 {
+    width: 2.75rem;
+  }
+
   .sm\:w-auto {
     width: auto;
   }
@@ -7319,6 +7328,11 @@ svg.apply-fill path {
     margin-right: 0.5rem;
   }
 
+  .md\:mx-4 {
+    margin-left: 1rem;
+    margin-right: 1rem;
+  }
+
   .md\:mt-5 {
     margin-top: 1.25rem;
   }
diff --git a/src/UI/BigComponents/ThemeButton.svelte b/src/UI/BigComponents/ThemeButton.svelte
index 9148d9844d..49d8ce3e0d 100644
--- a/src/UI/BigComponents/ThemeButton.svelte
+++ b/src/UI/BigComponents/ThemeButton.svelte
@@ -86,11 +86,11 @@
 </script>
 
 {#if theme.id !== personal.id || $unlockedPersonal}
-  <a class={"my-2 flex w-full items-center text-ellipsis rounded"} href={$href}>
-    <Marker icons={theme.icon} size="m-1 block h-11 w-11 sm:mr-2 shrink-0" />
+  <a class="my-1 flex w-full items-center text-ellipsis rounded low-interaction p-1" href={$href}>
+    <Marker icons={theme.icon} size="block h-8 w-8 sm:h-11 sm:w-11 m-1 sm:mx-2 md:mx-4 shrink-0" />
 
     <span class="flex flex-col overflow-hidden text-ellipsis text-xl font-bold">
-      <Tr cls="underline" t={title} />
+      <Tr cls="" t={title} />
       <Tr cls="subtle text-base" t={description} />
 
       {#if selected}