Fix TinyMCE modal styles and overlapping issues.

knadh · Sep 26, 2021 · f6cd24d · f6cd24d
1 parent d86438b
commit f6cd24d
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 16 deletions.
diff --git a/frontend/cypress/support/commands.js b/frontend/cypress/support/commands.js
@@ -14,7 +14,7 @@ Cypress.Commands.add('resetDB', () => {
 // table against the given IDs, asserting the expected order of sort.
 Cypress.Commands.add('sortTable', (theadSelector, ordIDs) => {
   cy.get(theadSelector).click();
-  cy.wait(500);
+  cy.wait(100);
   cy.get('tbody td[data-id]').each(($el, index) => {
     expect(ordIDs[index]).to.equal(parseInt($el.attr('data-id')));
   });

diff --git a/frontend/src/assets/style.scss b/frontend/src/assets/style.scss
@@ -203,12 +203,18 @@ body.is-noscroll {
   border-radius: 2px;
 }
 
+.plain-editor textarea {
+  height: 65vh;
+}
+
+.alt-body textarea {
+  height: 30vh;
+}
+
+
 .editor {
   margin-bottom: 30px;
 
-  .tox .tox-dialog-wrap {
-    z-index: 950;
-  }
   .tox-tinymce {
     box-shadow: 2px 2px 0 #f3f3f3;
     border: 1px solid #e6e6e6;
@@ -226,24 +232,41 @@ body.is-noscroll {
   }
 }
 
-.tox-track-link {
-  display: block !important;
-  cursor: pointer !important;
 
-  margin: 5px 0 10px 0 !important;
-  input {
-    margin-right: 5px !important;
+.tox.tox-silver-sink {
+  z-index: 850;
+
+  .tox-dialog-wrap {
+    z-index: 900;
+  }
+  .tox-dialog {
+    @extend .box;
   }
-}
 
-  .plain-editor textarea {
-    height: 65vh;
+  .tox-track-link {
+    display: block;
+    cursor: pointer;
+
+    margin: 5px 0 10px 0;
+    input {
+      margin-right: 5px;
+    }
   }
-  .alt-body textarea {
-    height: 30vh;
+
+  .tox-button {
+    border-radius: 4px;
+  }
+  .tox-button:not(.tox-button--secondary):not(.tox-button--naked) {
+    background: $primary;
   }
 
-  .tox, .tox-tinymce, .tox-tinymce-aux, .tox .tox-button, .tox .tox-button-link, .tox .tox-dialog__title,
+  .tox-textfield {
+    box-shadow: 2px 2px 0 $white-ter;
+    border: 1px solid $grey-lighter;
+  }
+}
+
+.tox, .tox-tinymce, .tox-tinymce-aux, .tox .tox-button, .tox .tox-button-link, .tox .tox-dialog__title,
   .tox .tox-textfield,
   .tox .tox-toolbar-textfield,
   .tox .tox-listboxfield .tox-listbox--select,
@@ -277,6 +300,9 @@ body.is-noscroll {
 }
 
 /* Modal */
+.modal {
+  z-index: 950;
+}
 .modal-background {
   background: rgba(255, 255, 255, 0.7);
 }