From 6e5702290adc6c4b46ef5f91fbb2c78cde26261a Mon Sep 17 00:00:00 2001
From: Danila Fedorin <danila.fedorin@gmail.com>
Date: Sun, 19 May 2019 01:34:14 -0700
Subject: [PATCH] Get rid of some inconsistent shadows and borders.

---
 static/scss/style.scss | 24 +++++++++++-------------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/static/scss/style.scss b/static/scss/style.scss
index 9c5b2f2..1b734d8 100644
--- a/static/scss/style.scss
+++ b/static/scss/style.scss
@@ -10,12 +10,10 @@ $background-color-dark: darken($background-color, 4%);
 $error-color: #f01d43;
 $error-color-dark: darken(#f01d43, 10%);
 
-$active-input-color: lighten($background-color-light, 2%);
-$active-input-border-color: $primary-color;
-$inactive-input-color: $background-color-light;
-$inactive-input-border-color: darken($inactive-input-color, 10%);
+$inactive-input-color: lighten($background-color-light, 5%);
+$active-input-color: lighten($inactive-input-color, 5%);
 
-$transition-duration: .125s;
+$transition-duration: .250s;
 
 $inset-shadow: inset 0px 0px 5px rgba(0, 0, 0, .25);
 
@@ -36,20 +34,24 @@ body {
     border-radius: 3px;
     outline: none;
 
-    transition: background-color $transition-duration;
     font-family: inherit;
     font-size: inherit;
+
+    &:focus {
+        transition: background-color $transition-duration;
+    }
 }
 
 input, textarea {
     @include input-common();
+    overflow-x: hidden;
     background-color: $inactive-input-color;
     color: white;
-    border: .5px solid $inactive-input-border-color;
+    border: none;
+    padding: 10px;
 
     &:focus {
         background-color: $active-input-color;
-        border-color: $active-input-border-color;
     }
 }
 
@@ -105,7 +107,6 @@ div.errors-wrapper {
 div.error-wrapper {
     pointer-events: auto;
     width: 400px;
-    box-shadow: 0px 0px 5px rgba(0, 0, 0, .25);
     padding: 5px;
     background-color: $error-color;
     border: 1px solid $error-color-dark;
@@ -175,7 +176,6 @@ div.reconnect-wrapper {
     display: flex;
     align-items: center;
     background-color: $inactive-input-color;
-    border: 1px solid $inactive-input-border-color;
     border-radius: 3px;
 
     .feather-icon {
@@ -191,13 +191,12 @@ div.room-wrapper {
     display: flex;
     height: 100%;
     flex-direction: column;  
-    box-shadow: $inset-shadow;
     padding: 5px;
 }
 
 div.typing-wrapper {
     padding: 5px;
-    height: 12px;
+    height: 1em;
     flex-shrink: 0;
 }
 
@@ -217,7 +216,6 @@ div.message-wrapper {
         margin: 3px;
         height: 40px;
         width: 40px;
-        border-radius: 50px;
     }
 }