diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/ErrorBoundary.tsx | 6 | ||||
| -rw-r--r-- | src/components/Flex.tsx | 17 | ||||
| -rw-r--r-- | src/components/Settings.tsx | 35 |
3 files changed, 36 insertions, 22 deletions
diff --git a/src/components/ErrorBoundary.tsx b/src/components/ErrorBoundary.tsx index e903947..2b754b2 100644 --- a/src/components/ErrorBoundary.tsx +++ b/src/components/ErrorBoundary.tsx @@ -1,5 +1,5 @@ import Logger from "../utils/logger"; -import { Card, React } from "../webpack/common"; +import { React } from "../webpack/common"; interface Props { fallback?: React.ComponentType<React.PropsWithChildren<{ error: any; }>>; @@ -49,7 +49,7 @@ export default class ErrorBoundary extends React.Component<React.PropsWithChildr />; return ( - <Card style={{ + <div style={{ overflow: "hidden", padding: "2em", backgroundColor: color + "30", @@ -65,7 +65,7 @@ export default class ErrorBoundary extends React.Component<React.PropsWithChildr <pre>{this.state.error} </pre> </code> - </Card> + </div> ); } } diff --git a/src/components/Flex.tsx b/src/components/Flex.tsx new file mode 100644 index 0000000..c369767 --- /dev/null +++ b/src/components/Flex.tsx @@ -0,0 +1,17 @@ +import { PropsWithChildren } from "react"; +import type { React } from '../webpack/common'; + +export function Flex(props: React.PropsWithChildren<{ + flexDirection?: React.CSSProperties["flexDirection"]; + style?: React.CSSProperties; +}>) { + props.style ??= {}; + props.style.flexDirection ||= props.flexDirection; + props.style.gap ??= "1em"; + props.style.display = "flex"; + return ( + <div {...props}> + {props.children} + </div> + ); +} diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx index d5b655b..1950d7a 100644 --- a/src/components/Settings.tsx +++ b/src/components/Settings.tsx @@ -3,10 +3,11 @@ import Plugins from 'plugins'; import { useSettings } from "../api/settings"; import IpcEvents from "../utils/IpcEvents"; -import { Button, ButtonProps, Flex, Switch, Forms, React } from "../webpack/common"; +import { Button, Switch, Forms, React } from "../webpack/common"; import ErrorBoundary from "./ErrorBoundary"; import { startPlugin } from "../plugins"; import { stopPlugin } from '../plugins/index'; +import { Flex } from './Flex'; export default ErrorBoundary.wrap(function Settings(props) { const [settingsDir, , settingsDirPending] = useAwaiter(() => VencordNative.ipc.invoke<string>(IpcEvents.GET_SETTINGS_DIR), "Loading..."); @@ -32,24 +33,20 @@ export default ErrorBoundary.wrap(function Settings(props) { <Forms.FormSection tag="h1" title="Vencord"> <Forms.FormText>SettingsDir: {settingsDir}</Forms.FormText> <Flex style={{ marginTop: "8px", marginBottom: "8px" }}> - <Flex.Child> - <Button - onClick={() => VencordNative.ipc.invoke(IpcEvents.OPEN_PATH, settingsDir)} - size={ButtonProps.ButtonSizes.SMALL} - disabled={settingsDirPending} - > - Launch Directory - </Button> - </Flex.Child> - <Flex.Child> - <Button - onClick={() => VencordNative.ipc.invoke(IpcEvents.OPEN_PATH, settingsDir, "quickCss.css")} - size={ButtonProps.ButtonSizes.SMALL} - disabled={settingsDir === "Loading..."} - > - Open QuickCSS File - </Button> - </Flex.Child> + <Button + onClick={() => VencordNative.ipc.invoke(IpcEvents.OPEN_PATH, settingsDir)} + size={Button.Sizes.SMALL} + disabled={settingsDirPending} + > + Launch Directory + </Button> + <Button + onClick={() => VencordNative.ipc.invoke(IpcEvents.OPEN_PATH, settingsDir, "quickCss.css")} + size={Button.Sizes.SMALL} + disabled={settingsDir === "Loading..."} + > + Open QuickCSS File + </Button> </Flex> <Forms.FormTitle tag="h5">Settings</Forms.FormTitle> <Switch |