From ab19f370078e1e039726def086dcef9f8449a829 Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Tue, 19 Apr 2022 07:54:06 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=96=BC=20UX=20tweaks=20on=20Acquisition?=
 =?UTF-8?q?=20Panel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/components/ComicDetail.tsx                  | 8 ++++----
 src/client/components/ComicDetail/AcquisitionPanel.tsx | 9 +++++++--
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/client/components/ComicDetail.tsx b/src/client/components/ComicDetail.tsx
index 9cefa07..47f4bca 100644
--- a/src/client/components/ComicDetail.tsx
+++ b/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) &&
-                  !isEmpty(comicBookDetailData) ? (
+                    !isNil(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>
diff --git a/src/client/components/ComicDetail/AcquisitionPanel.tsx b/src/client/components/ComicDetail/AcquisitionPanel.tsx
index 212e943..9a3e56f 100644
--- a/src/client/components/ComicDetail/AcquisitionPanel.tsx
+++ b/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>