refs 112702: imprv design

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

@@ -12,7 +12,7 @@ const Question = ({ question }: QuestionProps): JSX.Element => {
       </span>
     </div>
     <div className="col-7 d-flex align-items-center">
-      <div className="btn-group btn-group-toggle flex-fill" data-toggle="buttons">
+      <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
         </label>

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

@@ -1,3 +1,5 @@
+import { useState } from 'react';
+
 import { useTranslation } from 'next-i18next';
 import {
   Modal, ModalHeader, ModalBody, ModalFooter,
@@ -16,6 +18,8 @@ const QuestionnaireModal = (): JSX.Element => {
 
   const questions = questionnaireOrders?.flatMap(questionnaireOrder => questionnaireOrder.questions);
 
+  const [answered, setAnswered] = useState(false);
+
   const { t } = useTranslation();
 
   return (<Modal
@@ -29,27 +33,37 @@ const QuestionnaireModal = (): JSX.Element => {
       className="bg-primary text-light"
       cssModule={{ 'modal-title': 'modal-title flex-fill' }}>
       <div className="d-flex">
-        <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>
+        {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>
     </ModalHeader>
     <ModalBody className="my-4">
-      <div className="container">
-        <div className="row">
-          <div className="col-5"> </div>
-          <div className="col-7 d-flex justify-content-between">
-            <span>{t('questionnaire.strongly disagree')}</span>
-            <span>{t('questionnaire.strongly agree')}</span>
+      {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>
+            </div>
           </div>
+          {questions?.map((question) => {
+            return <Question question={question} key={question._id.toString()} />;
+          })}
         </div>
-        {questions?.map((question) => {
-          return <Question question={question} key={question._id.toString()} />;
-        })}
-      </div>
+      }
     </ModalBody>
     <ModalFooter>
-      <button type="button" className="btn btn-primary">{t('questionnaire.send answer')}</button>
+      {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>}
     </ModalFooter>
   </Modal>);
 };

packages/app/src/styles/style-app.scss

@@ -18,8 +18,8 @@
 
 // icons
 
-// DO NOT CHANGE THER OERDER OF font-awesome AND simple-line-icons.
-// font-familiy used in simple-line-icons has to be prioritized than the one used in font-awesome.
+// DO NOT CHANGE THER ORDER OF font-awesome AND simple-line-icons.
+// font-family used in simple-line-icons has to be prioritized than the one used in font-awesome.
 @import '~font-awesome';
 @import '~simple-line-icons';
 @import '~material-icons/iconfont/filled';

packages/preset-themes/src/styles/default.scss

@@ -209,4 +209,9 @@
       @include page-editor-mode-manager.btn-page-editor-mode-manager(lighten($primary, 30%), lighten($primary, 20%), $primary, darken($primary, 20%));
     }
   }
+  // .btn-group.grw-questionnaire-btn-group {
+  //   .btn.btn-outline-primary {
+  //     @include page-editor-mode-manager.btn-page-editor-mode-manager(lighten($primary, 30%), lighten($primary, 20%), $primary, darken($primary, 20%));
+  //   }
+  // }
 }

packages/preset-themes/src/styles/theme/_apply-colors.scss

@@ -687,3 +687,17 @@ Emoji picker modal
 .emoji-picker-modal {
   background-color: transparent !important;
 }
+
+/*
+  Questionnaire modal
+*/
+.grw-questionnaire-btn-group {
+  .btn-outline-primary {
+    @include button-outline-variant(
+      lighten($primary, 30%),
+      $color-hover: color-contrast($primary),
+      $active-background: $primary,
+      $active-border: lighten($primary, 30%),
+    );
+  }
+}