From 60da8634f21f77e0eb7f746be95628fdb09fa6c4 Mon Sep 17 00:00:00 2001
From: Jonas Wollweber <87132834+JWollweber@users.noreply.github.com>
Date: Mon, 25 Nov 2024 09:51:24 +0100
Subject: [PATCH] AAE-20506 Rich Text Editor Visual Improvements (#10385)

* [AAE-20506] replace icon with material design icon

* [AAE-20506] fix size and position of 'change color' plugin's icon

* [AAE-20506]  make sure material design's container does not define text color
---
 .../src/lib/rich-text-editor/editorjs-config.ts     |  3 ++-
 .../rich-text-editor.component.scss                 | 13 ++++++++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/lib/process-services-cloud/src/lib/rich-text-editor/editorjs-config.ts b/lib/process-services-cloud/src/lib/rich-text-editor/editorjs-config.ts
index cefecc7663..db073179c7 100644
--- a/lib/process-services-cloud/src/lib/rich-text-editor/editorjs-config.ts
+++ b/lib/process-services-cloud/src/lib/rich-text-editor/editorjs-config.ts
@@ -86,7 +86,8 @@ export const editorJsConfig = {
         'Increase/Decrease font size': {
             class: ChangeFontSize,
             config: {
-                cssClass: 'plus20pc'
+                cssClass: 'plus20pc',
+                buttonIcon: '<span class="material-icons">format_size</span>'
             }
         },
         inlineCode: {
diff --git a/lib/process-services-cloud/src/lib/rich-text-editor/rich-text-editor.component.scss b/lib/process-services-cloud/src/lib/rich-text-editor/rich-text-editor.component.scss
index 08d72dfc36..fc020bf034 100644
--- a/lib/process-services-cloud/src/lib/rich-text-editor/rich-text-editor.component.scss
+++ b/lib/process-services-cloud/src/lib/rich-text-editor/rich-text-editor.component.scss
@@ -1,5 +1,7 @@
 /* stylelint-disable selector-class-pattern */
 .adf-rich-text-editor-container {
+    color: var(--theme-text-fg-color, rgba(0, 0, 0, 0.87));
+
     .editorjs {
         &.readonly {
             .codex-editor__redactor {
@@ -11,11 +13,20 @@
 
     .ce-inline-toolbar {
         transform: scale(1);
+
+        .ce-popover__items {
+            overflow: hidden;
+        }
+
+        .ce-inline-tool .material-icons {
+            font-size: 20px;
+        }
     }
 }
 
 xy-color-picker {
     position: relative;
     background-color: transparent;
-    width: 22px;
+    margin: 0;
+    overflow: hidden;
 }