Replace all glyphicon icons

6 files changed, 136 insertions, 118 deletions

diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 2ad1af23a..2aa743cf1 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -1,19 +1,15 @@
-$icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
-
 @use 'sass:math';
 
 @use '_variables' as *;
 @use '_mixins' as *;
+@use '_icons' as *;
 
 @use '_fonts';
 
 @use './classes';
-
 @use './custom-markup';
-
 @use './ng-select';
 
-// Needs an import because we extends glyphicon icons in primeng
 @import './bootstrap';
 @import './primeng-custom';
 
@@ -316,15 +312,27 @@ my-global-icon[iconName=external-link] {
 }
 
 .chevron-down {
-  @include chevron-down(0.55rem, 0.20em);
+  @include chevron-down(0.55rem, 0.15rem);
 
-  margin: 0 5px;
+  margin: 0 8px;
 }
 
 .chevron-up {
-  @include chevron-up(0.55rem, 0.20em);
+  @include chevron-up(0.55rem, 0.15rem);
+
+  margin: 0 8px;
+}
+
+.chevron-right {
+  @include chevron-right(0.55rem, 0.15rem);
+
+  margin: 0 8px;
+}
+
+.chevron-left {
+  @include chevron-left(0.55rem, 0.15rem);
 
-  margin: 0 5px;
+  margin: 0 8px;
 }
 
 /* offsetTop for scrollToAnchor */
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 03b2e8b15..4d2fcf5b3 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -1,5 +1,3 @@
-$icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
-
 @use '_variables' as *;
 @use '_mixins' as *;
 
@@ -31,8 +29,6 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
 @import '~bootstrap/scss/helpers';
 @import '~bootstrap/scss/utilities/api';
 
-@import '~@neos21/bootstrap3-glyphicons/assets/stylesheets/bootstrap3-glyphicons';
-
 .flex-auto {
   flex: auto;
 }
diff --git a/client/src/sass/include/_icons.scss b/client/src/sass/include/_icons.scss
new file mode 100644
index 000000000..5d8a312db
--- /dev/null
+++ b/client/src/sass/include/_icons.scss
@@ -0,0 +1,58 @@
+@use '_variables' as *;
+
+@mixin chevron ($size, $border-width) {
+  border-style: solid;
+  border-width: $border-width $border-width 0 0;
+  content: '';
+  display: inline-block;
+  transform: rotate(-45deg);
+  height: $size;
+  width: $size;
+  position: relative;
+}
+
+@mixin chevron-right ($size, $border-width) {
+  @include chevron($size, $border-width);
+
+  left: 0;
+  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);
+
+  left: 0.25em;
+  transform: rotate(-135deg);
+}
+
+// ---------------------------------------------------------------------------
+
+@mixin arrow-up ($size) {
+  width: 0;
+  height: 0;
+  border-left: $size solid transparent;
+  border-right: $size solid transparent;
+  border-bottom: $size solid pvar(--mainForegroundColor);
+}
+
+@mixin arrow-down ($size) {
+  width: 0;
+  height: 0;
+  border-left: $size solid transparent;
+  border-right: $size solid transparent;
+  border-top: $size solid pvar(--mainForegroundColor);
+}
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index da216b00f..22c3b2a2f 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -562,45 +562,6 @@
   }
 }
 
-@mixin chevron ($size, $border-width) {
-  border-style: solid;
-  border-width: $border-width $border-width 0 0;
-  content: '';
-  display: inline-block;
-  transform: rotate(-45deg);
-  height: $size;
-  width: $size;
-  position: relative;
-}
-
-@mixin chevron-right ($size, $border-width) {
-  @include chevron($size, $border-width);
-
-  left: 0;
-  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);
-
-  left: 0.25em;
-  transform: rotate(-135deg);
-}
-
 @mixin in-content-small-title {
   text-transform: uppercase;
   color: pvar(--mainColor);
diff --git a/client/src/sass/player/settings-menu.scss b/client/src/sass/player/settings-menu.scss
index 8aa2c2ac3..d2346c126 100644
--- a/client/src/sass/player/settings-menu.scss
+++ b/client/src/sass/player/settings-menu.scss
@@ -1,5 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
+@use '_icons' as *;
 @use './_player-variables' as *;
 
 $setting-transition-duration: 0.15s;
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 {