Refactor modal buttons style

diff --git a/client/src/app/+about/about-instance/contact-admin-modal.component.html b/client/src/app/+about/about-instance/contact-admin-modal.component.html
index 81e59d46adc60a9d494f7f54c2e38475a6b670c5..343e5d649f7a73fb83b42ae4f924f08ef0965fb1 100644 (file)
--- a/client/src/app/+about/about-instance/contact-admin-modal.component.html
+++ b/client/src/app/+about/about-instance/contact-admin-modal.component.html
@@ -45,14 +45,11 @@
 
       <div class="form-group 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)="hide()" (key.enter)="hide()"
         >
 
-        <input
-          type="submit" i18n-value value="Submit" class="action-button-submit"
-          [disabled]="!form.valid"
-        >
+        <input type="submit" i18n-value value="Submit" class="peertube-button orange-button" [disabled]="!form.valid" />
       </div>
     </form>
 

diff --git a/client/src/app/+about/about-instance/contact-admin-modal.component.scss b/client/src/app/+about/about-instance/contact-admin-modal.component.scss
index 260d7788837a2e6aea5cd0ffbc53bec1792005ef..6c1c89225e77c5c2110938f63d72ad8935cd0682 100644 (file)
--- a/client/src/app/+about/about-instance/contact-admin-modal.component.scss
+++ b/client/src/app/+about/about-instance/contact-admin-modal.component.scss
@@ -3,7 +3,6 @@
 
 input[type=text] {
   @include peertube-input-text(340px);
-  display: block;
 }
 
 textarea {

diff --git a/client/src/app/+login/login.component.html b/client/src/app/+login/login.component.html
index 0167066a0f1ce718ae2c40138db766635b8a67fd..5f5b0f565235ab3e8a5f518140365d4dbf1a2fa1 100644 (file)
--- a/client/src/app/+login/login.component.html
+++ b/client/src/app/+login/login.component.html
@@ -41,7 +41,7 @@
             </div>
           </div>
 
-          <input type="submit" i18n-value value="Login" [disabled]="!form.valid">
+          <input type="submit" class="peertube-button orange-button" i18n-value value="Login" [disabled]="!form.valid">
 
           <div class="additionnal-links">
             <a i18n class="forgot-password-button" (click)="openForgotPasswordModal()" i18n-title title="Click here to reset your password">I forgot my password</a>
@@ -114,12 +114,12 @@
 
   <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)="hideForgotPasswordModal()" (key.enter)="hideForgotPasswordModal()"
     >
 
     <input
-      type="submit" i18n-value="Password reset button" value="Reset" class="action-button-submit"
+      type="submit" i18n-value="Password reset button" value="Reset" class="peertube-button orange-button"
       (click)="askResetPassword()" [disabled]="!forgotPasswordEmailInput.validity.valid"
     >
   </div>

diff --git a/client/src/app/+login/login.component.scss b/client/src/app/+login/login.component.scss
index 3cc302aec4aa988c7584c3fd02280aa71d32d3f2..f605cbb7a06583092d6f04a96ffe5d2f8c6add12 100644 (file)
--- a/client/src/app/+login/login.component.scss
+++ b/client/src/app/+login/login.component.scss
@@ -8,16 +8,9 @@ label {
   display: block;
 }
 
