Fix danger button accessibility

client/src/app/+admin/overview/users/user-edit/user-edit.component.html

@@ -225,9 +225,9 @@
   <div class="content-col">
 
     <div class="danger-zone">
-      <div class="form-group">
+    <div class="form-group">
         <div class="mb-1 fw-bold" i18n>Send a link to reset the password by email to the user</div>
-        <button class="peertube-button" (click)="resetPassword()" i18n>Ask for new password</button>
+        <button class="peertube-button danger-button" (click)="resetPassword()" i18n>Ask for new password</button>
       </div>
 
       <div class="form-group">
@@ -237,7 +237,7 @@
 
       <div *ngIf="user.twoFactorEnabled" class="form-group">
         <div class="mb-1 fw-bold" i18n>This user has two factor authentication enabled</div>
-        <button class="peertube-button" (click)="disableTwoFactorAuth()" i18n>Disable two factor authentication</button>
+        <button class="peertube-button danger-button" (click)="disableTwoFactorAuth()" i18n>Disable two factor authentication</button>
       </div>
     </div>
 

client/src/app/+admin/overview/users/user-edit/user-edit.component.scss

@@ -24,11 +24,6 @@ my-select-custom-value {
   @include responsive-width($form-base-input-width);
 }
 
-.danger-zone button {
-  @include danger-button;
-  @include disable-outline;
-}
-
 .dashboard {
   display: flex;
   flex-wrap: wrap;

client/src/app/+admin/overview/users/user-edit/user-password.component.html

@@ -16,5 +16,5 @@
     {{ formErrors.password }}
   </div>
 
-  <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
+  <input class="peertube-button danger-button mt-2" type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
 </form>

client/src/app/+admin/overview/users/user-edit/user-password.component.scss

@@ -5,11 +5,3 @@ input[type=text],
 input[type=password] {
   @include peertube-input-text(340px);
 }
-
-input[type=submit] {
-  margin-top: 10px;
-
-  @include peertube-button;
-  @include danger-button;
-  @include disable-outline;
-}

client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.html

@@ -1,5 +1,6 @@
 <div class="delete-me">
   <p i18n>Once you delete your account, there is no going back. You will be asked to confirm this action.</p>
 
-  <button (click)="deleteMe()" i18n>Delete your account</button>
+  <button class="peertube-button danger-button" (click)="deleteMe()" i18n>Delete your account</button>
 </div>
+

client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.scss

@@ -1,10 +0,0 @@
-@use '_variables' as *;
-@use '_mixins' as *;
-
-.delete-me {
-  button {
-    @include peertube-button;
-    @include danger-button;
-    @include disable-outline;
-  }
-}

client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.ts

@@ -4,7 +4,6 @@ import { AuthService, ConfirmService, Notifier, RedirectService, User, UserServi
 @Component({
   selector: 'my-account-danger-zone',
   templateUrl: './my-account-danger-zone.component.html',
-  styleUrls: [ './my-account-danger-zone.component.scss' ],
   standalone: true
 })
 export class MyAccountDangerZoneComponent {

client/src/sass/application.scss

@@ -111,8 +111,9 @@ input[readonly] {
 
 input,
 textarea {
-  outline: none;
   color: pvar(--inputForegroundColor);
+
+  @include disable-outline;
 }
 
 button {

client/src/sass/class-helpers/_buttons.scss

@@ -32,6 +32,10 @@
   @include tertiary-button;
 }
 
+.danger-button {
+  @include danger-button;
+}
+
 .peertube-radio-container {
   @include peertube-radio-container;
 }

client/src/sass/class-helpers/_layout.scss

@@ -25,7 +25,7 @@
       margin-bottom: 10px;
 
       &.pt-title-danger {
-        color: color.adjust($color: #c54130, $lightness: 10%);
+        color: pvar(--red);
       }
     }
   }

client/src/sass/include/_mixins.scss

@@ -191,8 +191,8 @@
 }
 
 @mixin grey-button {
-  background-color: pvar(--greyBackgroundColor);
   color: pvar(--greyForegroundColor);
+  background-color: pvar(--greyBackgroundColor);
 
   @include button-focus($grey-button-outline-color);
 
@@ -214,27 +214,24 @@
 }
 
 @mixin danger-button {
-  $color: color.adjust($color: #c54130, $lightness: 10%);
+  background-color: pvar(--red);
-  $text: #fff6f5;
+  color: pvar(--white);
 
-  background-color: $color;
+  @include button-focus(pvar(--red));
-  color: $text;
-
-  @include button-focus(color.scale($color, $alpha: -95%));
 
   &:hover,
   &:active,
-  &:focus,
+  &:focus:not(:focus-visible) {
-  &[disabled] {
+    opacity: 0.8;
-    background-color: color.adjust($color: $color, $lightness: 10%);
   }
 
   &[disabled] {
     cursor: default;
+    opacity: 0.7;
   }
 
   my-global-icon {
-    @include apply-svg-color($text);
+    @include apply-svg-color(pvar(--white));
   }
 }
 

client/src/sass/include/_variables.scss

@@ -31,8 +31,8 @@ $support-button-heart: #e83e8c;
 $bg-color: #fff;
 $fg-color: #212529;
 
-$red: #EE0700;
+$red: #dc3545;
-$green: #278904;
+$green: #198754;
 $white: #fff;
 
 $expanded-horizontal-margins: 150px;