From bf897ba49f9b81a1c5f445435032147e273b2048 Mon Sep 17 00:00:00 2001
From: izawartka <59137928+izawartka@users.noreply.github.com>
Date: Mon, 9 Jun 2025 22:28:44 +0200
Subject: [PATCH] Tweaked localization list style

*Tweaked localization list style
---
 src/components/App.css                      | 42 ++++++++++++++-------
 src/components/loclist/ClickableLocation.js |  2 +-
 src/components/loclist/LocList.css          | 11 +++---
 3 files changed, 34 insertions(+), 21 deletions(-)

diff --git a/src/components/App.css b/src/components/App.css
index 637c6ce..c244304 100644
--- a/src/components/App.css
+++ b/src/components/App.css
@@ -39,12 +39,26 @@ select {
     cursor: pointer;
 }
 
+input[type="file"].non-transparent::file-selector-button,
+input[type="text"].non-transparent,
+button.non-transparent,
+select.non-transparent {
+    background: #222;
+    border: 2px solid #444;
+}
+
 input[type="file"]::file-selector-button:hover,
 button:hover,
 select:hover {
     background: #fff3;
 }
 
+input[type="file"].non-transparent::file-selector-button:hover,
+button.non-transparent:hover,
+select.non-transparent:hover {
+    background: #444;
+}
+
 input[type="file"]::file-selector-button,
 button {
     padding-inline: 10px;
@@ -65,6 +79,20 @@ input[type="text"]:focus {
     border: 2px solid #fff3;
 }
 
+.invis-button {
+    display: block;
+    background-color: transparent;
+    border: none;
+    padding: 0;
+    padding-block: 0;
+    padding-inline: 0;
+    appearance: none;
+}
+
+.invis-button:hover {
+    background-color: transparent;
+}
+
 ::-webkit-scrollbar-track {
     background-color: #141414;
     border-radius: 5px;
@@ -85,18 +113,4 @@ input[type="text"]:focus {
 
 ::-webkit-scrollbar:horizontal {
     height: 10px;
-}
-
-.invis-button {
-    display: block;
-    background-color: transparent;
-    border: none;
-    padding: 0;
-    padding-block: 0;
-    padding-inline: 0;
-    appearance: none;
-}
-
-.invis-button:hover {
-    background-color: transparent;
 }
\ No newline at end of file
diff --git a/src/components/loclist/ClickableLocation.js b/src/components/loclist/ClickableLocation.js
index ebc04ff..12f5261 100644
--- a/src/components/loclist/ClickableLocation.js
+++ b/src/components/loclist/ClickableLocation.js
@@ -9,7 +9,7 @@ export default function ClickableLocation(props) {
     };
 
     return (
-        <button className="clickable-location" onClick={handleClick}>
+        <button className="clickable-location non-transparent" onClick={handleClick}>
             <span className="location-name">{name}</span>
         </button>
     );
diff --git a/src/components/loclist/LocList.css b/src/components/loclist/LocList.css
index 7961f4e..0f5150b 100644
--- a/src/components/loclist/LocList.css
+++ b/src/components/loclist/LocList.css
@@ -2,15 +2,14 @@
     position: absolute;
     left: 0;
     bottom: 0;
-    padding: 8px;
+    padding: 0.5em;
     display: flex;
-    border-top-right-radius: 8px;
-    flex-direction: column;
-    gap: 4px;
-    background-color: #222;
+    gap: 0.5em 1em;
+    flex-wrap: wrap;
 }
 
 .loclist-section {
     display: flex;
-    gap: 4px;
+    gap: 0.5em;
+    flex-wrap: wrap;
 }