From f1cd540de3e4698a80c612b050b8340892b2c0e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Tue, 8 Dec 2020 23:45:43 +0200
Subject: [PATCH] Editor theme

---
 angular.json                                  |  7 ++++-
 apps/red-ui/src/app/app.component.ts          |  4 +++
 .../dictionary-overview-screen.component.html |  2 +-
 .../rules-screen/rules-screen.component.html  |  2 +-
 apps/red-ui/src/assets/styles/red-editor.scss | 28 +++++++++++--------
 5 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/angular.json b/angular.json
index 47b307009..1e85832de 100644
--- a/angular.json
+++ b/angular.json
@@ -33,6 +33,11 @@
                                 "input": "apps/red-ui/src/assets/",
                                 "output": "/assets/"
                             },
+                            {
+                                "glob": "**/*",
+                                "input": "node_modules/ace-builds/src-min/",
+                                "output": "/assets/ace-builds"
+                            },
                             "apps/red-ui/src/manifest.webmanifest"
                         ],
                         "styles": ["apps/red-ui/src/styles.scss"],
@@ -40,7 +45,7 @@
                             "node_modules/@pdftron/webviewer/webviewer.min.js",
                             "node_modules/ace-builds/src-min/ace.js",
                             "node_modules/ace-builds/src-min/mode-java.js",
-                            "node_modules/ace-builds/src-min/theme-solarized_light.js"
+                            "node_modules/ace-builds/src-min/theme-eclipse.js"
                         ]
                     },
                     "configurations": {
diff --git a/apps/red-ui/src/app/app.component.ts b/apps/red-ui/src/app/app.component.ts
index e8bfc9c8b..23d06136d 100644
--- a/apps/red-ui/src/app/app.component.ts
+++ b/apps/red-ui/src/app/app.component.ts
@@ -1,6 +1,10 @@
 import { Component } from '@angular/core';
 import { AppLoadStateService } from './utils/app-load-state.service';
 
+declare var ace;
+
+ace.config.set('basePath', '/assets/ace-builds/');
+
 @Component({
     selector: 'redaction-root',
     templateUrl: './app.component.html',
diff --git a/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.html b/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.html
index 9c5ec1ab6..0f59ab022 100644
--- a/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.html
+++ b/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.html
@@ -61,7 +61,7 @@
                 <ace-editor
                     #editorComponent
                     [mode]="'text'"
-                    [theme]="'solarized_light'"
+                    [theme]="'eclipse'"
                     [options]="aceOptions"
                     [readOnly]="!permissionsService.isAdmin()"
                     (textChanged)="textChanged($event)"
diff --git a/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.html b/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.html
index 484661724..c9f25d3b3 100644
--- a/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.html
+++ b/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.html
@@ -18,7 +18,7 @@
             <ace-editor
                 #editorComponent
                 [mode]="'java'"
-                [theme]="'solarized_light'"
+                [theme]="'eclipse'"
                 [options]="aceOptions"
                 [readOnly]="!permissionsService.isAdmin()"
                 (textChanged)="textChanged($event)"
diff --git a/apps/red-ui/src/assets/styles/red-editor.scss b/apps/red-ui/src/assets/styles/red-editor.scss
index 5974c50b2..49e912190 100644
--- a/apps/red-ui/src/assets/styles/red-editor.scss
+++ b/apps/red-ui/src/assets/styles/red-editor.scss
@@ -20,41 +20,45 @@
 }
 
 .ace-redaction {
-    background-color: $white !important;
-    color: $accent !important;
+    color: $accent;
 
     .ace_gutter {
-        background: $grey-2 !important;
-        color: $grey-7 !important;
+        background: $grey-2;
+        color: $grey-7;
+        border-right: none;
+    }
+
+    .ace_active-line {
+        background: $grey-6;
     }
 
     .ace_print-margin {
-        width: 0 !important;
-        background: $white !important;
+        width: 0;
+        background: $white;
     }
 
     .ace_cursor {
-        color: $grey-5 !important;
+        color: $grey-5;
     }
 
     .ace_marker-layer .ace_selection {
-        background: $grey-4 !important;
+        background: $grey-4;
     }
 
     .ace_multiselect .ace_selection.ace_start {
-        box-shadow: 0 0 3px 0 $white !important;
+        box-shadow: 0 0 3px 0 $white;
     }
 
     .ace_gutter-active-line {
-        background-color: $grey-4 !important;
+        background-color: $grey-4;
     }
 
     .ace_marker-layer .ace_selected-word {
-        border: 1px solid $grey-4 !important;
+        border: 1px solid $grey-4;
     }
 
     .ace_invisible {
-        color: $grey-4 !important;
+        color: $grey-4;
     }
 }