4 files changed, 51 insertions, 16 deletions
diff --git a/src/components/ErrorBoundary.tsx b/src/components/ErrorBoundary.tsx
index 5946cb1..21a3155 100644
--- a/src/components/ErrorBoundary.tsx
+++ b/src/components/ErrorBoundary.tsx
@@ -1,5 +1,6 @@
 import Logger from "../utils/logger";
 import { Card, React } from "../webpack/common";
+import { ErrorCard } from "./ErrorCard";
 
 interface Props {
     fallback?: React.ComponentType<React.PropsWithChildren<{ error: any; }>>;
@@ -49,12 +50,8 @@ export default class ErrorBoundary extends React.Component<React.PropsWithChildr
             />;
 
         return (
-            <Card style={{
+            <ErrorCard style={{
                 overflow: "hidden",
-                padding: "2em",
-                backgroundColor: color + "30",
-                borderColor: color,
-                color: "var(--text-normal)"
             }}>
                 <h1>Oh no!</h1>
                 <p>
@@ -62,10 +59,11 @@ export default class ErrorBoundary extends React.Component<React.PropsWithChildr
                     and in your console.
                 </p>
                 <code>
-                    <pre>{this.state.error}
+                    <pre>
+                        {this.state.error}
                     </pre>
                 </code>
-            </Card>
+            </ErrorCard>
         );
     }
 }
diff --git a/src/components/ErrorCard.tsx b/src/components/ErrorCard.tsx
new file mode 100644
index 0000000..d0bf8c3
--- /dev/null
+++ b/src/components/ErrorCard.tsx
@@ -0,0 +1,21 @@
+import { Card } from "../webpack/common";
+
+interface Props {
+    style?: React.CSSProperties;
+    className?: string;
+}
+export function ErrorCard(props: React.PropsWithChildren<Props>) {
+    return (
+        <Card className={props.className} style={
+            {
+                padding: "2em",
+                backgroundColor: "#e7828430",
+                borderColor: "#e78284",
+                color: "var(--text-normal)",
+                ...props.style
+            }
+        }>
+            {props.children}
+        </Card>
+    );
+}
diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
index 54e6ddb..3b4c04a 100644
--- a/src/components/Settings.tsx
+++ b/src/components/Settings.tsx
@@ -74,7 +74,7 @@ export default ErrorBoundary.wrap(function Settings() {
 
             <Flex className={classes(Margins.marginBottom20)}>
                 <Button
-                    onClick={() => VencordNative.ipc.invoke(IpcEvents.OPEN_PATH, settingsDir)}
+                    onClick={() => window.DiscordNative.fileManager.showItemInFolder(settingsDir)}
                     size={Button.Sizes.SMALL}
                     disabled={settingsDirPending}
                 >
diff --git a/src/components/Updater.tsx b/src/components/Updater.tsx
index 947ce43..7e4b2a7 100644
--- a/src/components/Updater.tsx
+++ b/src/components/Updater.tsx
@@ -1,10 +1,11 @@
 import gitHash from "git-hash";
-import { changes, checkForUpdates, getRepo, rebuild, update, UpdateLogger } from "../utils/updater";
+import { changes, checkForUpdates, getRepo, rebuild, update, UpdateLogger, updateError } from '../utils/updater';
 import { React, Forms, Button, Margins, Alerts, Card, Parser, Toasts } from '../webpack/common';
 import { Flex } from "./Flex";
 import { useAwaiter } from '../utils/misc';
 import { Link } from "./Link";
 import ErrorBoundary from "./ErrorBoundary";
+import { ErrorCard } from "./ErrorCard";
 
 
 function withDispatcher(dispatcher: React.Dispatch<React.SetStateAction<boolean>>, action: () => any) {
@@ -31,7 +32,11 @@ function withDispatcher(dispatcher: React.Dispatch<React.SetStateAction<boolean>
             }
             Alerts.show({
                 title: "Oops!",
-                body: err.split("\n").map(line => <div>{Parser.parse(line)}</div>)
+                body: (
+                    <ErrorCard>
+                        {err.split("\n").map(line => <div>{Parser.parse(line)}</div>)}
+                    </ErrorCard>
+                )
             });
         }
         finally {
@@ -51,7 +56,7 @@ export default ErrorBoundary.wrap(function Updater() {
             UpdateLogger.error("Failed to retrieve repo", err);
     }, [err]);
 
-    const isOutdated = updates.length > 0;
+    const isOutdated = updates?.length > 0;
 
     return (
         <Forms.FormSection tag="h1" title="Vencord Updater">
@@ -67,11 +72,22 @@ export default ErrorBoundary.wrap(function Updater() {
 
             <Forms.FormTitle tag="h5">Updates</Forms.FormTitle>
 
-            <Forms.FormText className={Margins.marginBottom8}>
-                {updates.length ? `There are ${updates.length} Updates` : "Up to Date!"}
-            </Forms.FormText>
+            {!updates && updateError ? (
+                <>
+                    <Forms.FormText>Failed to check updates. Check the console for more info</Forms.FormText>
+                    <ErrorCard style={{ padding: "1em" }}>
+                        <p>{updateError.stderr || updateError.stdout || "An unknown error occurred"}</p>
+                    </ErrorCard>
+                </>
+            ) :
+                (
+                    <Forms.FormText className={Margins.marginBottom8}>
+                        {isOutdated ? `There are ${updates.length} Updates` : "Up to Date!"}
+                    </Forms.FormText>
+                )
+            }
 
-            {updates.length > 0 && (
+            {isOutdated && (
                 <Card style={{ padding: ".5em" }}>
                     {updates.map(({ hash, author, message }) => (
                         <div>
@@ -139,6 +155,6 @@ export default ErrorBoundary.wrap(function Updater() {
                     Check for Updates
                 </Button>
             </Flex>
-        </Forms.FormSection>
+        </Forms.FormSection >
     );
 });