From 420a6043cc579d6fc342adcfe8107daf51664761 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Mon, 20 Feb 2023 11:00:17 +0100
Subject: [PATCH] Fix buttons CSS

---
 .../shared/comment/video-comment.component.html       |  2 +-
 .../shared/comment/video-comments.component.scss      | 11 +++++------
 client/src/app/header/header.component.scss           |  3 ++-
 client/src/app/menu/menu.component.scss               |  2 ++
 .../actor-banner-edit.component.scss                  |  4 ----
 .../shared-actor-image-edit/actor-image-edit.scss     |  2 +-
 client/src/sass/include/_mixins.scss                  |  8 +++-----
 7 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html
index da35a9a2e..5eefc2450 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html
@@ -37,7 +37,7 @@
         ></div>
 
         <div class="comment-actions">
-          <div tabindex=0 (click)="onWantToReply()" class="comment-action-reply" i18n>Reply</div>
+          <button (click)="onWantToReply()" class="comment-action-reply border-0 p-0" i18n>Reply</button>
 
           <my-user-moderation-dropdown
             [prependActions]="prependModerationActions" tabindex=0 [buttonStyled]="false"
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.scss b/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.scss
index 638147dfe..5001ad168 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.scss
@@ -8,6 +8,11 @@
 .view-replies {
   font-weight: $font-semibold;
   cursor: pointer;
+  position: relative;
+
+  .chevron-down {
+    @include margin-left(0);
+  }
 }
 
 .title-block {
@@ -37,12 +42,6 @@
   border: 0;
 }
 
-@media screen and (max-width: 600px) {
-  .view-replies {
-    @include margin-left(46px);
-  }
-}
-
 @media screen and (max-width: 450px) {
   .view-replies {
     font-size: 14px;
diff --git a/client/src/app/header/header.component.scss b/client/src/app/header/header.component.scss
index cf6e96d07..ef7749ced 100644
--- a/client/src/app/header/header.component.scss
+++ b/client/src/app/header/header.component.scss
@@ -10,7 +10,8 @@
   @media screen and (max-width: $mobile-view) {
     @include margin-right(10px);
 
-    padding: 0 10px;
+    padding-right: 10px;
+    padding-left: 10px;
 
     .icon.icon-upload {
       @include margin-right(0);
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 4b1ed65ce..a51686601 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -252,6 +252,8 @@ my-actor-avatar {
 
   > a,
   > my-login-link {
+    @include ellipsis;
+
     display: block;
     width: 100%;
 
diff --git a/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.scss b/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.scss
index 90fcd81aa..ec2de2528 100644
--- a/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.scss
+++ b/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.scss
@@ -25,7 +25,3 @@
     margin-bottom: 0;
   }
 }
-
-my-global-icon {
-  margin: 0 5px;
-}
diff --git a/client/src/app/shared/shared-actor-image-edit/actor-image-edit.scss b/client/src/app/shared/shared-actor-image-edit/actor-image-edit.scss
index 93bdaba57..b054086e4 100644
--- a/client/src/app/shared/shared-actor-image-edit/actor-image-edit.scss
+++ b/client/src/app/shared/shared-actor-image-edit/actor-image-edit.scss
@@ -17,11 +17,11 @@
 
 .actor-img-edit-button {
   @include peertube-button-file(30px);
+  @include button-with-icon;
   @include orange-button;
 
   display: flex;
   justify-content: center;
-  padding: 0;
   margin-top: 10px;
   margin-bottom: 5px;
   cursor: pointer;
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 2d9f9011d..0df849167 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -250,12 +250,10 @@
 }
 
 @mixin peertube-button {
-  padding: 0 13px;
+  padding: 4px 13px;
 
   border: 0;
   font-weight: $font-semibold;
-  min-height: $button-height;
-  line-height: $button-height;
 
   // Because of primeng that redefines border-radius of all input[type="..."]
   border-radius: 3px !important;
@@ -267,6 +265,7 @@
 
   my-global-icon + * {
     @include margin-right(4px);
+    @include margin-left(4px);
   }
 }
 
@@ -318,7 +317,6 @@
   position: relative;
   overflow: hidden;
   display: inline-block;
-  min-height: 30px;
 
   input[type=file] {
     position: absolute;
@@ -331,7 +329,7 @@
     filter: alpha(opacity=0);
     opacity: 0;
     outline: none;
-    background: #fff;
+    background: pvar(--mainBackgroundColor);
     cursor: inherit;
     display: block;
   }