Refactor modal buttons style

10 files changed, 31 insertions, 92 deletions

diff --git a/client/src/app/modal/confirm.component.html b/client/src/app/modal/confirm.component.html
index dbc8c23e3..f07501726 100644
--- a/client/src/app/modal/confirm.component.html
+++ b/client/src/app/modal/confirm.component.html
@@ -17,13 +17,13 @@
 
   <div class="modal-footer inputs">
     <input
-      type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+      type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
       (click)="dismiss()" (key.enter)="dismiss()"
     >
 
     <input
       ngbAutofocus
-      type="submit" [value]="confirmButtonText" class="action-button-submit" [disabled]="isConfirmationDisabled()"
+      type="submit" [value]="confirmButtonText" class="peertube-button orange-button" [disabled]="isConfirmationDisabled()"
       (click)="close()" (key.enter)="confirm()"
     >
   </div>
diff --git a/client/src/app/modal/confirm.component.scss b/client/src/app/modal/confirm.component.scss
index ed226bc09..69978f212 100644
--- a/client/src/app/modal/confirm.component.scss
+++ b/client/src/app/modal/confirm.component.scss
@@ -17,5 +17,3 @@ input[type=text] {
 .form-group {
   margin: 20px 0;
 }
-
-
diff --git a/client/src/app/modal/custom-modal.component.html b/client/src/app/modal/custom-modal.component.html
index 06ecc2743..cdfbfbb6a 100644
--- a/client/src/app/modal/custom-modal.component.html
+++ b/client/src/app/modal/custom-modal.component.html
@@ -3,17 +3,17 @@
     <h4 class="modal-title">{{title}}</h4>
     <my-global-icon *ngIf="close" iconName="cross" aria-label="Close" role="button" (click)="onCloseClick()"></my-global-icon>
   </div>
-    
+
   <div class="modal-body" [innerHTML]="content"></div>
 
   <div *ngIf="hasCancel() || hasConfirm()" class="modal-footer inputs">
     <input
-      *ngIf="hasCancel()" type="button" role="button" value="{{cancel.value}}" class="action-button action-button-cancel"
+      *ngIf="hasCancel()" type="button" role="button" value="{{cancel.value}}" class="peertube-button grey-button"
       (click)="onCancelClick()" (key.enter)="onCancelClick()"
     >
 
     <input
-      *ngIf="hasConfirm()" type="button" role="button" value="{{confirm.value}}" class="action-button action-button-confirm"
+      *ngIf="hasConfirm()" type="button" role="button" value="{{confirm.value}}" class="peertube-button orange-button"
       (click)="onConfirmClick()" (key.enter)="onConfirmClick()"
     >
   </div>
diff --git a/client/src/app/modal/custom-modal.component.scss b/client/src/app/modal/custom-modal.component.scss
index a7fa30cf5..d6ef772b2 100644
--- a/client/src/app/modal/custom-modal.component.scss
+++ b/client/src/app/modal/custom-modal.component.scss
@@ -8,13 +8,3 @@
 li {
   margin-bottom: 10px;
 }
-
-.action-button-cancel {
-  @include peertube-button;
-  @include grey-button;
-}
-
-.action-button-confirm {
-  @include peertube-button;
-  @include orange-button;
-}
diff --git a/client/src/app/modal/instance-config-warning-modal.component.html b/client/src/app/modal/instance-config-warning-modal.component.html
index 498adfeff..f085aa9de 100644
--- a/client/src/app/modal/instance-config-warning-modal.component.html
+++ b/client/src/app/modal/instance-config-warning-modal.component.html
@@ -35,10 +35,11 @@
     </my-peertube-checkbox>
 
     <input
-      type="button" role="button" i18n-value value="Close" class="action-button action-button-cancel"
+      type="button" role="button" i18n-value value="Close" class="peertube-button grey-button"
       (click)="hide()" (key.enter)="hide()"
     >
-    <a i18n class="action-button action-button-configure" ngbAutofocus
+
+    <a i18n class="peertube-button-link orange-button" ngbAutofocus
        href="/admin/config/edit-custom" target="_blank" rel="noopener noreferrer">
        Configure
     </a>
diff --git a/client/src/app/modal/instance-config-warning-modal.component.scss b/client/src/app/modal/instance-config-warning-modal.component.scss
index cc97d64e4..8d734c628 100644
--- a/client/src/app/modal/instance-config-warning-modal.component.scss
+++ b/client/src/app/modal/instance-config-warning-modal.component.scss
@@ -1,10 +1,6 @@
 @import '_mixins';
 @import '_variables';
 
-.action-button-cancel {
-  margin-right: 0 !important;
-}
-
 .modal-body {
   font-size: 15px;
 }
@@ -18,11 +14,3 @@ li {
   margin: 0 auto 50px;
   width: 25%;
 }
-
-.action-button-configure {
-  display: inline-block;
-
-  @include peertube-button;
-  @include orange-button;
-  @include disable-default-a-behaviour;
-}
diff --git a/client/src/app/modal/quick-settings-modal.component.scss b/client/src/app/modal/quick-settings-modal.component.scss
deleted file mode 100644
index b0e256744..000000000
--- a/client/src/app/modal/quick-settings-modal.component.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-@import '_mixins';
-
-.modal-button {
-  @include disable-default-a-behaviour;
-  transform: translateY(2px);
-
-  button {
-    @include peertube-button;
-    @include grey-button;
-    @include button-with-icon(18px, 4px, -1px);
-
-    my-global-icon {
-      @include apply-svg-color(#585858);
-    }
-  }
-
-  & + .modal-button {
-    margin-left: 1rem;
-  }
-}
-
-.quick-settings-title {
-  @include in-content-small-title;
-}
diff --git a/client/src/app/modal/quick-settings-modal.component.ts b/client/src/app/modal/quick-settings-modal.component.ts
index 95726ab63..99859a1a5 100644
--- a/client/src/app/modal/quick-settings-modal.component.ts
+++ b/client/src/app/modal/quick-settings-modal.component.ts
@@ -8,8 +8,7 @@ import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
 
 @Component({
   selector: 'my-quick-settings',
-  templateUrl: './quick-settings-modal.component.html',
-  styleUrls: [ './quick-settings-modal.component.scss' ]
+  templateUrl: './quick-settings-modal.component.html'
 })
 export class QuickSettingsModalComponent extends FormReactive implements OnInit {
   @ViewChild('modal', { static: true }) modal: NgbModal
diff --git a/client/src/app/modal/welcome-modal.component.html b/client/src/app/modal/welcome-modal.component.html
index 19bf3a1ea..f5d2b8799 100644
--- a/client/src/app/modal/welcome-modal.component.html
+++ b/client/src/app/modal/welcome-modal.component.html
@@ -71,12 +71,12 @@
 
   <div class="modal-footer inputs">
     <input
-      type="button" role="button" i18n-value value="Remind me later" class="action-button action-button-understood"
+      type="button" role="button" i18n-value value="Remind me later" class="peertube-button grey-button"
       (click)="hide()" (key.enter)="hide()"
     >
 
     <a i18n (click)="doNotOpenAgain(); hide()" (key.enter)="doNotOpenAgain(); hide()"
-       class="configure-instance-button" href="/admin/config/edit-custom" target="_blank"
+       class="peertube-button-link orange-button" href="/admin/config/edit-custom" target="_blank"
        rel="noopener noreferrer" ngbAutofocus>
       Configure my instance
     </a>
diff --git a/client/src/app/modal/welcome-modal.component.scss b/client/src/app/modal/welcome-modal.component.scss
index a93dbcef9..28d5dc49c 100644
--- a/client/src/app/modal/welcome-modal.component.scss
+++ b/client/src/app/modal/welcome-modal.component.scss
@@ -47,43 +47,30 @@ li {
 
 .columns {
   display: flex;
+}
 
-  .link-block {
-    @include disable-default-a-behaviour;
-
-    color: pvar(--mainForegroundColor);
-    padding: 10px;
-    transition: background-color 0.2s ease-in;
-    flex-basis: 33%;
-
-    &:hover {
-      background-color: rgba(0, 0, 0, 0.05);
-    }
+.link-block {
+  @include disable-default-a-behaviour;
 
-    .link-title {
-      font-size: 16px;
-      font-weight: $font-semibold;
-      display: flex;
-      justify-content: center;
-      margin-bottom: 5px;
-    }
+  color: pvar(--mainForegroundColor);
+  padding: 10px;
+  transition: background-color 0.2s ease-in;
+  flex-basis: 33%;
 
-    .link-title,
-    div {
-      text-align: center;
-    }
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.05);
   }
-}
 
-.configure-instance-button {
-  @include peertube-button;
-  @include orange-button;
-  @include disable-default-a-behaviour;
-
-  display: inline-block;
-}
+  .link-title {
+    font-size: 16px;
+    font-weight: $font-semibold;
+    display: flex;
+    justify-content: center;
+    margin-bottom: 5px;
+  }
 
-.action-button-understood {
-  @include peertube-button;
-  @include grey-button;
+  .link-title,
+  div {
+    text-align: center;
+  }
 }