Replace glyphicon chevron

16 files changed, 57 insertions, 48 deletions

diff --git a/client/src/app/+admin/follows/followers-list/followers-list.component.html b/client/src/app/+admin/follows/followers-list/followers-list.component.html
index 38def2fbb..a7d95e4a4 100644
--- a/client/src/app/+admin/follows/followers-list/followers-list.component.html
+++ b/client/src/app/+admin/follows/followers-list/followers-list.component.html
@@ -41,7 +41,7 @@
       <td>
         <a [href]="follow.follower.url" i18n-title title="Open actor page in a new tab" target="_blank" rel="noopener noreferrer">
           {{ follow.follower.name + '@' + follow.follower.host }}
-          <span class="glyphicon glyphicon-new-window"></span>
+          <my-global-icon iconName="external-link"></my-global-icon>
         </a>
       </td>
 
diff --git a/client/src/app/+admin/follows/following-list/following-list.component.html b/client/src/app/+admin/follows/following-list/following-list.component.html
index 207ca81a4..106e1805e 100644
--- a/client/src/app/+admin/follows/following-list/following-list.component.html
+++ b/client/src/app/+admin/follows/following-list/following-list.component.html
@@ -43,7 +43,7 @@
       <td>
         <a [href]="follow.following.url" i18n-title title="Open instance in a new tab" target="_blank" rel="noopener noreferrer">
           {{ follow.following.name + '@' + follow.following.host }}
-          <span class="glyphicon glyphicon-new-window"></span>
+          <my-global-icon iconName="external-link"></my-global-icon>
         </a>
       </td>
 
diff --git a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html
index f13a0c378..12b07da11 100644
--- a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html
+++ b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html
@@ -46,7 +46,7 @@
       <td>
         <a [href]="redundancy.url" i18n-title title="Open video in a new tab" target="_blank" rel="noopener noreferrer">
           {{ redundancy.name }}
-          <span class="glyphicon glyphicon-new-window"></span>
+          <my-global-icon iconName="external-link"></my-global-icon>
         </a>
       </td>
 
diff --git a/client/src/app/+my-library/my-follows/my-followers.component.html b/client/src/app/+my-library/my-follows/my-followers.component.html
index 2827f8c41..6f4d1a9b7 100644
--- a/client/src/app/+my-library/my-follows/my-followers.component.html
+++ b/client/src/app/+my-library/my-follows/my-followers.component.html
@@ -19,7 +19,7 @@
     <div class="actor-info">
       <a [href]="follow.follower.url" class="actor-names" rel="noopener noreferrer" target="_blank" i18n-title title="Follower page">
         <div class="actor-display-name">{{ follow.follower.name + '@' + follow.follower.host }}</div>
-        <span class="glyphicon glyphicon-new-window"></span>
+        <my-global-icon iconName="external-link"></my-global-icon>
       </a>
 
       <div class="muted">
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;
-    }
   }
 }
 
diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index 2961daaa3..3f00cac04 100644
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@@ -16,7 +16,7 @@
               </div>
 
               <div class="dropdown-toggle-indicator">
