feat(ui): better support for themes, button feedback, new info icon, …

…increased line height

* added buttons, sidebar, information, logo, minor style updates

* finished todo items for digi-com pr

* various updates (see comments)

— Better support for light/dark theme.
— Better feedback when clicking "Format" and "Copy" buttons.
— Updated "Info" icon.
— Moved light/dark "toggle" to left-hand menu.
— Increased line height in editor.
— Custom light/dark ace editor themes.

* highlight fixes, eslint fix

.eslintrc.js

@@ -14,6 +14,7 @@ module.exports = {
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'vue/max-attributes-per-line': 'off'
+    'vue/max-attributes-per-line': 'off',
+    'vue/html-self-closing': 0
   }
 }

assets/ace-dark-theme.css

@@ -0,0 +1,110 @@
+.ace-vibrant-ink .ace_gutter {
+  background: #0c0c0c !important;
+  color: #363636 !important;
+}
+
+.ace-vibrant-ink .ace_print-margin {
+  width: 1px;
+  background: #0c0c0c !important;
+}
+
+.ace-vibrant-ink {
+  background-color: #0c0c0c !important;
+  color: #ffffff;
+}
+
+.ace-vibrant-ink .ace_cursor {
+  color: #ffffff;
+}
+
+.ace-vibrant-ink .ace_marker-layer .ace_selection {
+  background: rgba(181, 213, 255, 0.4) !important;
+}
+
+.ace-vibrant-ink.ace_multiselect .ace_selection.ace_start {
+  box-shadow: 0 0 3px 0px #0f0f0f;
+}
+
+.ace-vibrant-ink .ace_marker-layer .ace_step {
+  background: rgb(102, 82, 0);
+}
+
+.ace-vibrant-ink .ace_marker-layer .ace_bracket {
+  margin: -1px 0 0 -1px;
+  border: 1px solid #404040;
+}
+
+.ace-vibrant-ink .ace_marker-layer .ace_active-line {
+  background: #181818 !important;
+}
+
+.ace-vibrant-ink .ace_gutter-active-line {
+  background-color: #181818 !important;
+}
+
+.ace-vibrant-ink .ace_marker-layer .ace_selected-word {
+  border: 1px solid #6699cc;
+}
+
+.ace-vibrant-ink .ace_invisible {
+  color: #404040;
+}
+
+.ace-vibrant-ink .ace_keyword,
+.ace-vibrant-ink .ace_meta {
+  color: #ff6600;
+}
+
+.ace-vibrant-ink .ace_constant,
+.ace-vibrant-ink .ace_constant.ace_character,
+.ace-vibrant-ink .ace_constant.ace_character.ace_escape,
+.ace-vibrant-ink .ace_constant.ace_other {
+  color: #339999;
+}
+
+.ace-vibrant-ink .ace_constant.ace_numeric {
+  color: #99cc99;
+}
+
+.ace-vibrant-ink .ace_invalid,
+.ace-vibrant-ink .ace_invalid.ace_deprecated {
+  color: #ccff33;
+  background-color: #000000;
+}
+
+.ace-vibrant-ink .ace_fold {
+  background-color: #ffcc00;
+  border-color: #ffffff;
+}
+
+.ace-vibrant-ink .ace_entity.ace_name.ace_function,
+.ace-vibrant-ink .ace_support.ace_function,
+.ace-vibrant-ink .ace_variable {
+  color: #ffcc00;
+}
+
+.ace-vibrant-ink .ace_variable.ace_parameter {
+  font-style: italic;
+}
+
+.ace-vibrant-ink .ace_string {
+  color: #66ff00;
+}
+
+.ace-vibrant-ink .ace_string.ace_regexp {
+  color: #44b4cc;
+}
+
+.ace-vibrant-ink .ace_comment {
+  color: #9933cc;
+}
+
+.ace-vibrant-ink .ace_entity.ace_other.ace_attribute-name {
+  font-style: italic;
+  color: #99cc99;
+}
+
+.ace-vibrant-ink .ace_indent-guide {
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWNgYGBgYNDTc/oPAALPAZ7hxlbYAAAAAElFTkSuQmCC)
+    right repeat-y;
+}

