Circle avatar

3 files changed, 10 insertions, 8 deletions

diff --git a/client/src/app/account/account-settings/account-settings.component.scss b/client/src/app/account/account-settings/account-settings.component.scss
index c8a27dbcd..fbd1cb9f0 100644
--- a/client/src/app/account/account-settings/account-settings.component.scss
+++ b/client/src/app/account/account-settings/account-settings.component.scss
@@ -6,6 +6,7 @@
 
   img {
     @include avatar(50px);
+
     margin-right: 15px;
   }
 
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 8cb94b3dd..ae167cfb6 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -21,10 +21,10 @@ menu {
     margin-bottom: 35px;
 
     img {
+      @include avatar(34px);
+
       margin-left: 20px;
       margin-right: 10px;
-
-      @include avatar(34px);
     }
 
     .logged-in-info {
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 140de1b2c..7bfc93f08 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -110,11 +110,6 @@
   }
 }
 
-@mixin avatar ($size) {
-  width: $size;
-  height: $size;
-}
-
 @mixin icon ($size) {
   display: inline-block;
   background-repeat: no-repeat;
@@ -125,7 +120,6 @@
   cursor: pointer;
 }
 
-
 @mixin peertube-select-container ($width) {
   padding: 0;
   margin: 0;
@@ -267,3 +261,10 @@
   }
 }
 
+
+@mixin avatar ($size) {
+  object-fit: cover;
+  border-radius:50%;
+  width: $size;
+  height: $size;
+}