Add dark theme

5 files changed, 63 insertions, 32 deletions

diff --git a/index.html b/index.html
index eac7bc9..23593dc 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,7 @@
     <title>SQL++</title>
 
     <link rel="stylesheet" href="node_modules/codemirror/lib/codemirror.css"></link>
+    <link rel="stylesheet" href="node_modules/codemirror/theme/dracula.css"></link>
     <link rel="stylesheet" type="text/css" href="./style.css"></link>
     <link rel="stylesheet" type="text/css" href="./table-style.css"></link>
   </head>
@@ -19,7 +20,7 @@
         <div id="editor" class="editor-row split-row"></div>
         
         <div class="results-row split-row">
-          <table id="result-table" width="100%"></table>
+          <table id="result-table" class="table stripe compact order-column" width="100%"></table>
         </div>
       </div>
 
diff --git a/package.json b/package.json
index 29b0493..8a1c25e 100644
--- a/package.json
+++ b/package.json
@@ -10,11 +10,11 @@
   "repository": "https://github.com/jamesbarnett91/sql-plus-plus",
   "license": "GPL-3.0",
   "devDependencies": {
-    "electron": "~1.7.8",
     "codemirror": "5.33.0",
-    "pg": "7.4.1",
-    "jquery": "3.3.1",
     "datatables": "1.10.13",
+    "electron": "~1.7.8",
+    "jquery": "3.3.1",
+    "pg": "7.4.1",
     "split.js": "1.3.5"
   }
 }
diff --git a/renderer.js b/renderer.js
index 113119f..d10e5af 100644
--- a/renderer.js
+++ b/renderer.js
@@ -1,13 +1,15 @@
-const $ = require('jquery');
+'use strict';
+const $ = require("jquery");
 const cm = require("codemirror");
 const { Pool } = require("pg");
-require('datatables')(window, $);
+require("datatables")(window, $);
 require("codemirror/mode/sql/sql");
 const Split = require("split.js");
 
 const editorContext = cm(document.getElementById("editor"), {
   value: "select *\nfrom information_schema.tables",
   mode: "text/x-sql",
+  theme: "dracula",
   lineNumbers: true
 });
 
