From a45b2b8380b831dda6f2eb44ba0b9aefe175c2e3 Mon Sep 17 00:00:00 2001
From: IceDBorn <51162078+IceDBorn@users.noreply.github.com>
Date: Wed, 1 Sep 2021 14:36:00 +0300
Subject: [PATCH] Make avatar images circular (#400)

---
 src/components/Channel.vue           | 2 +-
 src/components/Playlist.vue          | 4 ++--
 src/components/SubscriptionsPage.vue | 2 +-
 src/components/WatchVideo.vue        | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Channel.vue b/src/components/Channel.vue
index 978a7d9f..5e649e58 100644
--- a/src/components/Channel.vue
+++ b/src/components/Channel.vue
@@ -2,7 +2,7 @@
     <ErrorHandler v-if="channel && channel.error" :message="channel.message" :error="channel.error" />
 
     <div v-if="channel" v-show="!channel.error">
-        <h1 class="uk-text-center"><img height="48" width="48" v-bind:src="channel.avatarUrl" />{{ channel.name }}</h1>
+        <h1 class="uk-text-center"><img height="48" width="48" class="uk-border-circle" v-bind:src="channel.avatarUrl" />{{ channel.name }}</h1>
         <img v-if="channel.bannerUrl" v-bind:src="channel.bannerUrl" style="width: 100%" loading="lazy" />
         <p style="white-space: pre-wrap"><span v-html="purifyHTML(urlify(channel.description))"></span></p>
 
diff --git a/src/components/Playlist.vue b/src/components/Playlist.vue
index de3975f9..14c943ff 100644
--- a/src/components/Playlist.vue
+++ b/src/components/Playlist.vue
@@ -3,13 +3,13 @@
 
     <div v-if="playlist" v-show="!playlist.error">
         <h1 class="uk-text-center">
-            <img v-bind:src="playlist.avatarUrl" height="48" width="48" loading="lazy" />
+            <img v-bind:src="playlist.avatarUrl" height="48" width="48" loading="lazy"/>
             {{ playlist.name }}
         </h1>
 
         <b
             ><router-link class="uk-text-justify" v-bind:to="playlist.uploaderUrl || '/'">
-                <img v-bind:src="playlist.uploaderAvatar" loading="lazy" />
+                <img v-bind:src="playlist.uploaderAvatar" loading="lazy" class="uk-border-circle" />
                 {{ playlist.uploader }}</router-link
             ></b
         >
diff --git a/src/components/SubscriptionsPage.vue b/src/components/SubscriptionsPage.vue
index 5ca0ffc1..684ac9d4 100644
--- a/src/components/SubscriptionsPage.vue
+++ b/src/components/SubscriptionsPage.vue
@@ -14,7 +14,7 @@
     <div :key="subscription.url" v-for="subscription in subscriptions">
         <div class="uk-text-primary" :style="[{ background: backgroundColor }]">
             <a :href="subscription.url">
-                <img :src="subscription.avatar" class="uk-margin-small-right" width="50" height="50" />
+                <img :src="subscription.avatar" class="uk-margin-small-right uk-border-circle" width="50" height="50" />
                 <span class="uk-text-truncate">{{ subscription.name }}</span>
             </a>
             <button
diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue
index 064561e3..cf1efdaa 100644
--- a/src/components/WatchVideo.vue
+++ b/src/components/WatchVideo.vue
@@ -56,7 +56,7 @@
             </div>
 
             <div class="uk-flex uk-flex-middle uk-margin-small-top">
-                <img :src="video.uploaderAvatar" loading="lazy" />
+                <img :src="video.uploaderAvatar" loading="lazy" class="uk-border-circle" />
                 <router-link class="uk-text-bold uk-margin-small-left" v-if="video.uploaderUrl" :to="video.uploaderUrl">
                     <a>{{ video.uploader }}</a>
                 </router-link>