From 78f825eda8e862cd81d60aecf59ebd8a3f773590 Mon Sep 17 00:00:00 2001
From: Travis Lane <63308171+Tormak9970@users.noreply.github.com>
Date: Fri, 13 Sep 2024 11:46:53 -0400
Subject: [PATCH] feat: added fade-in for modals

---
 src/components/modals/DialogModal.svelte      |  28 +-
 src/components/modals/GridPreviewModal.svelte |  50 +---
 .../modals/LogoPositionModal.svelte           |   9 +-
 src/components/modals/Modals.svelte           |  68 +++++
 src/components/modals/SteamPathModal.svelte   |  17 +-
 src/components/modals/UpdateTilesModal.svelte |  15 +-
 .../modals/batch-apply/BatchApplyModal.svelte |  15 +-
 .../BatchApplyProgressModal.svelte            |  32 +-
 .../clean-grids/CleanConflictDialog.svelte    |  38 ++-
 .../modals/clean-grids/CleanGridsModal.svelte |  17 +-
 .../current-grids/CurrentGridsModal.svelte    |   3 +-
 .../modals/game-search/GameSearchModal.svelte |  22 +-
 .../modals/info-modal/InfoModal.svelte        |   8 +-
 .../modals/info-modal/InfoModalSection.svelte |   3 +-
 .../manual-games/ManualGamesModal.svelte      |   8 +-
 .../manual-games/add-methods/Search.svelte    |   4 +-
 .../modals/modal-utils/ModalBody.svelte       | 275 ++++++++++++++----
 .../modals/modal-utils/OldModalBody.svelte    | 114 ++++++++
 .../modal-utils/game-filter/GameFilter.svelte |   3 +-
 .../modals/settings/FilePathEntry.svelte      |   3 +-
 .../modals/settings/SettingsModal.svelte      | 113 ++++---
 .../modals/settings/TextFieldEntry.svelte     |   4 +-
 .../modals/settings/ToggleFieldEntry.svelte   |   3 +-
 .../modals/updates/UpdateModal.svelte         |  26 +-
 src/lib/controllers/AppController.ts          |   3 +-
 src/windows/main/Main.svelte                  |  69 +----
 26 files changed, 600 insertions(+), 350 deletions(-)
 create mode 100644 src/components/modals/Modals.svelte
 create mode 100644 src/components/modals/modal-utils/OldModalBody.svelte

diff --git a/src/components/modals/DialogModal.svelte b/src/components/modals/DialogModal.svelte
index 2580a3fa..8fc9a785 100644
--- a/src/components/modals/DialogModal.svelte
+++ b/src/components/modals/DialogModal.svelte
@@ -3,6 +3,8 @@
   import { dialogModalCancel, dialogModalCancelText, dialogModalConfirm, dialogModalConfirmText, dialogModalMessage, dialogModalTitle, dialogModalType, showDialogModal } from "../../stores/Modals";
   import ModalBody from "./modal-utils/ModalBody.svelte";
 
+  let open = true;
+
   /**
    * Function to run on confirmation.
    */
@@ -20,7 +22,7 @@
   }
 </script>
 
-<ModalBody title={$dialogModalTitle} canClose={false}>
+<ModalBody title={$dialogModalTitle} open={open} on:close={() => open = false} canClose={false}>
   <div class="content">
     <div class="info">
       <div class="type-cont">
@@ -43,15 +45,15 @@
       </div>
       <div class="message">{$dialogModalMessage}</div>
     </div>
