change goofy arrow to animation on download button

DeckThemes · Nov 9, 2023 · 79daa4b · 79daa4b
1 parent 550b34d
commit 79daa4b
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 10 deletions.
diff --git a/src/components/QAMTab/QAMThemeToggleList.tsx b/src/components/QAMTab/QAMThemeToggleList.tsx
@@ -11,13 +11,6 @@ export function QAMThemeToggleList() {
   if (localThemeList.length === 0) {
     return (
       <>
-        <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,9 +1,11 @@
 import { DialogButton, Navigation, staticClasses, Focusable } from "decky-frontend-lib";
 import { BsGearFill } from "react-icons/bs";
-import { BiDownload } from "react-icons/bi";
 import { FaDownload } from "react-icons/fa";
+import { useCssLoaderState } from "../state";
 
 export function TitleView({ onDocsClick }: { onDocsClick?: () => {} }) {
+  const { localThemeList } = useCssLoaderState();
+
   const onSettingsClick = () => {
     Navigation.CloseSideMenus();
     Navigation.Navigate("/cssloader/settings");
@@ -26,9 +28,30 @@ export function TitleView({ onDocsClick }: { onDocsClick?: () => {} }) {
       }}
       className={staticClasses.Title}
     >
+      <style>
+        {`
+        @keyframes onboarding {
+          0% {
+            transform: scale(1);
+          }
+          50% {
+            transform: scale(1.1);
+          }
+          100% {
+            transform: scale(1);
+          }
+        }
+        `}
+      </style>
       <div style={{ marginRight: "auto" }}>CSS Loader</div>
       <DialogButton
-        style={{ height: "28px", width: "40px", minWidth: 0, padding: "10px 12px" }}
+        style={{
+          height: "28px",
+          width: "40px",
+          minWidth: 0,
+          padding: "10px 12px",
+          animation: localThemeList.length === 0 ? "onboarding 1s infinite ease-in-out" : "",
+        }}
         onClick={onStoreClick}
       >
         <FaDownload style={{ marginTop: "-4px", display: "block" }} />

diff --git a/src/index.tsx b/src/index.tsx
@@ -179,7 +179,11 @@ export default definePlugin((serverApi: ServerAPI) => {
   ));
 
   return {
-    titleView: <TitleView />,
+    titleView: (
+      <CssLoaderContextProvider cssLoaderStateClass={state}>
+        <TitleView />
+      </CssLoaderContextProvider>
+    ),
     title: <div>CSSLoader</div>,
     alwaysRender: true,
     content: (