Improve answer box

eea · Mar 23, 2023 · b640092 · b640092
1 parent 58c3324
commit b640092
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 45 deletions.
diff --git a/searchlib/components/AnswerBox/AnswerBoxDetails.jsx b/searchlib/components/AnswerBox/AnswerBoxDetails.jsx
@@ -1,56 +1,60 @@
 import React from 'react';
-import { Modal, Button } from 'semantic-ui-react'; // Icon
+import { Modal, Button, Icon } from 'semantic-ui-react';
 import AnswerFeedback from './AnswerFeedback';
 
 export default (props) => {
   const [open, setOpen] = React.useState(false);
   const { basic } = props;
   return (
     <Modal
+      closeIcon
       open={open}
+      onClose={() => setOpen(false)}
+      onOpen={() => setOpen(true)}
       trigger={
         <Button
           basic={basic}
           onClick={() => setOpen(true)}
           className="header-btn"
         >
-          {/*<Icon name="help circle" />*/}
-          About direct answers
+          <div className="answer-header-title">Highlighted answers</div>
+          <Icon className="ri-information-line" />
         </Button>
       }
     >
-      <Modal.Header>Direct answers</Modal.Header>
+      <Modal.Header>About the answers to your query</Modal.Header>
       <Modal.Content>
-        <p>
-          When possible, we show direct answers to your queries if our system
-          automatically detects them within the top search results. The answers
-          highlighted are only from content available on our websites. We do not
-          provide answers from other sources or generate new content.
-        </p>
-        <p>
-          Our algorithm aims to provide you the most relevant and up-to-date
-          results. In some cases, however, the algorithm could display results
-          which are not the most relevant or up-to-date content we have
-          available. We would be grateful if you could let us know. Your
-          feedback can help us improve the algorithm, and hence the search
-          results.
-        </p>
+        <Modal.Description>
+          <p>
+            When possible, we show direct answers to your queries if our system
+            automatically detects them within the top search results. The
+            answers highlighted are only from content available on our websites.
+            We do not provide answers from other sources or generate new
+            content.
+          </p>
+          <p>
+            Our algorithm aims to provide you the most relevant and up-to-date
+            results. In some cases, however, the algorithm could display results
+            which are not the most relevant or up-to-date content we have
+            available. We would be grateful if you could let us know. Your
+            feedback can help us improve the algorithm, and hence the search
+            results.
+          </p>
 
-        <AnswerFeedback />
-        <p>
-          <a
-            href="https://www.eea.europa.eu/en/legal-notice#disclaimer"
-            target="_blank"
-            rel="noreferrer"
-          >
-            EEA Disclaimer
-          </a>
-        </p>
+          <AnswerFeedback />
+          <p>
+            <a
+              href="https://www.eea.europa.eu/en/legal-notice#disclaimer"
+              target="_blank"
+              rel="noreferrer"
+            >
+              EEA Disclaimer
+            </a>
+          </p>
+        </Modal.Description>
       </Modal.Content>
       <Modal.Actions>
-        <Button color="black" onClick={() => setOpen(false)} positive>
-          Help us improve our search
-        </Button>
+        <Button onClick={() => setOpen(false)}>Close</Button>
       </Modal.Actions>
     </Modal>
   );

diff --git a/searchlib/components/AnswerBox/AnswerContext.jsx b/searchlib/components/AnswerBox/AnswerContext.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import ExternalLink from '@eeacms/search/components/Result/ExternalLink';
-import { ResultSource } from '@eeacms/search/components'; //, StringList, Iconn
+import { ResultSource, DateTime, StringList } from '@eeacms/search/components'; //, StringList, Iconn
 
 import { highlightUrl } from './utils';
 
@@ -38,7 +38,6 @@ const AnswerContext = ({ item, answerItem }) => {
     ),
     meta: (
       <div className="answer-header">
-        <div className="answer-header-title">Direct answers</div>
         <AnswerBoxDetails basic />
       </div>
     ),
@@ -56,8 +55,18 @@ const AnswerContext = ({ item, answerItem }) => {
     ),
     // preview_image_url: result.hasImage ? result.thumbUrl : undefined,
     extra: (
-      <div className="result-bottom">
-        <div className="result-info">
+      <div>
+        <div className="result-bottom">
+          <div className="result-info">
+            <span className="result-info-title">Published: </span>
+            <DateTime format="DATE_MED" value={item.issued} />
+          </div>
+          <div className="result-info">
+            <span className="result-info-title">Topics: </span>
+            <StringList value={item.tags} />
+          </div>
+        </div>
+        <div>
           <ResultSource item={item} />
         </div>
       </div>

diff --git a/searchlib/components/AnswerBox/AnswerFeedback.jsx b/searchlib/components/AnswerBox/AnswerFeedback.jsx
@@ -44,13 +44,12 @@ const AnswerFeedback = (props) => {
 
   return (
     <Modal
+      closeIcon
       open={open}
+      onClose={() => setOpen(false)}
+      onOpen={() => setOpen(true)}
       trigger={
-        <Button
-          // basic={basic}
-          onClick={() => setOpen(true)}
-          className="feedback-btn"
-        >
+        <Button primary onClick={() => setOpen(true)} className="feedback-btn">
           Help us improve our answers
           <Icon name="angle right" />
         </Button>
@@ -85,9 +84,7 @@ const AnswerFeedback = (props) => {
         </Segment>
       </Modal.Content>
       <Modal.Actions>
-        <Button color="black" onClick={() => setOpen(false)}>
-          Cancel
-        </Button>
+        <Button onClick={() => setOpen(false)}>Cancel</Button>
         <Button
           content="Send feedback"
           labelPosition="right"

diff --git a/src/SearchBlock/less/answersbox.less b/src/SearchBlock/less/answersbox.less
@@ -45,11 +45,14 @@
   }
 
   .ui.basic.button.header-btn {
-    padding: 5px;
+    display: flex;
+    align-items: center;
+    padding: 0;
     margin: 0;
     color: @deepBlue !important;
-    font-size: 14px;
+    font-size: 16px;
     font-weight: 300;
+    gap: 0.6em;
 
     &:hover,
     &:focus,