-    <div class="buttons">
-      {#if $dialogModalConfirmText !== ""}
-        <Button label={$dialogModalConfirmText} onClick={onConfirm} width={$dialogModalCancelText !== "" ? "47.5%" : "100%"} />
-      {/if}
-      {#if $dialogModalCancelText !== ""}
-        <Button label={$dialogModalCancelText} onClick={onCancel} width={$dialogModalConfirmText !== "" ? "47.5%" : "100%"} />
-      {/if}
-    </div>
   </div>
+  <span slot="buttons" class="buttons">
+    {#if $dialogModalConfirmText !== ""}
+      <Button label={$dialogModalConfirmText} onClick={onConfirm} width={$dialogModalCancelText !== "" ? "47.5%" : "100%"} />
+    {/if}
+    {#if $dialogModalCancelText !== ""}
+      <Button label={$dialogModalCancelText} onClick={onCancel} width={$dialogModalConfirmText !== "" ? "47.5%" : "100%"} />
+    {/if}
+  </span>
 </ModalBody>
 
 <style>
@@ -73,13 +75,9 @@
   }
 
   .buttons {
-    margin-top: 14px;
-    margin-bottom: 7px;
-    margin-left: 7px;
-    margin-right: 7px;
-    width: calc(100% - 14px);
+    width: 100%;
     display: flex;
-    justify-content: space-around;
+    justify-content: space-between;
     justify-self: flex-end;
   }
 </style>
diff --git a/src/components/modals/GridPreviewModal.svelte b/src/components/modals/GridPreviewModal.svelte
index feecfb90..41b31bf7 100644
--- a/src/components/modals/GridPreviewModal.svelte
+++ b/src/components/modals/GridPreviewModal.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { open } from "@tauri-apps/plugin-shell";
   import MarkDownIt from "markdown-it";
 
   import { AppController } from "@controllers";
@@ -11,7 +10,7 @@
   import Lazy from "svelte-lazy";
   import ModalBody from "./modal-utils/ModalBody.svelte";
 
-
+  let modalOpen = true;
   $: definedModalInfo = $gridModalInfo!;
 
   /**
@@ -51,17 +50,21 @@
   }
 </script>
 
-<ModalBody title={`${games.find((game) => game.appid.toString() === $selectedGameAppId)?.name} - ${$gridType} #${$gridModalInfo?.id}`} onClose={onClose}>
+<ModalBody title={`${games.find((game) => game.appid.toString() === $selectedGameAppId)?.name} #${$gridModalInfo?.id}`} open={modalOpen} on:close={() => modalOpen = false} on:closeEnd={onClose}>
   <div class="content {$gridType.split(" ").join("-").toLowerCase()}">
     <div class="img-cont" style="max-width: {PREVIEW_GRID_DIMENSIONS.widths[$gridType]}px; max-height: {PREVIEW_GRID_DIMENSIONS.heights[$gridType]}px; width: {definedModalInfo.width}px; height: {definedModalInfo.height}px;">
       <div class="img" class:logo-background={$gridType === GridTypes.LOGO} class:icon-background={$gridType === GridTypes.ICON} style="max-height: {PREVIEW_GRID_DIMENSIONS.heights[$gridType]}px;">
         <Lazy height="{PREVIEW_GRID_DIMENSIONS.heights[$gridType]}px" fadeOption={{ delay: 500, duration: 1000 }}>
-          <img src="{$gridType === GridTypes.ICON ? $gridModalInfo?.thumb?.toString() : $gridModalInfo?.url?.toString()}" alt="{$gridModalInfo?.author?.name}'s {$gridType} image" style="max-width: {PREVIEW_GRID_DIMENSIONS.widths[$gridType]}px; max-height: {PREVIEW_GRID_DIMENSIONS.heights[$gridType]}px; width: auto; height: auto;" />
+          <img
+            src="{$gridType === GridTypes.ICON ? $gridModalInfo?.thumb?.toString() : $gridModalInfo?.url?.toString()}"
+            alt="{$gridModalInfo?.author?.name}'s {$gridType} image"
+            style="max-width: {PREVIEW_GRID_DIMENSIONS.widths[$gridType]}px; max-height: {PREVIEW_GRID_DIMENSIONS.heights[$gridType]}px; width: auto; height: auto;"
+          />
         </Lazy>
       </div>
     </div>
     <div class="info">
-      <div class="info-cont">
+      <div>
         <div class="author">
           <div class="pfp">
             <img src="{$gridModalInfo?.author?.avatar?.toString()}" alt="{$gridModalInfo?.author?.name}'s profile picture" />
@@ -98,11 +101,9 @@
     flex-direction: row;
     height: calc(100% - 38px);
   }
-  .capsule .info {
-    margin-top: 10px;
-    margin-bottom: 10px;
-    margin-left: 4px;
-    margin-right: 10px;
+  .capsule .info, .icon .info {
+    margin: 10px;
+    margin-right: 0px;
     min-width: 200px;
     min-height: calc(100% - 20px);
 
@@ -110,17 +111,10 @@
     flex-direction: column;
     justify-content: space-between;
   }
-  .capsule .info > .info-cont {
-    min-width: 200px;
-
-    display: flex;
-    flex-direction: column;
-  }
 
   .wide-capsule .info, .hero .info, .logo .info {
     margin-bottom: 10px;
-    margin-left: 14px;
-    margin-right: 10px;
+    margin-top: 10px;
     min-width: 200px;
     min-height: calc(100% - 20px);
 
@@ -135,27 +129,15 @@
     height: calc(100% - 38px);
     max-width: 550px;
   }
-  .icon .info {
-    margin-top: 10px;
-    margin-bottom: 10px;
-    margin-left: 4px;
-    margin-right: 10px;
-    min-width: 200px;
-    min-height: calc(100% - 20px);
-
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-  }
-  .icon .info > .info-cont {
-    min-width: 200px;
 
+  .img-cont {
+    margin-top: 10px;
     display: flex;
     flex-direction: column;
+    justify-content: center;
+    align-items: center;
   }
 
-  .img-cont { padding: 10px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
-
   .img-cont > .img {
     border-radius: 2px;
     overflow: hidden;
diff --git a/src/components/modals/LogoPositionModal.svelte b/src/components/modals/LogoPositionModal.svelte
index 01363425..8f0f315d 100644
--- a/src/components/modals/LogoPositionModal.svelte
+++ b/src/components/modals/LogoPositionModal.svelte
@@ -54,6 +54,7 @@
   let heroPath = "";
   let logoPath = "";
 
+  let open = true;
   let canSave = false;
   
   const gameLogoPos = $steamLogoPositions[$selectedGameAppId];
@@ -166,7 +167,7 @@
   });
 </script>
 
-<ModalBody title={`Set Logo Position for ${game?.name}`} onClose={onClose}>
+<ModalBody title={`Set Logo Position for ${game?.name}`} open={open} on:close={() => open = false} on:closeEnd={onClose}>
   <div class="content">
     <div class="view">
       <div class="hero-cont">
@@ -203,8 +204,6 @@
 <style>
   .content {
     margin-bottom: 10px;
-    margin-left: 10px;
-    margin-right: 10px;
     min-width: 200px;
     min-height: calc(100% - 20px);
 
@@ -214,9 +213,9 @@
   }
 
   .view {
-    width: calc(100% - 20px);
+    width: 100%;
     position: relative;
-    margin: 10px;
+    margin: 10px 0px;
   }
 
   .logo-cont {
diff --git a/src/components/modals/Modals.svelte b/src/components/modals/Modals.svelte
new file mode 100644
index 00000000..39704902
--- /dev/null
+++ b/src/components/modals/Modals.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+  import { showBatchApplyModal, showBatchApplyProgress, showCleanConflictDialog, showCleanGridsModal, showCurrentGridsModal, showDialogModal, showGameSearchModal, showGridModal, showInfoModal, showLogoPositionModal, showManualGamesModal, showSettingsModal, showSteamPathModal, showUpdateModal, showUpdateTilesModal } from "@stores/Modals";
+  import BatchApplyModal from "./batch-apply/BatchApplyModal.svelte";
+  import BatchApplyProgressModal from "./batch-apply/BatchApplyProgressModal.svelte";
+  import CleanConflictDialog from "./clean-grids/CleanConflictDialog.svelte";
+  import CleanGridsModal from "./clean-grids/CleanGridsModal.svelte";
+  import CurrentGridsModal from "./current-grids/CurrentGridsModal.svelte";
+  import DialogModal from "./DialogModal.svelte";
+  import GameSearchModal from "./game-search/GameSearchModal.svelte";
+  import GridPreviewModal from "./GridPreviewModal.svelte";
+  import InfoModal from "./info-modal/InfoModal.svelte";
+  import LogoPositionModal from "./LogoPositionModal.svelte";
+  import ManualGamesModal from "./manual-games/ManualGamesModal.svelte";
+  import SettingsModal from "./settings/SettingsModal.svelte";
+  import SteamPathModal from "./SteamPathModal.svelte";
+  import UpdateModal from "./updates/UpdateModal.svelte";
+  import UpdateTilesModal from "./UpdateTilesModal.svelte";
+
+</script>
+
+
+{#if $showUpdateModal}
+  <UpdateModal />
+{/if}
+{#if !$showUpdateModal}
+  {#if $showDialogModal}
+    <DialogModal />
+  {/if}
+  {#if $showSteamPathModal}
+    <SteamPathModal />
+  {/if}
+  {#if $showGameSearchModal}
+    <GameSearchModal />
+  {/if}
+  {#if $showGridModal}
+    <GridPreviewModal />
+  {/if}
+  {#if $showBatchApplyProgress}
+    <BatchApplyProgressModal />
+  {/if}
+  {#if $showBatchApplyModal}
+    <BatchApplyModal />
+  {/if}
+  {#if $showLogoPositionModal}
+    <LogoPositionModal />
+  {/if}
+  {#if $showManualGamesModal}
+    <ManualGamesModal />
+  {/if}
+  {#if $showCleanGridsModal}
+    <CleanGridsModal />
+  {/if}
+  {#if $showSettingsModal}
+    <SettingsModal />
+  {/if}
+  {#if $showCleanConflictDialog}
+    <CleanConflictDialog />
+  {/if}
+  {#if $showInfoModal}
+    <InfoModal />
+  {/if}
+  {#if $showCurrentGridsModal}
+    <CurrentGridsModal />
+  {/if}
+  {#if $showUpdateTilesModal}
+    <UpdateTilesModal />
+  {/if}
+{/if}
\ No newline at end of file
diff --git a/src/components/modals/SteamPathModal.svelte b/src/components/modals/SteamPathModal.svelte
index 3e50c82c..2418dc0f 100644
--- a/src/components/modals/SteamPathModal.svelte
+++ b/src/components/modals/SteamPathModal.svelte
@@ -7,6 +7,7 @@
   import ModalBody from "./modal-utils/ModalBody.svelte";
   import FilePathEntry from "./settings/FilePathEntry.svelte";
 
+  let open = true;
   let canSave = false;
 
   let steamInstallLocation = $steamInstallPath;
@@ -43,7 +44,7 @@
   }
 </script>
 
-<ModalBody title={"Choose Your Steam Install Path"} canClose={false}>
+<ModalBody title={"Choose Your Steam Install Path"} open={open} on:close={() => open = false} canClose={false}>
   <div class="content">
     <FilePathEntry
       label="Steam Install Path"
@@ -55,11 +56,11 @@
       validator={validateSteamPath}
       required
     />
-
-    <div class="buttons">
-      <Button label="Save Changes" onClick={saveInstallLocation} width="100%" disabled={!canSave} />
-    </div>
   </div>
+
+  <span slot="buttons" class="buttons">
+    <Button label="Save Changes" onClick={saveInstallLocation} width="100%" disabled={!canSave} />
+  </span>
 </ModalBody>
 
 <style>
@@ -72,14 +73,10 @@
 		flex-direction: column;
 		justify-content: flex-start;
 		align-items: center;
-
-    margin: 0px 7px;
 	}
 
   .buttons {
-    margin-top: 14px;
-    margin-bottom: 7px;
-    width: calc(100% - 14px);
+    width: 100%;
     display: flex;
     justify-content: space-around;
     justify-self: flex-end;
diff --git a/src/components/modals/UpdateTilesModal.svelte b/src/components/modals/UpdateTilesModal.svelte
index 9a0fc64c..1f5f78db 100644
--- a/src/components/modals/UpdateTilesModal.svelte
+++ b/src/components/modals/UpdateTilesModal.svelte
@@ -8,6 +8,7 @@
   import ModalBody from "./modal-utils/ModalBody.svelte";
   import GameFilter from "./modal-utils/game-filter/GameFilter.svelte";
 
+  let open = true;
   let appsWithTilesIds: string[];
   let appsWithTiles: Record<string, string>;
   
@@ -62,7 +63,7 @@
   });
 </script>
 
-<ModalBody title={"Update Start Menu Tiles"} onClose={onClose}>
+<ModalBody title={"Update Start Menu Tiles"} open={open} on:close={() => open = false} on:closeEnd={onClose}>
   <div class="content">
     <div class="description">
       Here you can batch update the game icons shown in your Operating System's start menu to match your custom icons shown in steam.
@@ -78,11 +79,11 @@
     <div class="view">
       <GameFilter steamGames={filteredSteamGames} bind:selectedGameIds={selectedGameIds} showPlatforms={false} showFilters={false} noGamesMessage={"No games with tiles/new icons were found."}/>
     </div>
-    <div class="buttons">
-      <Button label="Update" onClick={updateGameTiles} width="47.5%" disabled={selectedGameIds.length === 0} />
-      <Button label="Cancel" onClick={onClose} width="47.5%" />
-    </div>
   </div>
+  <span slot="buttons" class="buttons">
+    <Button label="Update" onClick={updateGameTiles} width="47.5%" disabled={selectedGameIds.length === 0} />
+    <Button label="Cancel" onClick={onClose} width="47.5%" />
+  </span>
 </ModalBody>
 
 <style>
@@ -99,7 +100,7 @@
 	}
 
   .description {
-    width: calc(100% - 14px);
+    width: 100%;
     font-size: 14px;
     margin-top: 7px;
   }
@@ -119,8 +120,6 @@
   }
 
   .buttons {
-    margin-top: 14px;
-    margin-bottom: 7px;
     width: 100%;
     display: flex;
     justify-content: space-around;
diff --git a/src/components/modals/batch-apply/BatchApplyModal.svelte b/src/components/modals/batch-apply/BatchApplyModal.svelte
index e2fe48e1..e47dd704 100644
--- a/src/components/modals/batch-apply/BatchApplyModal.svelte
+++ b/src/components/modals/batch-apply/BatchApplyModal.svelte
@@ -9,6 +9,7 @@
 
   $: allSteamGames = [ ...$steamGames, ...$manualSteamGames ];
 
+  let open = true;
   let selectedGameIds: string[] = [];
 
   /**
@@ -36,30 +37,26 @@
   }
 </script>
 
-<ModalBody title={`Batch Apply ${$gridType !== GridTypes.HERO ? $gridType : `${$gridType}e`}s`} onClose={onClose}>
+<ModalBody title={`Batch Apply ${$gridType !== GridTypes.HERO ? $gridType : `${$gridType}e`}s`} open={open} on:close={() => open = false} on:closeEnd={onClose}>
   <div class="content">
     <div class="info">
       Choose the games you would like to batch apply grids to.
     </div>
     <GameFilter steamGames={allSteamGames} nonSteamGames={$nonSteamGames} bind:selectedGameIds={selectedGameIds} />
-    <div class="buttons">
-      <Button label="Apply" onClick={batchApply} width="47.5%" />
-      <Button label="Cancel" onClick={cancel} width="47.5%" />
-    </div>
   </div>
+  <span slot="buttons" class="buttons">
+    <Button label="Apply" onClick={batchApply} width="47.5%" />
+    <Button label="Cancel" onClick={cancel} width="47.5%" />
+  </span>
 </ModalBody>
 
 <style>
   .info {
     margin-top: 7px;
-    margin-left: 7px;
-    margin-right: 7px;
     font-size: 14px;
   }
 
   .buttons {
-    margin-top: 14px;
-    margin-bottom: 7px;
     width: 100%;
     display: flex;
     justify-content: space-around;
diff --git a/src/components/modals/batch-apply/BatchApplyProgressModal.svelte b/src/components/modals/batch-apply/BatchApplyProgressModal.svelte
index 8f35a831..26443f5a 100644
--- a/src/components/modals/batch-apply/BatchApplyProgressModal.svelte
+++ b/src/components/modals/batch-apply/BatchApplyProgressModal.svelte
@@ -4,6 +4,8 @@
   import { batchApplyMessage, batchApplyProgress, batchApplyWasCancelled, showBatchApplyProgress } from "@stores/Modals";
   import ModalBody from "../modal-utils/ModalBody.svelte";
 
+  let open = true;
+
   /**
    * The function to run when the modal closes.
    */
@@ -36,42 +38,38 @@
   }
 </script>
 
-<ModalBody title={"Batch Apply Progress"} onClose={onClose}>
+<ModalBody title={"Batch Apply Progress"} open={open} on:close={() => open = false} on:closeEnd={onClose}>
   <div class="content">
     <div class="options">
       <ProgressBar bind:progress={$batchApplyProgress} width="100%" onFinish={onFinish} />
     </div>
     <div class="info">{$batchApplyMessage}</div>
-    <div class="buttons">
-      {#if $batchApplyProgress === 100}
-        <Button label="Close" onClick={closeAfterComplete} width="100%" />
-      {:else}
-        <Button label="Cancel" onClick={cancel} width="100%" />
-      {/if}
-    </div>
   </div>
+  <span slot="buttons" class="buttons">
+    {#if $batchApplyProgress === 100}
+      <Button label="Close" onClick={closeAfterComplete} width="100%" />
+    {:else}
+      <Button label="Cancel" onClick={cancel} width="100%" />
+    {/if}
+  </span>
 </ModalBody>
 
 <style>
+  .content {
+    min-width: 18rem;
+  }
   .info {
     margin-top: 7px;
-    margin-left: 7px;
     font-size: 12px;
   }
 
   .options {
     margin-top: 7px;
-    margin-left: 7px;
-    margin-right: 7px;
-    width: calc(100% - 14px);
+    width: 100%;
   }
 
   .buttons {
-    margin-top: 14px;
-    margin-bottom: 7px;
-    margin-left: 7px;
-    margin-right: 7px;
-    width: calc(100% - 14px);
+    width: 100%;
     display: flex;
     justify-content: space-around;
     justify-self: flex-end;
diff --git a/src/components/modals/clean-grids/CleanConflictDialog.svelte b/src/components/modals/clean-grids/CleanConflictDialog.svelte
index d49982ce..0226aa7f 100644
--- a/src/components/modals/clean-grids/CleanConflictDialog.svelte
+++ b/src/components/modals/clean-grids/CleanConflictDialog.svelte
@@ -11,6 +11,7 @@
   import { CLEAN_CONFLICT_GRID_DIMENSIONS, IMAGE_FADE_OPTIONS } from "@utils";
   import Lazy from "svelte-lazy";
 
+  let open = true;
   let conflictNumber: number = 1;
   let conflict: CleanConflict | null;
   $: conflictGridType = conflict ? conflict.gridType : "";
@@ -68,7 +69,7 @@
   });
 </script>
 
-<ModalBody title={`Clean Conflict Dialog #${conflictNumber}`} canClose={false}>
+<ModalBody title={`Conflict #${conflictNumber}`} open={open} on:close={() => open = false} canClose={false}>
   <div class="content">
     <div class="description">
       Choose which grid you would like to keep.
@@ -76,7 +77,7 @@
     <div class="images {conflictGridType}">
       <div class="split">
         <div class="img-cont">
-          <div class="img" class:logo-background={conflictGridType === "logo"} class:icon-background={conflictGridType === "icon"} style="max-height: {CLEAN_CONFLICT_GRID_DIMENSIONS.heights[conflictGridType]}px;">
+          <div class="img" class:logo-background={conflictGridType === "logo"} style="max-height: {CLEAN_CONFLICT_GRID_DIMENSIONS.heights[conflictGridType]}px;">
             <Lazy height="{CLEAN_CONFLICT_GRID_DIMENSIONS.heights[conflictGridType]}px" fadeOption={IMAGE_FADE_OPTIONS}>
               <img src="{fileAPath}" alt="Option 1" style="max-width: {CLEAN_CONFLICT_GRID_DIMENSIONS.widths[conflictGridType]}px; max-height: {CLEAN_CONFLICT_GRID_DIMENSIONS.heights[conflictGridType]}px; width: auto; height: auto;" />
             </Lazy>
@@ -86,7 +87,7 @@
       </div>
       <div class="split">
         <div class="img-cont">
-          <div class="img" class:logo-background={conflictGridType === "logo"} class:icon-background={conflictGridType === "icon"} style="max-height: {CLEAN_CONFLICT_GRID_DIMENSIONS.heights[conflictGridType]}px;">
+          <div class="img" class:logo-background={conflictGridType === "logo"} style="max-height: {CLEAN_CONFLICT_GRID_DIMENSIONS.heights[conflictGridType]}px;">
             <Lazy height="{CLEAN_CONFLICT_GRID_DIMENSIONS.heights[conflictGridType]}px" fadeOption={IMAGE_FADE_OPTIONS}>
               <img src="{fileBPath}" alt="Option 2" style="max-width: {CLEAN_CONFLICT_GRID_DIMENSIONS.widths[conflictGridType]}px; max-height: {CLEAN_CONFLICT_GRID_DIMENSIONS.heights[conflictGridType]}px; width: auto; height: auto;" />
             </Lazy>
@@ -95,12 +96,12 @@
         <div class="filename">{conflict?.fileBName}</div>
       </div>
     </div>
-    <div class="buttons">
-      <Button label={`Keep ${conflictGridType === "hero" ? "Top" : "Left"}`} onClick={() => { deleteGrid(true); }} width="30%" />
-      <Button label={`Keep ${conflictGridType === "hero" ? "Bottom" : "Right"}`} onClick={() => { deleteGrid(false); }} width="30%" />
-      <Button label="Keep Both" onClick={keepBoth} width="30%" />
-    </div>
   </div>
+  <span slot="buttons" class="buttons">
+    <Button label={`Keep ${conflictGridType === "hero" ? "Top" : "Left"}`} onClick={() => { deleteGrid(true); }} width="30%" />
+    <Button label={`Keep ${conflictGridType === "hero" ? "Bottom" : "Right"}`} onClick={() => { deleteGrid(false); }} width="30%" />
+    <Button label="Keep Both" onClick={keepBoth} width="30%" />
+  </span>
 </ModalBody>
 
 <style>
@@ -115,9 +116,8 @@
 		align-items: center;
 	}
 
-  /* done */
   .description {
-    width: calc(100% - 14px);
+    width: 100%;
     font-size: 14px;
     margin-top: 7px;
     margin-bottom: 7px;
@@ -130,6 +130,8 @@
 
     flex-direction: row;
     justify-content: space-around;
+
+    gap: 10px;
   }
 
   .images.hero {
@@ -141,6 +143,8 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+
+    gap: 10px;
   }
 
   .images.hero .split {
@@ -162,9 +166,6 @@
     max-width: 550px;
   }
 
-  /* done */
-  .img-cont { padding: 10px; }
-
   .img-cont > .img {
     border-radius: 2px;
     overflow: hidden;
@@ -174,6 +175,17 @@
     justify-content: center;
   }
 
+  
+  .logo-background {
+    border-radius: 8px;
+    background-color: #a3a3a3;
+    background-image: linear-gradient(140deg, #adadad 0%, #727272 50%, #535353 75%);
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
   /* done */
   .buttons {
     margin-top: 14px;
diff --git a/src/components/modals/clean-grids/CleanGridsModal.svelte b/src/components/modals/clean-grids/CleanGridsModal.svelte
index 68494946..0c00128b 100644
--- a/src/components/modals/clean-grids/CleanGridsModal.svelte
+++ b/src/components/modals/clean-grids/CleanGridsModal.svelte
@@ -8,6 +8,7 @@
 
   $: allSteamGames = [ ...$steamGames, ...$manualSteamGames ];
 
+  let open = true;
   let presets = [
     { label: "Clean", data: "clean" },
     { label: "Custom", data: "custom" },
@@ -38,7 +39,7 @@
   }
 </script>
 
-<ModalBody title={"Clean Grids"} onClose={onClose}>
+<ModalBody title={"Clean Grids"} open={open} on:close={() => open = false} on:closeEnd={onClose}>
   <div class="content">
     <div class="description">
       Here you can tidy up your custom artwork.<br/>
@@ -55,11 +56,11 @@
         <GameFilter steamGames={allSteamGames} nonSteamGames={$nonSteamGames} bind:selectedGameIds={selectedGameIds} showFilters={false}/>
       {/if}
     </div>
-    <div class="buttons">
-      <Button label="Clean" onClick={cleanGrids} width="47.5%" />
-      <Button label="Cancel" onClick={cancel} width="47.5%" />
-    </div>
   </div>
+  <span slot="buttons" class="buttons">
+    <Button label="Clean" onClick={cleanGrids} width="47.5%" />
+    <Button label="Cancel" onClick={cancel} width="47.5%" />
+  </span>
 </ModalBody>
 
 <style>
@@ -76,7 +77,7 @@
 	}
 
   .description {
-    width: calc(100% - 14px);
+    width: 100%;
     font-size: 14px;
     margin-top: 7px;
   }
@@ -92,7 +93,7 @@
   }
 
   .options {
-    width: calc(100% - 14px);
+    width: 100%;
   }
 
   .view {
@@ -100,8 +101,6 @@
   }
 
   .buttons {
-    margin-top: 14px;
-    margin-bottom: 7px;
     width: 100%;
     display: flex;
     justify-content: space-around;
diff --git a/src/components/modals/current-grids/CurrentGridsModal.svelte b/src/components/modals/current-grids/CurrentGridsModal.svelte
index 608e9546..15403df8 100644
--- a/src/components/modals/current-grids/CurrentGridsModal.svelte
+++ b/src/components/modals/current-grids/CurrentGridsModal.svelte
@@ -14,6 +14,7 @@
 		$currentGridsAppid = "";
   }
 
+  let open = true;
   let imageSources = {
     "Capsule": "",
     "Wide Capsule": "",
@@ -41,7 +42,7 @@
   }
 </script>
 
-<ModalBody title={`Current Grids for ${game?.name}`} onClose={onClose}>
+<ModalBody title={`Current Grids for ${game?.name}`} open={true} on:close={() => open = false} on:closeEnd={onClose}>
   <div class="content">
     <div class="other-grids-container">
       <div class="left-col">
diff --git a/src/components/modals/game-search/GameSearchModal.svelte b/src/components/modals/game-search/GameSearchModal.svelte
index ff9be060..dd3798cd 100644
--- a/src/components/modals/game-search/GameSearchModal.svelte
+++ b/src/components/modals/game-search/GameSearchModal.svelte
@@ -10,6 +10,7 @@
   import EntryLoadingSkeleton from "./EntryLoadingSkeleton.svelte";
   import GameSearchEntry from "./GameSearchEntry.svelte";
 
+  let open = true;
   let canApply = false;
   let loading = true;
   let requestTimedOut = false;
@@ -78,7 +79,7 @@
   onMount(async () => await makeRequest(searchQuery));
 </script>
 
-<ModalBody title={"Customize Game Name"} onClose={onClose}>
+<ModalBody title={"Customize Game Name"} open={open} on:close={() => open = false} on:closeEnd={onClose}>
   <div class="content">
     <div class="body">
       <div class="description">
@@ -110,11 +111,11 @@
         </div>
       </div>
     </div>
-
-    <div class="buttons">
-      <Button label="Apply Choice" onClick={applyChoice} width="100%" disabled={!canApply} />
-    </div>
   </div>
+
+  <span slot="buttons" class="buttons">
+    <Button label="Apply Choice" onClick={applyChoice} width="100%" disabled={!canApply} />
+  </span>
 </ModalBody>
 
 <style>
@@ -129,8 +130,8 @@
 	}
 
   .body {
-    width: calc(100% - 14px);
-    padding: 7px;
+    width: 100%;
+    margin-top: 7px;
     
 		display: flex;
 		flex-direction: column;
@@ -161,12 +162,13 @@
     width: 100%;
     display: flex;
     align-items: center;
+
+    gap: 7px;
+    margin-bottom: 7px;
   }
 
   .buttons {
-    margin-top: 14px;
-    margin-bottom: 7px;
-    width: calc(100% - 14px);
+    width: 100%;
     display: flex;
     justify-content: space-around;
     justify-self: flex-end;
diff --git a/src/components/modals/info-modal/InfoModal.svelte b/src/components/modals/info-modal/InfoModal.svelte
index a34a6458..f607816d 100644
--- a/src/components/modals/info-modal/InfoModal.svelte
+++ b/src/components/modals/info-modal/InfoModal.svelte
@@ -3,6 +3,8 @@
   import ModalBody from "../modal-utils/ModalBody.svelte";
   import InfoModalSection from "./InfoModalSection.svelte";
 
+  let open = true;
+
   /**
    * The function to run when the modal closes.
    */
@@ -11,10 +13,10 @@
   }
 </script>
 
-<ModalBody title={"Common Questions and Other Information"} onClose={onClose}>
+<ModalBody title={"Common Questions and Other Information"} open={open} on:close={() => open = false} on:closeEnd={onClose}>
   <div class="content">
     <InfoModalSection title={"Data Usage"}>
-      Steam Art Manager (SARM) does not use any data other than what you provide it. The data you do provide it with (API keys and your Steam Install location) is only used to allow the app to function, and never leaves your computer. If you would like to see where this information is stored, read the <b>Where is My Data Stored?</b> section below. 
+      Steam Art Manager (SARM) does not use any data other than what you provide it. The data you do provide it with (API keys and your Steam Install location) is only used to allow the app to function, and never leaves your computer. If you would like to see where this information is stored, read the <b>Where is My Data Saved?</b> section below. 
     </InfoModalSection>
     <InfoModalSection title={"Where is My Data Saved?"}>
       On Windows systems, settings are stored in <b>C:\Users\YOUR_USERNAME\AppData\Roaming\dev.tormak.steam-art-manager\settings.json</b>. On Linux systems, they are stored in <b>~/.config/dev.tormak.steam-art-manager/settings.json</b>.
@@ -36,6 +38,6 @@
 		align-items: center;
 
     gap: 14px;
-    padding: 14px 0px;
+    padding-top: 14px;
 	}
 </style>
diff --git a/src/components/modals/info-modal/InfoModalSection.svelte b/src/components/modals/info-modal/InfoModalSection.svelte
index 60452e2d..3dfef641 100644
--- a/src/components/modals/info-modal/InfoModalSection.svelte
+++ b/src/components/modals/info-modal/InfoModalSection.svelte
@@ -14,7 +14,6 @@
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    margin: 0px 14px;
 
     background-color: var(--background-dark);
     padding: 6px;
@@ -28,7 +27,7 @@
 
   .content {
     line-height: 18px;
-    font-size: 12px;
+    font-size: 14px;
     margin: 7px 0px;
   }
 </style>
\ No newline at end of file
diff --git a/src/components/modals/manual-games/ManualGamesModal.svelte b/src/components/modals/manual-games/ManualGamesModal.svelte
index ca6cfb70..6bb54d44 100644
--- a/src/components/modals/manual-games/ManualGamesModal.svelte
+++ b/src/components/modals/manual-games/ManualGamesModal.svelte
@@ -17,6 +17,7 @@
     $showManualGamesModal = false;
   }
   
