From 388878127235044359312503a1419425fb89b78d Mon Sep 17 00:00:00 2001
From: Jan Polonsky <jan.polonsky@nbu.gov.sk>
Date: Sat, 2 Mar 2024 11:52:31 +0100
Subject: [PATCH] - Dark theme fix: report item attributes were unreadable (bad
 background hover color) - Dark theme fix: white text on white background +
 unified richtextbox components - Dark theme fix: initial help text in
 richtextbox was unreadable (bad color) - Dark theme fix: fixed white color on
 tollbars - Dark theme fix: keyboard shorcuts - Unified richtextbox toolbars
 (same order of tools) - Deduplicate styles in centralize.css

---
 src/gui/src/assets/centralize.css             | 545 ++----------------
 src/gui/src/assets/common.css                 |   6 +-
 src/gui/src/components/UserSettings.vue       |   5 +-
 .../assess/NewsItemAggregateDetail.vue        |  27 +-
 .../assess/NewsItemSingleDetail.vue           | 335 ++++++-----
 src/gui/src/components/assets/CPETable.vue    |   2 +-
 src/gui/src/components/assets/CardAsset.vue   |   2 +-
 src/gui/src/components/assets/NewAsset.vue    |   2 +-
 .../src/components/common/CalculatorCVSS.vue  |   2 +-
 .../src/components/common/EnumSelector.vue    |  10 +-
 .../common/attribute/AttributeCVSS.vue        |   2 +-
 .../config/assets/NewAssetGroup.vue           |   4 +-
 .../config/assets/NewNotificationTemplate.vue |  30 +-
 .../config/assets/RecipientTable.vue          |   2 +-
 .../config/attributes/NewAttribute.vue        |   2 +-
 .../config/osint_sources/NewOSINTSource.vue   |   4 +-
 .../osint_sources/NewOSINTSourceGroup.vue     |   2 +-
 .../config/remote/NewRemoteAccess.vue         |  72 +--
 .../config/report_types/AttributeTable.vue    |   2 +-
 src/gui/src/components/config/user/NewACL.vue |   4 +-
 .../config/user/NewExternalUser.vue           |   2 +-
 .../src/components/config/user/NewRole.vue    |   2 +-
 .../src/components/config/user/NewUser.vue    |   6 +-
 .../config/word_lists/WordTable.vue           |   2 +-
 src/gui/src/main.js                           |   3 -
 src/gui/src/views/users/EnterView.vue         |  29 +-
 26 files changed, 294 insertions(+), 810 deletions(-)

diff --git a/src/gui/src/assets/centralize.css b/src/gui/src/assets/centralize.css
index df17870ba..56c37ab26 100644
--- a/src/gui/src/assets/centralize.css
+++ b/src/gui/src/assets/centralize.css
@@ -1,12 +1,5 @@
 /* Temporary CSS - WiP - Don't modify */
-
-/*div.content-container > div.container { !* add button *!
-    position: relative;
-    !*bottom: 40px;
-    width: 82px;
-    right: 0;*!
-    z-index: 100;
-}*/
+/* JP: deduplicated */
 
 /* Fullscreen Dialog */
 div.v-dialog__content header {
@@ -21,24 +14,13 @@ div.v-dialog__content header {
     z-index: 1;
 }
 
-/* NEW */
 /* App Bar */
 .app-header {
-    /*background-color: #c7c7c7 !important;
-    border-bottom: 1px solid red !important;*/
     box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.02),
     0 4px 5px 0 rgba(0, 0, 0, 0.14),
     0 1px 10px 0 rgba(0, 0, 0, 0.12);
 }
 
-/*.app-header img {
-    height: 45px;
-}*/
-
-/*.container {
-    max-width: calc(100%) !important;
-}*/
-
 #app .user-settings-dialog .v-tabs .v-window.v-tabs-items {
     background-color: transparent !important;
 }
@@ -80,7 +62,6 @@ div.v-data-table > header {
 }
 
 /* --- Login.vue --- */
-/* Login Screen */
 .login-screen {
     background-color: #eee;
 }
@@ -145,11 +126,13 @@ div.v-data-table > header {
 }
 
 /* --- AnalyzeView.vue --- */
+/* --- MyAssetsView.vue --- */
 .np {
     display: none;
 }
 
 /* --- AssessView.vue --- */
+/* --- EnterView.vue --- */
 .nri {
     display: none;
 }
@@ -175,21 +158,13 @@ div.v-data-table > header {
     right: 12px;
 }
 
-/* --- EnterView.vue --- */
-.nri {
-    display: none;
-}
-
+/* --- DashboardView.vue --- */
+/* --- ToolbarFilterAssets.vue --- */
 .v-chip-group .v-chip.filter {
     height: 20px;
     margin-top: 5px;
 }
 
