Dark mode refactor (#98)

* 🏗️ Acquisition Panel refactor WIP

* 🔧 Formatted the search query box

* 🔧 Implementing download method

* 🏗️ Refactored the AirDC++ download panel

* 🌜 Initial Dark Mode support

* 🌜 Trying dark mode on the react-select

* Update App.scss

* 🏗️ Migrating Navbar to TailwindCSS

* 🖼️ Added solar icons

* 🔧 Added solar icons

* 🔧 Added code for dark mode toggle

* 🏗️ Wiring up the dark mode toggle

* 🌜 Added Dark mode to the body

* 🏗️ Building out the import page

* 🪑 Cleaning up the table styles

* 🏗️ Cleaned up past imports table

* 🏗️ Refactored Import socket events

* 🏗️ Refactored the card grid on dashboard

* 🏗️ Building variants for Cards

* 🏗️ Added a horizontal medium variant

* 🏗️ Cleaning up forms and cards

* 🔧 Styling form inputs

* 🏗️ Form refactor

* 🔠 Added a monospace font

* 🪑 Refactoring the table

* 🧹 Formatting in connection confirmation panels

* 🏗️ Refactoring table for library

* 🏗️ Added icons and details to metadata

* 🏗️ Cleaned the table further

* 🏗️ Fixed fonts, and comic detail page first draft

* ❌ Removing yarn.lockfile

src/client/components/ComicDetail/DownloadProgressTick.tsx

@@ -3,10 +3,10 @@ import React, { ReactElement } from "react";
 
 export const DownloadProgressTick = (props): ReactElement => {
   return (
-    <div >
-      <h4 className="is-size-6">{props.data.name}</h4>
+    <div>
+      <h4 className="is-size-5">{props.data.name}</h4>
       <div>
-        <span className="is-size-3 has-text-weight-semibold">
+        <span className="is-size-4 has-text-weight-semibold">
           {prettyBytes(props.data.downloaded_bytes)} of{" "}
           {prettyBytes(props.data.size)}{" "}
         </span>
@@ -20,13 +20,12 @@ export const DownloadProgressTick = (props): ReactElement => {
           %
         </progress>
       </div>
-      <div className="is-size-5">
-        {prettyBytes(props.data.speed)} per second.
-      </div>
-      <div className="is-size-5">
+      <div className="is-size-6 mt-1 mb-2">
+        <p>{prettyBytes(props.data.speed)} per second.</p>
         Time left:
         {Math.round(parseInt(props.data.seconds_left) / 60)}
       </div>
+
       <div>{props.data.target}</div>
     </div>
   );