aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-04-14 16:39:37 +0200
committerChocobozzz <me@florianbigard.com>2021-04-14 16:39:37 +0200
commit266947e5efc7ff30b0020beb5a74e4d4fc696fa5 (patch)
tree66c2e0f463e373d971d290d9ff3b07b9528ebf27 /client
parent251a82ffbb62c575d7aeb260dff22409dae39d73 (diff)
downloadPeerTube-266947e5efc7ff30b0020beb5a74e4d4fc696fa5.tar.gz
PeerTube-266947e5efc7ff30b0020beb5a74e4d4fc696fa5.tar.zst
PeerTube-266947e5efc7ff30b0020beb5a74e4d4fc696fa5.zip
Refactor modal buttons style
Diffstat (limited to 'client')
-rw-r--r--client/src/app/+about/about-instance/contact-admin-modal.component.html7
-rw-r--r--client/src/app/+about/about-instance/contact-admin-modal.component.scss1
-rw-r--r--client/src/app/+login/login.component.html6
-rw-r--r--client/src/app/+login/login.component.scss11
-rw-r--r--client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.html6
-rw-r--r--client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.scss8
-rw-r--r--client/src/app/+my-library/my-videos/modals/video-change-ownership.component.html7
-rw-r--r--client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.html4
-rw-r--r--client/src/app/app.component.scss108
-rw-r--r--client/src/app/modal/confirm.component.html4
-rw-r--r--client/src/app/modal/confirm.component.scss2
-rw-r--r--client/src/app/modal/custom-modal.component.html6
-rw-r--r--client/src/app/modal/custom-modal.component.scss10
-rw-r--r--client/src/app/modal/instance-config-warning-modal.component.html5
-rw-r--r--client/src/app/modal/instance-config-warning-modal.component.scss12
-rw-r--r--client/src/app/modal/quick-settings-modal.component.scss24
-rw-r--r--client/src/app/modal/quick-settings-modal.component.ts3
-rw-r--r--client/src/app/modal/welcome-modal.component.html4
-rw-r--r--client/src/app/modal/welcome-modal.component.scss53
-rw-r--r--client/src/app/shared/shared-abuse-list/abuse-message-modal.component.html2
-rw-r--r--client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.html7
-rw-r--r--client/src/app/shared/shared-moderation/batch-domains-modal.component.html7
-rw-r--r--client/src/app/shared/shared-moderation/report-modals/report.component.html5
-rw-r--r--client/src/app/shared/shared-moderation/report-modals/video-report.component.html5
-rw-r--r--client/src/app/shared/shared-moderation/user-ban-modal.component.html7
-rw-r--r--client/src/app/shared/shared-moderation/video-block.component.html7
-rw-r--r--client/src/app/shared/shared-support-modal/support-modal.component.html2
-rw-r--r--client/src/app/shared/shared-support-modal/support-modal.component.scss3
-rw-r--r--client/src/app/shared/shared-support-modal/support-modal.component.ts3
-rw-r--r--client/src/app/shared/shared-video-live/live-stream-information.component.html5
-rw-r--r--client/src/app/shared/shared-video-miniature/video-download.component.html29
-rw-r--r--client/src/app/shared/shared-video-miniature/video-download.component.scss4
-rw-r--r--client/src/sass/bootstrap.scss13
-rw-r--r--client/src/sass/include/_mixins.scss3
-rw-r--r--client/src/sass/primeng-custom.scss5
35 files changed, 136 insertions, 252 deletions
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 81e59d46a..343e5d649 100644
--- 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 @@
45 45
46 <div class="form-group inputs"> 46 <div class="form-group inputs">
47 <input 47 <input
48 type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel" 48 type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
49 (click)="hide()" (key.enter)="hide()" 49 (click)="hide()" (key.enter)="hide()"
50 > 50 >
51 51
52 <input 52 <input type="submit" i18n-value value="Submit" class="peertube-button orange-button" [disabled]="!form.valid" />
53 type="submit" i18n-value value="Submit" class="action-button-submit"
54 [disabled]="!form.valid"
55 >
56 </div> 53 </div>
57 </form> 54 </form>
58 55
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 260d77888..6c1c89225 100644
--- 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 @@
3 3
4input[type=text] { 4input[type=text] {
5 @include peertube-input-text(340px); 5 @include peertube-input-text(340px);
6 display: block;
7} 6}
8 7
9textarea { 8textarea {
diff --git a/client/src/app/+login/login.component.html b/client/src/app/+login/login.component.html
index 0167066a0..5f5b0f565 100644
--- a/client/src/app/+login/login.component.html
+++ b/client/src/app/+login/login.component.html
@@ -41,7 +41,7 @@
41 </div> 41 </div>
42 </div> 42 </div>
43 43
44 <input type="submit" i18n-value value="Login" [disabled]="!form.valid"> 44 <input type="submit" class="peertube-button orange-button" i18n-value value="Login" [disabled]="!form.valid">
45 45
46 <div class="additionnal-links"> 46 <div class="additionnal-links">
47 <a i18n class="forgot-password-button" (click)="openForgotPasswordModal()" i18n-title title="Click here to reset your password">I forgot my password</a> 47 <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 @@
114 114
115 <div class="modal-footer inputs"> 115 <div class="modal-footer inputs">
116 <input 116 <input
117 type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel" 117 type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
118 (click)="hideForgotPasswordModal()" (key.enter)="hideForgotPasswordModal()" 118 (click)="hideForgotPasswordModal()" (key.enter)="hideForgotPasswordModal()"
119 > 119 >
120 120
121 <input 121 <input
122 type="submit" i18n-value="Password reset button" value="Reset" class="action-button-submit" 122 type="submit" i18n-value="Password reset button" value="Reset" class="peertube-button orange-button"
123 (click)="askResetPassword()" [disabled]="!forgotPasswordEmailInput.validity.valid" 123 (click)="askResetPassword()" [disabled]="!forgotPasswordEmailInput.validity.valid"
124 > 124 >
125 </div> 125 </div>
diff --git a/client/src/app/+login/login.component.scss b/client/src/app/+login/login.component.scss
index 3cc302aec..f605cbb7a 100644
--- a/client/src/app/+login/login.component.scss
+++ b/client/src/app/+login/login.component.scss
@@ -8,16 +8,9 @@ label {
8 display: block; 8 display: block;
9} 9}
10 10
11input:not([type=submit]) { 11input[type=text],
12input[type=email] {
12 @include peertube-input-text(340px); 13 @include peertube-input-text(340px);
13 display: inline-block;
14 margin-right: 5px;
15
16}
17
18input[type=submit] {
19 @include peertube-button;
20 @include orange-button;
21} 14}
22 15
23.modal-body { 16.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 27aab13b6..088765b20 100644
--- 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 @@
22 <div class="modal-footer inputs"> 22 <div class="modal-footer inputs">
23 <div class="inputs"> 23 <div class="inputs">
24 <input 24 <input
25 type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel" 25 type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
26 (click)="dismiss()" (key.enter)="dismiss()" 26 (click)="dismiss()" (key.enter)="dismiss()"
27 > 27 >
28 28
29 <input 29 <input
30 type="submit" i18n-value value="Accept" class="action-button-submit" 30 type="submit" i18n-value value="Accept" class="peertube-button orange-button"
31 (click)="close()" 31 (click)="close()"
32 > 32 >
33 </div> 33 </div>
34 </div> 34 </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 c7357f62d..bf3770e56 100644
--- 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 @@
1@import '_variables'; 1@import '_variables';
2@import '_mixins'; 2@import '_mixins';
3 3
4select {
5 display: block;
6}
7
8.peertube-select-container { 4.peertube-select-container {
9 @include peertube-select-container(350px); 5 @include peertube-select-container(350px);
10} 6}
11
12.form-group {
13 margin: 20px 0;
14} \ 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 c7c5a0b69..955fd4884 100644
--- 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 @@
19 <div class="modal-footer"> 19 <div class="modal-footer">
20 <div class="form-group inputs"> 20 <div class="form-group inputs">
21 <input 21 <input
22 type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel" 22 type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
23 (click)="dismiss()" (key.enter)="dismiss()" 23 (click)="dismiss()" (key.enter)="dismiss()"
24 > 24 >
25 25
26 <input 26 <input
27 type="submit" i18n-value value="Submit" class="action-button-submit" 27 type="submit" i18n-value value="Submit" class="peertube-button orange-button"
28 [disabled]="!form.valid" 28 [disabled]="!form.valid" (click)="close()"
29 (click)="close()"
30 /> 29 />
31 </div> 30 </div>
32 </div> 31 </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 6a07dafa7..092952204 100644
--- 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 @@
34 34
35 <div class="modal-footer inputs"> 35 <div class="modal-footer inputs">
36 <input 36 <input
37 type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel" 37 type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
38 (click)="hide()" (key.enter)="hide()" 38 (click)="hide()" (key.enter)="hide()"
39 > 39 >
40 40
41 <input 41 <input
42 type="submit" i18n-value value="Add this caption" class="action-button-submit" 42 type="submit" i18n-value value="Add this caption" class="peertube-button orange-button"
43 [disabled]="!form.valid" (click)="addCaption()" 43 [disabled]="!form.valid" (click)="addCaption()"
44 > 44 >
45 </div> 45 </div>
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index 7e9e4a216..e7d05369b 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -26,67 +26,64 @@
26 z-index: z(header); 26 z-index: z(header);
27 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16); 27 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
28 display: flex; 28 display: flex;
29}
29 30
30 .top-left-block { 31.top-left-block {
31 z-index: 1; 32 z-index: 1;
32 height: $header-height; 33 height: $header-height;
33 display: flex; 34 display: flex;
34 align-items: center; 35 align-items: center;
35 min-width: 0; 36 min-width: 0;
36
37 .icon {
38 @include icon(24px);
39
40 &.icon-menu {
41 background-color: pvar(--mainForegroundColor);
42 mask-image: url('../assets/images/misc/menu.svg');
43 margin: 0 18px 0 20px;
44
45 @media screen and (max-width: $mobile-view) {
46 margin: 0 10px;
47 }
48 }
49 }
50 37
51 .peertube-title { 38 .icon {
52 @include disable-default-a-behaviour; 39 @include icon(24px);
40 }
53 41
54 font-size: 20px; 42 .icon-menu {
55 font-weight: $font-bold; 43 background-color: pvar(--mainForegroundColor);
56 color: inherit !important; 44 mask-image: url('../assets/images/misc/menu.svg');
57 display: flex; 45 margin: 0 18px 0 20px;
58 align-items: center;
59 overflow: hidden;
60 46
61 .instance-name { 47 @media screen and (max-width: $mobile-view) {
62 @include ellipsis; 48 margin: 0 10px;
49 }
50 }
51}
63 52
64 width: 100%; 53.header-right {
65 } 54 height: $header-height;
55 display: flex;
56 align-items: center;
57 justify-content: flex-end;
58 white-space: nowrap;
59 flex: 1;
60}
66 61
67 .icon.icon-logo { 62.peertube-title {
68 display: inline-block; 63 @include disable-default-a-behaviour;
69 width: 23px;
70 height: 24px;
71 margin-right: .5rem;
72 }
73 }
74 64
75 @media screen and (max-width: $mobile-view) { 65 font-size: 20px;
66 font-weight: $font-bold;
67 color: inherit !important;
68 display: flex;
69 align-items: center;
70 overflow: hidden;
76 71
77 .peertube-title { 72 .instance-name {
78 display: none; 73 @include ellipsis;
79 } 74
80 } 75 width: 100%;
81 } 76 }
82 77
83 .header-right { 78 .icon.icon-logo {
84 height: $header-height; 79 display: inline-block;
85 display: flex; 80 width: 23px;
86 align-items: center; 81 height: 24px;
87 justify-content: flex-end; 82 margin-right: .5rem;
88 white-space: nowrap; 83 }
89 flex: 1; 84
85 @media screen and (max-width: $mobile-view) {
86 display: none;
90 } 87 }
91} 88}
92 89
@@ -103,18 +100,9 @@
103 justify-self: center; 100 justify-self: center;
104 align-self: center; 101 align-self: center;
105 cursor: pointer; 102 cursor: pointer;
106
107 width: 20px; 103 width: 20px;
108 } 104 }
109 105
110 @each $color, $value in $theme-colors {
111 &.alert-#{$color} {
112 my-global-icon {
113 @include apply-svg-color(theme-color-level($color, $alert-color-level));
114 }
115 }
116 }
117
118 ::ng-deep { 106 ::ng-deep {
119 p { 107 p {
120 font-size: 16px; 108 font-size: 16px;
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 @@
17 17
18 <div class="modal-footer inputs"> 18 <div class="modal-footer inputs">
19 <input 19 <input
20 type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel" 20 type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
21 (click)="dismiss()" (key.enter)="dismiss()" 21 (click)="dismiss()" (key.enter)="dismiss()"
22 > 22 >
23 23
24 <input 24 <input
25 ngbAutofocus 25 ngbAutofocus
26 type="submit" [value]="confirmButtonText" class="action-button-submit" [disabled]="isConfirmationDisabled()" 26 type="submit" [value]="confirmButtonText" class="peertube-button orange-button" [disabled]="isConfirmationDisabled()"
27 (click)="close()" (key.enter)="confirm()" 27 (click)="close()" (key.enter)="confirm()"
28 > 28 >
29 </div> 29 </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] {
17.form-group { 17.form-group {
18 margin: 20px 0; 18 margin: 20px 0;
19} 19}
20
21
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 @@
3 <h4 class="modal-title">{{title}}</h4> 3 <h4 class="modal-title">{{title}}</h4>
4 <my-global-icon *ngIf="close" iconName="cross" aria-label="Close" role="button" (click)="onCloseClick()"></my-global-icon> 4 <my-global-icon *ngIf="close" iconName="cross" aria-label="Close" role="button" (click)="onCloseClick()"></my-global-icon>
5 </div> 5 </div>
6 6
7 <div class="modal-body" [innerHTML]="content"></div> 7 <div class="modal-body" [innerHTML]="content"></div>
8 8
9 <div *ngIf="hasCancel() || hasConfirm()" class="modal-footer inputs"> 9 <div *ngIf="hasCancel() || hasConfirm()" class="modal-footer inputs">
10 <input 10 <input
11 *ngIf="hasCancel()" type="button" role="button" value="{{cancel.value}}" class="action-button action-button-cancel" 11 *ngIf="hasCancel()" type="button" role="button" value="{{cancel.value}}" class="peertube-button grey-button"
12 (click)="onCancelClick()" (key.enter)="onCancelClick()" 12 (click)="onCancelClick()" (key.enter)="onCancelClick()"
13 > 13 >
14 14
15 <input 15 <input
16 *ngIf="hasConfirm()" type="button" role="button" value="{{confirm.value}}" class="action-button action-button-confirm" 16 *ngIf="hasConfirm()" type="button" role="button" value="{{confirm.value}}" class="peertube-button orange-button"
17 (click)="onConfirmClick()" (key.enter)="onConfirmClick()" 17 (click)="onConfirmClick()" (key.enter)="onConfirmClick()"
18 > 18 >
19 </div> 19 </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 @@
8li { 8li {
9 margin-bottom: 10px; 9 margin-bottom: 10px;
10} 10}
11
12.action-button-cancel {
13 @include peertube-button;
14 @include grey-button;
15}
16
17.action-button-confirm {
18 @include peertube-button;
19 @include orange-button;
20}
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 @@
35 </my-peertube-checkbox> 35 </my-peertube-checkbox>
36 36
37 <input 37 <input
38 type="button" role="button" i18n-value value="Close" class="action-button action-button-cancel" 38 type="button" role="button" i18n-value value="Close" class="peertube-button grey-button"
39 (click)="hide()" (key.enter)="hide()" 39 (click)="hide()" (key.enter)="hide()"
40 > 40 >
41 <a i18n class="action-button action-button-configure" ngbAutofocus 41
42 <a i18n class="peertube-button-link orange-button" ngbAutofocus
42 href="/admin/config/edit-custom" target="_blank" rel="noopener noreferrer"> 43 href="/admin/config/edit-custom" target="_blank" rel="noopener noreferrer">
43 Configure 44 Configure
44 </a> 45 </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 @@
1@import '_mixins'; 1@import '_mixins';
2@import '_variables'; 2@import '_variables';
3 3
4.action-button-cancel {
5 margin-right: 0 !important;
6}
7
8.modal-body { 4.modal-body {
9 font-size: 15px; 5 font-size: 15px;
10} 6}
@@ -18,11 +14,3 @@ li {
18 margin: 0 auto 50px; 14 margin: 0 auto 50px;
19 width: 25%; 15 width: 25%;
20} 16}
21
22.action-button-configure {
23 display: inline-block;
24
25 @include peertube-button;
26 @include orange-button;
27 @include disable-default-a-behaviour;
28}
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 @@
1@import '_mixins';
2
3.modal-button {
4 @include disable-default-a-behaviour;
5 transform: translateY(2px);
6
7 button {
8 @include peertube-button;
9 @include grey-button;
10 @include button-with-icon(18px, 4px, -1px);
11
12 my-global-icon {
13 @include apply-svg-color(#585858);
14 }
15 }
16
17 & + .modal-button {
18 margin-left: 1rem;
19 }
20}
21
22.quick-settings-title {
23 @include in-content-small-title;
24}
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'
8 8
9@Component({ 9@Component({
10 selector: 'my-quick-settings', 10 selector: 'my-quick-settings',
11 templateUrl: './quick-settings-modal.component.html', 11 templateUrl: './quick-settings-modal.component.html'
12 styleUrls: [ './quick-settings-modal.component.scss' ]
13}) 12})
14export class QuickSettingsModalComponent extends FormReactive implements OnInit { 13export class QuickSettingsModalComponent extends FormReactive implements OnInit {
15 @ViewChild('modal', { static: true }) modal: NgbModal 14 @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 @@
71 71
72 <div class="modal-footer inputs"> 72 <div class="modal-footer inputs">
73 <input 73 <input
74 type="button" role="button" i18n-value value="Remind me later" class="action-button action-button-understood" 74 type="button" role="button" i18n-value value="Remind me later" class="peertube-button grey-button"
75 (click)="hide()" (key.enter)="hide()" 75 (click)="hide()" (key.enter)="hide()"
76 > 76 >
77 77
78 <a i18n (click)="doNotOpenAgain(); hide()" (key.enter)="doNotOpenAgain(); hide()" 78 <a i18n (click)="doNotOpenAgain(); hide()" (key.enter)="doNotOpenAgain(); hide()"
79 class="configure-instance-button" href="/admin/config/edit-custom" target="_blank" 79 class="peertube-button-link orange-button" href="/admin/config/edit-custom" target="_blank"
80 rel="noopener noreferrer" ngbAutofocus> 80 rel="noopener noreferrer" ngbAutofocus>
81 Configure my instance 81 Configure my instance
82 </a> 82 </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 {
47 47
48.columns { 48.columns {
49 display: flex; 49 display: flex;
50}
50 51
51 .link-block { 52.link-block {
52 @include disable-default-a-behaviour; 53 @include disable-default-a-behaviour;
53
54 color: pvar(--mainForegroundColor);
55 padding: 10px;
56 transition: background-color 0.2s ease-in;
57 flex-basis: 33%;
58
59 &:hover {
60 background-color: rgba(0, 0, 0, 0.05);
61 }
62 54
63 .link-title { 55 color: pvar(--mainForegroundColor);
64 font-size: 16px; 56 padding: 10px;
65 font-weight: $font-semibold; 57 transition: background-color 0.2s ease-in;
66 display: flex; 58 flex-basis: 33%;
67 justify-content: center;
68 margin-bottom: 5px;
69 }
70 59
71 .link-title, 60 &:hover {
72 div { 61 background-color: rgba(0, 0, 0, 0.05);
73 text-align: center;
74 }
75 } 62 }
76}
77 63
78.configure-instance-button { 64 .link-title {
79 @include peertube-button; 65 font-size: 16px;
80 @include orange-button; 66 font-weight: $font-semibold;
81 @include disable-default-a-behaviour; 67 display: flex;
82 68 justify-content: center;
83 display: inline-block; 69 margin-bottom: 5px;
84} 70 }
85 71
86.action-button-understood { 72 .link-title,
87 @include peertube-button; 73 div {
88 @include grey-button; 74 text-align: center;
75 }
89} 76}
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 17e9ce4cf..ab6967f28 100644
--- 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 @@
41 </div> 41 </div>
42 42
43 <div class="form-group inputs"> 43 <div class="form-group inputs">
44 <input type="submit" i18n-value value="Add a message" class="action-button-submit" [disabled]="!form.valid || sendingMessage"> 44 <input type="submit" i18n-value value="Add a message" class="peertube-button orange-button" [disabled]="!form.valid || sendingMessage">
45 </div> 45 </div>
46 </form> 46 </form>
47 47
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 8082e93f4..cc7bb6c92 100644
--- 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 @@
23 23
24 <div class="form-group inputs"> 24 <div class="form-group inputs">
25 <input 25 <input
26 type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel" 26 type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
27 (click)="hide()" (key.enter)="hide()" 27 (click)="hide()" (key.enter)="hide()"
28 > 28 >
29 29
30 <input 30 <input type="submit" i18n-value value="Update this comment" class="peertube-button orange-button" [disabled]="!form.valid" />
31 type="submit" i18n-value value="Update this comment" class="action-button-submit"
32 [disabled]="!form.valid"
33 >
34 </div> 31 </div>
35 </form> 32 </form>
36 </div> 33 </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 1b85c8f48..6a3c65721 100644
--- 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 @@
28 28
29 <div class="form-group inputs"> 29 <div class="form-group inputs">
30 <input 30 <input
31 type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel" 31 type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
32 (click)="hide()" (key.enter)="hide()" 32 (click)="hide()" (key.enter)="hide()"
33 > 33 >
34 34
35 <input 35 <input type="submit" [value]="action" class="peertube-button orange-button" [disabled]="!form.valid" />
36 type="submit" [value]="action" class="action-button-submit"
37 [disabled]="!form.valid"
38 >
39 </div> 36 </div>
40 </form> 37 </form>
41 </div> 38 </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 bda62312f..6c99180ef 100644
--- 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 @@
51 51
52 <div class="form-group inputs"> 52 <div class="form-group inputs">
53 <input 53 <input
54 type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel" 54 type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
55 (click)="hide()" (key.enter)="hide()" 55 (click)="hide()" (key.enter)="hide()"
56 > 56 >
57 <input type="submit" i18n-value value="Submit" class="action-button-submit" [disabled]="!form.valid"> 57
58 <input type="submit" i18n-value value="Submit" class="peertube-button orange-button" [disabled]="!form.valid">
58 </div> 59 </div>
59 60
60 </form> 61 </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 4947088d1..1aae64bff 100644
--- 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 @@
89 89
90 <div class="form-group inputs"> 90 <div class="form-group inputs">
91 <input 91 <input
92 type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel" 92 type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
93 (click)="hide()" (key.enter)="hide()" 93 (click)="hide()" (key.enter)="hide()"
94 > 94 >
95 <input type="submit" i18n-value value="Submit" class="action-button-submit" [disabled]="!form.valid"> 95
96 <input type="submit" i18n-value value="Submit" class="peertube-button orange-button" [disabled]="!form.valid">
96 </div> 97 </div>
97 98
98 </form> 99 </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 365eb1938..7129b00ca 100644
--- 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 @@
23 23
24 <div class="form-group inputs"> 24 <div class="form-group inputs">
25 <input 25 <input
26 type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel" 26 type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
27 (click)="hide()" (key.enter)="hide()" 27 (click)="hide()" (key.enter)="hide()"
28 > 28 >
29 29
30 <input 30 <input type="submit" i18n-value value="Ban this user" class="peertube-button orange-button" [disabled]="!form.valid" />
31 type="submit" i18n-value value="Ban this user" class="action-button-submit"
32 [disabled]="!form.valid"
33 >
34 </div> 31 </div>
35 </form> 32 </form>
36 </div> 33 </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 e982c4d77..5e9e8493c 100644
--- 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 @@
35 35
36 <div class="form-group inputs"> 36 <div class="form-group inputs">
37 <input 37 <input
38 type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel" 38 type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
39 (click)="hide()" (key.enter)="hide()" 39 (click)="hide()" (key.enter)="hide()"
40 > 40 >
41 41
42 <input 42 <input type="submit" i18n-value value="Submit" class="peertube-button orange-button" [disabled]="!form.valid" />
43 type="submit" i18n-value value="Submit" class="action-button-submit"
44 [disabled]="!form.valid"
45 >
46 </div> 43 </div>
47 </form> 44 </form>
48 45
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 4a967987f..289adcb6a 100644
--- 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 @@
8 8
9 <div class="modal-footer inputs"> 9 <div class="modal-footer inputs">
10 <input 10 <input
11 type="button" role="button" i18n-value value="Maybe later" class="action-button action-button-cancel" 11 type="button" role="button" i18n-value value="Maybe later" class="peertube-button grey-button"
12 (click)="hide()" (key.enter)="hide()" 12 (click)="hide()" (key.enter)="hide()"
13 > 13 >
14 </div> 14 </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
index 184e09027..000000000
--- a/client/src/app/shared/shared-support-modal/support-modal.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
1.action-button-cancel {
2 margin-right: 0 !important;
3}
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 ae603c7a8..a0b9fada6 100644
--- 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'
6 6
7@Component({ 7@Component({
8 selector: 'my-support-modal', 8 selector: 'my-support-modal',
9 templateUrl: './support-modal.component.html', 9 templateUrl: './support-modal.component.html'
10 styleUrls: [ './support-modal.component.scss' ]
11}) 10})
12export class SupportModalComponent { 11export class SupportModalComponent {
13 @Input() video: VideoDetails = null 12 @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 57920239d..d6ee67ba9 100644
--- 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 @@
30 30
31 <div class="modal-footer"> 31 <div class="modal-footer">
32 <div class="form-group inputs"> 32 <div class="form-group inputs">
33 <input 33 <input type="button" role="button" i18n-value value="Close" class="peertube-button grey-button" (click)="dismiss()" />
34 type="button" role="button" i18n-value value="Close" class="action-button action-button-cancel"
35 (click)="dismiss()"
36 >
37 34
38 <my-edit-button 35 <my-edit-button
39 i18n-label label="Update live settings" 36 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 8a9218343..4ac74c106 100644
--- 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 @@
4 <ng-container i18n>Download</ng-container> 4 <ng-container i18n>Download</ng-container>
5 5
6 <div *ngIf="videoCaptions" ngbDropdown class="d-inline-block ml-1"> 6 <div *ngIf="videoCaptions" ngbDropdown class="d-inline-block ml-1">
7 <span id="dropdownDownloadType" ngbDropdownToggle> 7 <span id="dropdown-download-type" ngbDropdownToggle>
8 {{ type }} 8 {{ type }}
9 </span> 9 </span>
10 <div ngbDropdownMenu aria-labelledby="dropdownDownloadType"> 10 <div ngbDropdownMenu aria-labelledby="dropdown-download-type">
11 <button *ngIf="type === 'video'" (click)="switchToType('subtitles')" ngbDropdownItem i18n>subtitles</button> 11 <button *ngIf="type === 'video'" (click)="switchToType('subtitles')" ngbDropdownItem i18n>subtitles</button>
12 <button *ngIf="type === 'subtitles'" (click)="switchToType('video')" ngbDropdownItem i18n>video</button> 12 <button *ngIf="type === 'subtitles'" (click)="switchToType('video')" ngbDropdownItem i18n>video</button>
13 </div> 13 </div>
@@ -37,7 +37,7 @@
37 37
38 <ng-container *ngFor="let file of getVideoFiles()" [ngbNavItem]="file.resolution.id"> 38 <ng-container *ngFor="let file of getVideoFiles()" [ngbNavItem]="file.resolution.id">
39 <a ngbNavLink i18n>{{ file.resolution.label }}</a> 39 <a ngbNavLink i18n>{{ file.resolution.label }}</a>
40 40
41 <ng-template ngbNavContent> 41 <ng-template ngbNavContent>
42 <div class="nav-content"> 42 <div class="nav-content">
43 <div class="input-group input-group-sm"> 43 <div class="input-group input-group-sm">
@@ -53,7 +53,7 @@
53 </ng-container> 53 </ng-container>
54 </div> 54 </div>
55 <div [ngbNavOutlet]="resolutionNav"></div> 55 <div [ngbNavOutlet]="resolutionNav"></div>
56 56
57 <div class="advanced-filters collapse-transition" [ngbCollapse]="isAdvancedCustomizationCollapsed"> 57 <div class="advanced-filters collapse-transition" [ngbCollapse]="isAdvancedCustomizationCollapsed">
58 <ng-container *ngIf="videoFile?.metadata"> 58 <ng-container *ngIf="videoFile?.metadata">
59 <div ngbNav #nav="ngbNav" class="nav-tabs nav-metadata"> 59 <div ngbNav #nav="ngbNav" class="nav-tabs nav-metadata">
@@ -67,7 +67,7 @@
67 </div> 67 </div>
68 </div> 68 </div>
69 </ng-template> 69 </ng-template>
70 70
71 <ng-container ngbNavItem [disabled]="videoFileMetadataVideoStream === undefined"> 71 <ng-container ngbNavItem [disabled]="videoFileMetadataVideoStream === undefined">
72 <a ngbNavLink i18n>Video stream</a> 72 <a ngbNavLink i18n>Video stream</a>
73 <ng-template ngbNavContent> 73 <ng-template ngbNavContent>
@@ -79,7 +79,7 @@
79 </div> 79 </div>
80 </ng-template> 80 </ng-template>
81 </ng-container> 81 </ng-container>
82 82
83 <ng-container ngbNavItem [disabled]="videoFileMetadataAudioStream === undefined"> 83 <ng-container ngbNavItem [disabled]="videoFileMetadataAudioStream === undefined">
84 <a ngbNavLink i18n>Audio stream</a> 84 <a ngbNavLink i18n>Audio stream</a>
85 <ng-template ngbNavContent> 85 <ng-template ngbNavContent>
@@ -91,7 +91,7 @@
91 </div> 91 </div>
92 </ng-template> 92 </ng-template>
93 </ng-container> 93 </ng-container>
94 94
95 </ng-container> 95 </ng-container>
96 </div> 96 </div>
97 <div [ngbNavOutlet]="nav"></div> 97 <div [ngbNavOutlet]="nav"></div>
@@ -107,20 +107,20 @@
107 </div> 107 </div>
108 </ng-container> 108 </ng-container>
109 </div> 109 </div>
110 110
111 <div (click)="isAdvancedCustomizationCollapsed = !isAdvancedCustomizationCollapsed" role="button" class="advanced-filters-button" 111 <div (click)="isAdvancedCustomizationCollapsed = !isAdvancedCustomizationCollapsed" role="button" class="advanced-filters-button"
112 [attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic"> 112 [attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic">
113 <ng-container *ngIf="isAdvancedCustomizationCollapsed"> 113 <ng-container *ngIf="isAdvancedCustomizationCollapsed">
114 <span class="glyphicon glyphicon-menu-down"></span> 114 <span class="glyphicon glyphicon-menu-down"></span>
115 115
116 <ng-container i18n> 116 <ng-container i18n>
117 Advanced 117 Advanced
118 </ng-container> 118 </ng-container>
119 </ng-container> 119 </ng-container>
120 120
121 <ng-container *ngIf="!isAdvancedCustomizationCollapsed"> 121 <ng-container *ngIf="!isAdvancedCustomizationCollapsed">
122 <span class="glyphicon glyphicon-menu-up"></span> 122 <span class="glyphicon glyphicon-menu-up"></span>
123 123
124 <ng-container i18n> 124 <ng-container i18n>
125 Simple 125 Simple
126 </ng-container> 126 </ng-container>
@@ -131,13 +131,10 @@
131 131
132 <div class="modal-footer inputs"> 132 <div class="modal-footer inputs">
133 <input 133 <input
134 type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel" 134 type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
135 (click)="hide()" (key.enter)="hide()" 135 (click)="hide()" (key.enter)="hide()"
136 > 136 >
137 137
138 <input 138 <input type="submit" i18n-value value="Download" class="peertube-button orange-button" (click)="download()" />
139 type="submit" i18n-value value="Download" class="action-button-submit"
140 (click)="download()"
141 >
142 </div> 139 </div>
143</ng-template> 140</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 199c3dac8..485db5ef5 100644
--- 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 @@
17 .nav-tabs { 17 .nav-tabs {
18 margin-top: 10x; 18 margin-top: 10x;
19 } 19 }
20 20
21 .glyphicon { 21 .glyphicon {
22 margin-right: 5px; 22 margin-right: 5px;
23 } 23 }
@@ -46,7 +46,7 @@
46 @include orange-button; 46 @include orange-button;
47} 47}
48 48
49#dropdownDownloadType { 49#dropdown-download-type {
50 cursor: pointer; 50 cursor: pointer;
51} 51}
52 52
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 75dc91d7a..e11603e4d 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -153,17 +153,8 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
153 margin-bottom: 0; 153 margin-bottom: 0;
154 text-align: right; 154 text-align: right;
155 155
156 .action-button-cancel { 156 > .peertube-button:not(:first-child) {
157 @include peertube-button; 157 margin-left: 10px
158 @include tertiary-button;
159
160 display: inline-block;
161 margin-right: 10px;
162 }
163
164 .action-button-submit {
165 @include peertube-button;
166 @include orange-button;
167 } 158 }
168 } 159 }
169} 160}
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index bf844ac5d..73606f940 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -238,7 +238,8 @@
238 font-size: 15px; 238 font-size: 15px;
239 height: $button-height; 239 height: $button-height;
240 line-height: $button-height; 240 line-height: $button-height;
241 border-radius: 3px; 241 // FIXME: because of primeng that redefines border-radius of all input[type="..."]
242 border-radius: 3px !important;
242 text-align: center; 243 text-align: center;
243 padding: 0 17px 0 13px; 244 padding: 0 17px 0 13px;
244 cursor: pointer; 245 cursor: pointer;
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 9c9b5d4fc..544d0039a 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -3,6 +3,11 @@
3 3
4@import '~primeng/resources/primeng.css'; 4@import '~primeng/resources/primeng.css';
5 5
6// Override primeng style we don't want
7input[type="button"] {
8 border-radius: inherit;
9}
10
6// Taken from old nova light theme 11// Taken from old nova light theme
7 12
8body .p-disabled { 13body .p-disabled {