-input:not([type=submit]) {
+input[type=text],
+input[type=email] {
   @include peertube-input-text(340px);
-  display: inline-block;
-  margin-right: 5px;
-
-}
-
-input[type=submit] {
-  @include peertube-button;
-  @include orange-button;
 }
 
 .modal-body {

diff --git a/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.html b/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.html
index 27aab13b654f574054a26e164eb013f6564e68d9..088765b20b4e49813333fc96f05ddcaecfb2ee60 100644 (file)
--- a/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.html
+++ b/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.html
@@ -22,13 +22,13 @@
   <div class="modal-footer inputs">
     <div class="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
-          type="submit" i18n-value value="Accept" class="action-button-submit"
-          (click)="close()"
+        type="submit" i18n-value value="Accept" class="peertube-button orange-button"
+        (click)="close()"
       >
     </div>
   </div>

diff --git a/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.scss b/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.scss
index c7357f62ddc1ffb6171353bcc477754fd47905b1..bf3770e56d7d14164c3470b18625a0288e0038d8 100644 (file)
--- a/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.scss
+++ b/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.scss
@@ -1,14 +1,6 @@
 @import '_variables';
 @import '_mixins';
 
-select {
-  display: block;
-}
-
 .peertube-select-container {
   @include peertube-select-container(350px);
 }
-
-.form-group {
-  margin: 20px 0;
-}
\ No newline at end of file

diff --git a/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.html b/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.html
index c7c5a0b69c8b282a5e0dc2d604d29c4aef25d9b6..955fd4884697222b4b9cc5284eb68452b29507fa 100644 (file)
--- a/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.html
+++ b/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.html
@@ -19,14 +19,13 @@
   <div class="modal-footer">
     <div class="form-group 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
-        type="submit" i18n-value value="Submit" class="action-button-submit"
-        [disabled]="!form.valid"
-        (click)="close()"
+        type="submit" i18n-value value="Submit" class="peertube-button orange-button"
+        [disabled]="!form.valid" (click)="close()"
       />
     </div>
   </div>

diff --git a/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.html b/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.html
index 6a07dafa7b626871eafd3b4bc0e96f5d886f158e..092952204914c6f8445bd6279833b171500a2055 100644 (file)
--- a/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.html
+++ b/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.html
@@ -34,12 +34,12 @@
 
     <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)="hide()" (key.enter)="hide()"
       >
 
       <input
-        type="submit" i18n-value value="Add this caption" class="action-button-submit"
+        type="submit" i18n-value value="Add this caption" class="peertube-button orange-button"
         [disabled]="!form.valid" (click)="addCaption()"
       >
     </div>

diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index 7e9e4a2168e8d7518dd7f917421b5538b7ac17a8..e7d05369baf611c23dbe69a6b5194d9c9dd6bdcc 100644 (file)
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -26,67 +26,64 @@
   z-index: z(header);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
   display: flex;
+}
 
-  .top-left-block {
-    z-index: 1;
-    height: $header-height;
-    display: flex;
-    align-items: center;
-    min-width: 0;
-
-    .icon {
-      @include icon(24px);
-
-      &.icon-menu {
-        background-color: pvar(--mainForegroundColor);
-        mask-image: url('../assets/images/misc/menu.svg');
-        margin: 0 18px 0 20px;
-
-        @media screen and (max-width: $mobile-view) {
-          margin: 0 10px;
-        }
-      }
-    }
+.top-left-block {
+  z-index: 1;
+  height: $header-height;
+  display: flex;
+  align-items: center;
+  min-width: 0;
 
-    .peertube-title {
-      @include disable-default-a-behaviour;
+  .icon {
+    @include icon(24px);
+  }
 
-      font-size: 20px;
-      font-weight: $font-bold;
-      color: inherit !important;
-      display: flex;
-      align-items: center;
-      overflow: hidden;
+  .icon-menu {
+    background-color: pvar(--mainForegroundColor);
+    mask-image: url('../assets/images/misc/menu.svg');
+    margin: 0 18px 0 20px;
 
-      .instance-name {
-        @include ellipsis;
+    @media screen and (max-width: $mobile-view) {
+      margin: 0 10px;
+    }
+  }
+}
 
-        width: 100%;
-      }
+.header-right {
+  height: $header-height;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  white-space: nowrap;
+  flex: 1;
+}
 
-      .icon.icon-logo {
-        display: inline-block;
-        width: 23px;
-        height: 24px;
-        margin-right: .5rem;
-      }
-    }
+.peertube-title {
+  @include disable-default-a-behaviour;
 
-    @media screen and (max-width: $mobile-view) {
+  font-size: 20px;
+  font-weight: $font-bold;
+  color: inherit !important;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
 
-      .peertube-title {
-        display: none;
-      }
-    }
+  .instance-name {
+    @include ellipsis;
+
+    width: 100%;
   }
 
-  .header-right {
-    height: $header-height;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    white-space: nowrap;
-    flex: 1;
+  .icon.icon-logo {
+    display: inline-block;
+    width: 23px;
+    height: 24px;
+    margin-right: .5rem;
+  }
+
+  @media screen and (max-width: $mobile-view) {
+    display: none;
   }
 }
 
@@ -103,18 +100,9 @@
     justify-self: center;
     align-self: center;
     cursor: pointer;
-
     width: 20px;
   }
 
-  @each $color, $value in $theme-colors {
-    &.alert-#{$color} {
-      my-global-icon {
-        @include apply-svg-color(theme-color-level($color, $alert-color-level));
-      }
-    }
-  }
-
   ::ng-deep {
     p {
       font-size: 16px;

diff --git a/client/src/app/modal/confirm.component.html b/client/src/app/modal/confirm.component.html
index dbc8c23e3a2c0e3295286c2397cffbb59f0e89a7..f0750172680cc7745db886a6d29cdb0341dbca77 100644 (file)
--- 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 ed226bc091cf88d0d2b2d45e60ec24e4fcb2e802..69978f212ec8ae32ec976d7a94eccdc1d6870fc6 100644 (file)
--- 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 06ecc274379b54a9019a830a39e0c81236a6be02..cdfbfbb6a61983362e0d2a9a2698d1839eed0c46 100644 (file)
--- 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 a7fa30cf52050ffd1b4bcaf0530265f8983edeae..d6ef772b254e587270428ecb33a5a43b57cbf731 100644 (file)
--- 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 498adfeffd24c1d20697fe25bfab2d0814045f18..f085aa9de5981fb235057546a08d299f26eff266 100644 (file)
--- 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 cc97d64e404b2b0d1c8d422f657c7600c10c7c39..8d734c628e2ebf90b36d4d93e36321b12c22cbef 100644 (file)
--- 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 (file)
index b0e2567..0000000
--- 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 95726ab63f540f2a03dfc3c27c6ae4d8415fd996..99859a1a50572e28f0ddbc2951e8ea2bf8386be1 100644 (file)
--- 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 19bf3a1eab7e1fa379764b2161ca85d20fb3d1ea..f5d2b87999dbecaf7323107defff0e1b7d37de51 100644 (file)
--- 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 a93dbcef9538464e18ab677789c4e0d91e4460be..28d5dc49c74d6e3ece461dad9cc5449e9ab014e5 100644 (file)
--- 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;
+  }
 }

