(css) transparent buttons in watch page

2 files changed, 10 insertions, 3 deletions

diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 751f101ed..9877a07d5 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -34,8 +34,10 @@ body {
   --inputColor: #{$input-background-color};
   --inputPlaceholderColor: #{$input-placeholder-color};
 
-  --supportButtonBackgroundColor: #{$support-button};
-  --supportButtonColor: #{$white};
+  --actionButtonColor: #{$grey-foreground-color};
+  --supportButtonBackgroundColor: #{transparent};
+  --supportButtonColor: #{var(--actionButtonColor)};
+  --supportButtonHeartColor: #{$support-button-heart};
 
   font-family: $main-fonts;
   font-weight: $font-regular;
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 0cec9c412..6dededb0e 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -14,7 +14,8 @@ $grey-foreground-hover-color: #303030;
 $orange-color: #F1680D;
 $orange-hover-color: #F97D46;
 
-$support-button: #38981a;
+$support-button: inherit;
+$support-button-heart: #e83e8c;
 
 $bg-color: #fff;
 $fg-color: #000;
@@ -61,6 +62,8 @@ $input-placeholder-color: #898989;
 
 $sub-menu-margin-bottom: 30px;
 
+$activated-action-button-color: black;
+
 /*** map theme ***/
 
 // pass variables into a sass map,
@@ -78,8 +81,10 @@ $variables: (
   --inputColor: var(--inputColor),
   --inputPlaceholderColor: var(--inputPlaceholderColor),
 
+  --actionButtonColor: var(--actionButtonColor),
   --supportButtonColor: var(--supportButtonColor),
   --supportButtonBackgroundColor: var(--supportButtonBackgroundColor),
+  --supportButtonHeartColor: var(--supportButtonHeartColor),
 
   --embedForegroundColor: var(--embedForegroundColor),
   --embedBigPlayBackgroundColor: var(--embedBigPlayBackgroundColor)