5 files changed, 30 insertions, 41 deletions

diff --git a/client/src/app/menu/language-chooser.component.scss b/client/src/app/menu/language-chooser.component.scss
index 04b18af33..28d58a678 100644
--- a/client/src/app/menu/language-chooser.component.scss
+++ b/client/src/app/menu/language-chooser.component.scss
@@ -18,7 +18,6 @@
 
   a {
     display: block;
-    font-size: 16px;
     margin: 15px;
   }
 }
diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index b8f8d68ab..66ccb9870 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>
 
@@ -36,31 +36,31 @@
               >
                 <my-global-icon iconName="language" aria-hidden="true"></my-global-icon>
                 <span i18n>Interface:</span>
-                <span class="ml-auto muted">{{ currentInterfaceLanguage }}</span>
+                <span class="ms-auto muted">{{ currentInterfaceLanguage }}</span>
               </a>
 
               <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account/settings" fragment="video-languages-subtitles"
                 #settingsLanguagesSubtitles (click)="onActiveLinkScrollToAnchor(settingsLanguagesSubtitles)">
                 <my-global-icon iconName="video-lang" aria-hidden="true"></my-global-icon>
                 <span i18n>Videos:</span>
-                <span class="ml-auto muted">{{ videoLanguages.join(', ') }}</span>
+                <span class="ms-auto muted">{{ videoLanguages.join(', ') }}</span>
               </a>
 
               <a ngbDropdownItem ngbDropdownToggle class="dropdown-item settings-sensitive" routerLink="/my-account/settings"
                 fragment="video-sensitive-content-policy" #settingsSensitiveContentPolicy
                 (click)="onActiveLinkScrollToAnchor(settingsSensitiveContentPolicy)"
               >
-                <my-global-icon class="hover-display-toggle" [hidden]="user.nsfwPolicy === 'display'" iconName="sensitive" aria-hidden="true"></my-global-icon>
-                <my-global-icon class="hover-display-toggle" [hidden]="user.nsfwPolicy !== 'display'" iconName="unsensitive" aria-hidden="true"></my-global-icon>
+                <my-global-icon class="hover-display-toggle" [hidden]="user.nsfwPolicy === 'display'" iconName="eye-open" aria-hidden="true"></my-global-icon>
+                <my-global-icon class="hover-display-toggle" [hidden]="user.nsfwPolicy !== 'display'" iconName="eye-close" aria-hidden="true"></my-global-icon>
                 <span i18n>Sensitive:</span>
-                <span class="ml-auto muted">{{ nsfwPolicy }}</span>
+                <span class="ms-auto muted">{{ nsfwPolicy }}</span>
               </a>
 
               <a ngbDropdownItem class="dropdown-item" (click)="toggleUseP2P()">
                 <my-global-icon iconName="p2p" aria-hidden="true"></my-global-icon>
                 <ng-container i18n>Help share videos</ng-container>
 
-                <my-input-switch class="ml-auto" [checked]="user.p2pEnabled"></my-input-switch>
+                <my-input-switch class="ms-auto" [checked]="user.p2pEnabled"></my-input-switch>
               </a>
 
               <div class="dropdown-divider"></div>
@@ -149,7 +149,7 @@
 
         <div class="footer-copyleft">
           <small class="d-inline" i18n-title title="powered by PeerTube - CopyLeft 2015-2022">
-            <a href="https://joinpeertube.org" class="mr-1" target="_blank" rel="noopener noreferrer" i18n>powered by PeerTube</a>
+            <a href="https://joinpeertube.org" class="me-1" target="_blank" rel="noopener noreferrer" i18n>powered by PeerTube</a>
 
             <a href="https://github.com/Chocobozzz/PeerTube/blob/develop/LICENSE" target="_blank" rel="noopener noreferrer">
               <span aria-label="copyleft" class="d-inline-block" style="transform: rotateY(180deg)">&copy;</span> 2015-2022
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 808a33a4a..a548c08cf 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -16,7 +16,6 @@ $footer-links-base-opacity: .8;
 
   color: pvar(--menuForegroundColor);
   cursor: pointer;
