From 6fd6d114c2930cd3df87a4b2623da6c54f9bb8ba Mon Sep 17 00:00:00 2001
From: ItsOnlyBinary <git@itsonlybinary.com>
Date: Tue, 12 Dec 2023 19:50:27 +0000
Subject: [PATCH] Prevent background bleed when image is set

---
 src/components/UserAvatar.vue       | 70 +++++++++++++++--------------
 src/res/configTemplates.js          |  2 +-
 static/themes/coffee/theme.css      |  4 +-
 static/themes/common/base.css       |  6 +--
 static/themes/nightswatch/theme.css |  6 +--
 static/themes/radioactive/theme.css |  6 +--
 6 files changed, 48 insertions(+), 46 deletions(-)

diff --git a/src/components/UserAvatar.vue b/src/components/UserAvatar.vue
index 3ebc65019..b06b66233 100644
--- a/src/components/UserAvatar.vue
+++ b/src/components/UserAvatar.vue
@@ -1,42 +1,44 @@
 <template>
     <div class="kiwi-avatar">
         <svg v-if="user" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-            <circle
-                v-if="avatar.showBackground"
-                v-bind="awayStatus.vbind"
-                r="50%"
-                cx="50%"
-                cy="50%"
-                class="kiwi-avatar-circle"
-                :style="{ fill: user.getColour() }"
-            />
-            <image
-                v-if="avatar.hasImage"
-                v-bind="{ ...awayStatus.vbind, ...avatar[avatar.sizeKey[size]].vbind }"
-                clip-path="url(#kiwi-avatar-clip)"
-                width="100%"
-                height="100%"
-                preserveAspectRatio="xMidYMid slice"
-                class="kiwi-avatar-image"
-                loading="lazy"
-                @error="avatar[avatar.sizeKey[size]].setFailed()"
-            />
-            <text
-                v-else
-                :font-size="avatar.initials.length === 1 ? '64px' : '44px'"
+            <g
                 v-bind="awayStatus.vbind"
                 clip-path="url(#kiwi-avatar-clip)"
-                x="50%"
-                y="50%"
-                dy="0.36em"
-                text-anchor="middle"
-                class="kiwi-avatar-initials"
-            >{{ avatar.initials }}</text>
+            >
+                <rect
+                    v-if="avatar.showBackground"
+                    class="kiwi-avatar-background"
+                    width="100"
+                    height="100"
+                    :style="{ fill: user.getColour() }"
+                />
+                <image
+                    v-if="avatar.hasImage"
+                    v-bind="{ ...avatar[avatar.sizeKey[size]].vbind }"
+                    width="100"
+                    height="100"
+                    preserveAspectRatio="xMidYMid slice"
+                    class="kiwi-avatar-image"
+                    loading="lazy"
+                    @error="avatar[avatar.sizeKey[size]].setFailed()"
+                />
+                <text
+                    v-else
+                    :font-size="avatar.initials.length === 1 ? '64px' : '44px'"
+                    v-bind="awayStatus.vbind"
+                    clip-path="url(#kiwi-avatar-clip)"
+                    x="50"
+                    y="50"
+                    dy="0.36em"
+                    text-anchor="middle"
+                    class="kiwi-avatar-initials"
+                >{{ avatar.initials }}</text>
+            </g>
             <circle
                 v-if="awayStatus.show"
                 transform="rotate(45 50 50)"
-                r="12%"
-                cx="50%"
+                r="12"
+                cx="50"
                 cy="0"
                 class="kiwi-avatar-status"
                 :class="{
@@ -50,12 +52,12 @@
             </circle>
         </svg>
         <svg v-else viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-            <circle r="50%" cx="50%" cy="50%" class="kiwi-avatar-circle" />
+            <circle r="50" cx="50" cy="50" class="kiwi-avatar-background" />
             <text
                 font-size="64px"
                 clip-path="url(#kiwi-avatar-clip)"
