Improved frontend colors

4 files changed, 23 insertions, 6 deletions

diff --git a/public/styles/main.sass b/public/styles/main.sass
index 94bfe56..ce758fe 100644
--- a/public/styles/main.sass
+++ b/public/styles/main.sass
@@ -8,5 +8,6 @@
 // Normal input doesn't work here for npm packages!
 @import "../../node_modules/bulma/bulma"
 @import "../../node_modules/jquery-ui-bundle/jquery-ui.min"
+@import "variables"
 @import "style"
 @import "pin"
diff --git a/public/styles/pin.sass b/public/styles/pin.sass
index 1cb54ca..cce5b83 100644
--- a/public/styles/pin.sass
+++ b/public/styles/pin.sass
@@ -5,6 +5,9 @@
  /     See https://github.com/texxme/Texx/blob/master/LICENSE
  /
 
+.title
+  color: #d4d1cc
+
 .columns
   min-height: 100%
 
@@ -29,7 +32,7 @@
   width: 10vw
   height: 10vw
   font-size: 10vw
-  background-color: #2d3338
+  background-color: $gray
   color: transparent
   text-shadow: 0 0 0 #000
   border: none
@@ -41,7 +44,7 @@
   margin: 0
 
 .pin-wrapper > .column input:focus
-  background-color: #394046
+  background-color: $light-gray
   border-color: inherit
   -webkit-box-shadow: none
   box-shadow: none
diff --git a/public/styles/style.sass b/public/styles/style.sass
index 34768fa..8a9eaf4 100644
--- a/public/styles/style.sass
+++ b/public/styles/style.sass
@@ -9,7 +9,7 @@ html, body
   height: 100% !important
   width: 100% !important
   overflow: hidden !important
-  background-color: #23272a !important
+  background-color: $dark-gray !important
 
 .chat
   display: none
@@ -38,7 +38,7 @@ html, body
 
 .swal-modal, .swal-title, .swal-text, .swal-icon--success__hide-corners, .swal-icon--success:after, .swal-icon--success:before
   color: #fff
-  background: #293034
+  background: $gray
 
 .swal-icon--success__line
   background-color: #00940a !important
@@ -53,6 +53,9 @@ html, body
   border-radius: 100%
   transition: background-color .3s linear
 
+.is-dark
+  background-color: $gray
+
 .ui-autocomplete
   z-index: 10002
 
@@ -60,8 +63,8 @@ html, body
   width: 100%
   padding-right: 50px
   color: #fff
-  background-color: #2d3338
-  border-color: #2d3338
+  background-color: $gray
+  border-color: $gray
 
 .message-input::placeholder
   color: #909090
diff --git a/public/styles/variables.sass b/public/styles/variables.sass
new file mode 100644
index 0000000..49c0803
--- /dev/null
+++ b/public/styles/variables.sass
@@ -0,0 +1,10 @@
+/*!
+ / variables.sass
+ / Copyright (c) 2019, Texx
+ / License: MIT
+ /     See https://github.com/texxme/Texx/blob/master/LICENSE
+ /
+
+$light-gray: #252a30
+$gray: #1e2024
+$dark-gray: #17181c