Add manage buttons for own channels and account, video counts (#2421)

* Add manage buttons for own channels and account, video counts

* Change manage button color and introduce secondary color

4 files changed, 24 insertions, 1 deletions

diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 9877a07d5..5dacdd73b 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -26,6 +26,7 @@ body {
   --mainHoverColor: #{$orange-hover-color};
   --mainBackgroundColor: #{$bg-color};
   --mainForegroundColor: #{$fg-color};
+  --secondaryColor: #{$cyan-color};
 
   --menuBackgroundColor: #{$menu-background};
   --menuForegroundColor: #{$menu-color};
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index dc0d075c9..fca116701 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -170,3 +170,13 @@ ngb-tabset.bootstrap {
 ngb-modal-backdrop {
   z-index: 10000 !important;
 }
+
+.btn-outline-tertiary {
+        color: var(--secondaryColor);
+  border-color: var(--secondaryColor);
+  
+  &:hover {
+    color: var(--mainBackgroundColor);
+    background-color: var(--secondaryColor);
+  }
+}
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 099a909bb..136eddd3a 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -179,6 +179,15 @@
   @include peertube-button;
 }
 
+@mixin peertube-button-outline {
+  display: inline-block;
+
+  @include disable-default-a-behaviour;
+  @include peertube-button;
+
+  border: 1px solid;
+}
+
 @mixin button-with-icon($width: 20px, $margin-right: 3px, $top: -1px) {
   my-global-icon {
     position: relative;
@@ -453,7 +462,7 @@
 }
 
 @mixin sub-menu-with-actor {
-  height: 160px;
+  height: max-content;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 6dededb0e..5b5ac9adc 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -14,6 +14,8 @@ $grey-foreground-hover-color: #303030;
 $orange-color: #F1680D;
 $orange-hover-color: #F97D46;
 
+$cyan-color: hsl(187, 77%, 34%);
+
 $support-button: inherit;
 $support-button-heart: #e83e8c;
 
@@ -73,6 +75,7 @@ $variables: (
   --mainHoverColor: var(--mainHoverColor),
   --mainBackgroundColor: var(--mainBackgroundColor),
   --mainForegroundColor: var(--mainForegroundColor),
+  --secondaryColor: var(--secondaryColor),
 
   --menuBackgroundColor: var(--menuBackgroundColor),
   --menuForegroundColor: var(--menuForegroundColor),