Replace glyphicon chevron

4 files changed, 7 insertions, 21 deletions

diff --git a/client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.html b/client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.html
index 10ff46595..52ad1999d 100644
--- a/client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.html
+++ b/client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.html
@@ -11,9 +11,11 @@
   >{{ video.originInstanceHost }}</a>
 
   <a
-    i18n-title title="Open the video on the origin instance" class="glyphicon glyphicon-new-window"
+    i18n-title title="Open the video on the origin instance"
     target="_blank" rel="noopener noreferrer" [href]="video.url"
-  ></a>
+  >
+    <my-global-icon iconName="external-link"></my-global-icon>
+  </a>
 </div>
 
 <div *ngIf="!!video.originallyPublishedAt" class="attribute attribute-originally-published-at">
diff --git a/client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.scss b/client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.scss
index 26bead124..1470a9f6d 100644
--- a/client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.scss
@@ -33,12 +33,6 @@ a.attribute-value {
   }
 }
 
-.glyphicon-new-window {
-  color: pvar(--inputPlaceholderColor);
-  margin-left: 5px;
-  font-size: 12px;
-}
-
 @media screen and (max-width: 1600px) {
   .attributes .attribute {
     margin-bottom: 5px;
diff --git a/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.html b/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.html
index 835d0e89f..fa4dbb3ca 100644
--- a/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.html
+++ b/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.html
@@ -8,12 +8,12 @@
 
   <div class="video-info-description-more" *ngIf="completeDescriptionShown === false && video.description?.length >= 250" (click)="showMoreDescription()">
     <ng-container i18n>Show more</ng-container>
-    <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-down"></span>
+    <span *ngIf="descriptionLoading === false" class="chevron-down"></span>
     <my-loader size="sm" class="description-loading" [loading]="descriptionLoading"></my-loader>
   </div>
 
   <div *ngIf="completeDescriptionShown === true" (click)="showLessDescription()" class="video-info-description-more">
     <ng-container i18n>Show less</ng-container>
-    <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-up"></span>
+    <span *ngIf="descriptionLoading === false" class="chevron-up"></span>
   </div>
 </div>
diff --git a/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.scss b/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.scss
index fc8b4574c..147bc4d7f 100644
--- a/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.scss
@@ -17,13 +17,8 @@
     }
   }
 
-  .glyphicon,
   .description-loading {
-    @include margin-left(3px);
-  }
-
-  .description-loading {
-    display: inline-block;
+    @include margin-left(5px);
   }
 
   .video-info-description-more {
@@ -31,11 +26,6 @@
     font-weight: $font-semibold;
     color: pvar(--greyForegroundColor);
     font-size: 14px;
-
-    .glyphicon {
-      position: relative;
-      top: 2px;
-    }
   }
 }