style(frontend): replaced Font Awesome icons

frontend/src/_common.sass

@@ -9,7 +9,7 @@
 
 @use "~@fortawesome/fontawesome-pro/scss/solid"
 
-@use "icons.sass"
+@use "icons.scss"
 
 @font-face
   font-family: "FRADrive Sans"

frontend/src/icons.sass

@@ -1,31 +0,0 @@
-// 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)

frontend/src/icons.scss

@@ -0,0 +1,36 @@
+// SPDX-FileCopyrightText: 2024 David Mosbach <david.mosbach@uniworx.de>
+//
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// SPDX-License-Identifier: LicenseRef-Fraport-Corporate-Design
+
+
+$icons: ok,
+        not-ok,
+        placeholder;
+
+@each $name in $icons {
+  .ico-#{$name} {
+    background-image: url('../../assets/icons/fradrive/#{$name}.svg');
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    aspect-ratio: 1/1;
+    display: inline-block;
+    filter: invert(22%) sepia(84%) saturate(7448%) hue-rotate(357deg) brightness(102%) contrast(116%);
+  }
+}
+
+.small-ico {
+  font-size: 1em;
+  width: 1em;
+}
+
+.medium-ico {
+  font-size: 1.5em;
+  width: 1.5em;
+}
+
+.large-ico {
+  font-size: 2em;
+  width: 2em;
+}

src/Utils/Icon.hs

@@ -1,4 +1,4 @@
--- SPDX-FileCopyrightText: 2022 Gregor Kleen <gregor.kleen@ifi.lmu.de>,Sarah Vaupel <sarah.vaupel@ifi.lmu.de>,Sarah Vaupel <vaupel.sarah@campus.lmu.de>,Steffen Jost <jost@tcs.ifi.lmu.de>,Wolfgang Witt <Wolfgang.Witt@campus.lmu.de>
+-- SPDX-FileCopyrightText: 2022-2024 Gregor Kleen <gregor.kleen@ifi.lmu.de>,Sarah Vaupel <sarah.vaupel@ifi.lmu.de>,Sarah Vaupel <vaupel.sarah@campus.lmu.de>,Steffen Jost <jost@tcs.ifi.lmu.de>,Wolfgang Witt <Wolfgang.Witt@campus.lmu.de>,David Mosbach <david.mosbach@uniworx.de>
 --
 -- SPDX-License-Identifier: AGPL-3.0-or-later
 
@@ -117,7 +117,7 @@ data Icon
   deriving (Eq, Ord, Enum, Bounded, Show, Read, Generic)
   deriving anyclass (Universe, Finite, NFData)
 
-iconText :: Icon -> Text
+{- iconText :: Icon -> Text
 iconText = \case
     IconNew                          -> "seedling"
     IconOK                           -> "check"
@@ -204,7 +204,14 @@ iconText = \case
     IconExpired                 -> "hourglass-end"
     IconLocked                  -> "lock"
     IconUnlocked                -> "lock-open-alt"
-    IconResetTries              -> "trash-undo"
+    IconResetTries              -> "trash-undo" -}
+
+iconText :: Icon -> Text
+iconText = \case
+    IconOK                           -> "ok"
+    IconNotOK                        -> "not-ok"
+    _                                -> "placeholder"
+
 
 nullaryPathPiece ''Icon $ camelToPathPiece' 1
 deriveLift ''Icon
@@ -214,21 +221,34 @@ deriveJSON defaultOptions
   } ''Icon
 
 -- Create an icon from font-awesome without additional space
-icon :: Icon -> Markup
+{- icon :: Icon -> Markup
 icon ic = [shamlet|
             $newline never
             <i .fas .fa-#{iconText ic}>
           |]
+-}
+
+icon :: Icon -> Markup
+icon ic = [shamlet|
+            $newline never
+            <span .ico-#{iconText ic} .medium-ico>
+          |]
+
   
 -- Create an icon from font-awesome with fixed width
-iconFixed :: Icon -> Markup
+{-iconFixed :: Icon -> Markup
 iconFixed ic = [shamlet|
                  $newline never
                  <i .fas .fa-fw .fa-#{iconText ic}>
                |]
+-}
+
+iconFixed :: Icon -> Markup
+iconFixed = icon -- TODO
+
 
 -- Stack two icons from font-awesome without additional space
