fix: some problems with avatar rendering

data-fair · Dec 9, 2024 · 98200b6 · 98200b6
1 parent 00b6366
commit 98200b6
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 21 deletions.
diff --git a/ui/src/components/auth-providers-login-links.vue b/ui/src/components/auth-providers-login-links.vue
@@ -13,15 +13,14 @@
       class="pl-0 pr-3 mr-2 mb-1 text-none text-white"
     >
       <v-avatar
-        size="28"
-        color="white"
-        class="elevation-1"
-        style="left:-1px"
+        size="29"
+        :style="`left:-1px;top:-1px;background-color: ${$vuetify.theme.current.colors.surface};`"
+        class="elevation-4"
       >
-        <img
+        <v-img
           v-if="$uiConfig.theme.logo"
           :src="$uiConfig.theme.logo"
-        >
+        />
         <logo v-else />
       </v-avatar>
       &nbsp;{{ mainPublicUrl.host }}

diff --git a/ui/src/pages/admin/organizations.vue b/ui/src/pages/admin/organizations.vue
@@ -41,9 +41,8 @@
             <v-avatar
               :size="36"
               class="ml-2"
-            >
-              <img :src="$sdUrl + '/api/avatars/organization/' + props.item.id + '/avatar.png'">
-            </v-avatar>
+              :image="$sdUrl + '/api/avatars/organization/' + props.item.id + '/avatar.png'"
+            />
           </td>
           <td>{{ props.item.name }}</td>
           <td>{{ props.item.id }}</td>

diff --git a/ui/src/pages/admin/sites.vue b/ui/src/pages/admin/sites.vue
@@ -54,22 +54,22 @@
               style="cursor:default"
             >
               <v-avatar
-                size="27"
-                color="white"
+                size="28"
+                :style="`left:-1px;top:-1px;background-color: ${$vuetify.theme.current.colors.surface};`"
                 class="elevation-4"
-                style="left:-1px; top: -1px;"
               >
                 <v-icon
                   v-if="authProvider.icon"
+                  size="25"
                   :color="authProvider.color as string"
                 >
                   {{ authProvider.icon }}
                 </v-icon>
-                <img
+                <v-img
                   v-else-if="authProvider.img"
                   :src="authProvider.img as string"
                   :alt="authProvider.title as string"
-                >
+                />
               </v-avatar>
               &nbsp;{{ authProvider.title }}
             </v-btn>

diff --git a/ui/src/pages/admin/users.vue b/ui/src/pages/admin/users.vue
@@ -50,9 +50,8 @@
             <v-avatar
               :size="36"
               class="ml-2"
-            >
-              <img :src="$sdUrl + '/api/avatars/user/' + props.item.id + '/avatar.png'">
-            </v-avatar>
+              :image="$sdUrl + '/api/avatars/user/' + props.item.id + '/avatar.png'"
+            />
           </td><td class="text-no-wrap">
             {{ props.item.email }}
             <v-btn

diff --git a/ui/src/pages/me.vue b/ui/src/pages/me.vue
@@ -123,21 +123,21 @@
         >
           <v-avatar
             size="28"
-            color="white"
+            :style="`left:-1px;top:-1px;background-color: ${$vuetify.theme.current.colors.surface};`"
             class="elevation-4"
-            style="left:-1px; top: -1px;"
           >
             <v-icon
               v-if="identity.icon"
+              size="25"
               :color="identity.color"
             >
               {{ identity.icon }}
             </v-icon>
-            <img
+            <v-img
               v-else-if="identity.img"
               :src="identity.img"
               :alt="identity.title"
-            >
+            />
           </v-avatar>
           &nbsp;&nbsp;{{ identity.title }}{{ identity.name ? ' - ' + identity.name : '' }}
         </v-btn>