From b2915bdc4d2b1b1655568dd36887b25e491d7e79 Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Tue, 17 Dec 2024 04:12:31 +0100
Subject: [PATCH] UX: change styling of dotmenu to make it more visible

---
 public/css/index-tailwind-output.css | 64 ++++++++++++------------
 src/UI/Base/DotMenu.svelte           | 74 ++++++++++++++--------------
 2 files changed, 69 insertions(+), 69 deletions(-)

diff --git a/public/css/index-tailwind-output.css b/public/css/index-tailwind-output.css
index 1ced5b6da..3da0d51cf 100644
--- a/public/css/index-tailwind-output.css
+++ b/public/css/index-tailwind-output.css
@@ -1324,20 +1324,20 @@ input[type="range"].range-lg::-moz-range-thumb {
   margin: 0px;
 }
 
-.m-8 {
-  margin: 2rem;
+.m-1 {
+  margin: 0.25rem;
 }
 
 .m-2 {
   margin: 0.5rem;
 }
 
-.m-0\.5 {
-  margin: 0.125rem;
+.m-8 {
+  margin: 2rem;
 }
 
-.m-1 {
-  margin: 0.25rem;
+.m-0\.5 {
+  margin: 0.125rem;
 }
 
 .m-11 {
@@ -1698,14 +1698,14 @@ input[type="range"].range-lg::-moz-range-thumb {
   height: 6rem;
 }
 
-.h-screen {
-  height: 100vh;
-}
-
 .h-full {
   height: 100%;
 }
 
+.h-screen {
+  height: 100vh;
+}
+
 .h-fit {
   height: -webkit-fit-content;
   height: -moz-fit-content;
@@ -2028,6 +2028,10 @@ input[type="range"].range-lg::-moz-range-thumb {
   width: max-content;
 }
 
+.w-48 {
+  width: 12rem;
+}
+
 .w-auto {
   width: auto;
 }
@@ -2121,10 +2125,6 @@ input[type="range"].range-lg::-moz-range-thumb {
   width: 0.25rem;
 }
 
-.w-48 {
-  width: 12rem;
-}
-
 .w-9\/12 {
   width: 75%;
 }
@@ -2244,14 +2244,14 @@ input[type="range"].range-lg::-moz-range-thumb {
   flex: 1 1 0%;
 }
 
-.flex-shrink {
-  flex-shrink: 1;
-}
-
 .flex-shrink-0 {
   flex-shrink: 0;
 }
 
+.flex-shrink {
+  flex-shrink: 1;
+}
+
 .shrink-0 {
   flex-shrink: 0;
 }
@@ -2509,6 +2509,10 @@ input[type="range"].range-lg::-moz-range-thumb {
   row-gap: 0.25rem;
 }
 
+.gap-x-2 {
+  column-gap: 0.5rem;
+}
+
 .gap-y-2 {
   row-gap: 0.5rem;
 }
@@ -2517,10 +2521,6 @@ input[type="range"].range-lg::-moz-range-thumb {
   row-gap: 1rem;
 }
 
-.gap-x-2 {
-  column-gap: 0.5rem;
-}
-
 .gap-x-1 {
   column-gap: 0.25rem;
 }
@@ -3045,11 +3045,6 @@ input[type="range"].range-lg::-moz-range-thumb {
   border-color: rgb(107 114 128 / var(--tw-border-opacity));
 }
 
-.border-subtle {
-  --tw-border-opacity: 1;
-  border-color: rgb(219 234 254 / var(--tw-border-opacity));
-}
-
 .border-black {
   --tw-border-opacity: 1;
   border-color: rgb(0 0 0 / var(--tw-border-opacity));
@@ -3065,6 +3060,11 @@ input[type="range"].range-lg::-moz-range-thumb {
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
+.border-gray-600 {
+  --tw-border-opacity: 1;
+  border-color: rgb(75 85 99 / var(--tw-border-opacity));
+}
+
 .border-gray-800 {
   --tw-border-opacity: 1;
   border-color: rgb(31 41 55 / var(--tw-border-opacity));
@@ -4045,18 +4045,14 @@ input[type="range"].range-lg::-moz-range-thumb {
   padding-bottom: 0.75rem;
 }
 
-.pl-4 {
-  padding-left: 1rem;
+.pt-2 {
+  padding-top: 0.5rem;
 }
 
 .pr-4 {
   padding-right: 1rem;
 }
 
-.pt-2 {
-  padding-top: 0.5rem;
-}
-
 .pl-1 {
   padding-left: 0.25rem;
 }
@@ -5067,6 +5063,8 @@ input[type="range"].range-lg::-moz-range-thumb {
 @font-face {
   font-family: "Source Sans Pro";
 
+  /*This path might seem incorrect. However, 'index.css' will be compiled and placed in 'public/css', from where this path _is_ correct*/
+
   src: url("../assets/fonts/source-sans-pro.regular.ttf") format("woff");
 }
 
diff --git a/src/UI/Base/DotMenu.svelte b/src/UI/Base/DotMenu.svelte
index 74344067c..e14ee59a1 100644
--- a/src/UI/Base/DotMenu.svelte
+++ b/src/UI/Base/DotMenu.svelte
@@ -45,46 +45,48 @@
 </div>
 
 <style>
-  .dots-menu {
-    z-index: 50;
-  }
+    .dots-menu {
+        z-index: 50;
+    }
 
-  :global(.dots-menu > path) {
-    fill: var(--button-background-hover);
-    transition: fill 350ms linear;
-    cursor: pointer;
-  }
+    :global(.dots-menu > path) {
+        fill: var(--button-background-hover);
+        transition: fill 350ms linear;
+        cursor: pointer;
+        stroke-width: 0.8;
+        stroke: white;
+    }
 
-  :global(.dots-menu:hover > path, .dots-menu-opened > path) {
-    fill: var(--interactive-foreground);
-  }
+    :global(.dots-menu:hover > path, .dots-menu-opened > path) {
+        fill: var(--interactive-foreground);
+    }
 
-  .collapsable {
-    max-width: 50rem;
-    max-height: 10rem;
-    transition: max-width 500ms linear, max-height 500ms linear, border 500ms linear;
-    overflow: hidden;
-    flex-wrap: nowrap;
-    text-wrap: none;
-    width: max-content;
-    box-shadow: #ccc;
-    white-space: nowrap;
-    border: 1px solid var(--button-background);
-    background-color: white;
-  }
+    .collapsable {
+        max-width: 50rem;
+        max-height: 10rem;
+        transition: max-width 500ms linear, max-height 500ms linear, border 500ms linear;
+        overflow: hidden;
+        flex-wrap: nowrap;
+        text-wrap: none;
+        width: max-content;
+        box-shadow: #ccc;
+        white-space: nowrap;
+        border: 1px solid var(--button-background);
+        background-color: white;
+    }
 
-  .transition-background {
-    transition: background-color 150ms linear;
-  }
+    .transition-background {
+        transition: background-color 150ms linear;
+    }
 
-  .transition-background.collapsed {
-    background-color: #00000000;
-  }
+    .transition-background.collapsed {
+        background-color: #00000000;
+    }
 
-  .collapsed {
-    max-width: 0;
-    max-height: 0;
-    border: 2px solid #00000000;
-    pointer-events: none;
-  }
+    .collapsed {
+        max-width: 0;
+        max-height: 0;
+        border: 2px solid #00000000;
+        pointer-events: none;
+    }
 </style>