color icon classes

package.json

@@ -9,8 +9,8 @@
     "start:api": "yarn workspace dbgate-api start",
     "start:api:portal": "yarn workspace dbgate-api start:portal",
     "start:api:covid": "yarn workspace dbgate-api start:covid",
-    "start:web": "yarn workspace dbgate-web-svelte dev",
+    "start:web": "yarn workspace dbgate-web dev",
-     "start:sqltree": "yarn workspace dbgate-sqltree start",
+    "start:sqltree": "yarn workspace dbgate-sqltree start",
     "start:tools": "yarn workspace dbgate-tools start",
     "start:datalib": "yarn workspace dbgate-datalib start",
     "start:filterparser": "yarn workspace dbgate-filterparser start",

packages/web/public/icon-colors.css

@@ -0,0 +1,23 @@
+.color-icon-blue {
+  color: var(--theme-icon-blue);
+}
+
+.color-icon-green {
+  color: var(--theme-icon-green);
+}
+
+.color-icon-red {
+  color: var(--theme-icon-red);
+}
+
+.color-icon-gold {
+  color: var(--theme-icon-gold);
+}
+
+.color-icon-yellow {
+  color: var(--theme-icon-yellow);
+}
+
+.color-icon-magenta {
+  color: var(--theme-icon-magenta);
+}

packages/web/public/index.html

@@ -11,6 +11,7 @@
 	<link rel='stylesheet' href='/theme-light.css'>
 	<link rel='stylesheet' href='/theme-dark.css'>
 	<link rel='stylesheet' href='/dimensions.css'>
+	<link rel='stylesheet' href='/icon-colors.css'>
 	<link rel='stylesheet' href='/build/bundle.css'>
 	<link rel='stylesheet' href='/build/fonts/materialdesignicons.css'>
 

packages/web/public/theme-dark.css

@@ -1,25 +1,8 @@
 .theme-dark {
-  --theme-font-1: #000000;
+  --theme-icon-blue: #3c9ae8;
-  --theme-font-2: #4d4d4d;
+  --theme-icon-green: #8fd460;
-  --theme-font-3: #808080;
+  --theme-icon-red: #e84749;
-  --theme-font-4: #b3b3b3;
+  --theme-icon-gold: #e8b339;
-
+  --theme-icon-yellow: #e8d639;
-  --theme-bg-1: #ededed;
+  --theme-icon-magenta: #e0529c;
-  --theme-bg-2: #d4d4d4;
-  --theme-bg-3: #bbbbbb;
-  --theme-bg-4: #a2a2a2;
-
-  --theme-font-inv-1: #FFFFFF;
-  --theme-font-inv-2: #b3b3b3;
-  --theme-font-inv-3: #808080;
-  --theme-font-inv-4: #4d4d4d;
-
-  --theme-bg-inv-1: #222;
-  --theme-bg-inv-2: #3c3c3c;
-  --theme-bg-inv-3: #565656;
-  --theme-bg-inv-4: #707070;
-
-  --theme-border: #ccc;
-
-  --theme-bg-statusbar-inv: blue;
 }

packages/web/public/theme-light.css

@@ -21,5 +21,14 @@
 
   --theme-border: #ccc;
 
+  --theme-bg-hover: #bae7ff;
+
   --theme-bg-statusbar-inv: blue;
+
+  --theme-icon-blue: #096dd9;
+  --theme-icon-green: #237804;
+  --theme-icon-red: #cf1322;
+  --theme-icon-gold: #d48806;
+  --theme-icon-yellow: #d4b106;
+  --theme-icon-magenta: #c41d7f;
 }

packages/web/src/appobj/AppObjectCore.svelte

@@ -12,7 +12,7 @@
 </script>
 
 <div class="main" class:isBold draggable>
-  {prefix}
+  {prefix || ''}
   {#if isBusy}
     <FontIcon icon="icon loading" />
   {:else}
@@ -39,6 +39,10 @@
     white-space: nowrap;
     font-weight: normal;
   }
+  .main:hover {
+    background-color: var(--theme-bg-hover);
+
+  }
   .isBold {
     font-weight: bold;
   }
@@ -48,6 +52,6 @@
   .ext-info {
     font-weight: normal;
     margin-left: 5px;
-    color: vra(--theme-font-3);
+    color: var(--theme-font-3);
   }
 </style>

packages/web/src/icons/FontIcon.svelte

@@ -62,38 +62,38 @@
     'icon plugin': 'mdi mdi-toy-brick',
     'icon menu': 'mdi mdi-menu',
 
-    'img ok': 'mdi mdi-check-circle color-green-8',
+    'img ok': 'mdi mdi-check-circle color-icon-green',
-    'img alert': 'mdi mdi-alert-circle color-blue-6',
+    'img alert': 'mdi mdi-alert-circle color-icon-blue',
-    'img error': 'mdi mdi-close-circle color-red-7',
+    'img error': 'mdi mdi-close-circle color-icon-red',
-    'img warn': 'mdi mdi-alert color-gold-7',
+    'img warn': 'mdi mdi-alert color-icon-gold',
     // 'img statusbar-ok': 'mdi mdi-check-circle color-on-statusbar-green',
 
-    'img archive': 'mdi mdi-table color-gold-7',
+    'img archive': 'mdi mdi-table color-icon-gold',
-    'img archive-folder': 'mdi mdi-database-outline color-green-7',
+    'img archive-folder': 'mdi mdi-database-outline color-icon-green',
     'img autoincrement': 'mdi mdi-numeric-1-box-multiple-outline',
     'img column': 'mdi mdi-table-column',
-    'img server': 'mdi mdi-server color-blue-7',
+    'img server': 'mdi mdi-server color-icon-blue',
-    'img primary-key': 'mdi mdi-key-star color-yellow-7',
+    'img primary-key': 'mdi mdi-key-star color-icon-yellow',
     'img foreign-key': 'mdi mdi-key-link',
     'img sql-file': 'mdi mdi-file',
-    'img shell': 'mdi mdi-flash color-blue-7',
+    'img shell': 'mdi mdi-flash color-icon-blue',
-    'img chart': 'mdi mdi-chart-bar color-magenta-7',
+    'img chart': 'mdi mdi-chart-bar color-icon-magenta',
-    'img markdown': 'mdi mdi-application color-red-7',
+    'img markdown': 'mdi mdi-application color-icon-red',
-    'img preview': 'mdi mdi-file-find color-red-7',
+    'img preview': 'mdi mdi-file-find color-icon-red',
-    'img favorite': 'mdi mdi-star color-yellow-7',
+    'img favorite': 'mdi mdi-star color-icon-yellow',
-    'img query-design': 'mdi mdi-vector-polyline-edit color-red-7',
+    'img query-design': 'mdi mdi-vector-polyline-edit color-icon-red',
 
-    'img free-table': 'mdi mdi-table color-green-7',
+    'img free-table': 'mdi mdi-table color-icon-green',
     'img macro': 'mdi mdi-hammer-wrench',
 
-    'img database': 'mdi mdi-database color-gold-7',
+    'img database': 'mdi mdi-database color-icon-gold',
-    'img table': 'mdi mdi-table color-blue-7',
+    'img table': 'mdi mdi-table color-icon-blue',
-    'img view': 'mdi mdi-table color-magenta-7',
+    'img view': 'mdi mdi-table color-icon-magenta',
-    'img procedure': 'mdi mdi-cog color-blue-7',
+    'img procedure': 'mdi mdi-cog color-icon-blue',
     'img function': 'mdi mdi-function-variant',
 
-    'img sort-asc': 'mdi mdi-sort-alphabetical-ascending color-green',
+    'img sort-asc': 'mdi mdi-sort-alphabetical-ascending color-icon-green',
-    'img sort-desc': 'mdi mdi-sort-alphabetical-descending color-green',
+    'img sort-desc': 'mdi mdi-sort-alphabetical-descending color-icon-green',
 
     'img reference': 'mdi mdi-link-box',
     'img link': 'mdi mdi-link',