refs 112702: imprv questionnaire modal design

packages/app/public/static/locales/en_US/translation.json

@@ -808,6 +808,7 @@
     "agree": "Agree",
     "disagree": "Disagree",
     "answer": "Answer",
-    "no_answer": "No answer"
+    "no_answer": "No answer",
+    "settings": "Questionnaire Settings"
   }
 }

packages/app/public/static/locales/ja_JP/translation.json

@@ -803,10 +803,11 @@
     "thank_you_for_answering": "ご回答ありがとうございます",
     "additional_feedback": "その他ご意見ご要望はこちらからお願い致します。",
     "dont_show_again": "今後このアンケートを表示しない",
-    "skip": "スキップする",
-    "agree": "肯定",
-    "disagree": "否定",
+    "skip": "スキップ",
+    "agree": "そう思う",
+    "disagree": "そう思わない",
     "answer": "回答する",
-    "no_answer": "無回答"
+    "no_answer": "無回答",
+    "settings": "アンケート設定"
   }
 }

packages/app/src/components/PopUps.module.scss

@@ -2,5 +2,5 @@
   position: fixed;
   right: 20px;
   bottom: 20px;
-  width: 280px;
+  width: 250px;
 }

packages/app/src/components/Questionnaire/Question.tsx

@@ -14,7 +14,7 @@ const Question = ({ question }: QuestionProps): JSX.Element => {
     <div className="col-1 d-flex align-items-center p-0">
       <div className="btn-group btn-group-toggle flex-fill grw-questionnaire-btn-group" data-toggle="buttons">
         <label className="btn btn-outline-primary active">
-          <input type="radio" name={`question-${question._id}`} id={`${question._id}-noAnswer`}/> 0
+          <input type="radio" name={`question-${question._id}`} id={`${question._id}-noAnswer`}/> -
         </label>
       </div>
     </div>

packages/app/src/components/Questionnaire/QuestionnaireModal.tsx

@@ -6,8 +6,10 @@ import {
 } from 'reactstrap';
 
 import { IQuestionnaireOrderHasId } from '~/interfaces/questionnaire/questionnaire-order';
+import { useCurrentUser } from '~/stores/context';
 import { useQuestionnaireModal } from '~/stores/modal';
 
+
 import Question from './Question';
 
 type QuestionnaireModalProps = {
@@ -15,6 +17,8 @@ type QuestionnaireModalProps = {
 }
 
 const QuestionnaireModal = ({ questionnaireOrder }: QuestionnaireModalProps): JSX.Element => {
+  const { data: currentUser } = useCurrentUser();
+
   const { data: questionnaireModalData, close: closeQuestionnaireModal } = useQuestionnaireModal();
   const isOpened = questionnaireModalData?.[questionnaireOrder._id];
 
@@ -45,8 +49,8 @@ const QuestionnaireModal = ({ questionnaireOrder }: QuestionnaireModalProps): JS
             <div className="col-6"></div>
             <div className="col-1 p-0 font-weight-bold text-center">{t('questionnaire.no_answer')}</div>
             <div className="col-5 d-flex justify-content-between">
-              <span className="font-weight-bold pl-3">{t('questionnaire.disagree')}</span>
-              <span className="font-weight-bold pr-3">{t('questionnaire.agree')}</span>
+              <span className="font-weight-bold">{t('questionnaire.disagree')}</span>
+              <span className="font-weight-bold">{t('questionnaire.agree')}</span>
             </div>
           </div>
           {questionnaireOrder.questions?.map((question) => {
@@ -56,13 +60,11 @@ const QuestionnaireModal = ({ questionnaireOrder }: QuestionnaireModalProps): JS
       }
     </ModalBody>
     <ModalFooter>
+      {currentUser?.admin ? <a href="" className="mr-auto">{t('questionnaire.settings')}</a> : <></>}
       {answered
         ? <button type="button" className="btn btn-primary" onClick={() => closeQuestionnaireModal(questionnaireOrder._id)}>{t('Close')}</button>
         : <>
-          <div className="form-check form-check-inline mr-4">
-            <input className="form-check-input" type="checkbox"/>
-            <label className="form-check-label">{t('questionnaire.dont_show_again')}</label>
-          </div>
+          <button type="button" className="btn btn-outline-secondary mr-3">{t('questionnaire.dont_show_again')}</button>
           <button type="button" className="btn btn-primary" onClick={() => setAnswered(true)}>{t('questionnaire.answer')}</button>
         </>}
     </ModalFooter>

packages/app/src/components/Questionnaire/QuestionnaireToast.tsx

@@ -28,7 +28,7 @@ const QuestionnaireToast = ({ questionnaireOrder }: QuestionnaireToastProps): JS
         <span aria-hidden="true" className="text-light">&times;</span>
       </button>
     </div>
-    <div className="toast-body bg-light">
+    <div className="toast-body bg-light d-flex justify-content-end">
       <button type="button" className="btn btn-secondary mr-3" onClick={answerBtnClickHandler}>{t('questionnaire.answer')}</button>
       <button type="button" className="btn btn-secondary" onClick={() => setIsOpen(false)}>{t('questionnaire.skip')}</button>
     </div>