change the download button and onboarding screen

DeckThemes · Nov 3, 2023 · 6c6c3c9 · 6c6c3c9
1 parent cbfbe93
commit 6c6c3c9
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/src/components/QAMTab/QAMThemeToggleList.tsx b/src/components/QAMTab/QAMThemeToggleList.tsx
@@ -3,14 +3,22 @@ import { useCssLoaderState } from "../../state";
 import { ThemeToggle } from "../ThemeToggle";
 import { Flags } from "../../ThemeTypes";
 import { ThemeErrorCard } from "../ThemeErrorCard";
+import { BsArrowDown } from "react-icons/bs";
 
 export function QAMThemeToggleList() {
   const { localThemeList, unpinnedThemes } = useCssLoaderState();
 
   if (localThemeList.length === 0) {
     return (
       <>
-        <span>You have no themes currently, click on "Download Themes" to download some!</span>
+        <BsArrowDown
+          style={{
+            position: "absolute",
+            right: "4.85em",
+            transform: "rotate(180deg) scale(2) translateY(13px)",
+          }}
+        />
+        <span>You have no themes currently, get started by clicking the download icon above!</span>
       </>
     );
   }

diff --git a/src/components/TitleView.tsx b/src/components/TitleView.tsx
@@ -1,6 +1,7 @@
 import { DialogButton, Navigation, staticClasses, Focusable } from "decky-frontend-lib";
 import { BsGearFill } from "react-icons/bs";
-import { FaInfo, FaStore } from "react-icons/fa";
+import { BiDownload } from "react-icons/bi";
+import { FaDownload } from "react-icons/fa";
 
 export function TitleView({ onDocsClick }: { onDocsClick?: () => {} }) {
   const onSettingsClick = () => {
@@ -30,7 +31,7 @@ export function TitleView({ onDocsClick }: { onDocsClick?: () => {} }) {
         style={{ height: "28px", width: "40px", minWidth: 0, padding: "10px 12px" }}
         onClick={onStoreClick}
       >
-        <FaStore style={{ marginTop: "-4px", display: "block" }} />
+        <FaDownload style={{ marginTop: "-4px", display: "block" }} />
       </DialogButton>
       <DialogButton
         style={{ height: "28px", width: "40px", minWidth: 0, padding: "10px 12px" }}

diff --git a/src/index.tsx b/src/index.tsx
@@ -85,7 +85,7 @@ function Content() {
               }
             `}
           </style>
-          <PresetSelectionDropdown />
+          {localThemeList.length > 0 && <PresetSelectionDropdown />}
           <QAMThemeToggleList />
         </>
       ) : (