diff --git a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.html b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.html
index 17e9ce4cf31415412c0c613fb32e91b993c16311..ab6967f2895929c1a0c4742cf47aaa659dbe9188 100644 (file)
--- a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.html
+++ b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.html
@@ -41,7 +41,7 @@
       </div>
 
       <div class="form-group inputs">
-        <input type="submit" i18n-value value="Add a message" class="action-button-submit" [disabled]="!form.valid || sendingMessage">
+        <input type="submit" i18n-value value="Add a message" class="peertube-button orange-button" [disabled]="!form.valid || sendingMessage">
       </div>
     </form>
 

diff --git a/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.html b/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.html
index 8082e93f4d0d3280f1bf7249a4a3fac814d593be..cc7bb6c92c10d71093318531b5f7d141928e651f 100644 (file)
--- a/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.html
+++ b/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.html
@@ -23,14 +23,11 @@
 
       <div class="form-group 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)="hide()" (key.enter)="hide()"
         >
 
-        <input
-          type="submit" i18n-value value="Update this comment" class="action-button-submit"
-          [disabled]="!form.valid"
-        >
+        <input type="submit" i18n-value value="Update this comment" class="peertube-button orange-button" [disabled]="!form.valid" />
       </div>
     </form>
   </div>

diff --git a/client/src/app/shared/shared-moderation/batch-domains-modal.component.html b/client/src/app/shared/shared-moderation/batch-domains-modal.component.html
index 1b85c8f48167336f89322e53d1b826e67a912460..6a3c657213606f013aff827fcb89257d6b56c148 100644 (file)
--- a/client/src/app/shared/shared-moderation/batch-domains-modal.component.html
+++ b/client/src/app/shared/shared-moderation/batch-domains-modal.component.html
@@ -28,14 +28,11 @@
 
       <div class="form-group 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)="hide()" (key.enter)="hide()"
         >
 
-        <input
-          type="submit" [value]="action" class="action-button-submit"
-          [disabled]="!form.valid"
-        >
+        <input type="submit" [value]="action" class="peertube-button orange-button" [disabled]="!form.valid" />
       </div>
     </form>
   </div>

