From 47071627c593253e61512144208caf9727ddaea9 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Thu, 19 Sep 2024 16:01:37 +0200
Subject: [PATCH] Disabled state simplification

---
 .../comment/video-comment-add.component.html  |  2 +-
 .../video-share.component.html                |  2 +-
 client/src/sass/include/_mixins.scss          | 29 +++++--------------
 3 files changed, 9 insertions(+), 24 deletions(-)

diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.html b/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.html
index c2847562a..1021c5e41 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.html
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.html
@@ -50,7 +50,7 @@
       Cancel
     </button>
 
-    <button *ngIf="isAddButtonDisplayed()" class="peertube-button orange-button" [ngClass]="{ disabled: !form.valid || addingComment }">
+    <button *ngIf="isAddButtonDisplayed()" class="peertube-button orange-button" [disabled]="!form.valid || addingComment">
       {{ addingCommentButtonValue }}
     </button>
   </div>
diff --git a/client/src/app/shared/shared-share-modal/video-share.component.html b/client/src/app/shared/shared-share-modal/video-share.component.html
index 61cf0146d..cb4f207d8 100644
--- a/client/src/app/shared/shared-share-modal/video-share.component.html
+++ b/client/src/app/shared/shared-share-modal/video-share.component.html
@@ -186,7 +186,7 @@
             i18n-labelText labelText="Auto select subtitle"
           ></my-peertube-checkbox>
 
-          <div class="peertube-select-container" [ngClass]="{ disabled: !customizations.subtitleCheckbox }">
+          <div class="peertube-select-container">
             <select [(ngModel)]="customizations.subtitle" [disabled]="!customizations.subtitleCheckbox" class="form-control">
               <option *ngFor="let caption of videoCaptions" [value]="caption.language.id">{{ caption.language.label }}</option>
             </select>
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 08a4dab1a..ae68faf58 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -134,8 +134,7 @@
     background-color: pvar(--mainHoverColor);
   }
 
-  &[disabled],
-  &.disabled {
+  &[disabled] {
     cursor: default;
     color: #fff;
     background-color: pvar(--inputBorderColor);
@@ -165,8 +164,7 @@
     background-color: pvar(--mainColorLightest);
   }
 
-  &[disabled],
-  &.disabled {
+  &[disabled] {
     cursor: default;
     color: pvar(--mainColor);
     background-color: pvar(--inputBorderColor);
@@ -183,8 +181,7 @@
 
   @include button-focus($grey-button-outline-color);
 
-  &[disabled],
-  .disabled {
+  &[disabled] {
     cursor: default;
   }
 
@@ -202,14 +199,12 @@
   &:hover,
   &:active,
   &:focus,
-  &[disabled],
-  &.disabled {
+  &[disabled] {
     color: pvar(--greyForegroundColor);
     background-color: pvar(--greySecondaryBackgroundColor);
   }
 
-  &[disabled],
-  &.disabled {
+  &[disabled] {
     cursor: default;
   }
 
@@ -230,13 +225,11 @@
   &:hover,
   &:active,
   &:focus,
-  &[disabled],
-  &.disabled {
+  &[disabled] {
     background-color: color.adjust($color: $color, $lightness: 10%);
   }
 
-  &[disabled],
-  &.disabled {
+  &[disabled] {
     cursor: default;
   }
 
@@ -369,14 +362,6 @@
   position: relative;
   height: min-content;
 
-  &.disabled {
-    background-color: #E5E5E5;
-
-    select {
-      cursor: default;
-    }
-  }
-
   select[disabled] {
     background-color: #f9f9f9;
   }