fix icons in square buttons

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

Hide file tree

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

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

diff --git a/src/styles/styles.css b/src/styles/styles.css
@@ -176,13 +176,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);
   }
 }
 
@@ -650,4 +650,8 @@ MARK: Settings Page
   max-width: 300px;
   overflow: hidden;
   text-overflow: ellipsis;
+}
+
+.cl_squarebutton_icontranslate {
+  transform: translateY(-2px) !important;
 }