From 6bd90cfb52b970b1e50bae79cd7dc59631bdcd99 Mon Sep 17 00:00:00 2001
From: Viktor Erlingsson <viktor@84codes.com>
Date: Mon, 20 Jan 2025 16:36:18 +0100
Subject: [PATCH] UI: Load svgs from files instead of from data tags (#914)

Load svg's from files instead of from data-tag to abide by Content Security Policy.
---
 static/img/arrow-down.svg      | 1 +
 static/img/usermenu-button.svg | 4 ++++
 static/main.css                | 4 ++--
 3 files changed, 7 insertions(+), 2 deletions(-)
 create mode 100644 static/img/arrow-down.svg
 create mode 100644 static/img/usermenu-button.svg

diff --git a/static/img/arrow-down.svg b/static/img/arrow-down.svg
new file mode 100644
index 0000000000..19fabbbee1
--- /dev/null
+++ b/static/img/arrow-down.svg
@@ -0,0 +1 @@
+<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'><path stroke='#f7f5f2' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/></svg>
\ No newline at end of file
diff --git a/static/img/usermenu-button.svg b/static/img/usermenu-button.svg
new file mode 100644
index 0000000000..036b269586
--- /dev/null
+++ b/static/img/usermenu-button.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21" stroke="#F7F5F2" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z" stroke="#F7F5F2" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/static/main.css b/static/main.css
index 0052f45a2c..cfdd28379e 100644
--- a/static/main.css
+++ b/static/main.css
@@ -115,7 +115,7 @@ input[type="text"], input[type="number"], input[type="password"] {
 }
 
 select.dropdown {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23f7f5f2' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+  background-image: url(img/arrow-down.svg);
   background-position: right .5rem center;
   background-repeat: no-repeat;
   background-size: 1.5em 1.5em;
@@ -1916,7 +1916,7 @@ pre.arguments > div {
 }
 
 #usermenu-button::before {
-  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21' stroke='%23F7F5F2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z' stroke='%23F7F5F2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  content: url(img/usermenu-button.svg);
   color: #f7f5f2;
   font-weight: 600;
   width: 24px;