-iconStacked :: Icon -> Icon -> Markup
+{-iconStacked :: Icon -> Icon -> Markup
 iconStacked ic0 ic1
   = [shamlet|
     $newline never
@@ -237,6 +257,11 @@ iconStacked ic0 ic1
       <i .fas .fa-stack-2x .fa-#{iconText ic1}>
   |]
 
+-}
+
+iconStacked :: Icon -> Icon -> Markup
+iconStacked i _ = icon i -- TODO
+
 -- Create an icon (defaults to "?") with a specified tooltip; inline-bool just affects the size of the icon
 iconTooltip :: forall site. WidgetFor site () -> Maybe Icon -> Bool -> WidgetFor site ()
 iconTooltip tooltip mIcon isInlineTooltip = let

templates/widgets/navbar/container.hamlet

@@ -1,10 +1,10 @@
 $newline never
 
-$# SPDX-FileCopyrightText: 2022 Gregor Kleen <gregor.kleen@ifi.lmu.de>
+$# SPDX-FileCopyrightText: 2022-2024 Gregor Kleen <gregor.kleen@ifi.lmu.de>,David Mosbach <david.mosbach@uniworx.de>
 $#
 $# SPDX-License-Identifier: AGPL-3.0-or-later
 
 <label .navbar__link-wrapper for=#{navIdent}-radio ##{navIdent}>
   <div .navbar__link-icon>
-    <i .fas .fa-2x .fa-#{iconText navIcon}>
+    <span .ico-#{iconText navIcon} .large-ico>
   <div .navbar__link-label>_{SomeMessage navLabel}

templates/widgets/navbar/item.hamlet

@@ -1,10 +1,10 @@
 $newline never
 
-$# SPDX-FileCopyrightText: 2022 Gregor Kleen <gregor.kleen@ifi.lmu.de>
+$# SPDX-FileCopyrightText: 2022-2024 Gregor Kleen <gregor.kleen@ifi.lmu.de>,David Mosbach <david.mosbach@uniworx.de>
 $#
 $# SPDX-License-Identifier: AGPL-3.0-or-later
 
 <a .navbar__link-wrapper href=#{route} ##{ident}>
   <div .navbar__link-icon>
-    <i .fas .fa-2x .fa-#{iconText navIcon}>
+    <span .ico-#{iconText navIcon} .large-ico>
   <div .navbar__link-label>_{SomeMessage navLabel}

templates/widgets/navbar/navbar.hamlet

@@ -1,6 +1,6 @@
 $newline never
 
-$# SPDX-FileCopyrightText: 2022 Felix Hamann <felix.hamann@campus.lmu.de>,Gregor Kleen <gregor.kleen@ifi.lmu.de>
+$# SPDX-FileCopyrightText: 2022-2024 Felix Hamann <felix.hamann@campus.lmu.de>,Gregor Kleen <gregor.kleen@ifi.lmu.de>,David Mosbach <david.mosbach@uniworx.de>
 $#
 $# SPDX-License-Identifier: AGPL-3.0-or-later
 
@@ -18,7 +18,7 @@ $# SPDX-License-Identifier: AGPL-3.0-or-later
           <li .navbar__list-item.navbar__list-item--favorite>
             <a .navbar__link-wrapper href="#">
               <div .navbar__link-icon>
-                <i .fas .fa-2x .fa-#{iconText IconFavourite}>
+                <span .ico-#{iconText IconFavourite} .large-ico>
               <div .navbar__link-label>_{MsgNavigationFavourites}
 
           $forall n <- filter isNavHeaderPrimary nav
@@ -46,7 +46,7 @@ $# SPDX-License-Identifier: AGPL-3.0-or-later
       $forall n@(NavHeaderContainer{ navHeaderRole }, containerIdent, _, ns) <- filter isNavHeaderContainer nav
         <div .navbar__container-list :navHeaderRole == NavHeaderPrimary:.navbar__container-list--left ##{containerIdent}-container>
           <label .navbar__container-list-closer for=container-radio-none>
-            <i .fas .fa-fw .fa-#{iconText IconNavContainerClose}>
+            <span .fa-#{iconText IconNavContainerClose} .medium-ico>
           <ul>
             $forall iN@(nl, _, _) <- ns
               <li .navbar__container-list-item :highlightNav nl:.navbar__container-list-item--active>