-                x="50%"
-                y="50%"
+                x="50"
+                y="50"
                 dy="0.36em"
                 text-anchor="middle"
                 class="kiwi-avatar-initials"
diff --git a/src/res/configTemplates.js b/src/res/configTemplates.js
index ffc91f989..654dc9a82 100644
--- a/src/res/configTemplates.js
+++ b/src/res/configTemplates.js
@@ -92,7 +92,7 @@ export const configTemplates = {
         },
         avatars: {
             initials_length: 1,
-            show_image_background: true,
+            show_image_background: false,
         },
         // Startup screen default
         startupOptions: {
diff --git a/static/themes/coffee/theme.css b/static/themes/coffee/theme.css
index 682e47972..fe7618076 100644
--- a/static/themes/coffee/theme.css
+++ b/static/themes/coffee/theme.css
@@ -86,8 +86,8 @@
     color: #fff;
 }
 
-.kiwi-statebrowser-usermenu-avatar:hover .kiwi-avatar-circle,
-.kiwi-statebrowser-usermenu--open .kiwi-avatar-circle {
+.kiwi-statebrowser-usermenu-avatar:hover .kiwi-avatar-background,
+.kiwi-statebrowser-usermenu--open .kiwi-avatar-background {
     fill: #967c68 !important;
 }
 
diff --git a/static/themes/common/base.css b/static/themes/common/base.css
index b5248a06b..6667520b4 100644
--- a/static/themes/common/base.css
+++ b/static/themes/common/base.css
@@ -603,8 +603,8 @@
     background: var(--brand-error);
 }
 
-.kiwi-statebrowser-usermenu-avatar:hover .kiwi-avatar-circle,
-.kiwi-statebrowser-usermenu--open .kiwi-avatar-circle {
+.kiwi-statebrowser-usermenu-avatar:hover .kiwi-avatar-background,
+.kiwi-statebrowser-usermenu--open .kiwi-avatar-background {
     fill: var(--brand-primary) !important;
 }
 
@@ -913,7 +913,7 @@
     fill: var(--brand-default-bg);
 }
 
-.kiwi-avatar-circle {
+.kiwi-avatar-background {
     fill: var(--brand-darktone);
 }
 
diff --git a/static/themes/nightswatch/theme.css b/static/themes/nightswatch/theme.css
index d36dc80e2..193f9e472 100644
--- a/static/themes/nightswatch/theme.css
+++ b/static/themes/nightswatch/theme.css
@@ -167,12 +167,12 @@
     border-right: 2px solid #444;
 }
 
-.kiwi-statebrowser-usermenu-avatar:hover .kiwi-avatar-circle,
-.kiwi-statebrowser-usermenu--open .kiwi-avatar-circle {
+.kiwi-statebrowser-usermenu-avatar:hover .kiwi-avatar-background,
+.kiwi-statebrowser-usermenu--open .kiwi-avatar-background {
     fill: #f1f1f1 !important;
 }
 
-.kiwi-avatar-circle {
+.kiwi-avatar-background {
     fill: var(--brand-input-fg);
 }
 
diff --git a/static/themes/radioactive/theme.css b/static/themes/radioactive/theme.css
index 45b68eb5c..92a6fffd3 100644
--- a/static/themes/radioactive/theme.css
+++ b/static/themes/radioactive/theme.css
@@ -843,12 +843,12 @@
     border-top: 1px #14fdce solid;
 }
 
-.kiwi-statebrowser-usermenu-avatar:hover .kiwi-avatar-circle,
-.kiwi-statebrowser-usermenu--open .kiwi-avatar-circle {
+.kiwi-statebrowser-usermenu-avatar:hover .kiwi-avatar-background,
+.kiwi-statebrowser-usermenu--open .kiwi-avatar-background {
     fill: #5dd895 !important;
 }
 
-.kiwi-avatar-circle {
+.kiwi-avatar-background {
     fill: #57da93;
 }