UBERF-4644 Text editor style fixes (#4197)

Signed-off-by: Alexander Onnikov <alexander.onnikov@xored.com>

packages/text-editor/src/components/extension/table/TableNodeView.svelte

@@ -71,7 +71,7 @@
 </script>
 
 <NodeViewWrapper class="table-node-wrapper" data-drag-handle>
-  <div class="table-wrapper" class:table-selected={focused}>
+  <div class="table-wrapper" class:table-selected={editable && focused}>
     <table class={className}>
       <NodeViewContent as="tbody" />
     </table>
@@ -131,6 +131,7 @@
         right: -1.25rem;
         top: 0;
         bottom: 0;
+        margin: 1.25rem 0;
 
         .table-button {
           width: 1.25rem;

packages/theme/styles/_colors.scss

@@ -299,6 +299,7 @@
   --text-editor-toc-default-color: rgba(255, 255, 255, 0.1);
   --text-editor-toc-hovered-color: rgba(255, 255, 255, 0.4);
   --text-editor-drag-marker-bg-color: #444248;
+  --text-editor-table-header-color: rgba(255, 255, 255, 0.06);
 
   --theme-clockface-back: radial-gradient(farthest-corner at 50% 0%, #bbb, #fff 100%);
   --theme-clockface-shadow: inset 0 -3px 10px #aaa;
@@ -526,6 +527,7 @@
   --text-editor-toc-default-color: rgba(0, 0, 0, 0.1);
   --text-editor-toc-hovered-color: rgba(0, 0, 0, 0.4);
   --text-editor-drag-marker-bg-color: #444248;
+  --text-editor-table-header-color: rgba(0, 0, 0, 0.06);
 
   --theme-clockface-back: radial-gradient(farthest-corner at 50% 0%, #606060, #000 100%);
   --theme-clockface-shadow: inset 0 -3px 10px #000;

packages/theme/styles/_text-editor.scss

@@ -230,6 +230,10 @@
   }
 }
 
+.ProseMirror-gapcursor:after {
+  border-top: 1px solid var(--theme-text-primary-color) !important;
+}
+
 .reference {
   &:hover,
   &.ProseMirror-selectednode {

packages/theme/styles/prose.scss

@@ -49,14 +49,15 @@ table.proseTable {
 
   th {
     text-align: left;
-    background-color: var(--button-bg-color);
+    background-color: var(--text-editor-table-header-color);
   }
 
   p {
     margin: 0;
   }
 
-  td {
+  td,
+  th {
     // cell selection
 
     &.table-cell-selected {