From 1b58a66cea2f0168fc98f69dcc71434818d67684 Mon Sep 17 00:00:00 2001
From: Gustavo Maximiliano Cortez <cmgustavo83@gmail.com>
Date: Thu, 2 Mar 2017 11:17:04 -0300
Subject: [PATCH] Fix styling on mobile (slide to accept)

---
 app-template/copay/sass/overrides.scss          |  6 ++++++
 src/sass/variables.scss                         |  6 ++++++
 src/sass/views/includes/slideToAccept.scss      | 17 +++++++----------
 .../views/includes/slideToAcceptSuccess.scss    |  3 +--
 4 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/app-template/copay/sass/overrides.scss b/app-template/copay/sass/overrides.scss
index 16d2f2bbc..d4ac3b14f 100644
--- a/app-template/copay/sass/overrides.scss
+++ b/app-template/copay/sass/overrides.scss
@@ -39,6 +39,12 @@ $v-button-secondary-outline-color:                   $v-accent-color;
 $v-button-secondary-outline-active-bg:               darken($v-accent-color, 10%);
 $v-button-secondary-outline-active-color:            $v-accent-color;
 
+/* Slide */
+
+$v-slide-bg-color:                                   $v-accent-color;
+$v-slider-bg-color:                                  #069074;
+$v-slide-text-color:                                 #FFFFFF;
+
 /* Onboarding */
 $v-onboarding-welcome-bg:                            none;
 $v-onboarding-color:                                 $v-text-secondary-color;
diff --git a/src/sass/variables.scss b/src/sass/variables.scss
index 2b1710f97..4737112af 100644
--- a/src/sass/variables.scss
+++ b/src/sass/variables.scss
@@ -93,6 +93,12 @@ $v-button-secondary-outline-color:                   $v-dark-gray !default;
 $v-button-secondary-outline-active-bg:               $v-dark-gray !default;
 $v-button-secondary-outline-active-color:            #ffffff !default;
 
+/* Slide */
+
+$v-slide-bg-color:                                   $v-accent-color;
+$v-slider-bg-color:                                  #5063B9 !default;
+$v-slide-text-color:                                 #FFFFFF !default;
+
 /* Onboarding */
 $v-onboarding-pane-bg:                               $v-primary-color !default;
 $v-onboarding-gradient-top-color:                    $v-primary-color !default;
diff --git a/src/sass/views/includes/slideToAccept.scss b/src/sass/views/includes/slideToAccept.scss
index 0b533ac77..97c307931 100644
--- a/src/sass/views/includes/slideToAccept.scss
+++ b/src/sass/views/includes/slideToAccept.scss
@@ -1,12 +1,9 @@
 slide-to-accept {
-  $slide-bg-color: #647CE8;
-  $slider-bg-color: #5063B9;
-  $slide-text-color: #FFFFFF;
   position: fixed;
   bottom: 0;
   height: 92px;
   width: 100%;
-  background: $slide-bg-color;
+  background: $v-slide-bg-color;
 
   @mixin center-vertically {
     display: flex;
@@ -26,7 +23,7 @@ slide-to-accept {
       @include center-vertically;
       height: 100%;
       width: 100%;
-      background: $slider-bg-color;
+      background: $v-slider-bg-color;
       -webkit-transform: translateX(0);
       transform: translateX(0);
       margin-left: -100%;
@@ -37,7 +34,7 @@ slide-to-accept {
         content: '';
         width: 10000px;
         left: -10000px + 1;
-        background: $slider-bg-color;
+        background: $v-slider-bg-color;
       }
 
       &::after {
@@ -45,14 +42,14 @@ slide-to-accept {
         content: '';
         width: 15px;
         right: -10px;
-        background: $slider-bg-color;
+        background: $v-slider-bg-color;
       }
 
       &__tip {
         @include center-vertically;
         width: 124px;
         height: 116px;
-        background: $slider-bg-color;
+        background: $v-slider-bg-color;
         right: -71px;
         border-radius: 50%;
         top: 50%;
@@ -78,7 +75,7 @@ slide-to-accept {
       top: 0;
       left: 0;
       width: 100%;
-      color: $slide-text-color;
+      color: $v-slide-text-color;
       font-size: 18px;
       font-weight: 600;
       letter-spacing: .03rem;
@@ -93,7 +90,7 @@ slide-to-accept {
     &__status-text {
       @include center-vertically;
       justify-content: center;
-      color: $slide-text-color;
+      color: $v-slide-text-color;
       z-index: 4;
       width: 100%;
       font-size: 17px;
diff --git a/src/sass/views/includes/slideToAcceptSuccess.scss b/src/sass/views/includes/slideToAcceptSuccess.scss
index cd825766a..3c2c81203 100644
--- a/src/sass/views/includes/slideToAcceptSuccess.scss
+++ b/src/sass/views/includes/slideToAcceptSuccess.scss
@@ -1,5 +1,4 @@
 slide-to-accept-success {
-  $slider-bg-color: #5063B9;
   $success-bg-color: #11D1A6;
   height: 100%;
   width: 100%;
@@ -19,7 +18,7 @@ slide-to-accept-success {
       $scale-factor: 20;
       height: 10vmax;
       width: 10vmax;
-      background: $slider-bg-color;
+      background: $v-slider-bg-color;
       bottom: 0;
       position: absolute;
       left: calc(50% - 5vmax);