Move answers heading to bottom

eea · Mar 24, 2023 · 21451e9 · 21451e9
1 parent b640092
commit 21451e9
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 57 deletions.
diff --git a/searchlib/components/AnswerBox/AnswerBoxDetails.jsx b/searchlib/components/AnswerBox/AnswerBoxDetails.jsx
@@ -4,21 +4,16 @@ 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"
-        >
-          <div className="answer-header-title">Highlighted answers</div>
-          <Icon className="ri-information-line" />
+        <Button onClick={() => setOpen(true)} className="feedback-btn">
+          About highlighted answers
+          <Icon name="angle right" />
         </Button>
       }
     >

diff --git a/searchlib/components/AnswerBox/AnswerContext.jsx b/searchlib/components/AnswerBox/AnswerContext.jsx
@@ -6,7 +6,6 @@ import { ResultSource, DateTime, StringList } from '@eeacms/search/components';
 import { highlightUrl } from './utils';
 
 import { useAppConfig } from '@eeacms/search/lib/hocs';
-import AnswerBoxDetails from './AnswerBoxDetails';
 
 const WHITESPACE_RE = /\n|\t/;
 
@@ -36,11 +35,6 @@ const AnswerContext = ({ item, answerItem }) => {
         {item.title}
       </ExternalLink>
     ),
-    meta: (
-      <div className="answer-header">
-        <AnswerBoxDetails basic />
-      </div>
-    ),
     description: (
       <>
         <span dangerouslySetInnerHTML={{ __html: pre }}></span>

diff --git a/searchlib/components/AnswerBox/AnswerFeedback.jsx b/searchlib/components/AnswerBox/AnswerFeedback.jsx
@@ -31,7 +31,7 @@ const AnswerFeedback = (props) => {
   const [open, setOpen] = React.useState(false);
   const [think, setThink] = React.useState('');
   const [comment, setComment] = React.useState('');
-  const { answer, query } = props; // basic
+  const { answer, query } = props;
 
   const { appConfig } = useAppConfig();
 
@@ -49,7 +49,7 @@ const AnswerFeedback = (props) => {
       onClose={() => setOpen(false)}
       onOpen={() => setOpen(true)}
       trigger={
-        <Button primary onClick={() => setOpen(true)} className="feedback-btn">
+        <Button onClick={() => setOpen(true)} className="feedback-btn">
           Help us improve our answers
           <Icon name="angle right" />
         </Button>

diff --git a/searchlib/components/AnswerBox/Answers.jsx b/searchlib/components/AnswerBox/Answers.jsx
@@ -8,6 +8,7 @@ import { buildResult } from '@eeacms/search/lib/search/state/results';
 import AnswerContext from './AnswerContext';
 import AnswerLinksList from './AnswersLinksList';
 import AnswerFeedback from './AnswerFeedback';
+import AnswerBoxDetails from './AnswerBoxDetails';
 
 const MAX_COUNT = 1;
 
@@ -96,11 +97,13 @@ const Answers = (props) => {
                   </div>
                 </div>
                 <div className="answers-feedback">
-                  <AnswerFeedback
-                    basic
-                    answer={primaryAnswer}
-                    query={searchedTerm}
-                  />
+                  <div>
+                    <AnswerFeedback
+                      answer={primaryAnswer}
+                      query={searchedTerm}
+                    />
+                    <AnswerBoxDetails />
+                  </div>
                 </div>
                 {/*<div className="answers__bottom">
                   <Popup

diff --git a/src/SearchBlock/less/answersbox.less b/src/SearchBlock/less/answersbox.less
@@ -35,35 +35,6 @@
   }
 }
 
-.answer-header {
-  display: flex;
-  align-items: center;
-  gap: 1.5em;
-
-  .answer-header-title {
-    font-weight: 700;
-  }
-
-  .ui.basic.button.header-btn {
-    display: flex;
-    align-items: center;
-    padding: 0;
-    margin: 0;
-    color: @deepBlue !important;
-    font-size: 16px;
-    font-weight: 300;
-    gap: 0.6em;
-
-    &:hover,
-    &:focus,
-    &:active {
-      border: none;
-      background: none !important;
-      box-shadow: none;
-    }
-  }
-}
-
 .answers__links {
   font-size: small;
 
@@ -131,13 +102,6 @@
   }
 }
 
-@media only screen and (max-width: 400px) {
-  .answer-header {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-}
-
 // .progress {
 //   height: 3px;
 //   margin-top: 1em;