Some style tweaks

src/pages/content/components/app.tsx

@@ -92,7 +92,7 @@ export default function App() {
   }
 
   return (
-    <div className="content-view container container-ia width-max relative-row-wrap info-top">
+    <div className="container container-ia width-max relative-row-wrap info-top">
       <div className="container container-ia">
         <div
           style={{
@@ -140,7 +140,7 @@ const DownloadIndividualSong: FC<{ show: ArchiveShow }> = ({ show }) => {
         alignItems: "center",
       }}
     >
-      <select style={{ fontSize: ".75em" }} onChange={onDownload}>
+      <select onChange={onDownload} className="minimalist-select">
         <option>Download Individually</option>
         {tracks.map((track) => {
           return (
@@ -161,12 +161,10 @@ const DownloadIndividualSong: FC<{ show: ArchiveShow }> = ({ show }) => {
             display: "flex",
             flexDirection: "column",
             alignItems: "center",
-            fontSize: ".75em",
           }}
         >
-          <p>Download queue</p>
           {loadingTracks.map((title) => (
-            <span key={title}>{title}</span>
+            <span key={title}>Downloading {title}</span>
           ))}
         </div>
       ) : null}
@@ -203,13 +201,10 @@ const DownloadButton: FC<{ show: ArchiveShow }> = ({ show }) => {
     <>
       <button
         onClick={() => downloadShow(show)}
-        style={{
-          borderRadius: "1rem",
-          fontSize: "2rem",
-        }}
+        className="minimalist-button"
         disabled={loading}
       >
-        {loading ? "Downloading... Please be patient :)" : "Download Show"}
+        {loading ? "Downloading... Please be patient" : "Download Show"}
       </button>
       {progress ? <progress value={progress}> </progress> : null}
       {error && (

src/pages/content/style.scss

@@ -1,19 +1,36 @@
 @import "@assets/style/theme.scss";
 
-.content-view {
-  font-size: 30px;
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
 }
 
-.loader {
-  border: 16px solid #f3f3f3; /* Light grey */
-  border-top: 16px solid #3498db; /* Blue */
-  border-radius: 50%;
-  width: 120px;
-  height: 120px;
-  animation: spin 2s linear infinite;
+.minimalist-button {
+  display: inline-block;
+  padding: 10px 20px;
+  background-color: transparent;
+  border: 2px solid #333;
+  color: #333;
+  font-size: 1em;
+  text-align: center;
+  border-radius: 5px;
+  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
 }
 
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
+.minimalist-button:hover {
+  background-color: #333;
+  color: #fff;
+  border-color: #333;
+}
+
+.minimalist-select {
+  font-size: 1.2rem;
+  padding: 5px;
+  border-radius: 5px;
+}
+
+.minimalist-select option {
+  font-size: 1.2rem;
+  color: #333;
+  background-color: #fff;
 }

src/pages/popup/Popup.tsx

@@ -18,24 +18,28 @@ export const Popup: FC = () => {
           If you would like to show support financially, please consider
           donating to an organization that is doing good work such as 
           <a target="_blank" href="https://archive.org/donate" rel="noreferrer">
-            Archive.org
+            archive.org
           </a>
-          <span> or </span>
+          <span>, </span>
           <a
             target="_blank"
             rel="noreferrer"
             href="https://www.waterwheelfoundation.org/donate/"
           >
             Waterwheel Foundation
           </a>
+          <span>, or the </span>
+          <a target="_blank" rel="noreferrer" href="https://mbird.org/">
+            mockingbird foundation.
+          </a>
         </span>
 
         <p>
           Grateful Grabber is&nbsp;
           <a href="https://github.com/chrisbendel/grateful-grabber/blob/main/LICENSE">
             open source.
           </a>
-          <p>If you would like to contribute, please feel free!</p>
+          <span> Consider contributing!</span>
         </p>
       </header>
     </div>