-                <span class="glyphicon glyphicon-chevron-down"></span>
+                <span class="chevron-down"></span>
               </div>
             </div>
 
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 808a33a4a..c52af6c80 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -106,6 +106,7 @@ my-notification {
 }
 
 .logged-in-more {
+
   @mixin display-hints($is-mobile: false) {
     background-color: rgba(255, 255, 255, 0.15);
 
@@ -114,18 +115,16 @@ my-notification {
         display: inherit !important;
       }
 
-      .dropdown-toggle {
+      > .dropdown-toggle {
         max-width: 88% !important;
       }
     }
   }
 
-  $main-radius: 25px;
-
   @include margin-left(13px);
 
   flex: 1;
-  border-radius: $main-radius;
+  border-radius: 25px;
   transition: all .1s ease-in-out;
   cursor: pointer;
   line-height: 1;
@@ -157,7 +156,6 @@ my-notification {
 
   .dropdown-toggle-indicator {
     position: relative;
-    width: 0;
     display: none;
 
     span {
@@ -165,21 +163,17 @@ my-notification {
       right: -35px;
       top: -8px;
       color: #808080;
-      width: $main-radius;
     }
   }
 
-  .dropdown-toggle {
-    &::after {
-      border: 0;
-    }
+  .dropdown-toggle::after {
+    border: 0;
   }
 
-  .dropdown-toggle:first-child {
+  > .dropdown-toggle:first-child {
     display: flex;
     align-items: center;
     padding: 5px 7px;
-    border-radius: $main-radius;
   }
 }
 
@@ -396,13 +390,6 @@ my-actor-avatar {
   .dropdown-menu {
     width: calc(100vw - 30px);
   }
-
-  .dropdown-item:hover,
-  .dropdown-item:active {
-    &.settings-sensitive my-global-icon ::ng-deep svg {
-      margin-top: 0 !important;
-    }
-  }
 }
 
 my-global-icon {
diff --git a/client/src/app/shared/shared-icons/global-icon.component.ts b/client/src/app/shared/shared-icons/global-icon.component.ts
index 3a0d57691..43c407743 100644
--- a/client/src/app/shared/shared-icons/global-icon.component.ts
+++ b/client/src/app/shared/shared-icons/global-icon.component.ts
@@ -63,6 +63,7 @@ const icons = {
   'exit-fullscreen': require('!!raw-loader?!../../../assets/images/feather/minimize.svg').default,
   film: require('!!raw-loader?!../../../assets/images/feather/film.svg').default,
   edit: require('!!raw-loader?!../../../assets/images/feather/edit-2.svg').default,
+  'external-link': require('!!raw-loader?!../../../assets/images/feather/external-link.svg').default,
   sensitive: require('!!raw-loader?!../../../assets/images/feather/eye.svg').default,
   unsensitive: require('!!raw-loader?!../../../assets/images/feather/eye-off.svg').default,
   refresh: require('!!raw-loader?!../../../assets/images/feather/refresh-cw.svg').default,
diff --git a/client/src/app/shared/shared-main/misc/list-overflow.component.html b/client/src/app/shared/shared-main/misc/list-overflow.component.html
index ea22a3445..6f29eaefa 100644
--- a/client/src/app/shared/shared-main/misc/list-overflow.component.html
+++ b/client/src/app/shared/shared-main/misc/list-overflow.component.html
@@ -5,7 +5,7 @@
 
   <ng-container *ngIf="isMenuDisplayed()">
     <button *ngIf="isInMobileView" class="btn btn-outline-secondary btn-sm list-overflow-menu" (click)="toggleModal()">
-      <span class="glyphicon glyphicon-chevron-down"></span>
+      <span class="chevron-down"></span>
     </button>
 
     <div
@@ -16,7 +16,7 @@
       <button class="btn btn-outline-secondary btn-sm" [ngClass]="{ 'route-active': active }"
         ngbDropdownAnchor (click)="dropdownAnchorClicked(dropdown)" role="button"
       >
-        <span class="glyphicon glyphicon-chevron-down"></span>
+        <span class="chevron-down"></span>
       </button>
 
       <div ngbDropdownMenu>
diff --git a/client/src/app/shared/shared-moderation/server-blocklist.component.html b/client/src/app/shared/shared-moderation/server-blocklist.component.html
index ba4336e2e..cabf0e9dd 100644
--- a/client/src/app/shared/shared-moderation/server-blocklist.component.html
+++ b/client/src/app/shared/shared-moderation/server-blocklist.component.html
@@ -41,7 +41,7 @@
       <td>
         <a [href]="'https://' + serverBlock.blockedServer.host" i18n-title title="Open instance in a new tab" target="_blank" rel="noopener noreferrer">
           {{ serverBlock.blockedServer.host }}
-          <span class="glyphicon glyphicon-new-window"></span>
+          <my-global-icon iconName="external-link"></my-global-icon>
         </a>
       </td>
       <td>{{ serverBlock.createdAt | date: 'short' }}</td>
diff --git a/client/src/assets/images/feather/external-link.svg b/client/src/assets/images/feather/external-link.svg
new file mode 100644
index 000000000..6236df3e0
--- /dev/null
+++ b/client/src/assets/images/feather/external-link.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
\ No newline at end of file
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index d288d2a21..2ad1af23a 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -308,6 +308,25 @@ table {
   }
 }
 
+my-global-icon[iconName=external-link] {
+  margin: 0 3px;
+  width: 13px;
+  vertical-align: text-bottom;
+  color: pvar(--inputPlaceholderColor);
+}
+
+.chevron-down {
+  @include chevron-down(0.55rem, 0.20em);
+
+  margin: 0 5px;
+}
+
+.chevron-up {
+  @include chevron-up(0.55rem, 0.20em);
+
+  margin: 0 5px;
+}
+
 /* offsetTop for scrollToAnchor */
 
 .anchor {
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index e18173130..da216b00f 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -570,6 +570,7 @@
   transform: rotate(-45deg);
   height: $size;
   width: $size;
+  position: relative;
 }
 
 @mixin chevron-right ($size, $border-width) {
@@ -579,6 +580,20 @@
   transform: rotate(45deg);
 }
 
+@mixin chevron-down ($size, $border-width) {
+  @include chevron($size, $border-width);
+
+  bottom: 0.15em;
+  transform: rotate(135deg);
+}
+
+@mixin chevron-up ($size, $border-width) {
+  @include chevron($size, $border-width);
+
+  top: 0.15em;
+  transform: rotate(-45deg);
+}
+
 @mixin chevron-left ($size, $border-width) {
   @include chevron($size, $border-width);