update rich text toolbar styling

src/components/UI/Sticky/Sticky.css

@@ -8,7 +8,7 @@
 
 .stickyActive:not(.stickyAtBottom) {
   position: fixed !important;
-  top: 64px !important;
+  top: 54px !important;
 }
 
 .stickyAtBottom {

src/components/UI/Sticky/Sticky.js

@@ -163,6 +163,11 @@ export class Sticky extends Component {
   static propTypes = {
     className: PropTypes.string,
 
+    /**
+     * classNameActive: class to apply when Sticky is active.
+     */
+    classNameActive: PropTypes.string,
+
     /**
      * fillContainerWidth: allows the sticky width to be dynamically set to the width of it's
      * StickyContainer when sticky (fixed positioning).
@@ -201,6 +206,7 @@ export class Sticky extends Component {
             styles.sticky,
             {
               [styles.stickyActive]: state.shouldStick,
+              [props.classNameActive]: state.shouldStick,
               [styles.stickyAtBottom]: state.shouldStickAtBottom,
             },
           )}

src/components/UI/theme.css

@@ -25,6 +25,7 @@
   --controlBGColor: #fff;
   --backgroundTertiaryColor: #fff;
   --backgroundTertiaryColorDark: color(var(--backgroundTertiaryColor) lightness(90%));
+  --richTextEditorMinHeight: 300px;
 }
 
 .base {

src/components/Widgets/MarkdownControlElements/RawEditor/index.css

@@ -1,3 +1,5 @@
+@import "../../../UI/theme";
+
 .root {
   position: relative;
 }
@@ -6,6 +8,10 @@
   composes: editorControlBar from "../VisualEditor/index.css";
 }
 
+.editorControlBarSticky {
+  composes: editorControlBarSticky from "../VisualEditor/index.css";
+}
+
 .dragging { }
 
 .shim {
@@ -28,4 +34,5 @@
 .textarea {
   overflow: hidden;
   resize: none;
+  min-height: var(--richTextEditorMinHeight);
 }

src/components/Widgets/MarkdownControlElements/RawEditor/index.js

@@ -320,7 +320,11 @@ export default class RawEditor extends React.Component {
       onDragOver={this.handleDragOver}
       onDrop={this.handleDrop}
     >
-      <Sticky className={styles.editorControlBar} fillContainerWidth>
+      <Sticky
+        className={styles.editorControlBar}
+        classNameActive={styles.editorControlBarSticky}
+        fillContainerWidth
+      >
         <Toolbar
           selectionPosition={selectionPosition}
           onH1={this.handleHeader('#')}
@@ -338,6 +342,7 @@ export default class RawEditor extends React.Component {
         />
       </Sticky>
       <TextareaAutosize
+        className={styles.textarea}
         inputRef={this.handleRef}
         className={styles.textarea}
         value={this.props.value || ''}

src/components/Widgets/MarkdownControlElements/VisualEditor/index.css

@@ -2,6 +2,13 @@
 
 .editorControlBar {
   z-index: 1;
+  border: 2px solid transparent;
+  border-top: 0;
+  background-color: var(--controlBGColor);
+}
+
+.editorControlBarSticky {
+  border-color: var(--textFieldBorderColor);
 }
 
 .editor {
@@ -70,7 +77,7 @@
     border-radius: var(--borderRadius);
     overflow-x: auto;
     border: 2px solid var(--textFieldBorderColor);
-    min-height: 500px;
+    min-height: var(--richTextEditorMinHeight);
 
     & ul,
     & ol {

src/components/Widgets/MarkdownControlElements/VisualEditor/index.js

@@ -275,7 +275,11 @@ export default class Editor extends Component {
       onDragOver={this.handleDragOver}
       onDrop={this.handleDrop}
     >
-      <Sticky className={styles.editorControlBar} fillContainerWidth>
+      <Sticky
+        className={styles.editorControlBar}
+        classNameActive={styles.editorControlBarSticky}
+        fillContainerWidth
+      >
         <Toolbar
           selectionPosition={selectionPosition}
           onH1={this.handleHeader(1)}