fix(backups): use UiServersTeleportOverflowMenu

modrinth · Oct 31, 2024 · 04255c0 · 04255c0
1 parent 84ce69b
commit 04255c0
Showing 1 changed file with 36 additions and 34 deletions.
diff --git a/apps/frontend/src/pages/servers/manage/[id]/backups.vue b/apps/frontend/src/pages/servers/manage/[id]/backups.vue
@@ -184,43 +184,45 @@
                   {{ new Date(backup.created_at).toLocaleString() }}
                 </div>
               </div>
-              <OverflowMenu
-                :options="[
-                  {
-                    id: 'rename',
-                    action: () => {
-                      renameBackupName = backup.name;
-                      currentBackup = backup.id;
-                      renameBackupModal?.show();
+              <ButtonStyled type="transparent">
+                <UiServersTeleportOverflowMenu
+                  direction="left"
+                  position="bottom"
+                  class="bg-transparent"
+                  :options="[
+                    {
+                      id: 'rename',
+                      action: () => {
+                        renameBackupName = backup.name;
+                        currentBackup = backup.id;
+                        renameBackupModal?.show();
+                      },
                     },
-                  },
-                  {
-                    id: 'restore',
-                    action: () => {
-                      currentBackup = backup.id;
-                      restoreBackupModal?.show();
+                    {
+                      id: 'restore',
+                      action: () => {
+                        currentBackup = backup.id;
+                        restoreBackupModal?.show();
+                      },
                     },
-                  },
-                  { id: 'download', action: () => initiateDownload(backup.id) },
-                  {
-                    id: 'delete',
-                    action: () => {
-                      currentBackup = backup.id;
-                      deleteBackupModal?.show();
+                    { id: 'download', action: () => initiateDownload(backup.id) },
+                    {
+                      id: 'delete',
+                      action: () => {
+                        currentBackup = backup.id;
+                        deleteBackupModal?.show();
+                      },
+                      color: 'red',
                     },
-                    color: 'red',
-                  },
-                ]"
-                direction="right"
-                class="bg-transparent"
-              >
-                <MoreHorizontalIcon class="h-5 w-5 bg-transparent text-contrast" />
-
-                <template #rename> <EditIcon /> Rename </template>
-                <template #restore> <ClipboardCopyIcon /> Restore </template>
-                <template #download> <DownloadIcon /> Download </template>
-                <template #delete> <TrashIcon /> Delete </template>
-              </OverflowMenu>
+                  ]"
+                >
+                  <MoreHorizontalIcon class="h-5 w-5 bg-transparent" />
+                  <template #rename> <EditIcon /> Rename </template>
+                  <template #restore> <ClipboardCopyIcon /> Restore </template>
+                  <template #download> <DownloadIcon /> Download </template>
+                  <template #delete> <TrashIcon /> Delete </template>
+                </UiServersTeleportOverflowMenu>
+              </ButtonStyled>
             </div>
           </div>
         </li>