From b9149ad77975cc5466507b31102e4091903a1c23 Mon Sep 17 00:00:00 2001
From: ludwiczakpawel <ludwiczakpawel@gmail.com>
Date: Wed, 22 Apr 2020 00:31:12 +0200
Subject: [PATCH] Snackbars Improvements (#7412)

* fix stascking

* updated buttons

* adjustments
---
 .../stylesheets/components/snackbars.scss     | 18 +++++++----------
 app/assets/stylesheets/themes/night.scss      |  4 ++--
 app/views/pages/crayons.html.erb              | 20 ++++++-------------
 3 files changed, 15 insertions(+), 27 deletions(-)

diff --git a/app/assets/stylesheets/components/snackbars.scss b/app/assets/stylesheets/components/snackbars.scss
index b4f1f2578..6f417c415 100644
--- a/app/assets/stylesheets/components/snackbars.scss
+++ b/app/assets/stylesheets/components/snackbars.scss
@@ -2,17 +2,13 @@
 @import '../base/boxes';
 
 .crayons-snackbar {
-  @extend .crayons-box;
-  @extend .crayons-box--filled;
-  @extend .crayons-box--level-1;
   position: fixed;
   z-index: 9999; // todo: make z-index a variable..
   left: $su-2;
   right: $su-2;
   bottom: $su-2;
-  display: flex;
-  flex-direction: column;
-  color: var(--body-color-inverted);
+  display: grid;
+  grid-gap: $su-2;
 
   @media (min-width: $breakpoint-s) {
     max-width: 480px;
@@ -20,18 +16,18 @@
     left: $su-6;
     right: auto;
     bottom: $su-6;
+    justify-items: flex-start;
   }
 
   &__item {
+    @extend .crayons-box;
+    @extend .crayons-box--filled;
+    @extend .crayons-box--level-1;
+    color: var(--body-color-inverted);
     display: none;
     align-items: center;
     justify-content: space-between;
     padding: $su-2;
-    border-bottom: 1px solid var(--box-darker);
-
-    &:last-child {
-      border-bottom: none;
-    }
   }
 
   &__body {
diff --git a/app/assets/stylesheets/themes/night.scss b/app/assets/stylesheets/themes/night.scss
index a910274c0..ceaf9b263 100644
--- a/app/assets/stylesheets/themes/night.scss
+++ b/app/assets/stylesheets/themes/night.scss
@@ -147,8 +147,8 @@
   --label-secondary: var(--base-60);
 
   // Default box
-  --box: var(--base-90);
-  --box-darker: var(--base-100);
+  --box: var(--base-0);
+  --box-darker: var(--base-inverted);
 
   // Indicators
   --indicator-accent-bg: var(--accent-brand);
diff --git a/app/views/pages/crayons.html.erb b/app/views/pages/crayons.html.erb
index a69ab032b..99903c804 100644
--- a/app/views/pages/crayons.html.erb
+++ b/app/views/pages/crayons.html.erb
@@ -1116,9 +1116,7 @@
           <p>You have just downvoted this article.</p>
         </div>
         <div class="crayons-snackbar__actions">
-          <div class="crayons-btn-group">
-            <button type="button" class="crayons-btn crayons-btn--secondary">Undo</button>
-          </div>
+          <button type="button" class="crayons-btn crayons-btn--ghost-success crayons-btn--inverted">Undo</button>
         </div>
       </div>
 
@@ -1127,9 +1125,7 @@
           <p>And now upvoted...</p>
         </div>
         <div class="crayons-snackbar__actions">
-          <div class="crayons-snackbar__actions">
-            <button type="button" class="crayons-btn crayons-btn--secondary">Undo</button>
-          </div>
+          <button type="button" class="crayons-btn crayons-btn--ghost-success crayons-btn--inverted">Undo</button>
         </div>
       </div>
 
@@ -1138,9 +1134,7 @@
           <p>And downvoted again...</p>
         </div>
         <div class="crayons-snackbar__actions">
-          <div class="crayons-snackbar__actions">
-            <button type="button" class="crayons-btn crayons-btn--secondary">Undo</button>
-          </div>
+          <button type="button" class="crayons-btn crayons-btn--ghost-success crayons-btn--inverted">Undo</button>
         </div>
       </div>
     </div>
@@ -1153,10 +1147,8 @@
           <p>You have just downvoted this article.</p>
         </div>
         <div class="crayons-snackbar__actions">
-          <div class="crayons-btn-group">
-            <button type="button" class="crayons-btn crayons-btn--secondary">Action 1</button>
-            <button type="button" class="crayons-btn crayons-btn--secondary">Action 2</button>
-          </div>
+          <button type="button" class="crayons-btn crayons-btn--ghost-success crayons-btn--inverted">Action 1</button>
+          <button type="button" class="crayons-btn crayons-btn--ghost-success crayons-btn--inverted">Action 2</button>
         </div>
       </div>
     </div>
@@ -1169,7 +1161,7 @@
         <p>You have just downvoted this article.</p>
       </div>
       <div class="crayons-snackbar__actions">
-        <button type="button" class="crayons-btn crayons-btn--secondary">Undo</button>
+        <button type="button" class="crayons-btn crayons-btn--ghost-success">Undo</button>
       </div>
     </div>
     <div class="crayons-snackbar__item">