-/* --- MyAssetsView.vue --- */
-.np {
-    display: none;
-}
-
 /* --- MainMenu.vue --- */
 .app-header .v-toolbar__content {
     padding-right: 0;
@@ -227,7 +202,6 @@ header.app-header.border.dark {
 .user-menu-button {
     margin-right: 0;
     margin-left: 0;
-    /*height: 46px !important;*/
 }
 
 .user-menu .v-badge__badge {
@@ -257,13 +231,13 @@ header.app-header.border.dark {
     right:0;
 }
 
-/* --- CardAnalyze.vue --- */
-
 /* --- ContentDataAnalyze.vue --- */
+/* --- ContentDataPublish.vue --- */
 html {
     scroll-behavior: smooth;
 }
 
+/* --- ContentDataAnalyze.vue --- */
 #selector_analyze .card-assess {
     transition: background-color 1s;
 }
@@ -284,16 +258,27 @@ html {
 }
 
 /* --- NewReportItem.vue --- */
+/* --- RemoteReportItem.vue --- */
+/* --- VulnerabilityDetail.vue --- */
+/* --- NewRole.vue --- */
+/* --- NewOSINTSourceGroup.vue --- */
+/* --- NewRemoteAccess.vue --- */
+/* --- NewRemoteNode.vue --- */
+/* --- NewACL.vue --- */
+/* --- NewExternalUser.vue --- */
+/* --- NewProduct.vue --- */
 .div-wrapper .theme--light.v-card {
     border-left: 5px solid rgb(255, 172, 33);
 }
+/* --- NewUser.vue --- */
+.div-wrapper .theme--light.v-card {
+    border-left: 5px solid rgb(100, 172, 33);
+}
 
 .tabs [role='tablist'] {
     background-color: #f5ebd5 !important;
-
 }
 
-
 .tabs .v-window-item {
 }
 
@@ -324,6 +309,18 @@ html {
     color: white;
 }
 
+/* --- CPETable.vue --- */
+/* --- NewAttribute.vue --- */
+/* --- WordTable.vue --- */
+.vue-csv-uploader button.load {
+    margin: 10px;
+    margin-left: 0;
+    padding: 4px 10px 4px 10px;
+    background-color: #4092dd;
+    border-radius: 4px;
+    color: white;
+}
+
 .vue-csv-uploader-part-two table {
     width: 400px;
 }
@@ -345,15 +342,6 @@ html {
 }
 
 /* --- RemoteReportItem.vue --- */
-.div-wrapper .theme--light.v-card {
-    border-left: 5px solid rgb(255, 172, 33);
-}
-
-.tabs [role='tablist'] {
-    background-color: #f5ebd5 !important;
-
-}
-
 .div-wrapper .v-card-title-dialog {
     background-color: rgba(207, 158, 37, 0.2);
     border-radius: 0;
@@ -363,21 +351,6 @@ html {
     padding-left: 1em;
 }
 
-.tabs .v-window-item {
-}
-
-.icon-field-offset {
-    margin-left: 8px;
-}
-
-.locked-style {
-    border-color: lightblue !important;
-    border-width: 1px;
-    border-style: dashed;
-}
-
-/* --- RemoteRerpotItemSelector.vue --- */
-
 /* --- ToolbarGroupAnalyze.vue --- */
 .view .view-panel button.multi-select-button-pressed {
     background-color: orange !important;
@@ -401,11 +374,6 @@ html {
     text-decoration: none;
 }
 
-/* --- CardAssessItem.vue --- */
-#selector .card.focus {
-    background-color: #caecff;
-}
-
 /* --- ContentDataAssess.vue --- */
 html,
 .v-dialog--active .cs-inside {
@@ -432,30 +400,7 @@ html,
 }
 
 /* --- NewsItemAggregateDetail.vue --- */
-[role='tablist'] {
-    top: 48px;
-}
-
-.title-limit {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 550px;
-    font-size: 1em;
-}
-
 /* --- NewsItemDetail.vue --- */
-[role='tablist'] {
-    top: 48px;
-}
-.title-limit {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 550px;
-    font-size: 1em;
-}
-
 /* --- NewsItemSingleDetail.vue --- */
 [role='tablist'] {
     top: 48px;
@@ -469,36 +414,6 @@ html,
     font-size: 1em;
 }
 
-/* --- CardAsset.vue --- */
-
-
-/* --- CardVulnerability.vue --- */
-
-/* --- CPETable.vue --- */
-.vue-csv-uploader button.load {
-    margin: 10px;
-    margin-left: 0;
-    padding: 4px 10px 4px 10px;
-    background-color: #4092dd;
-    border-radius: 4px;
-    color: white;
-}
-
-.vue-csv-uploader-part-two table {
-    width: 400px;
-}
-
-.vue-csv-uploader-part-two table thead {
-    text-align: left;
-}
-
-.vue-csv-uploader-part-two table select {
-    -webkit-appearance: auto;
-    -moz-appearance: auto;
-    border: 1px solid gray;
-    border-radius: 4px;
-}
-
 /* --- NewAsset.vue --- */
 
 .cx-toolbar-filter {
@@ -507,42 +422,6 @@ html,
     z-index: 100;
 }
 
-#selector .card.focus {
-    background-color: #caecff;
-}
-
-/* --- ToolbarFilterAssets.vue --- */
-.v-chip-group .v-chip.filter {
-    height: 20px;
-    margin-top: 5px;
-}
-
-/* --- VulnerabilityDetail.vue --- */
-.div-wrapper .theme--light.v-card {
-    border-left: 5px solid rgb(255, 172, 33);
-}
-
-.tabs [role='tablist'] {
-    background-color: #f5ebd5 !important;
-
-}
-
-.div-wrapper .v-card-title-dialog {
-    background-color: rgba(207, 158, 37, 0.2);
-    border-radius: 0;
-    font-size: 1.2em;
-    font-weight: bold;
-    padding: 0;
-    padding-left: 1em;
-}
-
-.tabs .v-window-item {
-}
-
-.icon-field-offset {
-    margin-left: 8px;
-}
-
 /* --- DataInput.vue --- */
 .v-toolbar .v-input {
     padding-top: 12px;
@@ -550,14 +429,11 @@ html,
 }
 
 /* --- CSButton.vue --- */
-.v-tooltip__content.hide-tooltip {
-    display: none !important;
-}
-
 /* --- CalculatorCVSS.vue --- */
 .v-tooltip__content.hide-tooltip {
     display: none !important;
 }
+
 .v-card.bsm {
     border-left: 4px solid #ddd;
     transition: border-left-color 250ms;
@@ -594,6 +470,7 @@ html,
 .bsm.critical { border-left-color: red !important; }
 
 span.cs_metric_score {
+    color: black;
     background-color: rgba(255,255,255,1) !important;
     border-radius: 4px;
 }
@@ -629,7 +506,6 @@ tbody tr {
 nav .v-list-item__title {
     text-align: center;
     white-space: unset;
-    /*font-size: 1vh;*/
 }
 
 .navigation .navigation-list div.v-list-item:not(.section-icon) {
@@ -646,13 +522,10 @@ nav .v-list-item__title {
 
 .chatEnv {
     position: relative;
-
     z-index: 20;
 }
 
 .chatButton {
-    /*position: relative;
-    left: 0.5em;*/
 }
 
 .taranis-chat .quick-chat-container {
@@ -662,6 +535,7 @@ nav .v-list-item__title {
 }
 
 /* --- AttributeAttachment.vue --- */
+/* --- RemoteAttributeAttachment.vue --- */
 #dropzone {
     width: 100%;
     height: 64px;
@@ -683,7 +557,6 @@ nav .v-list-item__title {
 }
 
 [cs] .dz-details {
-
 }
 
 [cs] [data-dz-size] {
@@ -713,12 +586,8 @@ nav .v-list-item__title {
     margin-top: 8px;
 }
 
-/* --- AttributeCVE.vue --- */
-.v-tooltip__content.hide-tooltip {
-    display: none !important;
-}
-
 /* --- AttributeContainer.vue --- */
+/* --- RemoteAttributeContainer.vue --- scoped */
 .div-wrapper .theme--light.v-card {
     border-left: 0;
     margin-top: 4px;
@@ -772,309 +641,6 @@ button.ql-publish:hover {
     content: "Publish";
 }
 
-/* --- RemoteAttributeAttachment.vue --- */
-#dropzone {
-    width: 100%;
-    height: 64px;
-    background-color: #e4e4e4;
-    border: 1px solid #ccc;
-    border-radius: 6px;
-    overflow: hidden;
-}
-
-[cs] {
-    position: relative;
-    float: left;
-    width: 68px;
-    margin: 4px 12px;
-}
-
-[cs] > div {
-    text-align: center;
-}
-
-[cs] .dz-details {
-
-}
-
-[cs] [data-dz-size] {
-    font-size: 10px;
-    font-weight: bold;
-}
-
-[cs] .dz-filename {
-    width: 64px;
-    overflow: hidden;
-    white-space: pre-wrap;
-    text-overflow: ellipsis;
-    line-height: 1;
-}
-
-[cs] [data-dz-name] {
-    font-size: 10px;
-}
-
-#dropzone.dz-started .dz-message {
-    display: none;
-}
-
-.dropzone-wrapper-div {
-    margin-left: 8px;
-    margin-right: 8px;
-    margin-top: 8px;
-}
-
-/* --- RemoteAttributeContainer.vue --- scoped */
-.div-wrapper .theme--light.v-card {
-    border-left: 0;
-    margin-top: 4px;
-}
-
-/* --- RemoteAttributeString.vue --- scoped */
-
-/* --- CardCompact.vue --- */
-
-/* --- CardNode.vue --- */
-
-/* --- CardPreset.vue --- */
-
-/* --- NewAttribute.vue --- */
-.vue-csv-uploader button.load {
-    margin: 10px;
-    margin-left: 0;
-    padding: 4px 10px 4px 10px;
-    background-color: #4092dd;
-    border-radius: 4px;
-    color: white;
-}
-
-.vue-csv-uploader-part-two table {
-    width: 400px;
-}
-
-.vue-csv-uploader-part-two table thead {
-    text-align: left;
-}
-
-.vue-csv-uploader-part-two table select {
-    -webkit-appearance: auto;
-    -moz-appearance: auto;
-    border: 1px solid gray;
-    border-radius: 4px;
-}
-
-/* --- CardGroup.vue --- */
-
-/* --- NewRole.vue --- */
-.div-wrapper .theme--light.v-card {
-    border-left: 5px solid rgb(255, 172, 33);
-}
-
-.tabs [role='tablist'] {
-    background-color: #f5ebd5 !important;
-
-}
-
-.div-wrapper .v-card-title-dialog {
-    background-color: rgba(207, 158, 37, 0.2);
-    border-radius: 0;
-    font-size: 1.2em;
-    font-weight: bold;
-    padding: 0;
-    padding-left: 1em;
-}
-
-.icon-field-offset {
-    margin-left: 8px;
-}
-
-/* --- CardSource.vue --- */
-
-/* --- NewOSINTSourceGroup.vue --- */
-.div-wrapper .theme--light.v-card {
-    border-left: 5px solid rgb(255, 172, 33);
-}
-
-.tabs [role='tablist'] {
-    background-color: #f5ebd5 !important;
-
-}
-
-.div-wrapper .v-card-title-dialog {
-    background-color: rgba(207, 158, 37, 0.2);
-    border-radius: 0;
-    font-size: 1.2em;
-    font-weight: bold;
-    padding: 0;
-    padding-left: 1em;
-}
-
-.tabs .v-window-item {
-}
-
-.icon-field-offset {
-    margin-left: 8px;
-}
-
-/* --- CardProductType.vue --- */
-
-/* --- NewRemoteAccess.vue --- */
-.div-wrapper .theme--light.v-card {
-    border-left: 5px solid rgb(255, 172, 33);
-}
-
-.tabs [role='tablist'] {
-    background-color: #f5ebd5 !important;
-
-}
-
-.div-wrapper .v-card-title-dialog {
-    background-color: rgba(207, 158, 37, 0.2);
-    border-radius: 0;
-    font-size: 1.2em;
-    font-weight: bold;
-    padding: 0;
-    padding-left: 1em;
-}
-
-.tabs .v-window-item {
-}
-
-.icon-field-offset {
-    margin-left: 8px;
-}
-
-/* --- NewRemoteNode.vue --- */
-.div-wrapper .theme--light.v-card {
-    border-left: 5px solid rgb(255, 172, 33);
-}
-
-.tabs [role='tablist'] {
-    background-color: #f5ebd5 !important;
-
-}
-
-.div-wrapper .v-card-title-dialog {
-    background-color: rgba(207, 158, 37, 0.2);
-    border-radius: 0;
-    font-size: 1.2em;
-    font-weight: bold;
-    padding: 0;
-    padding-left: 1em;
-}
-
-.tabs .v-window-item {
-}
-
-.icon-field-offset {
-    margin-left: 8px;
-}
-
-/* --- CardUser.vue --- */
-
-/* --- NewACL.vue --- */
-.div-wrapper .theme--light.v-card {
-    border-left: 5px solid rgb(255, 172, 33);
-}
-
-.tabs [role='tablist'] {
-    background-color: #f5ebd5 !important;
-
-}
-
-.div-wrapper .v-card-title-dialog {
-    background-color: rgba(207, 158, 37, 0.2);
-    border-radius: 0;
-    font-size: 1.2em;
-    font-weight: bold;
-    padding: 0;
-    padding-left: 1em;
-}
-
-.tabs .v-window-item {
-}
-
-.icon-field-offset {
-    margin-left: 8px;
-}
-
-/* --- NewExternalUser.vue --- */
-.div-wrapper .theme--light.v-card {
-    border-left: 5px solid rgb(255, 172, 33);
-}
-
-.tabs [role='tablist'] {
-    background-color: #f5ebd5 !important;
-
-}
-
-.div-wrapper .v-card-title-dialog {
-    background-color: rgba(207, 158, 37, 0.2);
-    border-radius: 0;
-    font-size: 1.2em;
-    font-weight: bold;
-    padding: 0;
-    padding-left: 1em;
-}
-
-.tabs .v-window-item {
-}
-
-.icon-field-offset {
-    margin-left: 8px;
-}
-
-/* --- NewUser.vue --- */
-.div-wrapper .theme--light.v-card {
-    border-left: 5px solid rgb(255, 172, 33);
-}
-
-.tabs [role='tablist'] {
-    background-color: #f5ebd5 !important;
-
-}
-
-.div-wrapper .v-card-title-dialog {
-    background-color: rgba(207, 158, 37, 0.2);
-    border-radius: 0;
-    font-size: 1.2em;
-    font-weight: bold;
-    padding: 0;
-    padding-left: 1em;
-}
-
-.tabs .v-window-item {
-}
-
-.icon-field-offset {
-    margin-left: 8px;
-}
-
-/* --- WordTable.vue --- */
-.vue-csv-uploader button.load {
-    margin: 10px;
-    margin-left: 0;
-    padding: 4px 10px 4px 10px;
-    background-color: #4092dd;
-    border-radius: 4px;
-    color: white;
-}
-
-.vue-csv-uploader-part-two table {
-    width: 400px;
-}
-
-.vue-csv-uploader-part-two table thead {
-    text-align: left;
-}
-
-.vue-csv-uploader-part-two table select {
-    -webkit-appearance: auto;
-    -moz-appearance: auto;
-    border: 1px solid gray;
-    border-radius: 4px;
-}
-
 /* --- AttributeItemLayout.vue --- */
 .attribute-item-layout .row {
     width: 100%;
@@ -1101,6 +667,14 @@ button.ql-publish:hover {
     background-color: rgba(106, 190, 242, 0.06);
 }
 
+#app.theme--dark .attribute-value-layout:hover {
+    background-color: #252931;
+}
+
+#app.theme--dark .ql-editor.ql-blank::before {
+    color: rgba(255, 255, 255, 0.6);
+}
+
 .icon-tooltip {
     position: absolute;
     opacity: 0.7;
@@ -1112,9 +686,6 @@ button.ql-publish:hover {
 }
 
 /* --- ContentDataPublish.vue --- */
-html {
-    scroll-behavior: smooth;
-}
 #selector_publish .card-assess {
     transition: background-color 1s;
 }
@@ -1130,31 +701,3 @@ html {
     box-shadow: inset 0 0 0 3px red;
     background-color: rgba(255, 0, 0, 0.3);
 }
-
-/* --- NewProduct.vue --- */
-.div-wrapper .theme--light.v-card {
-    border-left: 5px solid rgb(255, 172, 33);
-}
-
-.tabs [role='tablist'] {
-    background-color: #f5ebd5 !important;
-
-}
-
-.div-wrapper .v-card-title-dialog {
-    background-color: rgba(207, 158, 37, 0.2);
-    border-radius: 0;
-    font-size: 1.2em;
-    font-weight: bold;
-    padding: 0;
-    padding-left: 1em;
-}
-
-.tabs .v-window-item {
-}
-
-.icon-field-offset {
-    margin-left: 8px;
-}
-
-/* --- ReportItemSelector.vue --- */
\ No newline at end of file
diff --git a/src/gui/src/assets/common.css b/src/gui/src/assets/common.css
index 2619f3116..3262aae02 100644
--- a/src/gui/src/assets/common.css
+++ b/src/gui/src/assets/common.css
@@ -56,4 +56,8 @@
 .valueHolder:hover {
     background-color: #f8f8f8;
     box-shadow: -3px 0 0 #6abef2;
-}
\ No newline at end of file
+}
+
+#app.theme--dark .valueHolder:hover {
+    background-color: #252931;
+}
diff --git a/src/gui/src/components/UserSettings.vue b/src/gui/src/components/UserSettings.vue
index 89e073ec4..8e4505ca0 100644
--- a/src/gui/src/components/UserSettings.vue
+++ b/src/gui/src/components/UserSettings.vue
@@ -60,7 +60,7 @@
                                 >
 
                                     <template v-slot:top>
-                                        <v-toolbar flat color="white">
+                                        <v-toolbar flat>
                                             <v-toolbar-title>{{$t('osint_source.word_lists')}}</v-toolbar-title>
                                         </v-toolbar>
                                     </template>
@@ -76,8 +76,7 @@
                                     <v-tooltip top v-for="shortcut in shortcuts" :key="shortcut.alias">
                                         <template v-slot:activator="{on}">
                                             <v-btn  :id=shortcut.alias v-on="on"
-                                                    class="blue lighten-5 ma-1" style="width: calc(100% / 3 - 8px);"
-                                                    text
+                                                    class="ma-1" style="width: calc(100% / 3 - 8px);"
                                                     @click.stop="pressKeyDialog(shortcut.alias)"
                                                     @blur="pressKeyVisible = false"
                                             >
diff --git a/src/gui/src/components/assess/NewsItemAggregateDetail.vue b/src/gui/src/components/assess/NewsItemAggregateDetail.vue
index bdc6a78ff..65e9e2951 100644
--- a/src/gui/src/components/assess/NewsItemAggregateDetail.vue
+++ b/src/gui/src/components/assess/NewsItemAggregateDetail.vue
@@ -67,7 +67,7 @@
                                 ref="assessAggregateDetailComments"
                                 v-model="editorData"
                                 :editorOptions="editorOptionVue2"
-                        />
+                        ></vue-editor>
                     </v-tab-item>
 
                 </v-tabs>
@@ -88,24 +88,13 @@
     import { VueEditor } from 'vue2-editor';
 
     const toolbarOptions = [
-        ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
-        ['blockquote', 'code-block'],
-
-        [{ 'header': 1 }, { 'header': 2 }],               // custom button values
-        [{ 'list': 'ordered'}, { 'list': 'bullet' }],
-        [{ 'script':'sub'}, { 'script': 'super' }],      // superscript/subscript
-        [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
-        [{ 'direction': 'rtl' }],                         // text direction
-
-        [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
-        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
-
-        [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
-        [{ 'font': [] }],
-        [{ 'align': [] }],
-
-        ['clean'],                                         // remove formatting button
-        ['link', 'image', 'video']
+        ['bold', 'italic', 'underline', 'strike', { 'script': 'sub' }, { 'script': 'super' },
+            'blockquote', 'code-block', 'clean'],
+        [{ align: "" }, { align: "center" }, { align: "right" }, { align: "justify" }],
+        [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }],
+        [{ 'size': ['small', false, 'large', 'huge'] }, { 'header': [1, 2, 3, 4, 5, 6, false] },
+            { 'color': [] }, { 'background': [] }],
+        ['link', 'image'],
     ];
 
     export default {
diff --git a/src/gui/src/components/assess/NewsItemSingleDetail.vue b/src/gui/src/components/assess/NewsItemSingleDetail.vue
index 8a41f6afd..e2f415838 100644
--- a/src/gui/src/components/assess/NewsItemSingleDetail.vue
+++ b/src/gui/src/components/assess/NewsItemSingleDetail.vue
@@ -136,7 +136,7 @@
                             ref="assessDetailComments"
                             v-model="editorData"
                             :editorOptions="editorOptionVue2"
-                        />
+                        ></vue-editor>
                     </v-tab-item>
 
                 </v-tabs>
@@ -147,187 +147,176 @@
 </template>
 
 <script>
-import {deleteNewsItemAggregate, getNewsItem, voteNewsItem} from "@/api/assess";
-import {readNewsItem} from "@/api/assess";
-import {importantNewsItem} from "@/api/assess";
-import {saveNewsItemAggregate} from "@/api/assess";
-import NewsItemAttribute from "@/components/assess/NewsItemAttribute";
-import AuthMixin from "@/services/auth/auth_mixin";
-import Permissions from "@/services/auth/permissions";
-
-import {VueEditor} from 'vue2-editor';
-
-const toolbarOptions = [
-    ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
-    ['blockquote', 'code-block'],
-
-    [{'header': 1}, {'header': 2}],               // custom button values
-    [{'list': 'ordered'}, {'list': 'bullet'}],
-    [{'script': 'sub'}, {'script': 'super'}],      // superscript/subscript
-    [{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
-    [{'direction': 'rtl'}],                         // text direction
-
-    [{'size': ['small', false, 'large', 'huge']}],  // custom dropdown
-    [{'header': [1, 2, 3, 4, 5, 6, false]}],
-
-    [{'color': []}, {'background': []}],          // dropdown with defaults from theme
-    [{'font': []}],
-    [{'align': []}],
-
-    ['clean'],                                         // remove formatting button
-    ['link', 'image', 'video']
-];
-
-export default {
-    name: "NewsItemSingleDetail",
-    components: {NewsItemAttribute, VueEditor},
-    mixins: [AuthMixin],
-    props: {
-        analyze_selector: Boolean,
-        attach: undefined
-    },
-    computed: {
-        canAccess() {
-            return this.checkPermission(Permissions.ASSESS_ACCESS) && this.access === true
-        },
-
-        canModify() {
-            return this.checkPermission(Permissions.ASSESS_UPDATE) && this.modify === true
-        },
-
-        canDelete() {
-            return this.checkPermission(Permissions.ASSESS_DELETE) && this.modify === true
-        },
-
-        canCreateReport() {
-            return this.checkPermission(Permissions.ANALYZE_CREATE)
-        },
-
-        multiSelectActive() {
-            return this.$store.getters.getMultiSelect
+    import {deleteNewsItemAggregate, getNewsItem, voteNewsItem} from "@/api/assess";
+    import {readNewsItem} from "@/api/assess";
+    import {importantNewsItem} from "@/api/assess";
+    import {saveNewsItemAggregate} from "@/api/assess";
+    import NewsItemAttribute from "@/components/assess/NewsItemAttribute";
+    import AuthMixin from "@/services/auth/auth_mixin";
+    import Permissions from "@/services/auth/permissions";
+
+    import {VueEditor} from 'vue2-editor';
+
+    const toolbarOptions = [
+        ['bold', 'italic', 'underline', 'strike', { 'script': 'sub' }, { 'script': 'super' },
+            'blockquote', 'code-block', 'clean'],
+        [{ align: "" }, { align: "center" }, { align: "right" }, { align: "justify" }],
+        [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }],
+        [{ 'size': ['small', false, 'large', 'huge'] }, { 'header': [1, 2, 3, 4, 5, 6, false] },
+            { 'color': [] }, { 'background': [] }],
+        ['link', 'image'],
+    ];
+
+    export default {
+        name: "NewsItemSingleDetail",
+        components: {NewsItemAttribute, VueEditor},
+        mixins: [AuthMixin],
+        props: {
+            analyze_selector: Boolean,
+            attach: undefined
         },
-    },
-    data: () => ({
-        content: null,
-        editorOptionVue2: {
-            theme: 'snow',
-            placeholder: "insert text here ...",
-            modules: {
-                toolbar: toolbarOptions
-            }
+        computed: {
+            canAccess() {
+                return this.checkPermission(Permissions.ASSESS_ACCESS) && this.access === true
+            },
+
+            canModify() {
+                return this.checkPermission(Permissions.ASSESS_UPDATE) && this.modify === true
+            },
+
+            canDelete() {
+                return this.checkPermission(Permissions.ASSESS_DELETE) && this.modify === true
+            },
+
+            canCreateReport() {
+                return this.checkPermission(Permissions.ANALYZE_CREATE)
+            },
+
+            multiSelectActive() {
+                return this.$store.getters.getMultiSelect
+            },
         },
-        visible: false,
-        access: false,
-        modify: false,
-        news_item: {news_items: [{news_item_data: {}}]},
-        toolbar: false
-    }),
-    methods: {
-        open(news_item) {
-            this.access = news_item.news_items[0].access
-            this.modify = news_item.news_items[0].modify
-            if (news_item.news_items[0].access === true) {
-                getNewsItem(news_item.news_items[0].id).then((response) => {
+        data: () => ({
+            content: null,
+            editorOptionVue2: {
+                theme: 'snow',
+                placeholder: "insert text here ...",
+                modules: {
+                    toolbar: toolbarOptions
+                }
+            },
+            visible: false,
+            access: false,
+            modify: false,
+            news_item: {news_items: [{news_item_data: {}}]},
+            toolbar: false
+        }),
+        methods: {
+            open(news_item) {
+                this.access = news_item.news_items[0].access
+                this.modify = news_item.news_items[0].modify
+                if (news_item.news_items[0].access === true) {
+                    getNewsItem(news_item.news_items[0].id).then((response) => {
+                        this.visible = true
+                        this.news_item = news_item;
+                        this.news_item.news_items[0] = response.data;
+                        this.title = news_item.title;
+                        this.description = news_item.description;
+                        this.editorData = news_item.comments
+                    });
+                } else {
                     this.visible = true
                     this.news_item = news_item;
-                    this.news_item.news_items[0] = response.data;
                     this.title = news_item.title;
                     this.description = news_item.description;
                     this.editorData = news_item.comments
-                });
-            } else {
-                this.visible = true
-                this.news_item = news_item;
-                this.title = news_item.title;
-                this.description = news_item.description;
-                this.editorData = news_item.comments
-            }
-
-            this.$root.$emit('first-dialog', 'push');
-        },
-        close() {
-            this.visible = false;
-            if (this.canModify) {
-                saveNewsItemAggregate(this.getGroupId(), this.news_item.id, this.news_item.title, this.news_item.description, this.editorData).then(() => {
-                    this.news_item.comments = this.editorData
-                });
-            }
-            this.$root.$emit('change-state', 'DEFAULT');
-            this.$root.$emit('first-dialog', '');
-        },
-        openUrlToNewTab: function (url) {
-            window.open(url, "_blank");
-        },
-        getGroupId() {
-            if (window.location.pathname.includes("/group/")) {
-                let i = window.location.pathname.indexOf("/group/");
-                let len = window.location.pathname.length;
-                return window.location.pathname.substring(i + 7, len);
-            } else {
-                return null;
-            }
-        },
-        cardItemToolbar(action) {
-            switch (action) {
-                case "like":
-                    voteNewsItem(this.getGroupId(), this.news_item.id, 1).then(() => {
-                        if (this.news_item.me_like === false) {
-                            this.news_item.me_like = true;
-                            this.news_item.me_dislike = false;
-                        }
+                }
+
+                this.$root.$emit('first-dialog', 'push');
+            },
+            close() {
+                this.visible = false;
+                if (this.canModify) {
+                    saveNewsItemAggregate(this.getGroupId(), this.news_item.id, this.news_item.title, this.news_item.description, this.editorData).then(() => {
+                        this.news_item.comments = this.editorData
                     });
-                    break;
-
-                case "unlike":
-                    voteNewsItem(this.getGroupId(), this.news_item.id, -1).then(() => {
-                        if (this.news_item.me_dislike === false) {
-                            this.news_item.me_like = false;
-                            this.news_item.me_dislike = true;
-                        }
-                    });
-                    break;
-
-                case "detail":
-                    this.toolbar = false;
-                    this.itemClicked(this.card);
-                    break;
-
-                case "new":
-                    this.$root.$emit('new-report', [this.news_item]);
-                    break;
-
-                case "important":
-                    importantNewsItem(this.getGroupId(), this.news_item.id).then(() => {
-                        this.news_item.important = this.news_item.important === false;
-                    });
-                    break;
-
-                case "read":
-                    readNewsItem(this.getGroupId(), this.news_item.id).then(() => {
-                        this.news_item.read = this.news_item.read === false;
-                    });
-                    break;
-
-                case "delete":
-                    deleteNewsItemAggregate(this.getGroupId(), this.news_item.id).then(() => {
-                        this.visible = false;
-                    });
-                    break;
-
-                default:
-                    this.toolbar = false;
-                    //this.itemClicked(this.card);
-                    break;
-            }
-        },
-
-        buttonStatus: function (active) {
-            if (active) {
-                return "primary:lighten"
-            } else {
-                return "accent"
+                }
+                this.$root.$emit('change-state', 'DEFAULT');
+                this.$root.$emit('first-dialog', '');
+            },
+            openUrlToNewTab: function (url) {
+                window.open(url, "_blank");
+            },
+            getGroupId() {
+                if (window.location.pathname.includes("/group/")) {
+                    let i = window.location.pathname.indexOf("/group/");
+                    let len = window.location.pathname.length;
+                    return window.location.pathname.substring(i + 7, len);
+                } else {
+                    return null;
+                }
+            },
+            cardItemToolbar(action) {
+                switch (action) {
+                    case "like":
+                        voteNewsItem(this.getGroupId(), this.news_item.id, 1).then(() => {
+                            if (this.news_item.me_like === false) {
+                                this.news_item.me_like = true;
+                                this.news_item.me_dislike = false;
+                            }
+                        });
+                        break;
+
+                    case "unlike":
+                        voteNewsItem(this.getGroupId(), this.news_item.id, -1).then(() => {
+                            if (this.news_item.me_dislike === false) {
+                                this.news_item.me_like = false;
+                                this.news_item.me_dislike = true;
+                            }
+                        });
+                        break;
+
+                    case "detail":
+                        this.toolbar = false;
+                        this.itemClicked(this.card);
+                        break;
+
+                    case "new":
+                        this.$root.$emit('new-report', [this.news_item]);
+                        break;
+
+                    case "important":
+                        importantNewsItem(this.getGroupId(), this.news_item.id).then(() => {
+                            this.news_item.important = this.news_item.important === false;
+                        });
+                        break;
+
+                    case "read":
+                        readNewsItem(this.getGroupId(), this.news_item.id).then(() => {
+                            this.news_item.read = this.news_item.read === false;
+                        });
+                        break;
+
+                    case "delete":
+                        deleteNewsItemAggregate(this.getGroupId(), this.news_item.id).then(() => {
+                            this.visible = false;
+                        });
+                        break;
+
+                    default:
+                        this.toolbar = false;
+                        //this.itemClicked(this.card);
+                        break;
+                }
+            },
+
+            buttonStatus: function (active) {
+                if (active) {
+                    return "primary:lighten"
+                } else {
+                    return "accent"
+                }
             }
         }
     }
-}
 </script>
diff --git a/src/gui/src/components/assets/CPETable.vue b/src/gui/src/components/assets/CPETable.vue
index 20e91929a..42e444b17 100644
--- a/src/gui/src/components/assets/CPETable.vue
+++ b/src/gui/src/components/assets/CPETable.vue
@@ -6,7 +6,7 @@
             class="elevation-1"
     >
         <template v-slot:top>
-            <v-toolbar flat color="white">
+            <v-toolbar flat>
                 <v-toolbar-title>{{$t('asset.cpes')}}</v-toolbar-title>
                 <v-divider
                         class="mx-4"
diff --git a/src/gui/src/components/assets/CardAsset.vue b/src/gui/src/components/assets/CardAsset.vue
index 775754a6d..82f6a127a 100644
--- a/src/gui/src/components/assets/CardAsset.vue
+++ b/src/gui/src/components/assets/CardAsset.vue
@@ -31,7 +31,7 @@
                                 </v-col>
 
                                 <!--FOOTER-->
-                                <v-col cols="12" class="py-1 grey lighten-4">
+                                <v-col cols="12" class="py-1">
                                     <v-btn v-if="card.vulnerabilities_count > 0" depressed x-small class="red white--text mr-1">
                                         {{ $t('asset.vulnerabilities_count') + card.vulnerabilities_count }}
                                     </v-btn>
diff --git a/src/gui/src/components/assets/NewAsset.vue b/src/gui/src/components/assets/NewAsset.vue
index b4c4cea7a..44482f8ec 100644
--- a/src/gui/src/components/assets/NewAsset.vue
+++ b/src/gui/src/components/assets/NewAsset.vue
@@ -60,7 +60,7 @@
                             <CPETable :cpes="asset.asset_cpes" @update-cpes="update" />
                         </v-col>
                     </v-row>
-                    <v-row no-gutters class="mt-4 px-3 grey lighten-4 rounded" v-if="edit">
+                    <v-row no-gutters class="mt-4 px-3 rounded" v-if="edit">
                         <v-col cols="12">
                             <span class="body-1 font-weight-bold text-uppercase primary--text">{{$t('asset.vulnerabilities')}}</span>
                         </v-col>
diff --git a/src/gui/src/components/common/CalculatorCVSS.vue b/src/gui/src/components/common/CalculatorCVSS.vue
index e1c3c96ee..9753cda98 100644
--- a/src/gui/src/components/common/CalculatorCVSS.vue
+++ b/src/gui/src/components/common/CalculatorCVSS.vue
@@ -17,7 +17,7 @@
                 <!-- Score -->
                 <v-sheet class="text-center vector-string" color="primary darken-2 white--text">
                     <span class="caption font-weight-bold" >{{ calc.vectorString }}</span>
-                    <v-sheet class="text-center score-sheet" color="white">
+                    <v-sheet class="text-center score-sheet">
                         <v-row justify="center" class="score-sheet">
                             <v-col v-for="metric in calc.all" :key="metric.name" class="cs_cvss_score pa-0 my-1 severity" :class="metric.severity">
                                 <span class="body-2 white--text">{{ $t('cvss_calculator.'+metric.name+'_score') + " " }}</span>
diff --git a/src/gui/src/components/common/EnumSelector.vue b/src/gui/src/components/common/EnumSelector.vue
index b3c8ea6c2..4815466e1 100644
--- a/src/gui/src/components/common/EnumSelector.vue
+++ b/src/gui/src/components/common/EnumSelector.vue
@@ -24,14 +24,14 @@
                             :page.sync="current_page"
                             @click:row="clickRow"
                             :footer-props="{
-                                                      showFirstLastPage: true,
-                                                      itemsPerPageOptions: [25, 50, 100],
-                                                      showCurrentPage: true
-                                                    }"
+                                               showFirstLastPage: true,
+                                               itemsPerPageOptions: [25, 50, 100],
+                                               showCurrentPage: true
+                                           }"
 
                         >
                             <template v-slot:top>
-                                <v-toolbar flat color="white">
+                                <v-toolbar flat>
                                     <v-toolbar-title>{{$t('attribute.attribute_constants')}}</v-toolbar-title>
                                     <v-divider
                                         class="mx-4"
diff --git a/src/gui/src/components/common/attribute/AttributeCVSS.vue b/src/gui/src/components/common/attribute/AttributeCVSS.vue
index d989fb46c..632001546 100644
--- a/src/gui/src/components/common/attribute/AttributeCVSS.vue
+++ b/src/gui/src/components/common/attribute/AttributeCVSS.vue
@@ -80,7 +80,7 @@
                                       :rules="[rules.vector]"
                         ></v-text-field>
 
-                        <v-card class="text-center pb-3" color="white" outlined>
+                        <v-card class="text-center pb-3" flat>
                             <v-row justify="center">
                                 <v-col v-for="metric in score.all" :key="metric.name" class="pa-0 mr-1 severity" :class="metric.severity" style="width: calc(100% / 3); border-radius: 4px;">
                                     <span class="body-2 white--text">{{ $t('cvss_calculator.'+metric.name+'_score') + " " }}</span>
diff --git a/src/gui/src/components/config/assets/NewAssetGroup.vue b/src/gui/src/components/config/assets/NewAssetGroup.vue
index 0df7fa25e..f83ea6b4f 100644
--- a/src/gui/src/components/config/assets/NewAssetGroup.vue
+++ b/src/gui/src/components/config/assets/NewAssetGroup.vue
@@ -57,7 +57,7 @@
                                 class="elevation-1"
                             >
                                 <template v-slot:top>
-                                    <v-toolbar flat color="white">
+                                    <v-toolbar flat>
                                         <v-toolbar-title>{{$t('asset_group.allowed_users')}}</v-toolbar-title>
                                     </v-toolbar>
                                 </template>
@@ -74,7 +74,7 @@
                                 class="elevation-1"
                             >
                                 <template v-slot:top>
-                                    <v-toolbar flat color="white">
+                                    <v-toolbar flat>
                                         <v-toolbar-title>{{$t('asset_group.notification_templates')}}</v-toolbar-title>
                                     </v-toolbar>
                                 </template>
diff --git a/src/gui/src/components/config/assets/NewNotificationTemplate.vue b/src/gui/src/components/config/assets/NewNotificationTemplate.vue
index f2c068a35..696ae5036 100644
--- a/src/gui/src/components/config/assets/NewNotificationTemplate.vue
+++ b/src/gui/src/components/config/assets/NewNotificationTemplate.vue
@@ -58,7 +58,11 @@
                         </v-col>
                         <v-col cols="12" class="pa-1">
                             <span style="font-size:16px">{{$t('notification_template.message_body')}}</span>
-                            <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
+                            <vue-editor
+                                ref="assessEnter"
+                                v-model="editorData"
+                                :editorOptions="editorOptionVue2"
+                            ></vue-editor>
                         </v-col>
                     </v-row>
                     <v-row no-gutters class="pt-2">
@@ -86,20 +90,32 @@
     import {createNewNotificationTemplate} from "@/api/assets";
     import {updateNotificationTemplate} from "@/api/assets";
     import RecipientTable from "@/components/config/assets/RecipientTable";
-    import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
+    import { VueEditor } from 'vue2-editor';
+
+    const toolbarOptions = [
+        ['bold', 'italic', 'underline', 'strike', { 'script': 'sub' }, { 'script': 'super' },
+            'blockquote', 'code-block', 'clean'],
+        [{ align: "" }, { align: "center" }, { align: "right" }, { align: "justify" }],
+        [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }],
+        [{ 'size': ['small', false, 'large', 'huge'] }, { 'header': [1, 2, 3, 4, 5, 6, false] },
+            { 'color': [] }, { 'background': [] }],
+        ['link', 'image'],
+    ];
 
     export default {
         name: "NewNotificationTemplate",
         components: {
-            RecipientTable
+            RecipientTable,
+            VueEditor,
         },
         data: () => ({
             visible: false,
             edit: false,
-            editor: ClassicEditor,
-            editorData: '<p></p>',
-            editorConfig: {
-                // The configuration of the editor.
+            editorOptionVue2: {
+                theme: 'snow',
+                modules: {
+                    toolbar: toolbarOptions
+                }
             },
             show_validation_error: false,
             show_error: false,
diff --git a/src/gui/src/components/config/assets/RecipientTable.vue b/src/gui/src/components/config/assets/RecipientTable.vue
index a92eaabc1..9d427f94f 100644
--- a/src/gui/src/components/config/assets/RecipientTable.vue
+++ b/src/gui/src/components/config/assets/RecipientTable.vue
@@ -6,7 +6,7 @@
             class="elevation-1"
     >
         <template v-slot:top>
-            <v-toolbar flat color="white">
+            <v-toolbar flat>
                 <v-toolbar-title>{{$t('notification_template.recipients')}}</v-toolbar-title>
                 <v-divider
                         class="mx-4"
diff --git a/src/gui/src/components/config/attributes/NewAttribute.vue b/src/gui/src/components/config/attributes/NewAttribute.vue
index e09666e22..86ba7a58e 100644
--- a/src/gui/src/components/config/attributes/NewAttribute.vue
+++ b/src/gui/src/components/config/attributes/NewAttribute.vue
@@ -101,7 +101,7 @@
 
                             >
                                 <template v-slot:top>
-                                    <v-toolbar flat color="white">
+                                    <v-toolbar flat>
                                         <v-toolbar-title>{{$t('attribute.attribute_constants')}}</v-toolbar-title>
                                         <v-divider
                                             class="mx-4"
diff --git a/src/gui/src/components/config/osint_sources/NewOSINTSource.vue b/src/gui/src/components/config/osint_sources/NewOSINTSource.vue
index 26e960782..c123b3ef6 100644
--- a/src/gui/src/components/config/osint_sources/NewOSINTSource.vue
+++ b/src/gui/src/components/config/osint_sources/NewOSINTSource.vue
@@ -90,7 +90,7 @@
                                           class="elevation-1"
                             >
                                 <template v-slot:top>
-                                    <v-toolbar flat color="white">
+                                    <v-toolbar flat>
                                         <v-toolbar-title>
                                             {{ $t('osint_source.osint_source_groups') }}
                                         </v-toolbar-title>
@@ -112,7 +112,7 @@
                             >
 
                                 <template v-slot:top>
-                                    <v-toolbar flat color="white">
+                                    <v-toolbar flat>
                                         <v-toolbar-title>{{ $t('osint_source.word_lists') }}</v-toolbar-title>
                                     </v-toolbar>
                                 </template>
diff --git a/src/gui/src/components/config/osint_sources/NewOSINTSourceGroup.vue b/src/gui/src/components/config/osint_sources/NewOSINTSourceGroup.vue
index 31ebba34b..717ee5b7b 100644
--- a/src/gui/src/components/config/osint_sources/NewOSINTSourceGroup.vue
+++ b/src/gui/src/components/config/osint_sources/NewOSINTSourceGroup.vue
@@ -59,7 +59,7 @@
                                           class="elevation-1"
                             >
                                 <template v-slot:top>
-                                    <v-toolbar flat color="white">
+                                    <v-toolbar flat>
                                         <v-toolbar-title>{{ $t('osint_source_group.osint_sources') }}
                                         </v-toolbar-title>
                                     </v-toolbar>
diff --git a/src/gui/src/components/config/remote/NewRemoteAccess.vue b/src/gui/src/components/config/remote/NewRemoteAccess.vue
index 136eb6f69..574d4ed09 100644
--- a/src/gui/src/components/config/remote/NewRemoteAccess.vue
+++ b/src/gui/src/components/config/remote/NewRemoteAccess.vue
@@ -77,7 +77,7 @@
                                           class="elevation-1"
                             >
                                 <template v-slot:top>
-                                    <v-toolbar flat color="white">
+                                    <v-toolbar flat>
                                         <v-toolbar-title>{{$t('remote_access.osint_sources')}}
                                         </v-toolbar-title>
                                     </v-toolbar>
@@ -95,7 +95,7 @@
                                           class="elevation-1"
                             >
                                 <template v-slot:top>
-                                    <v-toolbar flat color="white">
+                                    <v-toolbar flat>
                                         <v-toolbar-title>{{$t('remote_access.report_item_types')}}
                                         </v-toolbar-title>
                                     </v-toolbar>
@@ -117,74 +117,6 @@
                         {{$t('remote_access.error')}}
                     </v-alert>
 
-                    <!--<v-card>
-                        <v-card-text>
-
-                            <v-text-field :disabled="!canUpdate"
-                                          :label="$t('remote_access.name')"
-                                          name="title"
-                                          type="text"
-                                          v-model="remote_access.name"
-                                          v-validate="'required'"
-                                          data-vv-name="name"
-                                          :error-messages="errors.collect('name')"
-                                          :spellcheck="$store.state.settings.spellcheck"
-                            ></v-text-field>
-                            <v-textarea :disabled="!canUpdate"
-                                        :label="$t('remote_access.description')"
-                                        name="description"
-                                        v-model="remote_access.description"
-                                        :spellcheck="$store.state.settings.spellcheck"
-                            ></v-textarea>
-                            <v-text-field :disabled="!canUpdate"
-                                          :label="$t('remote_access.access_key')"
-                                          name="access_key"
-                                          type="text"
-                                          v-model="remote_access.access_key"
-                                          :spellcheck="$store.state.settings.spellcheck"
-                            ></v-text-field>
-                            <v-checkbox
-                                :disabled="!canUpdate"
-                                :label="$t('remote_access.enabled')"
-                                v-model="remote_access.enabled"
-                            ></v-checkbox>
-                            <v-data-table :disabled="!canUpdate"
-                                          v-model="selected_osint_sources"
-                                          :headers="headers_sources"
-                                          :items="osint_sources"
-                                          item-key="id"
-                                          :show-select="canUpdate"
-                                          class="elevation-1"
-                            >
-                                <template v-slot:top>
-                                    <v-toolbar flat color="white">
-                                        <v-toolbar-title>{{$t('remote_access.osint_sources')}}
-                                        </v-toolbar-title>
-                                    </v-toolbar>
-                                </template>
-
-                            </v-data-table>
-
-                            <v-data-table :disabled="!canUpdate"
-                                          v-model="selected_report_item_types"
-                                          :headers="headers_types"
-                                          :items="report_item_types"
-                                          item-key="id"
-                                          :show-select="canUpdate"
-                                          class="elevation-1"
-                            >
-                                <template v-slot:top>
-                                    <v-toolbar flat color="white">
-                                        <v-toolbar-title>{{$t('remote_access.report_item_types')}}
-                                        </v-toolbar-title>
-                                    </v-toolbar>
-                                </template>
-
-                            </v-data-table>
-
-                        </v-card-text>
-                    </v-card>-->
-
                 </v-form>
             </v-card>
         </v-dialog>
diff --git a/src/gui/src/components/config/report_types/AttributeTable.vue b/src/gui/src/components/config/report_types/AttributeTable.vue
index 691b636fc..15aa6e2c6 100644
--- a/src/gui/src/components/config/report_types/AttributeTable.vue
+++ b/src/gui/src/components/config/report_types/AttributeTable.vue
@@ -6,7 +6,7 @@
             class="elevation-1"
     >
         <template v-slot:top>
-            <v-toolbar flat color="white">
+            <v-toolbar flat>
                 <v-toolbar-title>{{$t('attribute.attributes')}}</v-toolbar-title>
                 <v-divider
                         class="mx-4"
diff --git a/src/gui/src/components/config/user/NewACL.vue b/src/gui/src/components/config/user/NewACL.vue
index 74af56ddf..f4f0f448a 100644
--- a/src/gui/src/components/config/user/NewACL.vue
+++ b/src/gui/src/components/config/user/NewACL.vue
@@ -103,7 +103,7 @@
                                           class="elevation-1"
                             >
                                 <template v-slot:top>
-                                    <v-toolbar flat color="white">
+                                    <v-toolbar flat>
                                         <v-toolbar-title>{{$t('acl.users')}}</v-toolbar-title>
                                     </v-toolbar>
                                 </template>
@@ -120,7 +120,7 @@
                                           class="elevation-1"
                             >
                                 <template v-slot:top>
-                                    <v-toolbar flat color="white">
+                                    <v-toolbar flat>
                                         <v-toolbar-title>{{$t('acl.roles')}}</v-toolbar-title>
                                     </v-toolbar>
                                 </template>
diff --git a/src/gui/src/components/config/user/NewExternalUser.vue b/src/gui/src/components/config/user/NewExternalUser.vue
index b0671e4a3..95c228013 100644
--- a/src/gui/src/components/config/user/NewExternalUser.vue
+++ b/src/gui/src/components/config/user/NewExternalUser.vue
@@ -57,7 +57,7 @@
                             >
 
                                 <template v-slot:top>
-                                    <v-toolbar flat color="white">
+                                    <v-toolbar flat>
                                         <v-toolbar-title>{{$t('user.permissions')}}</v-toolbar-title>
                                     </v-toolbar>
                                 </template>
diff --git a/src/gui/src/components/config/user/NewRole.vue b/src/gui/src/components/config/user/NewRole.vue
index d969a8275..5cd67bcdb 100644
--- a/src/gui/src/components/config/user/NewRole.vue
+++ b/src/gui/src/components/config/user/NewRole.vue
@@ -59,7 +59,7 @@
                                           class="elevation-1"
                             >
                                 <template v-slot:top>
-                                    <v-toolbar flat color="white">
+                                    <v-toolbar flat>
                                         <v-toolbar-title>{{$t('role.permissions')}}</v-toolbar-title>
                                     </v-toolbar>
                                 </template>
diff --git a/src/gui/src/components/config/user/NewUser.vue b/src/gui/src/components/config/user/NewUser.vue
index 2afecdff2..5c74b5c52 100644
--- a/src/gui/src/components/config/user/NewUser.vue
+++ b/src/gui/src/components/config/user/NewUser.vue
@@ -78,7 +78,7 @@
                             >
 
                                 <template v-slot:top>
-                                    <v-toolbar flat color="white">
+                                    <v-toolbar flat>
                                         <v-toolbar-title>{{ $t('user.organizations') }}</v-toolbar-title>
                                     </v-toolbar>
                                 </template>
@@ -96,7 +96,7 @@
                             >
 
                                 <template v-slot:top>
-                                    <v-toolbar flat color="white">
+                                    <v-toolbar flat>
                                         <v-toolbar-title>{{ $t('user.roles') }}</v-toolbar-title>
                                     </v-toolbar>
                                 </template>
@@ -114,7 +114,7 @@
                             >
 
                                 <template v-slot:top>
-                                    <v-toolbar flat color="white">
+                                    <v-toolbar flat>
                                         <v-toolbar-title>{{ $t('user.permissions') }}</v-toolbar-title>
                                     </v-toolbar>
                                 </template>
diff --git a/src/gui/src/components/config/word_lists/WordTable.vue b/src/gui/src/components/config/word_lists/WordTable.vue
index d2a064930..715c7352a 100644
--- a/src/gui/src/components/config/word_lists/WordTable.vue
+++ b/src/gui/src/components/config/word_lists/WordTable.vue
@@ -6,7 +6,7 @@
             class="elevation-1"
     >
         <template v-slot:top>
-            <v-toolbar flat color="white">
+            <v-toolbar flat>
                 <v-toolbar-title>{{$t('word_list.words')}}</v-toolbar-title>
                 <v-divider
                         class="mx-4"
diff --git a/src/gui/src/main.js b/src/gui/src/main.js
index 855933616..d68874d05 100644
--- a/src/gui/src/main.js
+++ b/src/gui/src/main.js
@@ -12,7 +12,6 @@ import messages from "@/i18n/messages";
 import VeeValidate from 'vee-validate';
 import Themes from './assets/themes';
 import {Scroll} from 'vuetify/lib/directives';
-import CKEditor from '@ckeditor/ckeditor5-vue'
 import VueCookies from 'vue-cookies'
 import VueSSE from 'vue-sse';
 import DatetimePicker from 'vuetify-datetime-picker';
@@ -51,8 +50,6 @@ Vue.use(Vuetify, {
   iconfont: 'mdi'
 });
 
-Vue.use(CKEditor);
-
 const vuetify = new Vuetify({
     theme: {
         dark: false,
diff --git a/src/gui/src/views/users/EnterView.vue b/src/gui/src/views/users/EnterView.vue
index b5ec668da..c4b3c22a6 100644
--- a/src/gui/src/views/users/EnterView.vue
+++ b/src/gui/src/views/users/EnterView.vue
@@ -44,7 +44,11 @@
                                 v-model="news_item.link"
                         ></v-text-field>
 
-                        <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
+                        <vue-editor
+                                ref="assessEnter"
+                                v-model="editorData"
+                                :editorOptions="editorOptionVue2"
+                        ></vue-editor>
 
                     </v-card-text>
                 </v-card>
@@ -63,24 +67,35 @@
 
 <script>
     import ViewLayout from "../../components/layouts/ViewLayout";
-    import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
+    import { VueEditor } from 'vue2-editor';
     import {addNewsItem} from "@/api/assess";
 
+    const toolbarOptions = [
+        ['bold', 'italic', 'underline', 'strike', { 'script': 'sub' }, { 'script': 'super' },
+            'blockquote', 'code-block', 'clean'],
+        [{ align: "" }, { align: "center" }, { align: "right" }, { align: "justify" }],
+        [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }],
+        [{ 'size': ['small', false, 'large', 'huge'] }, { 'header': [1, 2, 3, 4, 5, 6, false] },
+            { 'color': [] }, { 'background': [] }],
+        ['link', 'image'],
+    ];
+
     export default {
         name: "Enter",
         components: {
             ViewLayout,
-
+            VueEditor,
         },
         data: () => ({
 
             show_error: false,
             show_validation_error: false,
 
-            editor: ClassicEditor,
-            editorData: '<p></p>',
-            editorConfig: {
-                // The configuration of the editor.
+            editorOptionVue2: {
+                theme: 'snow',
+                modules: {
+                    toolbar: toolbarOptions
+                }
             },
 
             news_item: {