From 5a991a6e58ffded109a9386316992f5f57bc1736 Mon Sep 17 00:00:00 2001
From: Fluffy-Bean <michal-gdula@protonmail.com>
Date: Wed, 12 Apr 2023 13:19:23 +0000
Subject: [PATCH] Fix notifications, change look of buttons

---
 .../static/sass/components/buttons/block.sass | 38 ++++++++++---------
 .../static/sass/components/buttons/pill.sass  |  1 +
 .../static/sass/components/notification.sass  |  2 +-
 3 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/gallery/static/sass/components/buttons/block.sass b/gallery/static/sass/components/buttons/block.sass
index 2b767ee..6dbe3c8 100644
--- a/gallery/static/sass/components/buttons/block.sass
+++ b/gallery/static/sass/components/buttons/block.sass
@@ -1,12 +1,12 @@
 @mixin btn-block($color)
     color: RGB($color)
+    box-shadow: 0 1px 0 RGBA($black, 0.2), 0 -1px 0 RGBA($white, 0.2)
 
-    &:hover
+    &:hover, &:focus-visible
         background-color: RGBA($color, 0.1)
         color: RGB($color)
+        box-shadow: 0 1px 0 RGBA($black, 0.2), 0 -1px 0 RGBA($color, 0.2)
 
-    &:focus-visible
-        outline: 2px solid RGBA($color, 0.3)
     
 .btn-block
     padding: 0.4rem 0.7rem
@@ -25,19 +25,19 @@
     font-weight: 400
     text-align: center
 
-    background-color: transparent
+    background-color: RGBA($white, 0.1)
     color: RGB($white)
     border: none
     border-radius: $rad-inner
+    box-shadow: 0 1px 0 RGBA($black, 0.2), 0 -1px 0 RGBA($white, 0.2)
+    outline: none
 
     cursor: pointer
-    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out
+    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, box-shadow 0.15s ease-in-out
 
-    &:hover
-        background-color: RGBA($white, 0.1)
-    
-    &:focus-visible
-        outline: 2px solid RGBA($white, 0.3)
+    &:hover, &:focus-visible
+        background-color: RGBA($white, 0.2)
+        box-shadow: 0 1px 0 RGBA($black, 0.3), 0 -1px 0 RGBA($white, 0.3)
 
     &.primary
         @include btn-block($primary)
@@ -91,10 +91,11 @@
 
     background-color: RGBA($white, 0.1)
     color: RGB($white)
-
     border: none
     border-bottom: 3px solid RGBA($white, 0.1)
     border-radius: $rad-inner
+    box-shadow: 0 1px 0 RGBA($black, 0.2), 0 -1px 0 RGBA($white, 0.2)
+    outline: none
 
     cursor: pointer
     transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out
@@ -107,7 +108,6 @@
 
     &:focus
         border-color: RGB($primary)
-        outline: none
 
     &.black
         @include btn-block($black)
@@ -132,13 +132,14 @@
 
     background-color: RGBA($white, 0.1)
     color: RGB($white)
-
     border: none
     border-radius: $rad-inner
+    box-shadow: 0 1px 0 RGBA($black, 0.2), 0 -1px 0 RGBA($white, 0.2)
+    outline: none
 
     cursor: pointer
     overflow: hidden
-    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out
+    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.15s ease-in-out
 
     input
         position: absolute
@@ -153,20 +154,20 @@
         text-align: center
         overflow: hidden
 
-    &:hover
+    &:hover, &:focus-visible
         background-color: RGBA($white, 0.2)
         color: RGB($white)
-
-    &:focus-visible
-        outline: 2px solid RGBA($white, 0.3)
+        box-shadow: 0 1px 0 RGBA($black, 0.3), 0 -1px 0 RGBA($white, 0.3)
 
     &.active
         background-color: RGBA($primary, 0.2)
         color: RGB($primary)
+        box-shadow: 0 1px 0 RGBA($black, 0.3), 0 -1px 0 RGBA($primary, 0.3)
 
     &.edging
         background-color: RGBA($white, 0.2)
         color: RGB($white)
+        box-shadow: 0 1px 0 RGBA($black, 0.3), 0 -1px 0 RGBA($white, 0.3)
 
         input
             display: none // So it doesnt get in the way of the drop as that breaks things
@@ -174,3 +175,4 @@
     &.error
         background-color: RGBA($critical, 0.2)
         color: RGB($critical)
+        box-shadow: 0 1px 0 RGBA($black, 0.3), 0 -1px 0 RGBA($critical, 0.3)
diff --git a/gallery/static/sass/components/buttons/pill.sass b/gallery/static/sass/components/buttons/pill.sass
index bd16429..cc30fc5 100644
--- a/gallery/static/sass/components/buttons/pill.sass
+++ b/gallery/static/sass/components/buttons/pill.sass
@@ -18,6 +18,7 @@
 
         background-color: RGB($bg-200)
         border-radius: $rad
+        box-shadow: 0 1px 0 RGB($bg-100), 0 -1px 0 RGB($bg-300)
 
 .pill-text
     margin: 0
diff --git a/gallery/static/sass/components/notification.sass b/gallery/static/sass/components/notification.sass
index 078ae97..294c695 100644
--- a/gallery/static/sass/components/notification.sass
+++ b/gallery/static/sass/components/notification.sass
@@ -61,7 +61,7 @@
     &::after
         content: ""
 
-        width: 450px
+        width: 100%
         height: 3px
 
         position: absolute