Connection test

src/renderer/scss/_variables.scss

@@ -1,7 +1,10 @@
 /*Colors*/
-$body-bg: #232524;
+$body-bg: #1d1d1d;
+$body-font-color: #fff;
 $primary-color: #e36929;
-$bg-color: #232524;
+$bg-color: #1d1d1d;
+$bg-color-light: #3f3f3f;
+$bg-color-gray: #272727;
 
 /*Sizes*/
 $settingbar-width: 4rem;

src/renderer/scss/main.scss

@@ -1,3 +1,65 @@
 @import "variables";
 @import "mdi-additions";
-@import "~spectre.css/src/spectre";
+@import "~spectre.css/src/spectre";
+
+body{
+   user-select: none;
+}
+
+/*Additions*/
+@include margin-variant(3, $unit-3);
+@include margin-variant(4, $unit-4);
+@include padding-variant(3, $unit-3);
+@include padding-variant(4, $unit-4);
+
+.btn.btn-gray{
+   color: #fff;
+   background: $bg-color-gray;
+
+   &:hover{
+      background: $bg-color;
+   }
+}
+
+.p-vcentered{
+   display: flex!important;
+   align-items: center;
+}
+
+/*Override*/
+.modal-overlay,
+.modal.active .modal-overlay{
+   background: rgba(255, 255, 255, 0.15);
+}
+
+.modal-container{
+   box-shadow: 0 0 1px 0px #000;
+   padding: 0;
+   background: $bg-color;
+
+   .modal-header{
+      padding: .4rem .8rem;
+      text-transform: uppercase;
+      background: $bg-color-gray;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+   }
+}
+
+.form-select{
+   cursor: pointer;
+}
+
+.form-select,
+.form-select:not([multiple]):not([size]),
+.form-input,
+.form-checkbox .form-icon, 
+.form-radio .form-icon{
+   border-color: $bg-color-light;
+   background: $bg-color-gray;
+}
+
+.form-select:not([multiple]):not([size]):focus{
+   border-color: $primary-color;
+}