1 files changed, 60 insertions, 66 deletions

diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index ef117ae34..f5d7c7b00 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -1,5 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
+@use '_icons' as *;
 
 /* stylelint-disable */
 @import '~primeng/resources/primeng.css';
@@ -495,14 +496,9 @@ body p-selectbutton.ng-dirty.ng-invalid .p-button {
   border: 1px solid #a80000;
 }
 
-// data table customizations
-
-@mixin glyphicon-light {
-  font-family: 'Glyphicons Halflings';
-  text-decoration: none !important;
-  color: pvar(--mainForegroundColor) !important;
-  font-display: swap;
-}
+// ---------------------------------------------------------------------------
+// PeerTube customizations
+// ---------------------------------------------------------------------------
 
 p-table {
   .p-datatable-header {
@@ -618,24 +614,20 @@ p-table {
     &.p-highlight {
       background-color: pvar(--submenuBackgroundColor) !important;
 
-      .pi {
-        @extend .glyphicon !optional;
-
-        color: #000 !important;
-        font-size: 11px !important;
-        top: 0 !important;
-
-        &.pi-sort-amount-up-alt {
-          @extend .glyphicon-triangle-top !optional;
-
-          color: pvar(--mainForegroundColor) !important;
-        }
+      .pi-sort-amount-up-alt,
+      .pi-sort-amount-down {
+        display: inline-block;
+        position: relative;
+        top: -1px;
+        color: pvar(--mainForegroundColor) !important;
+      }
 
-        &.pi-sort-amount-down {
-          @extend .glyphicon-triangle-bottom !optional;
+      .pi-sort-amount-up-alt {
+        @include arrow-up(5px);
+      }
 
-          color: pvar(--mainForegroundColor) !important;
-        }
+      .pi-sort-amount-down {
+        @include arrow-down(5px);
       }
     }
   }
@@ -693,12 +685,10 @@ p-table {
       .p-paginator-prev,
       .p-paginator-next,
       .p-paginator-last {
-        @include glyphicon-light;
         padding: 5px 2px;
-        height: auto;
+        height: 100%;
         outline: none;
-        font-size: 13px;
-        top: -1px;
+        color: pvar(--mainForegroundColor);
 
         &.focus-within,
         &:focus {
@@ -710,23 +700,37 @@ p-table {
         }
 
         &.p-paginator-first {
-          @extend .glyphicon-step-backward !optional;
+          .p-paginator-icon {
+            width: 18px;
+            height: 18px;
+            background: url('../assets/images/feather/skip-back.svg') no-repeat;
+            background-size: contain;
+          }
         }
 
         &.p-paginator-prev {
-          @extend .glyphicon-chevron-left !optional;
+          .p-paginator-icon {
+            @extend .chevron-left !optional;
+          }
 
           @include margin-right(10px);
         }
 
         &.p-paginator-next {
-          @extend .glyphicon-chevron-right !optional;
+          .p-paginator-icon {
+            @extend .chevron-right !optional;
+          }
 
           @include margin-left(10px);
         }
 
         &.p-paginator-last {
-          @extend .glyphicon-step-forward !optional;
+          .p-paginator-icon {
+            width: 18px;
+            height: 18px;
+            background: url('../assets/images/feather/skip-forward.svg') no-repeat;
+            background-size: contain;
+          }
         }
       }
 
@@ -810,8 +814,7 @@ p-calendar .p-datepicker {
     }
 
     .p-datepicker-next {
-      @extend .glyphicon-chevron-right !optional;
-      @include glyphicon-light;
+      @extend .chevron-right !optional;
 
       color: #000 !important;
       text-align: end;
@@ -822,8 +825,7 @@ p-calendar .p-datepicker {
     }
 
     .p-datepicker-prev {
-      @extend .glyphicon-chevron-left !optional;
-      @include glyphicon-light;
+      @extend .chevron-left !optional;
 
       color: #000 !important;
       text-align: start;
@@ -837,15 +839,13 @@ p-calendar .p-datepicker {
   .p-timepicker {
 
     .pi.pi-chevron-up {
-      @extend .glyphicon-chevron-up !optional;
-      @include glyphicon-light;
+      @extend .chevron-up !optional;
 
       color: #000 !important;
     }
 
     .pi.pi-chevron-down {
-      @extend .glyphicon-chevron-down !optional;
-      @include glyphicon-light;
+      @extend .chevron-down !optional;
 
       color: #000 !important;
     }
@@ -901,15 +901,14 @@ p-toast {
     min-width: 200px;
 
     .p-toast-icon-close {
-      font-family: "Glyphicons Halflings";
       opacity: 0;
       position: absolute;
       right: 5px;
       top: 5px;
-
-      &:after {
-        content: "\e014";
-      }
+      width: 18px;
+      height: 18px;
+      background: url('../assets/images/feather/x.svg') no-repeat;
+      background-size: contain;
     }
 
     &:hover .p-toast-icon-close {
@@ -927,22 +926,6 @@ p-toast {
     box-shadow: 0 2px 12px 0 rgba(0, 0 , 0, .1);
     overflow: hidden;
 
-    &.p-toast-message-success my-global-icon {
-      color: #8BC34A !important;
-    }
-
-    &.p-toast-message-error my-global-icon {
-      color: #F44336 !important;
-    }
-
-    &.p-toast-message-warn my-global-icon {
-      color: #F1680D !important;
-    }
-
-    &.p-toast-message-info my-global-icon {
-      color: #03A9F4 !important;
-    }
-
     .notification-block {
       display: flex;
       align-items: center;
@@ -962,13 +945,24 @@ p-toast {
           margin-bottom: 0;
         }
       }
-
-      .glyphicon {
-        font-size: 32px;
-        @include margin-right(5px);
-      }
     }
   }
+
+  .p-toast-message-success my-global-icon {
+    color: #8BC34A !important;
+  }
+
+  .p-toast-message-error my-global-icon {
+    color: #F44336 !important;
+  }
+
+  .p-toast-message-warn my-global-icon {
+    color: #F1680D !important;
+  }
+
+  .p-toast-message-info my-global-icon {
+    color: #03A9F4 !important;
+  }
 }
 
 .p-selectbutton {