+  let open = true;
   let canSave = false;
 
   const originalManualGames = $manualSteamGames;
@@ -86,13 +87,13 @@
   }
 </script>
 
-<ModalBody title={"Manage Manual Games"} onClose={onClose}>
+<ModalBody title={"Manage Manual Games"} open={open} on:close={() => open = false} on:closeEnd={onClose}>
   <div class="content">
     <div class="left">
       <div class="info">
         Add any Steam games that SARM isn't picking up. These will be automatically loaded each time you use SARM.
       </div>
-      <div class="section-label" style="margin-left: 10px;">Your Manual Games</div>
+      <div class="section-label">Your Manual Games</div>
       <Table>
         <span slot="header">
           <div class="batch-icon" use:AppController.tippy={{ content: "Current Manual Games", placement: "top", onShow: AppController.onTippyShow }}>
@@ -169,7 +170,6 @@
 
   .info {
     margin-top: 7px;
-    margin-left: 7px;
     margin-bottom: 7px;
     font-size: 14px;
   }
@@ -214,7 +214,7 @@
     margin-bottom: 7px;
     width: 100%;
     display: flex;
-    justify-content: space-around;
+    justify-content: space-between;
     justify-self: flex-end;
   }
 </style>
diff --git a/src/components/modals/manual-games/add-methods/Search.svelte b/src/components/modals/manual-games/add-methods/Search.svelte
index 0eed6d23..aa09df7c 100644
--- a/src/components/modals/manual-games/add-methods/Search.svelte
+++ b/src/components/modals/manual-games/add-methods/Search.svelte
@@ -74,7 +74,7 @@
       Search SteamGridDB for a game with the provided name. (You need to hit enter to apply the search)
     </div>
     <div class="table-cont">
