From 8167366ce08847220eb5353732494375ffc4f1e9 Mon Sep 17 00:00:00 2001
From: Kevin Martin Jose <youcancallmekevin@gmail.com>
Date: Tue, 7 Mar 2017 00:59:42 +0530
Subject: [PATCH] Style change to toasts (#316)

* Changes to toast styles

* Changes to toast styles

removed an unused variable

* removing another unused variable
---
 client/styles/abstracts/_placeholders.scss | 19 +++++++++++++++++++
 client/styles/abstracts/_variables.scss    | 14 ++++++++------
 client/styles/components/_toast.scss       | 11 ++++-------
 3 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/client/styles/abstracts/_placeholders.scss b/client/styles/abstracts/_placeholders.scss
index fc1a4876..8c6ce582 100644
--- a/client/styles/abstracts/_placeholders.scss
+++ b/client/styles/abstracts/_placeholders.scss
@@ -51,6 +51,25 @@
 	padding: 0;
 }
 
+%icon-toast{
+	@include themify() {
+		color: $toast-text-color
+		& g {
+			fill: $toast-text-color
+		}
+		&:hover {
+			color: getThemifyVariable('icon-toast-hover-color');
+			& g {
+				opacity: 1;
+				fill: getThemifyVariable('icon-toast-hover-color');
+			}
+		}
+	}
+	background-color: transparent;
+	border: none;
+	cursor: pointer;
+	padding: 0;
+}
 %none-themify-icon {
 	background-color: transparent;
 	border: none;
diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss
index f416deb6..6fc8c9cf 100644
--- a/client/styles/abstracts/_variables.scss
+++ b/client/styles/abstracts/_variables.scss
@@ -6,6 +6,8 @@ $white: #fff;
 $black: #000;
 $yellow: #F5DC23;
 $primary-text-color: #333;
+$icon-color: #8b8b8b;
+$icon-hover-color: #333;
 
 $themes: (
   light: (
@@ -29,8 +31,9 @@ $themes: (
     modal-background-color: #f4f4f4,
     modal-button-background-color: #e6e6e6,
     modal-border-color: #B9D0E1,
-    icon-color: #8b8b8b,
-    icon-hover-color: #333,
+    icon-color: $icon-color,
+    icon-hover-color: $icon-hover-color,
+    icon-toast-hover-color: $white,
     shadow-color: rgba(0, 0, 0, 0.16),
     console-background-color: #eee,
     console-header-background-color: #d6d6d6,
@@ -65,6 +68,7 @@ $themes: (
     modal-border-color: #949494,
     icon-color: #a9a9a9,
     icon-hover-color: $white,
+    icon-toast-hover-color: $white,
     shadow-color: rgba(0, 0, 0, 0.16),
     console-background-color: #4f4f4f,
     console-header-background-color: #3f3f3f,
@@ -98,6 +102,7 @@ $themes: (
     modal-border-color: #949494,
     icon-color: #a9a9a9,
     icon-hover-color: $yellow,
+    icon-toast-hover-color: $yellow,
     shadow-color: rgba(0, 0, 0, 0.16),
     console-background-color: #4f4f4f,
     console-header-background-color: #3f3f3f,
@@ -114,7 +119,7 @@ $themes: (
 $console-warn-color: #ffbe05;
 $console-error-color: #ff5f52;
 
-$toast-background-color: #979797;
+$toast-background-color: #4A4A4A;
 $toast-text-color: $white;
 
 $form-title-color: rgba(51, 51, 51, 0.87);
@@ -127,8 +132,5 @@ $form-button-hover-color: $white;
 $form-button-active-color: $white;
 $form-navigation-options-color: #999999;
 
-$icon-color: #8b8b8b;
-$icon-hover-color: #333;
-
 $about-play-background-color: rgba(255, 255, 255, 0.7);
 $about-button-border-color: rgba(151, 151, 151, 0.7);
diff --git a/client/styles/components/_toast.scss b/client/styles/components/_toast.scss
index f94642ff..d8085972 100644
--- a/client/styles/components/_toast.scss
+++ b/client/styles/components/_toast.scss
@@ -1,21 +1,18 @@
 .toast {
   background-color: $toast-background-color;
   color: $toast-text-color;
-  padding: #{20 / $base-font-size}rem;
+  padding: #{10 / $base-font-size}rem;
   position: absolute;
   top: 0;
   right: 40%;
   display: flex;
   z-index: 9999;
+  box-shadow: 0 6px 6px 0 rgba(0,0,0,0.10);
 }
 
 .toast__close {
   @include themify() {
-    @extend %icon;
+    @extend %icon-toast;
   }
-  color: $toast-text-color;
-  & g {
-    fill: $toast-text-color; 
-  }
-  margin-left: #{10 / $base-font-size}rem;
+  margin-left: #{20 / $base-font-size}rem;
 }
\ No newline at end of file