X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2F%2Bsearch%2Fsearch.component.scss;h=3603c39818a59344d8edc7b1fd66abbdb9357832;hb=fa12eacc014aae8094d108634371640f2695bf9f;hp=91c8272d7f1b1e9a664feffc5de8790dfd9304e4;hpb=4024c44f9027a32809931de0692d40d001df721c;p=github%2FChocobozzz%2FPeerTube.git

diff --git a/client/src/app/+search/search.component.scss b/client/src/app/+search/search.component.scss
index 91c8272d7..3603c3981 100644
--- a/client/src/app/+search/search.component.scss
+++ b/client/src/app/+search/search.component.scss
@@ -1,11 +1,11 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 @mixin build-channel-img-size ($video-img-width) {
   $image-size: min(130px, $video-img-width);
   $margin-size: ($video-img-width - $image-size) / 2; // So we have the same width than the video miniature
 
-  @include channel-avatar($image-size);
+  @include actor-avatar-size($image-size);
 
   margin: 0 $margin-size 0 $margin-size;
 }
@@ -37,10 +37,10 @@
 
       .icon.icon-filter {
         @include icon(20px);
+        @include margin-right(5px);
 
         position: relative;
         top: -1px;
-        margin-right: 5px;
         background-image: url('../../assets/images/feather/filter.svg');
       }
     }
@@ -53,10 +53,8 @@
   max-width: 800px;
 }
 
-.video-channel {
-  img {
-    @include build-channel-img-size($video-thumbnail-width);
-  }
+.video-channel my-actor-avatar {
+  @include build-channel-img-size($video-thumbnail-width);
 }
 
 .video-channel-info {
@@ -80,9 +78,10 @@
 }
 
 .video-channel-name {
+  @include margin-left(5px);
+
   font-size: $video-miniature-row-info-font-size;
   color: pvar(--greyForegroundColor);
-  margin-left: 5px;
 }
 
 // Use the same breakpoints than in video-miniature
@@ -92,14 +91,12 @@
     grid-template-columns: auto 1fr;
     grid-template-rows: auto auto;
 
-    .link-avatar {
+    my-actor-avatar {
+      @include build-channel-img-size($video-thumbnail-medium-width);
+
       grid-column: 1;
       grid-row: 1 / -1;
     }
-
-    img {
-      @include build-channel-img-size($video-thumbnail-medium-width);
-    }
   }
 
   .video-channel-info {
@@ -115,7 +112,7 @@
 }
 
 @include on-mobile-main-col {
-  .video-channel img {
+  .video-channel my-actor-avatar {
     @include build-channel-img-size($video-thumbnail-small-width);
   }
 }