styling

editors/demo/src/Editors.js

@@ -70,7 +70,7 @@ const Editors = () => {
       case 'ncbi':
         return <NCBI />;
       default:
-        return <HHMI />;
+        return <Editoria />;
     }
   };
 

wax-prosemirror-core/src/config/defaultConfig.js

+/* eslint-disable import/no-extraneous-dependencies */
 import {
   SchemaService,
   MenuService,

wax-prosemirror-services/src/FillTheGapQuestionService/components/EditorComponent.js

@@ -16,11 +16,10 @@ const EditorWrapper = styled.span`
   display: inline-flex;
 
   > .ProseMirror {
-    background: #a6a6a6 !important;
-    border: 1px solid #a6a6a6;
+    border-bottom: 1px solid #a6a6a6 !important;
     border-radius: 4px;
     box-shadow: none;
-    color: #fff !important;
+    color: #008000;
     display: inline;
     min-width: 50px;
     padding: 0px 2px 0px 2px !important;

wax-prosemirror-services/src/FillTheGapQuestionService/components/FeedbackComponent.js

@@ -10,6 +10,7 @@ import { DocumentHelpers } from 'wax-prosemirror-utilities';
 const FeedBack = styled.div`
   color: black;
   margin-top: 10px;
+  padding: 10px;
 `;
 
 const FeedBackLabel = styled.span`
@@ -17,10 +18,15 @@ const FeedBackLabel = styled.span`
 `;
 
 const FeedBackInput = styled.input`
-  // border: none;
+  border: none;
+  border-bottom: 1px solid black;
   display: flex;
   width: 100%;
 
+  &:focus {
+    outline: none;
+  }
+
   ::placeholder {
     color: rgb(170, 170, 170);
     font-style: italic;

wax-prosemirror-services/src/FillTheGapQuestionService/components/FillTheGapContainerComponent.js

+/* eslint-disable react/destructuring-assignment */
 /* eslint-disable react/prop-types */
 import React, { useContext } from 'react';
 import { WaxContext } from 'wax-prosemirror-core';
@@ -8,10 +9,12 @@ import FeedbackComponent from './FeedbackComponent';
 const FillTheGapContainer = styled.div`
   border: 3px solid #f5f5f7;
   margin-bottom: 30px;
-  padding: 3px;
 `;
+
 const FillTheGapWrapper = styled.div`
-  margin-bottom: 15px;
+  margin-bottom: ;
+  margin: 0px 38px 15px 38px;
+
   margin-top: 10px;
 `;
 

wax-prosemirror-services/src/FillTheGapQuestionService/fillTheGap.css

 /* fill The Gap */
 
+.fill-the-gap {
+}
+
 .ProseMirror .fill-the-gap .ProseMirror {
-  /* box-shadow: none; */
+  box-shadow: none;
+  border-bottom: 3px solid #F5F5F7;
   line-height: 2.2;
-  padding: 25px 5px 20px 5px;
+  padding: 25px 10px 20px 10px;
 }
 
 .ProseMirror .fill-the-gap span > .ProseMirror {

wax-prosemirror-services/src/MultipleChoiceQuestionService/components/FeedbackComponent.js

@@ -21,6 +21,10 @@ const FeedBackInput = styled.input`
   display: flex;
   width: 100%;
 
+  &:focus {
+    outline: none;
+  }
+
   ::placeholder {
     color: rgb(170, 170, 170);
     font-style: italic;