refs 112702: apply design FB

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

@@ -799,11 +799,13 @@
     "go_to_settings": "設定する"
   },
   "questionnaire": {
-    "Questionnaire": "アンケート",
+    "Give us feedback for improvements": "GROWI の改善のために、アンケートにご協力ください",
+    "thank you for answering": "ご回答ありがとうございます",
     "don't show again": "今後このアンケートを表示しない",
     "answer later": "今は回答しない",
-    "strongly agree": "非常にそう思う",
-    "strongly disagree": "全くそう思わない",
-    "send answer": "回答する"
+    "agree": "肯定",
+    "disagree": "否定",
+    "send answer": "回答する",
+    "no answer": "無回答"
   }
 }

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

@@ -6,12 +6,19 @@ type QuestionProps = {
 
 const Question = ({ question }: QuestionProps): JSX.Element => {
   return <div className="row mt-4">
-    <div className="col-5 d-flex align-items-center">
+    <div className="col-6 d-flex align-items-center">
       <span>
         {question.text}
       </span>
     </div>
-    <div className="col-7 d-flex align-items-center">
+    <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">
+          <input type="radio" name="options" id="noAnswer"/> 0
+        </label>
+      </div>
+    </div>
+    <div className="col-5 d-flex align-items-center">
       <div className="btn-group btn-group-toggle flex-fill grw-questionnaire-btn-group" data-toggle="buttons">
         <label className="btn btn-outline-primary">
           <input type="radio" name="options" id="option1"/> 1

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

@@ -30,32 +30,27 @@ const QuestionnaireModal = (): JSX.Element => {
     <ModalHeader
       tag="h4"
       toggle={() => closeQuestionnaireModal()}
-      className="bg-primary text-light"
-      cssModule={{ 'modal-title': 'modal-title flex-fill' }}>
-      <div className="d-flex">
-        {answered
-          ? <span className="mr-auto">ご回答ありがとうございます</span>
-          : <>
-            <span className="mr-auto">{t('questionnaire.Questionnaire')}</span>
-            <button type="button" className="btn btn-secondary mr-2">{t('questionnaire.don\'t show again')}</button>
-            <button type="button" className="btn btn-secondary">{t('questionnaire.answer later')}</button>
-          </>
-        }
-      </div>
+      className="bg-primary text-light">
+      {answered
+        ? <span className="mr-auto">{t('questionnaire.thank you for answering')}</span>
+        : <span>アンケートのタイトル</span>
+      }
     </ModalHeader>
     <ModalBody className="my-4">
       {answered
         ? <>その他ご意見ご要望は<a href="">こちら</a>からお願い致します。</>
         : <div className="container">
-          <div className="row">
-            <div className="col-5"> </div>
-            <div className="col-7 d-flex justify-content-between">
-              <span className="font-weight-bold">{t('questionnaire.strongly disagree')}</span>
-              <span className="font-weight-bold">{t('questionnaire.strongly agree')}</span>
+          <h3 className="grw-modal-head">{t('questionnaire.Give us feedback for improvements')}</h3>
+          <div className="row mt-4">
+            <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>
             </div>
           </div>
           {questions?.map((question) => {
-            return <Question question={question} key={question._id.toString()} />;
+            return <Question question={question} key={question._id.toString()}/>;
           })}
         </div>
       }
@@ -63,7 +58,13 @@ const QuestionnaireModal = (): JSX.Element => {
     <ModalFooter>
       {answered
         ? <button type="button" className="btn btn-primary" onClick={() => closeQuestionnaireModal()}>{t('Close')}</button>
-        : <button type="button" className="btn btn-primary" onClick={() => setAnswered(true)}>{t('questionnaire.send answer')}</button>}
+        : <>
+          <div className="form-check form-check-inline mr-4">
+            <input className="form-check-input" type="checkbox"/>
+            <label className="form-check-label">{t('questionnaire.don\'t show again')}</label>
+          </div>
+          <button type="button" className="btn btn-primary" onClick={() => setAnswered(true)}>{t('questionnaire.send answer')}</button>
+        </>}
     </ModalFooter>
   </Modal>);
 };