From be42ccb3f5a6f5400d6d983bf5a040a44fbc1ec9 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Wed, 23 Oct 2024 10:47:41 +0200
Subject: [PATCH] Fix "subscribe to all channels" button ui

---
 .../subscribe-button.component.html           | 35 ++++++++++---------
 .../subscribe-button.component.scss           | 34 ++----------------
 .../_custom-bootstrap-helpers.scss            |  4 +++
 3 files changed, 26 insertions(+), 47 deletions(-)

diff --git a/client/src/app/shared/shared-user-subscription/subscribe-button.component.html b/client/src/app/shared/shared-user-subscription/subscribe-button.component.html
index d1d551c18..f4abb3ff1 100644
--- a/client/src/app/shared/shared-user-subscription/subscribe-button.component.html
+++ b/client/src/app/shared/shared-user-subscription/subscribe-button.component.html
@@ -4,16 +4,17 @@
 >
 
   <ng-template #userLoggedOut>
-    <span [ngClass]="{ 'extra-text': isAtLeastOneChannelSubscribed }">
-      <ng-container i18n *ngIf="isSingleSubscribe">Subscribe</ng-container>
+    <div [ngClass]="{ 'extra-text': isAtLeastOneChannelSubscribed }">
+      @if (isSingleSubscribe) {
+        <ng-container i18n>Subscribe</ng-container>
+      } @else {
+        <div i18n>Subscribe to all channels</div>
 
-      <ng-container *ngIf="!isSingleSubscribe">
-        <span i18n>Subscribe to all channels</span>
-        <span *ngIf="isAtLeastOneChannelSubscribed">{{ subscribeStatus(true).length }}/{{ subscribed.size }}
-          <ng-container i18n>channels subscribed</ng-container>
-        </span>
-      </ng-container>
-    </span>
+        <div class="mt-1 fs-8" *ngIf="isAtLeastOneChannelSubscribed" i18n>
+          {{ subscribeStatus(true).length }}/{{ subscribed.size }} channels subscribed
+        </div>
+      }
+    </div>
 
     <span *ngIf="!isBigButton && displayFollowers && videoChannels.length > 1 && videoChannel.followersCount !== 0" class="followers-count">
       {{ videoChannels[0].followersCount | myNumberFormatter }}
@@ -21,13 +22,15 @@
   </ng-template>
 
   <ng-template #userLoggedIn>
-    <button *ngIf="!isAllChannelsSubscribed" type="button" class="btn" (click)="subscribe()">
-      <ng-template [ngTemplateOutlet]="userLoggedOut"></ng-template>
-    </button>
-
-    <button *ngIf="isAllChannelsSubscribed" type="button" class="btn" role="button" (click)="unsubscribe()">
-      <ng-container i18n>{account + "", select, undefined {Unsubscribe} other {Unsubscribe from all channels}}</ng-container>
-    </button>
+    @if (isAllChannelsSubscribed) {
+      <button type="button" class="btn" role="button" (click)="unsubscribe()">
+        <ng-container i18n>{account + "", select, undefined {Unsubscribe} other {Unsubscribe from all channels}}</ng-container>
+      </button>
+    } @else {
+      <button type="button" class="btn" (click)="subscribe()">
+        <ng-template [ngTemplateOutlet]="userLoggedOut"></ng-template>
+      </button>
+    }
   </ng-template>
 
   <ng-container
diff --git a/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss b/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss
index 73dcdb26f..55a9b2f7b 100644
--- a/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss
+++ b/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss
@@ -15,23 +15,9 @@
     white-space: nowrap;
   }
 
-  &.big {
-    height: 35px;
-
-    > button:first-child {
-      width: max-content;
-      min-width: 175px;
-    }
-
-    button .extra-text {
-      span:first-child {
-        line-height: 80%;
-      }
-
-      span:not(:first-child) {
-        font-size: 75%;
-      }
-    }
+  &.big > button:first-child {
+    width: max-content;
+    min-width: 175px;
   }
 
   // Unlogged
@@ -104,17 +90,3 @@
     @include peertube-input-text(100%);
   }
 }
-
-.extra-text {
-  display: flex;
-  flex-direction: column;
-
-  span:first-child {
-    line-height: 75%;
-  }
-
-  span:not(:first-child) {
-    font-size: 60%;
-    text-align: start;
-  }
-}
diff --git a/client/src/sass/class-helpers/_custom-bootstrap-helpers.scss b/client/src/sass/class-helpers/_custom-bootstrap-helpers.scss
index 8a5fa815f..c4f228587 100644
--- a/client/src/sass/class-helpers/_custom-bootstrap-helpers.scss
+++ b/client/src/sass/class-helpers/_custom-bootstrap-helpers.scss
@@ -11,6 +11,10 @@
   @include font-size(14px);
 }
 
+.fs-8 {
+  @include font-size(12px);
+}
+
 // Handle dynamically RTL layouts
 
 .text-start {