new design for tab header and sql editor

src/assets/styles/variables.css

@@ -31,6 +31,7 @@
   --color-text-error: var(--color-red);
 
   --shadow: 0 1px 2px rgba(42, 63, 95, 0.7);
+  --shadow-1: 0 2px 9px rgba(80, 103, 132, 0.2);
 
   --border-radius-big: 5px;
   --border-radius-medium: 3px;

src/components/MainMenu.vue

@@ -171,6 +171,7 @@ nav {
   align-items: center;
   background-color: var(--color-bg-light);
   border-bottom: 1px solid var(--color-border-light);
+  box-shadow: var(--shadow-1);
   box-sizing: border-box;
   position: fixed;
   top: 0;

src/components/SqlEditor.vue

@@ -74,8 +74,6 @@ export default {
   max-height: 100%;
 }
 >>> .CodeMirror {
-  border: 1px solid var(--color-border);
-  border-radius: var(--border-radius-big);
   height: 100%;
   max-height: 100%;
 }

src/components/Tab.vue

@@ -148,13 +148,14 @@ export default {
 <style scoped>
 .tab-content-container {
   padding-top: 6px;
-  background-color: var(--color-bg-light);
+  background-color: var(--color-white);
   border-top: 1px solid var(--color-border-light);
   margin-top: -1px;
 }
 
 #bottomPane {
   height: 100%;
+  background-color: var(--color-bg-light);
 }
 
 .query-results-splitter {
@@ -163,7 +164,6 @@ export default {
 }
 
 .query-editor {
-  padding: 52px;
   display: flex;
   flex-direction: column;
   height: 100%;

src/components/Tabs.vue

@@ -81,6 +81,7 @@ export default {
 #tabs-container {
   position: relative;
   height: 100%;
+  background-color: var(--color-bg-light);
 }
 #tabs__header {
   display: flex;
@@ -119,19 +120,11 @@ export default {
   color: var(--color-text-active);
   font-weight: 600;
   border-bottom: none;
+  background-color: var(--color-white);
 }
 #tabs__header .tab__selected:hover {
     cursor: default;
 }
-#tabs__header .tab__selected:before {
-  content: '';
-  position: absolute;
-  width: 100%;
-  height: 5px;
-  background-color: var(--color-accent);
-  top: 0;
-  left: 0;
-}
 
 .close-icon {
   margin-left: 5px;