diff --git a/client/src/app/shared/shared-moderation/report-modals/report.component.html b/client/src/app/shared/shared-moderation/report-modals/report.component.html
index bda62312fa6e000c4ebd4244de0a2cf73b4e1a90..6c99180ef1065175e974b32169a0a2913eb3c3d9 100644 (file)
--- a/client/src/app/shared/shared-moderation/report-modals/report.component.html
+++ b/client/src/app/shared/shared-moderation/report-modals/report.component.html
@@ -51,10 +51,11 @@
 
     <div class="form-group 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)="hide()" (key.enter)="hide()"
       >
-      <input type="submit" i18n-value value="Submit" class="action-button-submit" [disabled]="!form.valid">
+
+      <input type="submit" i18n-value value="Submit" class="peertube-button orange-button" [disabled]="!form.valid">
     </div>
 
     </form>

diff --git a/client/src/app/shared/shared-moderation/report-modals/video-report.component.html b/client/src/app/shared/shared-moderation/report-modals/video-report.component.html
index 4947088d14579a365e49398e0a4d1d650bd47139..1aae64bff571ad9806de08d55a94de80acdd1adb 100644 (file)
--- a/client/src/app/shared/shared-moderation/report-modals/video-report.component.html
+++ b/client/src/app/shared/shared-moderation/report-modals/video-report.component.html
@@ -89,10 +89,11 @@
 
     <div class="form-group 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)="hide()" (key.enter)="hide()"
       >
-      <input type="submit" i18n-value value="Submit" class="action-button-submit" [disabled]="!form.valid">
+
+      <input type="submit" i18n-value value="Submit" class="peertube-button orange-button" [disabled]="!form.valid">
     </div>
 
     </form>

diff --git a/client/src/app/shared/shared-moderation/user-ban-modal.component.html b/client/src/app/shared/shared-moderation/user-ban-modal.component.html
index 365eb1938d7ee59d730f5bcd9eedeb592a0d7e43..7129b00ca9e3414524ac5b1125eeb1191f717fa8 100644 (file)
--- a/client/src/app/shared/shared-moderation/user-ban-modal.component.html
+++ b/client/src/app/shared/shared-moderation/user-ban-modal.component.html
@@ -23,14 +23,11 @@
 
       <div class="form-group 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)="hide()" (key.enter)="hide()"
         >
 
-        <input
-          type="submit" i18n-value value="Ban this user" class="action-button-submit"
-          [disabled]="!form.valid"
-        >
+        <input type="submit" i18n-value value="Ban this user" class="peertube-button orange-button" [disabled]="!form.valid" />
       </div>
     </form>
   </div>

diff --git a/client/src/app/shared/shared-moderation/video-block.component.html b/client/src/app/shared/shared-moderation/video-block.component.html
index e982c4d7748114da19db213a20e199d07329d7c4..5e9e8493ca5f60beb1f5f7cecf9b6d7520d7061b 100644 (file)
--- a/client/src/app/shared/shared-moderation/video-block.component.html
+++ b/client/src/app/shared/shared-moderation/video-block.component.html
@@ -35,14 +35,11 @@
 
       <div class="form-group 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)="hide()" (key.enter)="hide()"
         >
 
-        <input
-          type="submit" i18n-value value="Submit" class="action-button-submit"
-          [disabled]="!form.valid"
-        >
+        <input type="submit" i18n-value value="Submit" class="peertube-button orange-button" [disabled]="!form.valid" />
       </div>
     </form>
 

diff --git a/client/src/app/shared/shared-support-modal/support-modal.component.html b/client/src/app/shared/shared-support-modal/support-modal.component.html
index 4a967987f4e3608365b39a4320b6bcb46f35918e..289adcb6a5f6e1f174a51d49a487145507f1255e 100644 (file)
--- a/client/src/app/shared/shared-support-modal/support-modal.component.html
+++ b/client/src/app/shared/shared-support-modal/support-modal.component.html
@@ -8,7 +8,7 @@
 
   <div class="modal-footer inputs">
     <input
-      type="button" role="button" i18n-value value="Maybe later" class="action-button action-button-cancel"
+      type="button" role="button" i18n-value value="Maybe later" class="peertube-button grey-button"
       (click)="hide()" (key.enter)="hide()"
     >
   </div>

