From 686bb118b45192bd7858b64644cf945078a3239f Mon Sep 17 00:00:00 2001
From: Lewis Crichton <lewi@lewisakura.moe>
Date: Sun, 14 Jan 2024 16:37:24 +0000
Subject: [PATCH] fix: settings reset not refreshing

---
 src/components/ThemeSettings/ThemesTab.tsx    |  6 ++++--
 src/components/ThemeSettings/UserCSSModal.tsx | 16 +++++++++++++---
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/components/ThemeSettings/ThemesTab.tsx b/src/components/ThemeSettings/ThemesTab.tsx
index e9440e4fc..912a4b0e0 100644
--- a/src/components/ThemeSettings/ThemesTab.tsx
+++ b/src/components/ThemeSettings/ThemesTab.tsx
@@ -116,9 +116,10 @@ interface UserCSSCardProps {
     enabled: boolean;
     onChange: (enabled: boolean) => void;
     onDelete: () => void;
+    onSettingsReset: () => void;
 }
 
-function UserCSSThemeCard({ theme, enabled, onChange, onDelete }: UserCSSCardProps) {
+function UserCSSThemeCard({ theme, enabled, onChange, onDelete, onSettingsReset }: UserCSSCardProps) {
     const missingPlugins = useMemo(() =>
         theme.requiredPlugins?.filter(p => !isPluginEnabled(p)), [theme]);
 
@@ -148,7 +149,7 @@ function UserCSSThemeCard({ theme, enabled, onChange, onDelete }: UserCSSCardPro
                     {theme.vars && (
                         <div style={{ cursor: "pointer" }} onClick={
                             () => openModal(modalProps =>
-                                <UserCSSSettingsModal modalProps={modalProps} theme={theme} />)
+                                <UserCSSSettingsModal modalProps={modalProps} theme={theme} onSettingsReset={onSettingsReset} />)
                         }>
                             <CogWheel />
                         </div>
@@ -392,6 +393,7 @@ function ThemesTab() {
                                         await VencordNative.themes.deleteTheme(theme.fileName);
                                         refreshLocalThemes();
                                     }}
+                                    onSettingsReset={refreshLocalThemes}
                                     theme={theme as UserstyleHeader}
                                 />
                             )))}
diff --git a/src/components/ThemeSettings/UserCSSModal.tsx b/src/components/ThemeSettings/UserCSSModal.tsx
index 3ac4738e7..ce47b04e5 100644
--- a/src/components/ThemeSettings/UserCSSModal.tsx
+++ b/src/components/ThemeSettings/UserCSSModal.tsx
@@ -18,6 +18,7 @@ import { SettingBooleanComponent, SettingColorComponent, SettingNumberComponent,
 interface UserCSSSettingsModalProps {
     modalProps: ModalProps;
     theme: UserstyleHeader;
+    onSettingsReset: () => void;
 }
 
 function ExportButton({ themeSettings }: { themeSettings: Settings["userCssVars"][""]; }) {
@@ -73,7 +74,14 @@ function ImportButton({ themeSettings }: { themeSettings: Settings["userCssVars"
     </Tooltip>;
 }
 
-function ResetButton({ themeSettings, themeId }: { themeSettings: Settings["userCssVars"]; themeId: string; }) {
+interface ResetButtonProps {
+    themeSettings: Settings["userCssVars"];
+    themeId: string;
+    close: () => Promise<void>;
+    onReset: () => void;
+}
+
+function ResetButton({ themeSettings, themeId, close, onReset }: ResetButtonProps) {
     return <Tooltip text={"Reset settings to default"}>
         {({ onMouseLeave, onMouseEnter }) => (
             <div
@@ -82,7 +90,9 @@ function ResetButton({ themeSettings, themeId }: { themeSettings: Settings["user
                 onMouseLeave={onMouseLeave}
 
                 onClick={async () => {
+                    await close(); // close the modal first to stop rendering
                     delete themeSettings[themeId];
+                    onReset();
                 }}>
                 <ResetIcon />
             </div>
@@ -90,7 +100,7 @@ function ResetButton({ themeSettings, themeId }: { themeSettings: Settings["user
     </Tooltip>;
 }
 
-export function UserCSSSettingsModal({ modalProps, theme }: UserCSSSettingsModalProps) {
+export function UserCSSSettingsModal({ modalProps, theme, onSettingsReset }: UserCSSSettingsModalProps) {
     // @ts-expect-error UseSettings<> can't determine this is a valid key
     const { userCssVars } = useSettings(["userCssVars"], false);
 
@@ -181,7 +191,7 @@ export function UserCSSSettingsModal({ modalProps, theme }: UserCSSSettingsModal
                 <Flex style={{ gap: 4, marginRight: 4 }} className="vc-settings-usercss-ie-buttons">
                     <ExportButton themeSettings={themeVars} />
                     <ImportButton themeSettings={themeVars} />
-                    <ResetButton themeSettings={userCssVars} themeId={theme.id} />
+                    <ResetButton themeSettings={userCssVars} themeId={theme.id} close={modalProps.onClose} onReset={onSettingsReset} />
                 </Flex>
                 <ModalCloseButton onClick={modalProps.onClose} />
             </ModalHeader>