Fix button/input/select heights

diff --git a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
index b98cd115631b8a43a855aaa2a5e95b5e14b507b4..e3b2267683f8bbe0d8a73792dcae66ed81360482 100644 (file)
--- a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
+++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
@@ -1,8 +1,9 @@
 <h1 class="visually-hidden" i18n>Notifications</h1>
+
 <div class="header">
-  <a routerLink="/my-account/settings" fragment="notifications" i18n>
+  <a class="peertube-button-link grey-button" routerLink="/my-account/settings" fragment="notifications">
     <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon>
-    Notification preferences
+    <span i18n>Notification preferences</span>
   </a>
 
   <div class="peertube-select-container peertube-select-button ms-2 me-2">
@@ -13,7 +14,7 @@
     </select>
   </div>
 
-  <button class="btn ms-auto" [disabled]="!hasUnreadNotifications()" (click)="markAllAsRead()">
+  <button class="ms-auto peertube-button grey-button" [disabled]="!hasUnreadNotifications()" (click)="markAllAsRead()">
     <ng-container *ngIf="hasUnreadNotifications()">
       <my-global-icon iconName="tick" aria-hidden="true"></my-global-icon>
 

diff --git a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss
index d412e568fdf2229285708a2bbd610c98689f31b3..cee3389915170c749e896bdabe46cac80eed5e50 100644 (file)
--- a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss
+++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss
@@ -3,17 +3,13 @@
 
 .header {
   display: flex;
-  margin-bottom: 20px;
+  margin-bottom: 1.25rem;
 
   a {
-    @include peertube-button-link;
-    @include grey-button;
     @include button-with-icon(18px, 3px, -1px);
   }
 
   button {
-    @include peertube-button;
-    @include grey-button;
     @include button-with-icon(20px, 3px, -1px);
   }
 

diff --git a/client/src/app/header/header.component.html b/client/src/app/header/header.component.html
index b5e9e3dd860d50ec900fe16afec5273396e534f2..4e327769da2cc041b06b4beae7aed02f534c16aa 100644 (file)
--- a/client/src/app/header/header.component.html
+++ b/client/src/app/header/header.component.html
@@ -1,6 +1,6 @@
 <my-search-typeahead class="w-100 d-flex justify-content-center"></my-search-typeahead>
 
-<a class="publish-button" routerLink="/videos/upload">
+<a class="peertube-button-link orange-button publish-button" routerLink="/videos/upload">
   <my-global-icon iconName="upload" aria-hidden="true"></my-global-icon>
   <span i18n class="publish-button-label">Publish</span>
 </a>

diff --git a/client/src/app/header/header.component.scss b/client/src/app/header/header.component.scss
index ef7749ced0f03ed166a8837f433dbd4d3264193c..37bee4645cbb46f67c0b00910a7dcbd3d2de6120 100644 (file)
--- a/client/src/app/header/header.component.scss
+++ b/client/src/app/header/header.component.scss
@@ -2,9 +2,7 @@
 @use '_mixins' as *;
 
 .publish-button {
-  @include peertube-button-link;
-  @include orange-button;
-  @include button-with-icon(22px, 3px, -1px);
+  @include button-with-icon(21px, 3px, -1px);
   @include margin-right(25px);
 
   @media screen and (max-width: $mobile-view) {

diff --git a/client/src/app/header/search-typeahead.component.scss b/client/src/app/header/search-typeahead.component.scss
index 48b61cf3fe3b57b97646edfa9cbe51826867eab8..b96853400b638cf79887e0069994b788eb01b724 100644 (file)
--- a/client/src/app/header/search-typeahead.component.scss
+++ b/client/src/app/header/search-typeahead.component.scss
@@ -2,13 +2,11 @@
 @use '_mixins' as *;
 
 #search-video {
-  @include peertube-input-text($search-input-width);
+  @include peertube-input-text($search-input-width, 14px);
 
   @include padding-left(10px);
   @include padding-right(40px); // For the search icon
 
-  font-size: 14px;
-
   &::placeholder {
     color: pvar(--inputPlaceholderColor);
   }

diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 0f301dab2518debf065dbfbd828b6b7b5b3d71b8..cafe830fe15a7a7216c68a930b8c235ec5e0f628 100644 (file)
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -91,8 +91,16 @@
   }
 }
 
-@mixin peertube-input-text($width) {
-  padding: 4px 15px;
+@mixin rounded-line-height-1-5 ($font-size) {
+  line-height: $font-size + math.round(math.div($font-size, 2));
+}
+
+@mixin peertube-input-text($width, $font-size: $form-input-font-size) {
+  @include rounded-line-height-1-5($font-size);
+
+  font-size: $font-size;
+
+  padding: 3px 15px;
   display: inline-block;
   width: $width;
   max-width: $width;
@@ -100,8 +108,6 @@
   background-color: pvar(--inputBackgroundColor);
   border: 1px solid pvar(--inputBorderColor);
   border-radius: 3px;
-  font-size: $form-input-font-size;
-  line-height: $form-input-line-height;
 
   &::placeholder {
     color: pvar(--inputPlaceholderColor);
@@ -252,6 +258,8 @@
 }
 
 @mixin peertube-button {
+  @include rounded-line-height-1-5($button-font-size);
+
   padding: 4px 13px;
 
   border: 0;
@@ -264,7 +272,6 @@
   cursor: pointer;
 
   font-size: $button-font-size;
-  line-height: $button-font-size + math.round(math.div($button-font-size, 2));
 
   my-global-icon + * {
     @include margin-right(4px);
@@ -314,10 +321,6 @@
     width: $width;
     top: $top;
   }
-
-  span {
-    vertical-align: middle;
-  }
 }
 
 @mixin peertube-file {
@@ -408,15 +411,17 @@
   }
 
   select {
-    padding: 4px 35px 4px 12px;
+    @include rounded-line-height-1-5($form-input-font-size);
+
+    font-size: $form-input-font-size;
+
+    padding: 3px 35px 3px 12px;
     position: relative;
     border: 1px solid pvar(--inputBorderColor);
     background: transparent none;
     appearance: none;
     text-overflow: ellipsis;
     color: pvar(--mainForegroundColor);
-    font-size: $form-input-font-size;
-    line-height: $form-input-line-height;
 
     &:focus {
       outline: none;
@@ -443,6 +448,9 @@
       font-weight: $font-semibold;
       color: pvar(--greyForegroundColor);
       border: 0;
+
+      // No border, add +1 to vertical padding
+      padding: 4px 35px 4px 12px;
     }
   }
 }

diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 8358270daf0c7dfcba0d3658bf96d7fe002a5f0b..1eb3135f4e970bceea605cd3f676848bea632872 100644 (file)
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -96,7 +96,6 @@ $activated-action-button-color: #212529;
 
 $focus-box-shadow-form: 0 0 0 .2rem;
 $form-input-font-size: 15px;
-$form-input-line-height: 1.4;
 
 $video-watch-player-factor: math.div(16, 9);
 $video-watch-info-margin-left: 44px;

diff --git a/client/src/sass/ng-select.scss b/client/src/sass/ng-select.scss
index 55494a5566553a84255bf27883c61cdf96da64c5..a9455b38b03492501b71fb46ad4667396d1cd60f 100644 (file)
--- a/client/src/sass/ng-select.scss
+++ b/client/src/sass/ng-select.scss
@@ -35,8 +35,9 @@ $ng-select-input-text: pvar(--mainForegroundColor);
 @import '@ng-select/ng-select/scss/default.theme';
 
 .ng-select {
+  @include rounded-line-height-1-5($ng-select-value-font-size);
+
   font-size: $ng-select-value-font-size;
-  line-height: $form-input-line-height;
 
   &.ng-select-focused {
     &:not(.ng-select-opened) > .ng-select-container {