make badge just a ball, make it use theming

3 files changed, 6 insertions, 7 deletions

diff --git a/src/services/favicon_service/favicon_service.js b/src/services/favicon_service/favicon_service.js
index 8e3f1170..5fa8e5c3 100644
--- a/src/services/favicon_service/favicon_service.js
+++ b/src/services/favicon_service/favicon_service.js
@@ -4,9 +4,7 @@ const createFaviconService = () => {
   let favimg, favcanvas, favcontext, favicon
   const faviconWidth = 48
   const faviconHeight = 48
-  const strokeColor = 'rgb(200, 0, 0)'
-  const fillColor = 'rgb(255, 90, 90)'
-  const badgeRadius = 12
+  const badgeRadius = 14
 
   const initFaviconService = () => {
     const nodes = document.getElementsByTagName('link')
@@ -34,13 +32,14 @@ const createFaviconService = () => {
 
     clearFaviconBadge()
 
+    const style = getComputedStyle(document.body)
+    const badgeColor = `${style.getPropertyValue('--badgeNotification') || 'rgb(240, 100, 100)'}`
+
     favcontext.drawImage(favimg, 0, 0, favimg.width, favimg.height, 0, 0, faviconWidth, faviconHeight)
-    favcontext.fillStyle = fillColor
-    favcontext.strokeStyle = strokeColor
+    favcontext.fillStyle = badgeColor
     favcontext.beginPath()
-    favcontext.arc(faviconWidth - badgeRadius, faviconHeight - badgeRadius, badgeRadius, 0, 2 * Math.PI, false)
+    favcontext.arc(faviconWidth - badgeRadius, badgeRadius, badgeRadius, 0, 2 * Math.PI, false)
     favcontext.fill()
-    favcontext.stroke()
     favicon.href = favcanvas.toDataURL('image/png')
   }
 
diff --git a/static/dev_favicon.png b/static/dev_favicon.png
index 8b53d746..4223d5ca 100644
--- a/static/dev_favicon.png
+++ b/static/dev_favicon.png
diff --git a/static/favicon.png b/static/favicon.png
new file mode 100644
index 00000000..d1206dc5
--- /dev/null
+++ b/static/favicon.png