@@ -41,6 +43,8 @@ function displayResults(results) {
   dataTable = _resultsTable().DataTable({
     paging: false,
     destroy: true,
+    order: [],
+    dom: 'tr',
     data: results.rows,
     columns: _mapColumnProperties(results)
   });
diff --git a/style.css b/style.css
index 8b9ab29..891cb76 100644
--- a/style.css
+++ b/style.css
@@ -4,6 +4,26 @@ body {
   margin: 0
 }
 
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: #474A5E; 
+}
+ 
+::-webkit-scrollbar-thumb {
+  background: #63677C; 
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #555; 
+}
+::-webkit-scrollbar-corner { 
+  background: #63677C
+}
+
 .flex-wrapper {
   display: flex;
   flex-flow: column;
@@ -12,7 +32,7 @@ body {
 
 .flex-wrapper .row.header {
   flex: 0 1 auto;
-  background-color: #505050;
+  background-color: #474A5E;
   color: white;
 }
 
@@ -25,7 +45,7 @@ body {
 
 .flex-wrapper .row.footer {
   flex: 0 1 20px;
-  background-color: #505050;
+  background-color: #474A5E;
   color: white;
 }
 
@@ -34,7 +54,7 @@ body {
 }
 
 .gutter {
-    background-color: #505050;
+    background-color: #474A5E;
     background-repeat: no-repeat;
     background-position: 50%;
 }
@@ -51,4 +71,10 @@ body {
 
 .CodeMirror {
   height: 100%;
+}
+
+.results-row {
+  color: #ffffff;
+  background-color: #282a36;
+  font-family: monospace;
 }
\ No newline at end of file
diff --git a/table-style.css b/table-style.css
index e550b65..ed2d93f 100644
--- a/table-style.css
+++ b/table-style.css
@@ -47,7 +47,7 @@ table.dataTable {
   table.dataTable thead .sorting_desc_disabled {
     background-image: url("./images/sort_desc_disabled.png"); }
   table.dataTable tbody tr {
-    background-color: white; }
+    background-color: #282a36; }
     table.dataTable tbody tr.selected {
       background-color: #b0bed9; }
   table.dataTable tbody th,
@@ -69,11 +69,11 @@ table.dataTable {
   table.dataTable.cell-border tbody tr:first-child td {
     border-top: none; }
   table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd {
-    background-color: #f9f9f9; }
+    background-color: #474A5E; }
     table.dataTable.stripe tbody tr.odd.selected, table.dataTable.display tbody tr.odd.selected {
       background-color: #abb9d3; }
   table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
-    background-color: whitesmoke; }
+    background-color: #262834; }
     table.dataTable.hover tbody tr:hover.selected, table.dataTable.display tbody tr:hover.selected {
       background-color: #a9b7d1; }
   table.dataTable.order-column tbody tr > .sorting_1,
@@ -81,7 +81,7 @@ table.dataTable {
   table.dataTable.order-column tbody tr > .sorting_3, table.dataTable.display tbody tr > .sorting_1,
   table.dataTable.display tbody tr > .sorting_2,
   table.dataTable.display tbody tr > .sorting_3 {
-    background-color: #f9f9f9; }
+    background-color: #4F4837; }
   table.dataTable.order-column tbody tr.selected > .sorting_1,
   table.dataTable.order-column tbody tr.selected > .sorting_2,
   table.dataTable.order-column tbody tr.selected > .sorting_3, table.dataTable.display tbody tr.selected > .sorting_1,
@@ -89,23 +89,23 @@ table.dataTable {
   table.dataTable.display tbody tr.selected > .sorting_3 {
     background-color: #acbad4; }
   table.dataTable.display tbody tr.odd > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 {
-    background-color: #f1f1f1; }
+    background-color: #897E63; }
   table.dataTable.display tbody tr.odd > .sorting_2, table.dataTable.order-column.stripe tbody tr.odd > .sorting_2 {
-    background-color: #f3f3f3; }
+    background-color: #262833; }
   table.dataTable.display tbody tr.odd > .sorting_3, table.dataTable.order-column.stripe tbody tr.odd > .sorting_3 {
-    background-color: whitesmoke; }
+    background-color: #262833; }
   table.dataTable.display tbody tr.odd.selected > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_1 {
-    background-color: #a6b3cd; }
+    background-color: #897E63; }
   table.dataTable.display tbody tr.odd.selected > .sorting_2, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_2 {
     background-color: #a7b5ce; }
   table.dataTable.display tbody tr.odd.selected > .sorting_3, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_3 {
     background-color: #a9b6d0; }
   table.dataTable.display tbody tr.even > .sorting_1, table.dataTable.order-column.stripe tbody tr.even > .sorting_1 {
-    background-color: #f9f9f9; }
+    background-color: #4F4837; }
   table.dataTable.display tbody tr.even > .sorting_2, table.dataTable.order-column.stripe tbody tr.even > .sorting_2 {
-    background-color: #fbfbfb; }
+    background-color: #272935; }
   table.dataTable.display tbody tr.even > .sorting_3, table.dataTable.order-column.stripe tbody tr.even > .sorting_3 {
-    background-color: #fdfdfd; }
+    background-color: #272935; }
   table.dataTable.display tbody tr.even.selected > .sorting_1, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_1 {
     background-color: #acbad4; }
   table.dataTable.display tbody tr.even.selected > .sorting_2, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_2 {
@@ -113,11 +113,11 @@ table.dataTable {
   table.dataTable.display tbody tr.even.selected > .sorting_3, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_3 {
     background-color: #afbdd8; }
   table.dataTable.display tbody tr:hover > .sorting_1, table.dataTable.order-column.hover tbody tr:hover > .sorting_1 {
-    background-color: #eaeaea; }
+    background-color: #242631; }
   table.dataTable.display tbody tr:hover > .sorting_2, table.dataTable.order-column.hover tbody tr:hover > .sorting_2 {
-    background-color: #ebebeb; }
+    background-color: #252631; }
   table.dataTable.display tbody tr:hover > .sorting_3, table.dataTable.order-column.hover tbody tr:hover > .sorting_3 {
-    background-color: #eeeeee; }
+    background-color: #252732; }
   table.dataTable.display tbody tr:hover.selected > .sorting_1, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_1 {
     background-color: #a1aec7; }
   table.dataTable.display tbody tr:hover.selected > .sorting_2, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_2 {
@@ -232,11 +232,11 @@ table.dataTable td {
       text-decoration: none !important;
       cursor: pointer;
       *cursor: hand;
-      color: #333333 !important;
+      color: white !important;
       border: 1px solid transparent;
       border-radius: 2px; }
       .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
-        color: #333333 !important;
+        color: white !important;
         border: 1px solid #979797;
         background-color: white;
         background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, gainsboro));
@@ -303,18 +303,18 @@ table.dataTable td {
     text-align: center;
     font-size: 1.2em;
     background-color: white;
-    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(25%, rgba(255, 255, 255, 0.9)), color-stop(75%, rgba(255, 255, 255, 0.9)), color-stop(100%, rgba(255, 255, 255, 0)));
-    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
-    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
-    background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
-    background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
-    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%); }
+    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(40, 42, 54, 0)), color-stop(25%, rgba(40, 42, 54, 0.9)), color-stop(75%, rgba(40, 42, 54, 0.9)), color-stop(100%, rgba(255, 255, 255, 0)));
+    background: -webkit-linear-gradient(left, rgba(40, 42, 54, 0) 0%, rgba(40, 42, 54, 0.9) 25%, rgba(40, 42, 54, 0.9) 75%, rgba(40, 42, 54, 0) 100%);
+    background: -moz-linear-gradient(left, rgba(40, 42, 54, 0) 0%, rgba(40, 42, 54, 0.9) 25%, rgba(40, 42, 54, 0.9) 75%, rgba(40, 42, 54, 0) 100%);
+    background: -ms-linear-gradient(left, rgba(40, 42, 54, 0) 0%, rgba(40, 42, 54, 0.9) 25%, rgba(40, 42, 54, 0.9) 75%, rgba(40, 42, 54, 0) 100%);
+    background: -o-linear-gradient(left, rgba(40, 42, 54, 0) 0%, rgba(40, 42, 54, 0.9) 25%, rgba(40, 42, 54, 0.9) 75%, rgba(40, 42, 54, 0) 100%);
+    background: linear-gradient(to right, rgba(40, 42, 54, 0) 0%, rgba(40, 42, 54, 0.9) 25%, rgba(40, 42, 54, 0.9) 75%, rgba(40, 42, 54, 0) 100%); }
   .dataTables_wrapper .dataTables_length,
   .dataTables_wrapper .dataTables_filter,
   .dataTables_wrapper .dataTables_info,
   .dataTables_wrapper .dataTables_processing,
   .dataTables_wrapper .dataTables_paginate {
-    color: #333333; }
+    color: white; }
   .dataTables_wrapper .dataTables_scroll {
     clear: both; }
     .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody {