refactor: changed material design icon pack

src/renderer/scss/_mdi-additions.scss

@@ -1,38 +1,9 @@
-.material-icons {
-  // TODO: rewrite with rem
+.mdi {
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
-  /* Rules for sizing the icon. */
-  &.md-18 {
-    font-size: 18px;
-  }
-
-  &.md-24 {
-    font-size: 24px;
-  }
-
-  &.md-36 {
-    font-size: 36px;
-  }
-
-  &.md-48 {
-    font-size: 48px;
-  }
-
-  /* Rules for using icons as black on a light background. */
-  &.md-dark {
-    color: rgba(0, 0, 0, 0.54);
-  }
-
-  &.md-dark.md-inactive {
-    color: rgba(0, 0, 0, 0.26);
-  }
-
-  /* Rules for using icons as white on a dark background. */
-  &.md-light {
-    color: rgba(255, 255, 255, 1);
-  }
-
-  &.md-light.md-inactive {
-    color: rgba(255, 255, 255, 0.3);
+  &::before {
+    line-height: 1;
   }
 }

src/renderer/scss/_table-keys.scss

@@ -0,0 +1,18 @@
+.column-key {
+  transform: rotate(90deg);
+  font-size: 0.7rem;
+  line-height: 1.5;
+  margin-right: 0.2rem;
+
+  &.key-pri {
+    color: goldenrod;
+  }
+
+  &.key-uni {
+    color: deepskyblue;
+  }
+
+  &.key-mul {
+    color: palegreen;
+  }
+}

src/renderer/scss/main.scss

@@ -2,6 +2,7 @@
 @import "variables";
 @import "transitions";
 @import "data-types";
+@import "table-keys";
 @import "fake-tables";
 @import "mdi-additions";
 @import "db-icons";
@@ -133,6 +134,10 @@ body {
   background: $bg-color-gray;
 }
 
+.form-input:not(:placeholder-shown):invalid:focus {
+  background: $bg-color-gray;
+}
+
 .form-select:not([multiple]):not([size]):focus {
   border-color: $primary-color;
 }
@@ -156,7 +161,7 @@ body {
 }
 
 .btn.loading {
-  > .material-icons,
+  > .mdi,
   > span {
     visibility: hidden;
   }