From 30f939c4b785e8cf2ad829a86f4b2f5892c2fda8 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Thu, 16 Mar 2023 10:05:55 +0100
Subject: [PATCH] Fix button/input/select heights

---
 .../my-account-notifications.component.html   |  7 ++--
 .../my-account-notifications.component.scss   |  6 +---
 client/src/app/header/header.component.html   |  2 +-
 client/src/app/header/header.component.scss   |  4 +--
 .../header/search-typeahead.component.scss    |  4 +--
 client/src/sass/include/_mixins.scss          | 32 ++++++++++++-------
 client/src/sass/include/_variables.scss       |  1 -
 client/src/sass/ng-select.scss                |  3 +-
 8 files changed, 30 insertions(+), 29 deletions(-)

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 b98cd1156..e3b226768 100644
--- 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 d412e568f..cee338991 100644
--- 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 b5e9e3dd8..4e327769d 100644
--- 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 ef7749ced..37bee4645 100644
--- 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 48b61cf3f..b96853400 100644
--- 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 0f301dab2..cafe830fe 100644
--- 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 8358270da..1eb3135f4 100644
--- 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 55494a556..a9455b38b 100644
--- 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 {