assets/ace-light-theme.css

@@ -0,0 +1,123 @@
+.ace-github .ace_gutter {
+  background: #fff !important;
+  color: #aaa;
+}
+
+.ace-github {
+  background: #fff !important;
+  color: #000;
+}
+
+.ace-github .ace_keyword {
+  font-weight: bold;
+}
+
+.ace-github .ace_string {
+  color: #d14;
+}
+
+.ace-github .ace_variable.ace_class {
+  color: teal;
+}
+
+.ace-github .ace_constant.ace_numeric {
+  color: #099;
+}
+
+.ace-github .ace_constant.ace_buildin {
+  color: #0086b3;
+}
+
+.ace-github .ace_support.ace_function {
+  color: #0086b3;
+}
+
+.ace-github .ace_comment {
+  color: #998;
+  font-style: italic;
+}
+
+.ace-github .ace_variable.ace_language {
+  color: #0086b3;
+}
+
+.ace-github .ace_paren {
+  font-weight: bold;
+}
+
+.ace-github .ace_boolean {
+  font-weight: bold;
+}
+
+.ace-github .ace_string.ace_regexp {
+  color: #009926;
+  font-weight: normal;
+}
+
+.ace-github .ace_variable.ace_instance {
+  color: teal;
+}
+
+.ace-github .ace_constant.ace_language {
+  font-weight: bold;
+}
+
+.ace-github .ace_cursor {
+  color: black;
+}
+
+.ace-github.ace_focus .ace_marker-layer .ace_active-line {
+  background: rgb(255, 255, 204);
+}
+.ace-github .ace_marker-layer .ace_active-line {
+  background: #f8f8fa !important;
+}
+
+.ace-github .ace_marker-layer .ace_selection {
+  background: rgba(181, 213, 255, 0.4) !important;
+}
+
+.ace-github.ace_multiselect .ace_selection.ace_start {
+  box-shadow: 0 0 3px 0px white;
+}
+/* bold keywords cause cursor issues for some fonts */
+/* this disables bold style for editor and keeps for static highlighter */
+.ace-github.ace_nobold .ace_line > span {
+  font-weight: normal !important;
+}
+
+.ace-github .ace_marker-layer .ace_step {
+  background: rgb(252, 255, 0);
+}
+
+.ace-github .ace_marker-layer .ace_stack {
+  background: rgb(164, 229, 101);
+}
+
+.ace-github .ace_marker-layer .ace_bracket {
+  margin: -1px 0 0 -1px;
+  border: 1px solid rgb(192, 192, 192);
+}
+
+.ace-github .ace_gutter-active-line {
+  background-color: #f8f8fa !important;
+}
+
+.ace-github .ace_marker-layer .ace_selected-word {
+  background: rgb(250, 250, 255);
+  border: 1px solid rgb(200, 200, 250);
+}
+
+.ace-github .ace_invisible {
+  color: #bfbfbf;
+}
+
+.ace-github .ace_print-margin {
+  width: 1px;
+  background: #e8e8e8;
+}
+
+.ace-github .ace_indent-guide {
+  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAE0lEQVQImWP4////f4bLly//BwAmVgd1/w11/gAAAABJRU5ErkJggg==')
+    right repeat-y;
+}

nuxt.config.js

@@ -34,7 +34,10 @@ module.exports = {
   /*
   ** Global CSS
   */
-  css: [],
+  css: [
+    { src: '~/assets/ace-dark-theme.css', lang: 'css' },
+    { src: '~/assets/ace-light-theme.css', lang: 'css' }
+  ],
 
   /*
   ** Plugins to load before mounting the App