diff --git a/client/src/app/shared/shared-support-modal/support-modal.component.scss b/client/src/app/shared/shared-support-modal/support-modal.component.scss
deleted file mode 100644 (file)
index 184e090..0000000
--- a/client/src/app/shared/shared-support-modal/support-modal.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.action-button-cancel {
-  margin-right: 0 !important;
-}

diff --git a/client/src/app/shared/shared-support-modal/support-modal.component.ts b/client/src/app/shared/shared-support-modal/support-modal.component.ts
index ae603c7a8ef9a8e943287fb7187704e909394b2a..a0b9fada64dd157c6bc1a32995d1cfe53184da7f 100644 (file)
--- a/client/src/app/shared/shared-support-modal/support-modal.component.ts
+++ b/client/src/app/shared/shared-support-modal/support-modal.component.ts
@@ -6,8 +6,7 @@ import { VideoChannel } from '@shared/models'
 
 @Component({
   selector: 'my-support-modal',
-  templateUrl: './support-modal.component.html',
-  styleUrls: [ './support-modal.component.scss' ]
+  templateUrl: './support-modal.component.html'
 })
 export class SupportModalComponent {
   @Input() video: VideoDetails = null

diff --git a/client/src/app/shared/shared-video-live/live-stream-information.component.html b/client/src/app/shared/shared-video-live/live-stream-information.component.html
index 57920239de277b21d31320d8e3a3c2e76367c32a..d6ee67ba9f5d2d477d337e93df4e3535104fd491 100644 (file)
--- a/client/src/app/shared/shared-video-live/live-stream-information.component.html
+++ b/client/src/app/shared/shared-video-live/live-stream-information.component.html
@@ -30,10 +30,7 @@
 
   <div class="modal-footer">
     <div class="form-group inputs">
-      <input
-        type="button" role="button" i18n-value value="Close" class="action-button action-button-cancel"
-        (click)="dismiss()"
-      >
+      <input type="button" role="button" i18n-value value="Close" class="peertube-button grey-button" (click)="dismiss()" />
 
       <my-edit-button
         i18n-label label="Update live settings"

diff --git a/client/src/app/shared/shared-video-miniature/video-download.component.html b/client/src/app/shared/shared-video-miniature/video-download.component.html
index 8a9218343f9dd4d73cf8328949f68fb968f7b6d4..4ac74c1064706e8a7195ad39e81d59d26c3fd247 100644 (file)
--- a/client/src/app/shared/shared-video-miniature/video-download.component.html
+++ b/client/src/app/shared/shared-video-miniature/video-download.component.html
@@ -4,10 +4,10 @@
       <ng-container i18n>Download</ng-container>
 
       <div *ngIf="videoCaptions" ngbDropdown class="d-inline-block ml-1">
-        <span id="dropdownDownloadType" ngbDropdownToggle>
+        <span id="dropdown-download-type" ngbDropdownToggle>
           {{ type }}
         </span>
-        <div ngbDropdownMenu aria-labelledby="dropdownDownloadType">
+        <div ngbDropdownMenu aria-labelledby="dropdown-download-type">
           <button *ngIf="type === 'video'" (click)="switchToType('subtitles')" ngbDropdownItem i18n>subtitles</button>
           <button *ngIf="type === 'subtitles'" (click)="switchToType('video')" ngbDropdownItem i18n>video</button>
         </div>
@@ -37,7 +37,7 @@
 
         <ng-container *ngFor="let file of getVideoFiles()" [ngbNavItem]="file.resolution.id">
           <a ngbNavLink i18n>{{ file.resolution.label }}</a>
-  
+
           <ng-template ngbNavContent>
             <div class="nav-content">
               <div class="input-group input-group-sm">
@@ -53,7 +53,7 @@
         </ng-container>
       </div>
       <div [ngbNavOutlet]="resolutionNav"></div>
-  
+
       <div class="advanced-filters collapse-transition" [ngbCollapse]="isAdvancedCustomizationCollapsed">
         <ng-container *ngIf="videoFile?.metadata">
           <div ngbNav #nav="ngbNav" class="nav-tabs nav-metadata">
@@ -67,7 +67,7 @@
                   </div>
                 </div>
               </ng-template>
-  
+
               <ng-container ngbNavItem [disabled]="videoFileMetadataVideoStream === undefined">
                 <a ngbNavLink i18n>Video stream</a>
                 <ng-template ngbNavContent>
@@ -79,7 +79,7 @@
                   </div>
                 </ng-template>
               </ng-container>
-  
+
               <ng-container ngbNavItem [disabled]="videoFileMetadataAudioStream === undefined">
                 <a ngbNavLink i18n>Audio stream</a>
                 <ng-template ngbNavContent>
@@ -91,7 +91,7 @@
                   </div>
                 </ng-template>
               </ng-container>
-  
+
             </ng-container>
           </div>
           <div [ngbNavOutlet]="nav"></div>
@@ -107,20 +107,20 @@
           </div>
         </ng-container>
       </div>
-  
+
       <div (click)="isAdvancedCustomizationCollapsed = !isAdvancedCustomizationCollapsed" role="button" class="advanced-filters-button"
       [attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic">
         <ng-container *ngIf="isAdvancedCustomizationCollapsed">
           <span class="glyphicon glyphicon-menu-down"></span>
-  
+
           <ng-container i18n>
             Advanced
           </ng-container>
         </ng-container>
-  
+
         <ng-container *ngIf="!isAdvancedCustomizationCollapsed">
           <span class="glyphicon glyphicon-menu-up"></span>
-  
+
           <ng-container i18n>
             Simple
           </ng-container>
@@ -131,13 +131,10 @@
 
   <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)="hide()" (key.enter)="hide()"
     >
 
-    <input
-      type="submit" i18n-value value="Download" class="action-button-submit"
-      (click)="download()"
-    >
+    <input type="submit" i18n-value value="Download" class="peertube-button orange-button" (click)="download()" />
   </div>
 </ng-template>

diff --git a/client/src/app/shared/shared-video-miniature/video-download.component.scss b/client/src/app/shared/shared-video-miniature/video-download.component.scss
index 199c3dac8392cc53c888fb46e2540328e8c3fa43..485db5ef58eb11b6b5a4277f614c1502abb812f4 100644 (file)
--- a/client/src/app/shared/shared-video-miniature/video-download.component.scss
+++ b/client/src/app/shared/shared-video-miniature/video-download.component.scss
@@ -17,7 +17,7 @@
   .nav-tabs {
     margin-top: 10x;
   }
-  
+
   .glyphicon {
     margin-right: 5px;
   }
@@ -46,7 +46,7 @@
   @include orange-button;
 }
 
