From 22781e1565e890cf6c5b40973146b0334cb667aa Mon Sep 17 00:00:00 2001
From: David Mosbach <mosbach@cip.ifi.lmu.de>
Date: Thu, 25 Apr 2024 23:01:35 +0000
Subject: [PATCH] feat(frontend): load icons from svg files

---
 frontend/src/_common.sass |  2 ++
 frontend/src/app.sass     |  6 +++---
 frontend/src/icons.sass   | 31 +++++++++++++++++++++++++++++++
 webpack.config.js         |  1 +
 4 files changed, 37 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/icons.sass

diff --git a/frontend/src/_common.sass b/frontend/src/_common.sass
index 572023c76..bfda93323 100644
--- a/frontend/src/_common.sass
+++ b/frontend/src/_common.sass
@@ -9,6 +9,8 @@
 
 @use "~@fortawesome/fontawesome-pro/scss/solid"
 
+@use "icons.sass"
+
 @font-face
   font-family: "FRADrive Sans"
   src: url('./../../static/wp-5.73/FRADriveSans-Regular.woff2') format('woff2'), url('./../../static/wp-5.73/FRADriveSans-Regular.woff') format('woff')
diff --git a/frontend/src/app.sass b/frontend/src/app.sass
index 365f46d33..70fa24432 100644
--- a/frontend/src/app.sass
+++ b/frontend/src/app.sass
@@ -1,4 +1,4 @@
-// SPDX-FileCopyrightText: 2022-2023 Sarah Vaupel <sarah.vaupel@uniworx.de>, Gregor Kleen <gregor.kleen@ifi.lmu.de>,Sarah Vaupel <sarah.vaupel@ifi.lmu.de>,Sarah Vaupel <vaupel.sarah@campus.lmu.de>,Steffen Jost <jost@cip.ifi.lmu.de>,Wolfgang Witt <Wolfgang.Witt@campus.lmu.de>
+// SPDX-FileCopyrightText: 2022-2024 Sarah Vaupel <sarah.vaupel@uniworx.de>, Gregor Kleen <gregor.kleen@ifi.lmu.de>,Sarah Vaupel <sarah.vaupel@ifi.lmu.de>,Sarah Vaupel <vaupel.sarah@campus.lmu.de>,Steffen Jost <jost@cip.ifi.lmu.de>,Wolfgang Witt <Wolfgang.Witt@campus.lmu.de>,David Mosbach <david.mosbach@uniworx.de>
 //
 // SPDX-License-Identifier: AGPL-3.0-or-later
 // SPDX-License-Identifier: LicenseRef-Fraport-Corporate-Design
@@ -27,9 +27,9 @@
   --color-fontsec: #5b5861
 
   // FONTS
-  --font-base: 'Arial', 'FRADrive Sans', sans-serif
+  --font-base: 'FRADrive Sans', 'Arial', sans-serif
   --font-logo: var(--font-base)
-  --font-monospace: 'Arial Mono', 'FRADrive Mono', monospace
+  --font-monospace: 'FRADrive Mono', 'Arial Mono', monospace
 
   // DIMENSIONS
   --header-height: 100px
diff --git a/frontend/src/icons.sass b/frontend/src/icons.sass
new file mode 100644
index 000000000..15ea528f4
--- /dev/null
+++ b/frontend/src/icons.sass
@@ -0,0 +1,31 @@
+// SPDX-FileCopyrightText: 2024 David Mosbach <david.mosbach@uniworx.de>
+//
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// SPDX-License-Identifier: LicenseRef-Fraport-Corporate-Design
+
+@function icon-file($name)
+  @return url('../../assets/icons/fradrive/' + $name + '.svg')
+
+@mixin base-icon($name)
+  background-image: icon-file($name)
+  background-size: contain
+  background-repeat: no-repeat
+  background-position: center
+  height: 50px
+  width: 50px
+  aspect-ratio: 1/1
+  filter: invert(22%) sepia(84%) saturate(7448%) hue-rotate(357deg) brightness(102%) contrast(116%)
+
+.inline-icon
+  display: inline-block
+  font-size: 2em
+  width: 2em
+
+
+// Icons
+  
+.ico-check
+  @include base-icon(check)
+
+.ico-close
+  @include base-icon(close)
diff --git a/webpack.config.js b/webpack.config.js
index b0ede1826..c6b8500e9 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -29,6 +29,7 @@ const packageVersion = require('./package.json').version;
 
 async function webpackConfig() {
   const faviconNixDirectory = path.resolve(__dirname, '.nix-well-known');
+  const assetsDirectory = path.resolve(__dirname, 'assets');
   let faviconApiVersion = undefined;
 
   if (!fs.existsSync(faviconNixDirectory)) {