fix onboarding animation

DeckThemes · Jan 9, 2025 · ea5c8f8 · ea5c8f8
1 parent 8c7ab87
commit ea5c8f8
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 12 deletions.
diff --git a/src/lib/components/modals/theme-settings-modal/ThemeSettingsModalActionButtons.tsx b/src/lib/components/modals/theme-settings-modal/ThemeSettingsModalActionButtons.tsx
@@ -48,15 +48,15 @@ export function ThemeSettingsModalActionButtons({
           onClick={handleUpdate}
           className="cl_squaredialogbutton flex gap-1"
         >
-          <FaDownload className="cl_squarebutton_icontranslate" />
+          <FaDownload className="cl_squaredialogbutton_icontranslate" />
           <span className="text-xs">Update</span>
         </DialogButton>
       )}
       <DialogButton disabled={isWorking} className="cl_squaredialogbutton" onClick={handlePinClick}>
         {isPinned ? (
-          <FaEye className="cl_squarebutton_icontranslate" />
+          <FaEye className="cl_squaredialogbutton_icontranslate" />
         ) : (
-          <FaEyeSlash className="cl_squarebutton_icontranslate" />
+          <FaEyeSlash className="cl_squaredialogbutton_icontranslate" />
         )}
       </DialogButton>
       <DialogButton
@@ -68,7 +68,7 @@ export function ThemeSettingsModalActionButtons({
           );
         }}
       >
-        <FaTrash className="cl_squarebutton_icontranslate" />
+        <FaTrash className="cl_squaredialogbutton_icontranslate" />
       </DialogButton>
     </Focusable>
   );

diff --git a/src/lib/components/title-view/TitleView.tsx b/src/lib/components/title-view/TitleView.tsx
@@ -26,7 +26,7 @@ export function TitleView() {
     >
       <div style={{ marginRight: "auto" }}>CSS Loader</div>
       <DialogButton
-        className={cn("cl-title-view-button", themes.length > 0 && "cl-animate-onboarding")}
+        className={cn("cl-title-view-button", themes.length === 0 && "cl-animate-onboarding")}
         onClick={onStoreClick}
       >
         <FaDownload className="cl-title-view-button-icon" />

diff --git a/src/modules/settings/theme/ThemeSettingsEntry.tsx b/src/modules/settings/theme/ThemeSettingsEntry.tsx
@@ -60,9 +60,9 @@ export function ThemeSettingsEntry({ theme }: { theme: Theme }) {
           }}
         >
           {isPinned ? (
-            <FaEye className="cl_squarebutton_icontranslate" />
+            <FaEye className="cl_squaredialogbutton_icontranslate" />
           ) : (
-            <FaEyeSlash className="cl_squarebutton_icontranslate" />
+            <FaEyeSlash className="cl_squaredialogbutton_icontranslate" />
           )}
         </DialogButton>
         <DialogButton
@@ -72,7 +72,7 @@ export function ThemeSettingsEntry({ theme }: { theme: Theme }) {
             showModal(<ThemeSettingsModal themeId={theme.id} />);
           }}
         >
-          <BsGearFill className="cl_squarebutton_icontranslate" />
+          <BsGearFill className="cl_squaredialogbutton_icontranslate" />
         </DialogButton>
       </Focusable>
     </div>

diff --git a/src/styles/styles-as-string.ts b/src/styles/styles-as-string.ts
@@ -179,13 +179,13 @@ MARK: TitleView
 
 @keyframes onboardingButton {
   0% {
-    transform: scale(1) !important;
+    transform: scale(1);
   }
   50% {
-    transform: scale(1.1) !important;
+    transform: scale(1.1);
   }
   100% {
-    transform: scale(1) !important;
+    transform: scale(1);
   }
 }
 
@@ -654,4 +654,8 @@ MARK: Settings Page
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+.cl_squaredialogbutton_icontranslate {
+  transform: translateY(-2px) !important;
+}
 `;
diff --git a/src/styles/styles.css b/src/styles/styles.css
@@ -652,6 +652,6 @@ MARK: Settings Page
   text-overflow: ellipsis;
 }
 
-.cl_squarebutton_icontranslate {
+.cl_squaredialogbutton_icontranslate {
   transform: translateY(-2px) !important;
 }