From 29082e9aee3dc50acfd5f1635f1a09017b83a893 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 23 Nov 2018 00:24:16 +0300
Subject: [PATCH] fixed checkbox styles, optimized default shadows

---
 src/App.scss                                  |  9 +---
 src/components/tab_switcher/tab_switcher.scss |  8 +--
 src/services/style_setter/style_setter.js     | 50 ++++++-------------
 3 files changed, 20 insertions(+), 47 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index e8aa5846..3059d753 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -58,8 +58,6 @@ button {
   border-radius: $fallback--btnRadius;
   border-radius: var(--btnRadius, $fallback--btnRadius);
   cursor: pointer;
-  /* border-top: 1px solid rgba(255, 255, 255, 0.2); */
-  /* border-bottom: 1px solid rgba(0, 0, 0, 0.2); */
   box-shadow: 0px 0px 2px black;
   box-shadow: var(--buttonShadow);
   font-size: 14px;
@@ -80,8 +78,7 @@ button {
   }
 
   &:active {
-    /* border-bottom: 1px solid rgba(255, 255, 255, 0.2); */
-    /* border-top: 1px solid rgba(0, 0, 0, 0.2); */
+    box-shadow: var(--buttonPressedShadow);
   }
 
   &:disabled {
@@ -106,8 +103,6 @@ input, textarea, .select {
   border: none;
   border-radius: $fallback--inputRadius;
   border-radius: var(--inputRadius, $fallback--inputRadius);
-  /* border-bottom: 1px solid rgba(255, 255, 255, 0.2); */
-  /* border-top: 1px solid rgba(0, 0, 0, 0.2); */
   box-shadow: 0px 0px 2px black inset;
   box-shadow: var(--inputShadow);
   background-color: $fallback--fg;
@@ -184,8 +179,6 @@ input, textarea, .select {
       height: 1.1em;
       border-radius: $fallback--checkBoxRadius;
       border-radius: var(--checkBoxRadius, $fallback--checkBoxRadius);
-      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-      border-top: 1px solid rgba(0, 0, 0, 0.2);
       box-shadow: 0px 0px 2px black inset;
       box-shadow: var(--inputShadow);
       margin-right: .5em;
diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
index 9fd9d905..d0e5ea87 100644
--- a/src/components/tab_switcher/tab_switcher.scss
+++ b/src/components/tab_switcher/tab_switcher.scss
@@ -34,13 +34,13 @@
       border-bottom-right-radius: 0;
       padding: 5px 1em 99px;
 
-      &:hover {
-        z-index: 6;
-      }
-
       &:not(.active) {
         z-index: 4;
 
+        &:hover {
+          z-index: 6;
+        }
+
         &::after {
           content: '';
           position: absolute;
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 4a48f419..10583722 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -256,40 +256,26 @@ const generateRadii = (input) => {
 }
 
 const generateShadows = (input) => {
-  const buttonInsetFakeBorders = [{
+  const border = (top, shadow) => ({
     x: 0,
-    y: 1,
+    y: top ? 1 : -1,
     blur: 0,
     spread: 0,
-    color: '#FFFFFF',
+    color: shadow ? '#000000' : '#FFFFFF',
     alpha: 0.2,
     inset: true
-  }, {
+  })
+  const buttonInsetFakeBorders = [border(true, false), border(false, true)]
+  const inputInsetFakeBorders = [border(true, true), border(false, false)]
+  const hoverGlow = {
     x: 0,
-    y: -1,
-    blur: 0,
+    y: 0,
+    blur: 4,
     spread: 0,
-    color: '#000000',
-    alpha: 0.2,
-    inset: true
-  }]
-  const inputInsetFakeBorders = [{
-    x: 0,
-    y: 1,
-    blur: 0,
-    spread: 0,
-    color: '#000000',
-    alpha: 0.2,
-    inset: true
-  }, {
-    x: 0,
-    y: -1,
-    blur: 0,
-    spread: 0,
-    color: '#FFFFFF',
-    alpha: 0.2,
-    inset: true
-  }]
+    color: '--faint',
+    alpha: 1
+  }
+
   const shadows = {
     panel: [{
       x: 1,
@@ -332,14 +318,8 @@ const generateShadows = (input) => {
       color: '#000000',
       alpha: 1
     }, ...buttonInsetFakeBorders],
-    buttonHover: [{
-      x: 0,
-      y: 0,
-      blur: 4,
-      spread: 0,
-      color: '--faint',
-      alpha: 1
-    }, ...buttonInsetFakeBorders],
+    buttonHover: [hoverGlow, ...buttonInsetFakeBorders],
+    buttonPressed: [hoverGlow, ...inputInsetFakeBorders],
     input: [...inputInsetFakeBorders, {
       x: 0,
       y: 0,