fix: e2e and styling and icons

Author: gjulivan

packages/pluggableWidgets/rich-text-web/e2e/RichText.spec.js-snapshots/bottomToolbarAdvancedMode-chromium-linux.png

@@ -576,7 +576,7 @@ exports[`Rich Text renders richtext widget with different config 1`] = `
           >
             <button
               class="icon-button"
-              title="Blockquote"
+              title="Block quote"
               type="button"
             >
               <span
@@ -661,7 +661,9 @@ exports[`Rich Text renders richtext widget with different config 1`] = `
               title="Keyboard shortcuts"
               type="button"
             >
-              ?
+              <span
+                class="icons icon-Help"
+              />
             </button>
           </div>
         </div>

packages/pluggableWidgets/rich-text-web/e2e/RichText.spec.js-snapshots/inlineBasicMode-chromium-linux.png

@@ -89,11 +89,14 @@ $rte-shadow-color: #00000014 !default;
     .toolbar-dropdown-button {
         display: flex;
         gap: 4px;
-        padding: 6px 6px 3px;
+        padding: 6px 2px 2px 2px;
         min-width: 120px;
         justify-content: space-between;
         background: none;
         border: none;
+        margin: 0 var(--spacing-smallest, 2px);
+        border-radius: var(--border-radius-s, 4px);
+        background-color: var(--gray-50, var(--gray-lighter, #f8f8f8));
 
         .dropdown-label {
             flex: 1;

packages/pluggableWidgets/rich-text-web/e2e/RichText.spec.js-snapshots/insertImageDialog-chromium-linux.png

@@ -25,11 +25,7 @@ export type ToolbarActionType =
     | "configurationDropdown";
 
 export type ColorPickerCommand =
-    | "textColor"
-    | "textHighlight"
-    | "cellBackground"
-    | "tableBackground"
-    | "tableBorderColor";
+    "textColor" | "textHighlight" | "cellBackground" | "tableBackground" | "tableBorderColor";
 
 export type DialogCommand = "insertImage" | "insertVideo" | "insertLink";
 

packages/pluggableWidgets/rich-text-web/e2e/RichText.spec.js-snapshots/toolbarAdvancedMode-chromium-linux.png

@@ -106,11 +106,7 @@
     }
 
     .image-dialog-entity {
-        margin-bottom: 12px;
-        padding: 12px;
-        border: 1px solid var(--border-color-default, #ced0d3);
-        border-radius: 4px;
-        background: #fafafa;
+        margin: 0 var(--spacing-medium, 16px);
         min-height: 100px;
     }