Merge pull request #7320 from weseek/imprv/ui-questionnaire-modal

imprv: UI questionnaire modal

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

@@ -818,7 +818,7 @@
     "agree": "そう思う",
     "disagree": "そう思わない",
     "answer": "回答する",
-    "no_answer": "無回答",
+    "no_answer": "わからない",
     "settings": "アンケート設定",
     "failed_to_send": "回答送信に失敗しました",
     "denied": "このアンケートは今後表示されません",

packages/app/src/components/Admin/App/QuestionnaireSettings.tsx

@@ -52,7 +52,7 @@ const QuestionnaireSettings = (): JSX.Element => {
   const isLoading = data === undefined && error === undefined;
 
   return (
-    <div className="mb-5">
+    <div id="questionnaire-settings" className="mb-5">
       <p className="card well">
         送信されるデータにユーザーの個人情報は一切含まれません。
         <br />
@@ -94,7 +94,7 @@ const QuestionnaireSettings = (): JSX.Element => {
                 disabled={!isEnableQuestionnaire}
               />
               <label className="custom-control-label" htmlFor="isAppSiteUrlHashed">
-                アプリ URL を暗号化して送信する
+                アプリ URL を匿名化して送信する
               </label>
             </div>
           </div>

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

@@ -20,7 +20,7 @@ const Question = ({ question, inputNamePrefix }: QuestionProps): JSX.Element =>
     </div>
     <div className="col-6 d-flex align-items-center pl-0">
       <div className="btn-group btn-group-toggle flex-fill grw-questionnaire-btn-group" data-toggle="buttons">
-        <label className="btn btn-outline-primary active mr-3 rounded">
+        <label className="btn btn-outline-primary active mr-4 rounded">
           <input type="radio" name={`${inputNamePrefix + question._id}`} id={`${question._id}-noAnswer`} value='0' defaultChecked/> -
         </label>
         <label className="btn btn-outline-primary rounded-left">

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

@@ -107,38 +107,47 @@ const QuestionnaireModal = ({ questionnaireOrder }: QuestionnaireModalProps): JS
     size="lg"
     isOpen={isOpened}
     toggle={closeBtnClickHandlerClosingToastor}
+    centered
   >
     <form onSubmit={submitHandler}>
-      <ModalHeader
-        tag="h4"
-        toggle={closeBtnClickHandlerClosingToastor}
-        className="bg-primary text-light">
-        <span>{t('questionnaire.give_us_feedback')}</span>
-      </ModalHeader>
-      <ModalBody className="my-4">
-        <div className="container">
-          <h3 className="grw-modal-head">{questionnaireOrderTitle}</h3>
-          <div className="row mt-4">
-            <div className="col-6"></div>
-            <div className="col-1 p-0 pr-2 font-weight-bold text-center align-items-center">{t('questionnaire.no_answer')}</div>
-            <div className="col-5 d-flex justify-content-between align-items-center pl-2">
-              <span className="font-weight-bold">{t('questionnaire.disagree')}</span>
-              <span className="font-weight-bold">{t('questionnaire.agree')}</span>
+      <ModalBody className="bg-primary overflow-hidden p-0" style={{ borderRadius: 8 }}>
+        <div className="bg-white m-2 p-4" style={{ borderRadius: 8 }}>
+          <div className="text-center mb-2">
+            <h2 className="my-4">{questionnaireOrderTitle}</h2>
+            <p className="mb-1">{t('questionnaire.more_satisfied_services')}</p>
+            <p>{t('questionnaire.strive_to_improve_services')}</p>
+          </div>
+          <div className="container">
+            <div className="row mt-4">
+              <div className="col-md-2 offset-md-5 font-weight-bold text-right align-items-center p-0">{t('questionnaire.no_answer')}</div>
+              <div className="col-md-5 d-flex justify-content-between align-items-center">
+                <span className="font-weight-bold">{t('questionnaire.disagree')}</span>
+                <span className="font-weight-bold">{t('questionnaire.agree')}</span>
+              </div>
             </div>
+            {questionnaireOrder.questions?.map((question) => {
+              return <Question question={question} inputNamePrefix={inputNamePrefix} key={question._id}/>;
+            })}
+          </div>
+          <div className="text-center mt-5">
+            <button type="submit" className="btn btn-primary">{t('questionnaire.answer')}</button>
+          </div>
+          <div className="text-center cursor-pointer text-decoration-underline my-3">
+            <span style={{ cursor: 'pointer', textDecoration: 'underline' }} onClick={denyBtnClickHandler}>{t('questionnaire.dont_show_again')}</span>
           </div>
-          {questionnaireOrder.questions?.map((question) => {
-            return <Question question={question} inputNamePrefix={inputNamePrefix} key={question._id}/>;
-          })}
+
+          {currentUser?.admin && (
+            <a href="/admin/app#questionnaire-settings">
+              <i className="material-icons mr-1" >admin_panel_settings</i>
+            </a>
+          )}
+          {currentUser != null && (
+            <a href="/me">
+              <i className="material-icons" >settings</i>
+            </a>
+          )}
         </div>
       </ModalBody>
-      <ModalFooter>
-        {currentUser?.admin
-        && <a href="" className="mr-auto d-flex align-items-center"><i className="material-icons mr-1">settings</i>{t('questionnaire.settings')}</a>}
-        <>
-          <button type="button" className="btn btn-outline-secondary mr-3" onClick={denyBtnClickHandler}>{t('questionnaire.dont_show_again')}</button>
-          <button type="submit" className="btn btn-primary">{t('questionnaire.answer')}</button>
-        </>
-      </ModalFooter>
     </form>
   </Modal>);
 };