-      <Table height="325px" marginLeft="0px">
+      <Table height="325px">
         <span slot="header">
           <div class="name">Name</div>
         </span>
@@ -120,7 +120,7 @@
   .buttons {
     margin-top: 14px;
     margin-bottom: 7px;
-    width: calc(100% - 20px);
+    width: calc(100% - 7px);
     display: flex;
     justify-content: space-between;
     justify-self: flex-end;
diff --git a/src/components/modals/modal-utils/ModalBody.svelte b/src/components/modals/modal-utils/ModalBody.svelte
index 5729db34..396147db 100644
--- a/src/components/modals/modal-utils/ModalBody.svelte
+++ b/src/components/modals/modal-utils/ModalBody.svelte
@@ -1,77 +1,116 @@
 <script lang="ts">
-  import { windowIsMaximized } from "../../../stores/AppState";
+  import { createEventDispatcher } from "svelte";
+  import type { HTMLDialogAttributes } from "svelte/elements";
 
+  export let display = "flex";
+  export let extraOptions: HTMLDialogAttributes = {};
   export let title: string;
-  export let onClose: () => void = () => {};
+  export let open: boolean;
   export let canClose = true;
 
-  let canQuit = false;
+  const dispatch = createEventDispatcher();
+  let dialog: HTMLDialogElement;
 
   /**
-   * Function to run on mouse down to see if the modal should close.
-   * @param e The associated event.
+   * Handles opening the modal.
    */
-  function checkCanQuit(e: MouseEvent): void {
-    canQuit = e.currentTarget === e.target && e.button === 0;
+  function openModal(node: HTMLDialogElement) {
+    node.inert = true;
+    node.showModal();
+    node.inert = false;
   }
 
-  /**
-   * Function to run on mouse up to see if the modal should still close.
-   * @param e The associated event.
-   */
-  function closeWrapper(e: MouseEvent): void {
-    if (e.currentTarget === e.target && canQuit) onClose();
+  $: {
+    if (!dialog) break $;
+
+    if (open) {
+      openModal(dialog);
+    } else {
+      hideDialog = true;
+    }
+  }
+
+  let hideDialog = false;
+
+  function onAnimationEnd() {
+    if (hideDialog) {
+      hideDialog = false;
+      dialog.close();
+      dispatch("closeEnd");
+    }
+  }
+
+  function onCancel(e: Event) {
+    if (canClose) {
+      dispatch("close");
+      open = false;
+    } else {
+      e.preventDefault();
+    }
+  }
+
+  function onClick() {
+    if (canClose) {
+      dispatch("close");
+      open = false;
+    }
   }
 </script>
 
-<div class="blur" class:rounded={!$windowIsMaximized} />
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<div class="background" on:mousedown={checkCanQuit} on:mouseup={closeWrapper} on:contextmenu|preventDefault|stopPropagation>
-  <div class="modal-body" on:contextmenu|stopPropagation>
-    {#if canClose}
-      <div class="close-btn" on:click={onClose}>
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
-          <!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
-          <path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/>
-        </svg>
-      </div>
-    {/if}
-    <div class="header">{title}</div>
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<dialog
+  on:cancel={onCancel}
+  on:click|self={onClick}
+  on:animationend={onAnimationEnd}
+  bind:this={dialog}
+  style="display: {display};"
+  class:hide={hideDialog}
+  {...extraOptions}
+>
+  <div class="m3-container">
+    <div class="header">
+      <p class="headline m3-font-headline-small">{title}</p>
+      {#if canClose}
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
+        <!-- svelte-ignore a11y-no-static-element-interactions -->
+        <div class="close-btn" on:click={onClick}>
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
+            <!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+            <path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/>
+          </svg>
+        </div>
+      {/if}
+    </div>
     <div class="border" />
-    <slot />
+    <div class="content m3-font-body-medium">
+      <slot />
+    </div>
+    <div class="buttons">
+      <slot name="buttons" />
+    </div>
   </div>
-</div>
+</dialog>
 
 <style>
-  .background {
-    font-size: 12px;
-    z-index: 4;
-    position: absolute;
-    width: 100%;
-    height: calc(100% - 30px);
-    display: flex;
-  }
-
-  .blur {
-    z-index: 3;
-    position: absolute;
-    width: 100%;
-    height: calc(100% - 30px);
-
-    background: rgba(6, 6, 6, 0.85);
-    backdrop-filter: blur(1px);
+  :root {
+    --m3-scheme-scrim: 6 6 6;
+    --m3-dialog-shape: 4px;
   }
+  dialog {
+    background-color: var(--background);
+    border: none;
+    border-radius: var(--m3-dialog-shape);
+    margin: auto;
 
-  .rounded {
-    border-bottom-left-radius: 4px;
-    border-bottom-right-radius: 4px;
-    overflow: hidden;
+    position: relative;
   }
+  .m3-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
 
-  .border {
-    margin-top: 7px;
-    border-bottom: 1px solid var(--foreground);
+    position: relative;
+    z-index: 1;
   }
 
   .close-btn {
@@ -96,19 +135,127 @@
     cursor: pointer;
     background-color: var(--background-hover);
   }
+  
+  .header {
+    width: 100%;
 
-  .modal-body {
-    margin: auto;
-    background-color: var(--background);
-    border-radius: 4px;
-    border: 1px solid var(--shadow);
-    position: relative;
-    max-height: 90%;
+    display: flex;
+    align-items: center;
   }
 
-  .header {
-    text-align: center;
+  .border {
+    margin-top: 7px;
+    border-bottom: 1px solid var(--foreground);
+  }
+
+  .m3-container > :global(svg) {
+    color: var(--font-color);
+    width: 1.5rem;
+    height: 1.5rem;
+    margin: 0 auto 1rem auto;
+  }
+  .headline {
+    color: var(--font-color);
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+    
     font-size: 20px;
-    margin-top: 4px;
+    line-height: 20px;
+
+    font-weight: bold;
+  }
+  
+  .content {
+    color: var(--font-color);
+    margin-bottom: 0.8rem;
+  }
+
+  .buttons {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+  }
+
+  dialog {
+    position: fixed;
+    inset: 0;
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transition:
+      opacity 200ms,
+      visibility 200ms;
+  }
+  dialog[open] {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+    animation:
+      dialogIn 0.5s cubic-bezier(0.05, 0.7, 0.1, 1),
+      opacity 100ms cubic-bezier(0.05, 0.7, 0.1, 1);
+  }
+
+  dialog.hide {
+    visibility: hidden;
+    opacity: 0;
+    animation: dialogOut 0.4s cubic-bezier(0.05, 0.7, 0.1, 1);
+  }
+
+  dialog[open] .headline {
+    animation: opacity 150ms;
+  }
+  dialog[open] .content {
+    animation: opacity 200ms;
+  }
+  dialog[open] .buttons {
+    position: relative;
+    animation:
+      buttonsIn 0.5s cubic-bezier(0.05, 0.7, 0.1, 1),
+      opacity 200ms 100ms backwards;
+  }
+  dialog::backdrop {
+    background-color: rgb(var(--m3-scheme-scrim) / 0.3);
+    animation: opacity 400ms;
+    backdrop-filter: blur(1px);
+
+    position: absolute;
+    top: 30px;
+  }
+  @keyframes dialogIn {
+    0% {
+      transform: translateY(-3rem) scaleY(90%);
+      clip-path: inset(0 0 100% 0 round var(--m3-dialog-shape));
+    }
+    100% {
+      transform: translateY(0) scaleY(100%);
+      clip-path: inset(0 0 0 0 round var(--m3-dialog-shape));
+    }
+  }
+  @keyframes buttonsIn {
+    0% {
+      bottom: 100%;
+    }
+    100% {
+      bottom: 0;
+    }
+  }
+  @keyframes opacity {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  
+  @keyframes dialogOut {
+    0% {
+      transform: translateY(0) scaleY(100%);
+      clip-path: inset(0 0 0 0 round var(--m3-dialog-shape));
+    }
+    100% {
+      transform: translateY(-3rem) scaleY(90%);
+      clip-path: inset(0 0 100% 0 round var(--m3-dialog-shape));
+    }
   }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/components/modals/modal-utils/OldModalBody.svelte b/src/components/modals/modal-utils/OldModalBody.svelte
new file mode 100644
index 00000000..4275573a
--- /dev/null
+++ b/src/components/modals/modal-utils/OldModalBody.svelte
@@ -0,0 +1,114 @@
+<script lang="ts">
+  import { windowIsMaximized } from "@stores/AppState";
+
+  export let title: string;
+  export let onClose: () => void = () => {};
+  export let canClose = true;
+
+  let canQuit = false;
+
+  /**
+   * Function to run on mouse down to see if the modal should close.
+   * @param e The associated event.
+   */
+  function checkCanQuit(e: MouseEvent): void {
+    canQuit = e.currentTarget === e.target && e.button === 0;
+  }
+
+  /**
+   * Function to run on mouse up to see if the modal should still close.
+   * @param e The associated event.
+   */
+  function closeWrapper(e: MouseEvent): void {
+    if (e.currentTarget === e.target && canQuit) onClose();
+  }
+</script>
+
+<div class="blur" class:rounded={!$windowIsMaximized} />
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div class="background" on:mousedown={checkCanQuit} on:mouseup={closeWrapper} on:contextmenu|preventDefault|stopPropagation>
+  <div class="modal-body" on:contextmenu|stopPropagation>
+    {#if canClose}
+      <div class="close-btn" on:click={onClose}>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
+          <!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+          <path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/>
+        </svg>
+      </div>
+    {/if}
+    <div class="header">{title}</div>
+    <div class="border" />
+    <slot />
+  </div>
+</div>
+
+<style>
+  .background {
+    font-size: 12px;
+    z-index: 4;
+    position: absolute;
+    width: 100%;
+    height: calc(100% - 30px);
+    display: flex;
+  }
+
+  .blur {
+    z-index: 3;
+    position: absolute;
+    width: 100%;
+    height: calc(100% - 30px);
+
+    background: rgba(6, 6, 6, 0.85);
+    backdrop-filter: blur(1px);
+  }
+
+  .rounded {
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    overflow: hidden;
+  }
+
+  .border {
+    margin-top: 7px;
+    border-bottom: 1px solid var(--foreground);
+  }
+
+  .close-btn {
+    position: absolute;
+    height: 20px;
+    width: 20px;
+    fill: var(--font-color);
+
+    top: 2px;
+    right: 2px;
+
+    background-color: var(--background);
+    padding: 3px;
+    border-radius: 2px;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+  .close-btn:hover {
+    cursor: pointer;
+    background-color: var(--background-hover);
+  }
+
+  .modal-body {
+    margin: auto;
+    background-color: var(--background);
+    border-radius: 4px;
+    border: 1px solid var(--shadow);
+    position: relative;
+    max-height: 90%;
+  }
+
+  .header {
+    text-align: center;
+    font-size: 20px;
+    margin-top: 4px;
+  }
+</style>
diff --git a/src/components/modals/modal-utils/game-filter/GameFilter.svelte b/src/components/modals/modal-utils/game-filter/GameFilter.svelte
index e9eeb1c2..f47fa004 100644
--- a/src/components/modals/modal-utils/game-filter/GameFilter.svelte
+++ b/src/components/modals/modal-utils/game-filter/GameFilter.svelte
@@ -120,7 +120,8 @@
 
   .options {
     margin-top: 7px;
-    margin-left: 7px;
+
+    width: 100%;
 
     display: flex;
     flex-direction: column;
diff --git a/src/components/modals/settings/FilePathEntry.svelte b/src/components/modals/settings/FilePathEntry.svelte
index bbb46c7f..0c3ea054 100644
--- a/src/components/modals/settings/FilePathEntry.svelte
+++ b/src/components/modals/settings/FilePathEntry.svelte
@@ -103,7 +103,6 @@
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    margin: 0px 7px;
 
     background-color: var(--background-dark);
     padding: 6px;
@@ -155,10 +154,12 @@
   }
 
   .valid-value {
+    font-size: 14px;
     color: var(--success);
   }
 
   .invalid-value {
+    font-size: 14px;
     color: var(--warning);
   }
 </style>
\ No newline at end of file
diff --git a/src/components/modals/settings/SettingsModal.svelte b/src/components/modals/settings/SettingsModal.svelte
index 8f562912..0754053f 100644
--- a/src/components/modals/settings/SettingsModal.svelte
+++ b/src/components/modals/settings/SettingsModal.svelte
@@ -11,6 +11,7 @@
   import TextFieldEntry from "./TextFieldEntry.svelte";
   import ToggleFieldEntry from "./ToggleFieldEntry.svelte";
 
+  let open = true;
   let steamApiKeyChanged = false;
 
   /**
@@ -152,57 +153,55 @@
   }
 </script>
 
-<ModalBody title={"Settings"} onClose={onClose}>
+<ModalBody title={"Settings"} open={open} on:close={() => open = false} on:closeEnd={onClose}>
   <div class="content">
-    <div class="settings-container">
-      <FilePathEntry
-        label="Steam Install Path"
-        description={"The root of your Steam installation. The default on Windows is <b>C:/Program Files (x86)/Steam</b> and <b>/home/deck/.steam/steam</b> on Linux. You must restart after changing this."}
-        value={steamInstallLocation}
-        onChange={onInstallLocationChange}
-        useValidator
-        validPathMessage={"Path is a valid Steam install"}
-        validator={validateSteamPath}
-        required
-      />
-      <TextFieldEntry
-        label="SteamGrid Api Key"
-        description={"Needed to load art from SteamGridDB.com. To create one, go to <a href=\"https://www.steamgriddb.com\">Steamgrid</a>, sign in and go to preferences, then API."}
-        value={steamGridKey}
-        onChange={onGridKeyChange}
-        useValidator
-        validator={validateSGDBAPIKey}
-        required
-      />
-      <TextFieldEntry
-        label="Steam Api key"
-        description={"Used to load your games using Steam's web API (It's much faster). To create one, go to Steam's <a href=\"https://steamcommunity.com/dev/apikey\">key registration</a> page, sign in and create an api key."}
-        notes={"Recommended for large libraries. It does <b>NOT</b> matter what domain you put in, It just needs to be a valid url. When in doubt do \"http://YOUR_STEAM_USERNAME.com\"."}
-        value={steamAPIKey}
-        canBeEmpty
-        onChange={onSteamKeyChange}
-        useValidator
-        validator={validateSteamAPIKey}
-      />
-      <ToggleFieldEntry
-        label="Debug Mode"
-        description={"Enables the inspect element window and automatically opens it on launch."}
-        value={debugModeSetting}
-        onChange={onDebugModeChange}
-      />
-    </div>
-
-    <div class="buttons">
-      <Button label="Save Changes" onClick={saveSettings} width="46.5%" disabled={!canSave} />
-      <Button label="Cancel" onClick={cancel} width="46.5%" />
-      <IconButton label="Open log directory" onClick={openLogDirectory}>
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 14px; width: 14px;">
-          <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
-          <path d="M64 480H448c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H288c-10.1 0-19.6-4.7-25.6-12.8L243.2 57.6C231.1 41.5 212.1 32 192 32H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64z"/>
-        </svg>
-      </IconButton>
-    </div>
+    <FilePathEntry
+      label="Steam Install Path"
+      description={"The root of your Steam installation. The default on Windows is <b>C:/Program Files (x86)/Steam</b> and <b>/home/deck/.steam/steam</b> on Linux. You must restart after changing this."}
+      value={steamInstallLocation}
+      onChange={onInstallLocationChange}
+      useValidator
+      validPathMessage={"Path is a valid Steam install"}
+      validator={validateSteamPath}
+      required
+    />
+    <TextFieldEntry
+      label="SteamGrid Api Key"
+      description={"Needed to load art from SteamGridDB.com. To create one, go to <a href=\"https://www.steamgriddb.com\">Steamgrid</a>, sign in and go to preferences, then API."}
+      value={steamGridKey}
+      onChange={onGridKeyChange}
+      useValidator
+      validator={validateSGDBAPIKey}
+      required
+    />
+    <TextFieldEntry
+      label="Steam Api key"
+      description={"Used to load your games using Steam's web API (It's much faster). To create one, go to Steam's <a href=\"https://steamcommunity.com/dev/apikey\">key registration</a> page, sign in and create an api key."}
+      notes={"Recommended for large libraries. It does <b>NOT</b> matter what domain you put in, It just needs to be a valid url. When in doubt do \"http://YOUR_STEAM_USERNAME.com\"."}
+      value={steamAPIKey}
+      canBeEmpty
+      onChange={onSteamKeyChange}
+      useValidator
+      validator={validateSteamAPIKey}
+    />
+    <ToggleFieldEntry
+      label="Debug Mode"
+      description={"Enables the inspect element window and automatically opens it on launch."}
+      value={debugModeSetting}
+      onChange={onDebugModeChange}
+    />
   </div>
+
+  <span slot="buttons" class="buttons">
+    <Button label="Save Changes" onClick={saveSettings} width="46.5%" disabled={!canSave} />
+    <Button label="Cancel" onClick={cancel} width="46.5%" />
+    <IconButton label="Open log directory" onClick={openLogDirectory}>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 14px; width: 14px;">
+        <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+        <path d="M64 480H448c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H288c-10.1 0-19.6-4.7-25.6-12.8L243.2 57.6C231.1 41.5 212.1 32 192 32H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64z"/>
+      </svg>
+    </IconButton>
+  </span>
 </ModalBody>
 
 <style>
@@ -213,23 +212,15 @@
 		flex-direction: column;
 		align-items: center;
     padding-top: 14px;
-	}
 
-  .settings-container {
+    gap: 14px;
+    
 		max-height: 73vh;
     overflow-y: scroll;
-    margin: 0px 7px;
-    
-		display: flex;
-		flex-direction: column;
-
-    gap: 14px;
-  }
+	}
 
   .buttons {
-    margin-top: 14px;
-    margin-bottom: 10px;
-    width: calc(100% - 28px);
+    width: 100%;
     display: flex;
     justify-content: space-between;
     justify-self: flex-end;
diff --git a/src/components/modals/settings/TextFieldEntry.svelte b/src/components/modals/settings/TextFieldEntry.svelte
index c5eb89d0..7ba3c50b 100644
--- a/src/components/modals/settings/TextFieldEntry.svelte
+++ b/src/components/modals/settings/TextFieldEntry.svelte
@@ -101,7 +101,6 @@
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    margin: 0px 7px;
 
     background-color: var(--background-dark);
     padding: 6px;
@@ -154,14 +153,17 @@
   }
 
   .valid-value {
+    font-size: 14px;
     color: var(--success);
   }
 
   .warn-value {
+    font-size: 14px;
     color: rgb(231, 198, 12);
   }
 
   .invalid-value {
+    font-size: 14px;
     color: var(--warning);
   }
 </style>
\ No newline at end of file
diff --git a/src/components/modals/settings/ToggleFieldEntry.svelte b/src/components/modals/settings/ToggleFieldEntry.svelte
index a8c3d60e..d9fcf78a 100644
--- a/src/components/modals/settings/ToggleFieldEntry.svelte
+++ b/src/components/modals/settings/ToggleFieldEntry.svelte
@@ -41,13 +41,12 @@
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    margin: 0px 7px;
 
     background-color: var(--background-dark);
     padding: 6px;
     border-radius: 4px;
 
-    width: calc(100% - 28px);
+    width: calc(100% - 14px);
   }
 
   .description {
diff --git a/src/components/modals/updates/UpdateModal.svelte b/src/components/modals/updates/UpdateModal.svelte
index 47b588a3..f5e81b46 100644
--- a/src/components/modals/updates/UpdateModal.svelte
+++ b/src/components/modals/updates/UpdateModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { relaunch } from "@tauri-apps/plugin-process";
-  import { open } from "@tauri-apps/plugin-shell";
+  import { open as openLink } from "@tauri-apps/plugin-shell";
   import MarkdownIt from "markdown-it";
   
   import { showUpdateModal, updateManifest } from "@stores/Modals";
@@ -11,6 +11,8 @@
   import ModalBody from "../modal-utils/ModalBody.svelte";
   import UpdateField from "./UpdateField.svelte";
 
+  let open = true;
+  
   const mdIt = new MarkdownIt({
     html: true,
     linkify: true
@@ -34,7 +36,7 @@
     if (origin) {
       e.preventDefault();
       const href = origin.href;
-      open(href);
+      openLink(href);
     }
   }
 
@@ -62,7 +64,7 @@
   }
 </script>
 
-<ModalBody title={`Update v${updateData.version} is Available!`} canClose={false}>
+<ModalBody title={`Update v${updateData.version} is Available!`} open={open} on:close={() => open = false} canClose={false}>
   <div class="content">
     <div class="info">
       <!-- svelte-ignore missing-declaration -->
@@ -82,11 +84,11 @@
         </div>
       </div>
     </div>
-    <div class="buttons">
-      <Button label="Update" onClick={update} width="47.5%" />
-      <Button label="Ignore" onClick={ignoreUpdate} width="47.5%" />
-    </div>
   </div>
+  <span slot="buttons" class="buttons">
+    <Button label="Update" onClick={update} width="47.5%" />
+    <Button label="Ignore" onClick={ignoreUpdate} width="47.5%" />
+  </span>
 </ModalBody>
 
 <style>
@@ -95,14 +97,12 @@
   }
 
   .info {
-    width: calc(100% - 14px);
-    margin: 7px;
+    width: 100%;
+    margin: 7px 0px;
   }
 
   .changelog {
-    width: calc(100% - 14px);
-    margin: 7px;
-    margin-top: 0px;
+    width: 100%;
   }
 
   .changelog > .header {
@@ -141,8 +141,6 @@
   }
 
   .buttons {
-    margin-top: 14px;
-    margin-bottom: 7px;
     width: 100%;
     display: flex;
     justify-content: space-around;
diff --git a/src/lib/controllers/AppController.ts b/src/lib/controllers/AppController.ts
index 6b9823fe..d3c6915e 100644
--- a/src/lib/controllers/AppController.ts
+++ b/src/lib/controllers/AppController.ts
@@ -43,7 +43,8 @@ export class AppController {
     hideOnClick: false,
     duration: 100,
     theme: "sarm",
-    arrow: true
+    arrow: true,
+    appendTo: 'parent'
   });
 
   static onTippyShow(instance: Instance<Props>): void {
diff --git a/src/windows/main/Main.svelte b/src/windows/main/Main.svelte
index 49493493..575539a5 100644
--- a/src/windows/main/Main.svelte
+++ b/src/windows/main/Main.svelte
@@ -2,7 +2,7 @@
   import { AppController, LogController } from "@controllers";
   import { DropDown } from "@interactables";
   import { activeUserId, isOnline, steamUsers, windowIsMaximized } from "@stores/AppState";
-  import { showBatchApplyModal, showBatchApplyProgress, showCleanConflictDialog, showCleanGridsModal, showCurrentGridsModal, showDialogModal, showGameSearchModal, showGridModal, showInfoModal, showLogoPositionModal, showManualGamesModal, showSettingsModal, showSteamPathModal, showUpdateModal, showUpdateTilesModal, updateManifest } from "@stores/Modals";
+  import { showBatchApplyModal, showBatchApplyProgress, showCleanConflictDialog, showCleanGridsModal, showCurrentGridsModal, showDialogModal, showGameSearchModal, showGridModal, showInfoModal, showLogoPositionModal, showManualGamesModal, showSteamPathModal, showUpdateModal, updateManifest } from "@stores/Modals";
   import { exit } from "@tauri-apps/plugin-process";
   import { check as checkUpdate } from "@tauri-apps/plugin-updater";
   import { SettingsManager } from "@utils";
@@ -15,21 +15,7 @@
   import Options from "../../components/core/filters/Options.svelte";
   import Games from "../../components/core/games/Games.svelte";
   import Grids from "../../components/core/grids/Grids.svelte";
-  import DialogModal from "../../components/modals/DialogModal.svelte";
-  import GridPreviewModal from "../../components/modals/GridPreviewModal.svelte";
-  import LogoPositionModal from "../../components/modals/LogoPositionModal.svelte";
-  import SteamPathModal from "../../components/modals/SteamPathModal.svelte";
-  import UpdateTilesModal from "../../components/modals/UpdateTilesModal.svelte";
-  import BatchApplyModal from "../../components/modals/batch-apply/BatchApplyModal.svelte";
-  import BatchApplyProgressModal from "../../components/modals/batch-apply/BatchApplyProgressModal.svelte";
-  import CleanConflictDialog from "../../components/modals/clean-grids/CleanConflictDialog.svelte";
-  import CleanGridsModal from "../../components/modals/clean-grids/CleanGridsModal.svelte";
-  import CurrentGridsModal from "../../components/modals/current-grids/CurrentGridsModal.svelte";
-  import GameSearchModal from "../../components/modals/game-search/GameSearchModal.svelte";
-  import InfoModal from "../../components/modals/info-modal/InfoModal.svelte";
-  import ManualGamesModal from "../../components/modals/manual-games/ManualGamesModal.svelte";
-  import SettingsModal from "../../components/modals/settings/SettingsModal.svelte";
-  import UpdateModal from "../../components/modals/updates/UpdateModal.svelte";
+  import Modals from "../../components/modals/Modals.svelte";
 	
 	let activeUserIdUnsub: Unsubscriber;
 	let usersUnsub: Unsubscriber;
@@ -135,53 +121,7 @@
     />
   </Titlebar>
 	<div class="content">
-    {#if $showUpdateModal}
-      <UpdateModal />
-    {/if}
-    {#if !$showUpdateModal}
-      {#if $showDialogModal}
-        <DialogModal />
-      {/if}
-      {#if $showSteamPathModal}
-        <SteamPathModal />
-      {/if}
-      {#if $showGameSearchModal}
-        <GameSearchModal />
-      {/if}
-      {#if $showGridModal}
-        <GridPreviewModal />
-      {/if}
-      {#if $showBatchApplyProgress}
-        <BatchApplyProgressModal />
-      {/if}
-      {#if $showBatchApplyModal}
-        <BatchApplyModal />
-      {/if}
-      {#if $showLogoPositionModal}
-        <LogoPositionModal />
-      {/if}
-      {#if $showManualGamesModal}
-        <ManualGamesModal />
-      {/if}
-      {#if $showCleanGridsModal}
-        <CleanGridsModal />
-      {/if}
-      {#if $showSettingsModal}
-        <SettingsModal />
-      {/if}
-      {#if $showCleanConflictDialog}
-        <CleanConflictDialog />
-      {/if}
-      {#if $showInfoModal}
-        <InfoModal />
-      {/if}
-      {#if $showCurrentGridsModal}
-        <CurrentGridsModal />
-      {/if}
-      {#if $showUpdateTilesModal}
-        <UpdateTilesModal />
-      {/if}
-    {/if}
+    <Modals />
 		<Splitpanes dblClickSplitter={false} on:resized={handlePanelResize}>
 			<Options />
 
@@ -233,5 +173,8 @@
 		flex-direction: column;
 		justify-content: flex-start;
 		align-items: center;
+
+    position: relative;
+    z-index: 1;
 	}
 </style>
\ No newline at end of file