-
-
+
diff --git a/client/src/app/+admin/overview/users/user-edit/user-password.component.scss b/client/src/app/+admin/overview/users/user-edit/user-password.component.scss
index 8586adb2b..ccf9cf9d0 100644
--- a/client/src/app/+admin/overview/users/user-edit/user-password.component.scss
+++ b/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;
-}
diff --git a/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.html b/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.html
index 6e22abeed..1275b713d 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.html
@@ -1,5 +1,6 @@
Once you delete your account, there is no going back. You will be asked to confirm this action.
-
+
+
diff --git a/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.scss b/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.scss
deleted file mode 100644
index f955fc607..000000000
--- a/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-@use '_variables' as *;
-@use '_mixins' as *;
-
-.delete-me {
- button {
- @include peertube-button;
- @include danger-button;
- @include disable-outline;
- }
-}
diff --git a/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.ts b/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.ts
index 7f135d01c..9541495ea 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.ts
+++ b/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 {
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 007710f7f..8ad43e2fe 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -111,8 +111,9 @@ input[readonly] {
input,
textarea {
- outline: none;
color: pvar(--inputForegroundColor);
+
+ @include disable-outline;
}
button {
diff --git a/client/src/sass/class-helpers/_buttons.scss b/client/src/sass/class-helpers/_buttons.scss
index 5079492d6..3f0311e9e 100644
--- a/client/src/sass/class-helpers/_buttons.scss
+++ b/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;
}
diff --git a/client/src/sass/class-helpers/_layout.scss b/client/src/sass/class-helpers/_layout.scss
index 0b7319b4f..08ca2a9a0 100644
--- a/client/src/sass/class-helpers/_layout.scss
+++ b/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);
}
}
}
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index ae68faf58..d58bca61d 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/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%);
- $text: #fff6f5;
+ background-color: pvar(--red);
+ color: pvar(--white);
- background-color: $color;
- color: $text;
-
- @include button-focus(color.scale($color, $alpha: -95%));
+ @include button-focus(pvar(--red));
&:hover,
&:active,
- &:focus,
- &[disabled] {
- background-color: color.adjust($color: $color, $lightness: 10%);
+ &:focus:not(:focus-visible) {
+ opacity: 0.8;
}
&[disabled] {
cursor: default;
+ opacity: 0.7;
}
my-global-icon {
- @include apply-svg-color($text);
+ @include apply-svg-color(pvar(--white));
}
}
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 4843edde2..3e7e4fa38 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -31,8 +31,8 @@ $support-button-heart: #e83e8c;
$bg-color: #fff;
$fg-color: #212529;
-$red: #EE0700;
-$green: #278904;
+$red: #dc3545;
+$green: #198754;
$white: #fff;
$expanded-horizontal-margins: 150px;