-  font-size: 16px;
   white-space: normal;
   word-break: break-word;
   transition: background-color .1s ease-in-out;
@@ -106,6 +105,7 @@ my-notification {
 }
 
 .logged-in-more {
+
   @mixin display-hints($is-mobile: false) {
     background-color: rgba(255, 255, 255, 0.15);
 
@@ -114,18 +114,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 +155,6 @@ my-notification {
 
   .dropdown-toggle-indicator {
     position: relative;
-    width: 0;
     display: none;
 
     span {
@@ -165,21 +162,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;
   }
 }
 
@@ -201,7 +194,6 @@ my-actor-avatar {
 .logged-in-display-name {
   @include disable-default-a-behaviour;
 
-  font-size: 16px;
   font-weight: $font-semibold;
   color: pvar(--menuForegroundColor);
 }
@@ -325,7 +317,7 @@ my-actor-avatar {
     color: pvar(--menuForegroundColor);
     opacity: $footer-links-base-opacity;
     white-space: nowrap;
-    font-size: 90%;
+    font-size: 0.75rem;
     font-weight: 500;
     line-height: 1.4rem;
   }
@@ -358,10 +350,6 @@ my-actor-avatar {
   display: flex;
   align-items: center;
 
-  i.glyphicon-menu-right {
-    opacity: .4;
-  }
-
   &:hover {
     .hover-display-toggle {
       display: none;
@@ -396,13 +384,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/menu/notification.component.html b/client/src/app/menu/notification.component.html
index beda1c43c..890b086f1 100644
--- a/client/src/app/menu/notification.component.html
+++ b/client/src/app/menu/notification.component.html
@@ -24,19 +24,24 @@
       <div>
         <button
           *ngIf="unreadNotifications"
-          i18n-title title="Mark all as read" class="glyphicon glyphicon-ok mr-2"
+          i18n-title title="Mark all as read" class="me-2"
           (click)="markAllAsRead()"
-        ></button>
+        >
+          <my-global-icon iconName="tick"></my-global-icon>
+        </button>
+
         <a
-          i18n-title title="Update your notification preferences" class="glyphicon glyphicon-cog"
+          i18n-title title="Update your notification preferences"
           routerLink="/my-account/settings" fragment="notifications"
           #settingsNotifications (click)="onNavigate(settingsNotifications)"
-        ></a>
+        >
+          <my-global-icon iconName="cog"></my-global-icon>
+        </a>
       </div>
     </div>
 
     <div *ngIf="!loaded" class="loader mt-4">
-      <my-loader [loading]="!loaded"></my-loader>
+      <my-loader size="xl" [loading]="!loaded"></my-loader>
     </div>
 
     <my-user-notifications
@@ -45,7 +50,7 @@
     ></my-user-notifications>
 
     <a *ngIf="loaded" class="all-notifications" routerLink="/my-account/notifications" #notifications (click)="onNavigate(notifications)">
-      <my-global-icon class="mr-1" iconName="bell" aria-hidden="true"></my-global-icon>
+      <my-global-icon class="me-1" iconName="bell" aria-hidden="true"></my-global-icon>
       <span i18n>See all your notifications</span>
     </a>
   </div>
diff --git a/client/src/app/menu/notification.component.scss b/client/src/app/menu/notification.component.scss
index 3515c3e19..7f72c98d1 100644
--- a/client/src/app/menu/notification.component.scss
+++ b/client/src/app/menu/notification.component.scss
@@ -119,6 +119,10 @@
             color: rgba(20, 20, 20, 0.8);
           }
         }
+
+        my-global-icon {
+          width: 20px;
+        }
       }
 
       .all-notifications {