From 79d148bfd095dd512720b72c10e191a99cc169f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julian=20M=C3=BCller=20=28ChaoticByte=29?=
 <contact@chaoticbyte.net>
Date: Sat, 15 Apr 2023 15:30:53 +0200
Subject: [PATCH] Improved the style of select elements (now also works on
 WebKit browsers)

---
 LICENSE.md                                            | 2 +-
 app/static/css/main.css                               | 8 ++++++++
 app/static/material-icons/arrow-drop-down.svg         | 1 +
 app/static/{menu-icon.svg => material-icons/menu.svg} | 0
 app/templates/userpanel.html                          | 2 +-
 5 files changed, 11 insertions(+), 2 deletions(-)
 create mode 100644 app/static/material-icons/arrow-drop-down.svg
 rename app/static/{menu-icon.svg => material-icons/menu.svg} (100%)

diff --git a/LICENSE.md b/LICENSE.md
index 66fe0ca..3c2aac4 100644
--- a/LICENSE.md
+++ b/LICENSE.md
@@ -155,7 +155,7 @@ OTHER DEALINGS IN THE FONT SOFTWARE.
 
 Source: https://github.com/google/material-design-icons  
 Files:
-- `./app/static/menu-icon.svg`
+- `./app/static/material-icons/*`
 - `./data/profilepictures/default.svg`
 
 ```
diff --git a/app/static/css/main.css b/app/static/css/main.css
index 18097b2..ab3f24a 100644
--- a/app/static/css/main.css
+++ b/app/static/css/main.css
@@ -79,7 +79,15 @@ input[type="text"], input[type="password"], input[type="number"], select {
 }
 
 select {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
     height: 2.5rem;
+    background-image: url("/static/material-icons/arrow-drop-down.svg");
+    background-repeat: no-repeat;
+    background-position: right;
+    background-size: 1.5rem;
+    padding-right: 1.8rem;
 }
 
 table {
diff --git a/app/static/material-icons/arrow-drop-down.svg b/app/static/material-icons/arrow-drop-down.svg
new file mode 100644
index 0000000..051a82d
--- /dev/null
+++ b/app/static/material-icons/arrow-drop-down.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" height="48" viewBox="0 96 960 960" width="48"><path d="M480 696 280 497h400L480 696Z"/></svg>
\ No newline at end of file
diff --git a/app/static/menu-icon.svg b/app/static/material-icons/menu.svg
similarity index 100%
rename from app/static/menu-icon.svg
rename to app/static/material-icons/menu.svg
diff --git a/app/templates/userpanel.html b/app/templates/userpanel.html
index ea6a23c..7d2d015 100644
--- a/app/templates/userpanel.html
+++ b/app/templates/userpanel.html
@@ -18,7 +18,7 @@
         <a class="button" href="/deposit">{% translate "Deposit" %}</a>
         <a class="button" href="/accounts/logout">{% translate "Logout" %}</a>
         <div class="dropdownmenu" id="dropdownmenu">
-            <button class="dropdownbutton" id="dropdownmenu-button"><img src="/static/menu-icon.svg"></button>
+            <button class="dropdownbutton" id="dropdownmenu-button"><img src="/static/material-icons/menu.svg"></button>
             <div class="dropdownlist">
                 <a class="button dropdownchoice" href="/history">{% translate "History" %}</a>
                 <a class="button dropdownchoice" href="/statistics">{% translate "Statistics" %}</a>