diff --git a/src/pages/content/components/app.tsx b/src/pages/content/components/app.tsx index 84f5613..4b59417 100644 --- a/src/pages/content/components/app.tsx +++ b/src/pages/content/components/app.tsx @@ -92,7 +92,7 @@ export default function App() { } return ( -
+
= ({ show }) => { alignItems: "center", }} > - {tracks.map((track) => { return ( @@ -161,12 +161,10 @@ const DownloadIndividualSong: FC<{ show: ArchiveShow }> = ({ show }) => { display: "flex", flexDirection: "column", alignItems: "center", - fontSize: ".75em", }} > -

Download queue

{loadingTracks.map((title) => ( - {title} + Downloading {title} ))}
) : null} @@ -203,13 +201,10 @@ const DownloadButton: FC<{ show: ArchiveShow }> = ({ show }) => { <> {progress ? : null} {error && ( diff --git a/src/pages/content/style.scss b/src/pages/content/style.scss index be152c6..7100405 100644 --- a/src/pages/content/style.scss +++ b/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; } diff --git a/src/pages/popup/Popup.tsx b/src/pages/popup/Popup.tsx index 53bccaf..17253a4 100644 --- a/src/pages/popup/Popup.tsx +++ b/src/pages/popup/Popup.tsx @@ -18,9 +18,9 @@ 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  - Archive.org + archive.org - or + , { > Waterwheel Foundation + , or the + + mockingbird foundation. +

@@ -35,7 +39,7 @@ export const Popup: FC = () => { open source. -

If you would like to contribute, please feel free!

+ Consider contributing!