fix mass-deletion of themes

DeckThemes · Jan 9, 2025 · caf5b9c · caf5b9c
1 parent 7775bb0
commit caf5b9c
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 13 deletions.
diff --git a/src/lib/components/modals/delete-confirmation-modal/DeleteConfirmationModal.tsx b/src/lib/components/modals/delete-confirmation-modal/DeleteConfirmationModal.tsx
@@ -3,17 +3,17 @@ import { ConfirmModal } from "../../../primitives";
 
 export function DeleteConfirmationModal({
   closeModal,
-  themesToBeDeleted,
+  themeIdsToBeDeleted,
   onDeleteFinish,
 }: {
   closeModal?: () => void;
-  themesToBeDeleted: string[];
+  themeIdsToBeDeleted: string[];
   onDeleteFinish?: () => void;
 }) {
   const deleteTheme = useCSSLoaderAction("deleteTheme");
   async function deleteThemes() {
-    for (let i = 0; i < themesToBeDeleted.length; i++) {
-      await deleteTheme(themesToBeDeleted[i], i === themesToBeDeleted.length - 1);
+    for (let i = 0; i < themeIdsToBeDeleted.length; i++) {
+      await deleteTheme(themeIdsToBeDeleted[i], i === themeIdsToBeDeleted.length - 1);
     }
     onDeleteFinish?.();
     closeModal?.();
@@ -23,7 +23,9 @@ export function DeleteConfirmationModal({
     <ConfirmModal title="Delete Themes" onConfirm={deleteThemes} closeModal={closeModal}>
       <div>
         Are you sure you want to delete{" "}
-        {themesToBeDeleted.length === 1 ? `this theme` : `these ${themesToBeDeleted.length} themes`}
+        {themeIdsToBeDeleted.length === 1
+          ? `this theme`
+          : `these ${themeIdsToBeDeleted.length} themes`}
         ?
       </div>
     </ConfirmModal>

diff --git a/src/lib/components/modals/theme-settings-modal/ThemeSettingsModal.tsx b/src/lib/components/modals/theme-settings-modal/ThemeSettingsModal.tsx
@@ -46,7 +46,7 @@ export function ThemeSettingsModal({
               ))}
             </Focusable>
           ) : null}
-          <Focusable className="flex flex-row justify-between items-center">
+          <Focusable className="flex flex-row gap-1 justify-between items-center">
             <DialogButton onClick={closeModal}>Close</DialogButton>
             <ThemeSettingsModalActionButtons theme={theme} closeModal={closeModal} />
           </Focusable>

diff --git a/src/lib/components/modals/theme-settings-modal/ThemeSettingsModalActionButtons.tsx b/src/lib/components/modals/theme-settings-modal/ThemeSettingsModalActionButtons.tsx
@@ -60,7 +60,7 @@ export function ThemeSettingsModalActionButtons({
         className="cl_squaredialogbutton"
         onClick={() => {
           showModal(
-            <DeleteConfirmationModal themesToBeDeleted={[theme.id]} onDeleteFinish={closeModal} />
+            <DeleteConfirmationModal themeIdsToBeDeleted={[theme.id]} onDeleteFinish={closeModal} />
           );
         }}
       >

diff --git a/src/modules/settings/profile/ProfileSettings.tsx b/src/modules/settings/profile/ProfileSettings.tsx
@@ -12,7 +12,7 @@ export function ProfileSettings() {
   return (
     <Focusable>
       <PresetSelectionDropdown />
-      <Focusable className="flex flex-col gap-2">
+      <Focusable className="flex flex-col gap-2 mt-4">
         {profiles.map((profile) => (
           <ProfileEntry key={profile.id} data={profile} />
         ))}
@@ -35,7 +35,7 @@ function ProfileEntry({ data }: { data: Theme }) {
 
   return (
     <PanelSectionRow>
-      <div className="grid grid-cols-[1fr,2fr] items-center p-0 mt-4">
+      <div className="grid grid-cols-[1fr,2fr] items-center p-0">
         <span>{data.name}</span>
         <div>
           {isOutdated && (

diff --git a/src/modules/settings/theme/ThemeDeleteMenu.tsx b/src/modules/settings/theme/ThemeDeleteMenu.tsx
@@ -18,19 +18,19 @@ export function ThemeDeleteMenu({
         <DialogCheckbox
           onChange={(checked) => {
             if (checked) {
-              setChoppingBlock([...choppingBlock, theme.name]);
+              setChoppingBlock([...choppingBlock, theme.id]);
             } else {
-              setChoppingBlock(choppingBlock.filter((f) => f !== theme.name));
+              setChoppingBlock(choppingBlock.filter((f) => f !== theme.id));
             }
           }}
-          checked={choppingBlock.includes(theme.name)}
+          checked={choppingBlock.includes(theme.id)}
           label={theme.display_name}
         />
       ))}
       <DialogButton
         onClick={() => {
           showModal(
-            <DeleteConfirmationModal themesToBeDeleted={choppingBlock} onDeleteFinish={onLeave} />
+            <DeleteConfirmationModal themeIdsToBeDeleted={choppingBlock} onDeleteFinish={onLeave} />
           );
         }}
       >