1 files changed, 31 insertions, 36 deletions

diff --git a/client/src/app/shared/user-subscription/subscribe-button.component.scss b/client/src/app/shared/user-subscription/subscribe-button.component.scss
index b78d2f59c..7a8a8ee08 100644
--- a/client/src/app/shared/user-subscription/subscribe-button.component.scss
+++ b/client/src/app/shared/user-subscription/subscribe-button.component.scss
@@ -1,51 +1,46 @@
 @import '_variables';
 @import '_mixins';
 
-.subscribe-button {
+.btn-group-subscribe {
   @include peertube-button;
-  @include orange-button;
-}
+  @include disable-default-a-behaviour;
+  float: right;
+  padding: 0;
 
-.unsubscribe-button {
-  @include peertube-button;
-  @include grey-button
-}
+  &.btn-group > .btn:not(.dropdown-toggle) {
+    padding-right: 5px;
+    font-size: 15px;
+  }
+  &.btn-group > .btn-group:not(:first-child) > .btn {
+    padding-left: 2px;
+  }
 
-.subscribe-button,
-.unsubscribe-button {
-  display: inline-block;
+  &.subscribe-button {
+    .btn {
+      @include orange-button;
+      font-weight: 600;
+    }
 
-  &.small {
-    min-width: 75px;
-    height: 20px;
-    line-height: 20px;
-    font-size: 13px;
+    span.followers-count {
+      padding-left:5px;
+    }
   }
-
-  &.normal {
-    min-width: 120px;
-    height: 30px;
-    line-height: 30px;
-    font-size: 16px;
+  &.unsubscribe-button {
+    .btn {
+      @include grey-button;
+      font-weight: 600;
+    }
   }
-}
 
-.unsubscribe-button {
-  .subscribed {
-    display: inline;
+  .dropdown-header {
+    padding-left: 1rem;
   }
 
-  .unsubscribe {
-    display: none;
+  /deep/ form {
+    padding: 0.25rem 1rem;
   }
 
-  &:hover {
-    .subscribed {
-      display: none;
-    }
-
-    .unsubscribe {
-      display: inline;
-    }
+  input {
+    @include peertube-input-text(100%);
   }
-}
\ No newline at end of file
+}