From 44da44781cc33b5f867f1727ccd66244ddf658da Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Thu, 3 Mar 2022 22:55:38 +0200
Subject: [PATCH] styling

---
 editors/demo/src/Editors.js                               | 2 +-
 wax-prosemirror-core/src/config/defaultConfig.js          | 1 +
 .../components/EditorComponent.js                         | 5 ++---
 .../components/FeedbackComponent.js                       | 8 +++++++-
 .../components/FillTheGapContainerComponent.js            | 7 +++++--
 .../src/FillTheGapQuestionService/fillTheGap.css          | 8 ++++++--
 .../components/FeedbackComponent.js                       | 4 ++++
 7 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/editors/demo/src/Editors.js b/editors/demo/src/Editors.js
index d19991a2e..abd0628fb 100644
--- a/editors/demo/src/Editors.js
+++ b/editors/demo/src/Editors.js
@@ -70,7 +70,7 @@ const Editors = () => {
       case 'ncbi':
         return <NCBI />;
       default:
-        return <HHMI />;
+        return <Editoria />;
     }
   };
 
diff --git a/wax-prosemirror-core/src/config/defaultConfig.js b/wax-prosemirror-core/src/config/defaultConfig.js
index 0be93d5b2..9871d85c8 100644
--- a/wax-prosemirror-core/src/config/defaultConfig.js
+++ b/wax-prosemirror-core/src/config/defaultConfig.js
@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import {
   SchemaService,
   MenuService,
diff --git a/wax-prosemirror-services/src/FillTheGapQuestionService/components/EditorComponent.js b/wax-prosemirror-services/src/FillTheGapQuestionService/components/EditorComponent.js
index 6f95e5cb7..dfd211373 100644
--- a/wax-prosemirror-services/src/FillTheGapQuestionService/components/EditorComponent.js
+++ b/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;
diff --git a/wax-prosemirror-services/src/FillTheGapQuestionService/components/FeedbackComponent.js b/wax-prosemirror-services/src/FillTheGapQuestionService/components/FeedbackComponent.js
index 8ba6fe526..09f2a85e1 100644
--- a/wax-prosemirror-services/src/FillTheGapQuestionService/components/FeedbackComponent.js
+++ b/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;
diff --git a/wax-prosemirror-services/src/FillTheGapQuestionService/components/FillTheGapContainerComponent.js b/wax-prosemirror-services/src/FillTheGapQuestionService/components/FillTheGapContainerComponent.js
index 82fb84301..b0781f807 100644
--- a/wax-prosemirror-services/src/FillTheGapQuestionService/components/FillTheGapContainerComponent.js
+++ b/wax-prosemirror-services/src/FillTheGapQuestionService/components/FillTheGapContainerComponent.js
@@ -1,3 +1,4 @@
+/* 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;
 `;
 
diff --git a/wax-prosemirror-services/src/FillTheGapQuestionService/fillTheGap.css b/wax-prosemirror-services/src/FillTheGapQuestionService/fillTheGap.css
index 763e74861..3e1917d1d 100644
--- a/wax-prosemirror-services/src/FillTheGapQuestionService/fillTheGap.css
+++ b/wax-prosemirror-services/src/FillTheGapQuestionService/fillTheGap.css
@@ -1,9 +1,13 @@
 /* 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 {
diff --git a/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/FeedbackComponent.js b/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/FeedbackComponent.js
index 4ba3a751e..1eb7cf8ac 100644
--- a/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/FeedbackComponent.js
+++ b/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;
-- 
GitLab