From 69f24a6b7bfbef8eb16282675efc75445101cb6d Mon Sep 17 00:00:00 2001
From: "Alexander \"Arav\" Andreev" <me@arav.su>
Date: Thu, 16 May 2024 00:15:52 +0400
Subject: [PATCH] Make use of the new icons, also add some styling for them.

---
 web/assets/css/main.css |  5 +++++
 web/index.templ         | 12 ++++++------
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/web/assets/css/main.css b/web/assets/css/main.css
index c7b58cf..781ecac 100644
--- a/web/assets/css/main.css
+++ b/web/assets/css/main.css
@@ -126,6 +126,11 @@ section { margin-top: 1rem; }
 
 #player p { text-indent: 1rem; }
 
+#player img {
+	filter: drop-shadow(0px 0px 4px var(--text-color));
+	height: 1rem;
+	padding: 0 .7rem; }
+
 button#radio-play {
 	-webkit-mask-image: url(/assets/img/play.svg);
 	background-color: var(--primary-color);
diff --git a/web/index.templ b/web/index.templ
index 270f2d0..794587c 100644
--- a/web/index.templ
+++ b/web/index.templ
@@ -68,19 +68,19 @@ templ Index(curSong *radio.Song, sl []radio.Song, slLen int64, lstnrs *radio.Lis
             <div>
             if curSong != nil && curSong.Artist != "" {
                 <p>
-                    <b>Listeners:</b> <span id="radio-listeners">{ strconv.FormatInt(lstnrs.Current(), 10) }</span>
-                    <b>Duration:</b> <span id="radio-duration-estimate"></span><span id="radio-duration">{ curSong.DurationString() }</span>
+                    <img src="/assets/img/listener.svg" /> <span id="radio-listeners">{ strconv.FormatInt(lstnrs.Current(), 10) }</span>
+                    <img src="/assets/img/duration.svg" /> <span id="radio-duration-estimate"></span><span id="radio-duration">{ curSong.DurationString() }</span>
                 </p>
                 <p>
-                    <b>Song:</b> <span id="radio-song">{ curSong.Artist } - { curSong.Title }</span>
+                    <img src="/assets/img/note.svg" /> <span id="radio-song">{ curSong.Artist } - { curSong.Title }</span>
                 </p>
             } else {
                 <p>
-                    <b>Listeners:</b> <span id="radio-listeners">{ strconv.FormatInt(lstnrs.Current(), 10) }</span>
-                    <b>Duration:</b> <span id="radio-duration-estimate"></span><span id="radio-duration">0:00</span>
+                    <img src="/assets/img/listener.svg" /> <span id="radio-listeners">{ strconv.FormatInt(lstnrs.Current(), 10) }</span>
+                    <img src="/assets/img/duration.svg" /> <span id="radio-duration-estimate"></span><span id="radio-duration">0:00</span>
                 </p>
                 <p>
-                    <b>Song:</b> <span id="radio-song">-</span>
+                    <img src="/assets/img/note.svg" /> <span id="radio-song">-</span>
                 </p>
             }
             </div>