🖼 UX tweaks on Acquisition Panel

src/client/components/ComicDetail.tsx

@@ -40,7 +40,7 @@ type ComicDetailProps = {};
  * )
  */
 
-export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
+export const ComicDetail = ({ }: ComicDetailProps): ReactElement => {
   const [page, setPage] = useState(1);
   const [active, setActive] = useState(1);
   const [visible, setVisible] = useState(false);
@@ -237,11 +237,11 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
                 {/* Downloads tab and count badge */}
                 <a>
                   {id === 5 &&
-                  !isNil(comicBookDetailData) &&
+                    !isNil(comicBookDetailData) &&
-                  !isEmpty(comicBookDetailData) ? (
+                    !isEmpty(comicBookDetailData) ? (
                     <span className="download-icon-labels">
                       <i className="fa-solid fa-download"></i>
-                      <span className="tag downloads-count">
+                      <span className="tag downloads-count is-info is-light">
                         {comicBookDetailData.acquisition.directconnect.length}
                       </span>
                     </span>

src/client/components/ComicDetail/AcquisitionPanel.tsx

@@ -126,7 +126,7 @@ export const AcquisitionPanel = (
                               placeholder="Type an issue/volume name"
                             />
                             <span className="help is-clearfix is-light is-info">
-                              Use this to manually override the search.
+                              Use this to perform a manual search.
                             </span>
                           </div>
                         );
@@ -183,7 +183,12 @@ export const AcquisitionPanel = (
                       )}
                     </div>
                   </dt>
-                  <dt>Query: {searchInfo.query.pattern}</dt>
+                  <dt>
+                    Query:{" "}
+                    <span className="has-text-weight-semibold">
+                      {searchInfo.query.pattern}
+                    </span>
+                  </dt>
                   <dd>Extensions: {searchInfo.query.extensions.join(", ")}</dd>
                   <dd>File type: {searchInfo.query.file_type}</dd>
                 </dl>