-#dropdownDownloadType {
+#dropdown-download-type {
   cursor: pointer;
 }
 

diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 75dc91d7a01610397c5380b264b40be465f5abf6..e11603e4df6eead87da44e0cf6b5fce916d94efe 100644 (file)
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -153,17 +153,8 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
     margin-bottom: 0;
     text-align: right;
 
-    .action-button-cancel {
-      @include peertube-button;
-      @include tertiary-button;
-
-      display: inline-block;
-      margin-right: 10px;
-    }
-
-    .action-button-submit {
-      @include peertube-button;
-      @include orange-button;
+    > .peertube-button:not(:first-child) {
+      margin-left: 10px
     }
   }
 }

diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index bf844ac5dffe190441c63085ce9d098d041760a9..73606f9403b6347e06b71e09fcd71066b020b1b6 100644 (file)
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -238,7 +238,8 @@
   font-size: 15px;
   height: $button-height;
   line-height: $button-height;
-  border-radius: 3px;
+  // FIXME: because of primeng that redefines border-radius of all input[type="..."]
+  border-radius: 3px !important;
   text-align: center;
   padding: 0 17px 0 13px;
   cursor: pointer;

diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 9c9b5d4fcf73eca387f9563f26ce2d528043b1ed..544d0039a5d3f1d26492334488b0e5c3a51e2b6a 100644 (file)
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -3,6 +3,11 @@
 
 @import '~primeng/resources/primeng.css';
 
+// Override primeng style we don't want
+input[type="button"] {
+  border-radius: inherit;
+}
+
 // Taken from old nova light theme
 
 body .p-disabled {