Add todos and fix some highlights

This commit is contained in:
mrjvs 2024-01-20 13:54:32 +01:00
parent 88b788d831
commit e4ad8789b9
3 changed files with 13 additions and 4 deletions

View File

@ -47,6 +47,7 @@ export function ExtensionStatus(props: {
<p>{t("onboarding.extension.status.loading")}</p> <p>{t("onboarding.extension.status.loading")}</p>
</> </>
); );
// TODO make proper actions for all of these states below
if (props.status === "disallowed") if (props.status === "disallowed")
content = <p>{t("onboarding.extension.status.disallowed")}</p>; content = <p>{t("onboarding.extension.status.disallowed")}</p>;
else if (props.status === "failed") else if (props.status === "failed")
@ -81,6 +82,7 @@ export function OnboardingExtensionPage() {
); );
useInterval(exec, 1000); useInterval(exec, 1000);
// TODO proper link to install extension
return ( return (
<MinimalPageLayout> <MinimalPageLayout>
<PageTitle subpage k="global.pages.onboarding" /> <PageTitle subpage k="global.pages.onboarding" />

View File

@ -40,6 +40,7 @@ export function OnboardingProxyPage() {
} }
}, [url, completeAndRedirect, setProxySet]); }, [url, completeAndRedirect, setProxySet]);
// TODO proper link to proxy deployment docs
return ( return (
<MinimalPageLayout> <MinimalPageLayout>
<PageTitle subpage k="global.pages.onboarding" /> <PageTitle subpage k="global.pages.onboarding" />

View File

@ -76,6 +76,7 @@ function useIsSetup() {
function SetupCheckList(props: { function SetupCheckList(props: {
status: Status; status: Status;
grey?: boolean; grey?: boolean;
highlight?: boolean;
children?: ReactNode; children?: ReactNode;
}) { }) {
const { t } = useTranslation(); const { t } = useTranslation();
@ -98,9 +99,10 @@ function SetupCheckList(props: {
<div> <div>
<p <p
className={classNames({ className={classNames({
"text-type-dimmed opacity-75": props.grey, "!text-white": props.grey && props.highlight,
"!text-type-dimmed opacity-75": props.grey && !props.highlight,
"text-type-danger": props.status === "error", "text-type-danger": props.status === "error",
"text-white !opacity-100": props.status === "success", "text-white": props.status === "success",
})} })}
> >
{props.children} {props.children}
@ -119,7 +121,7 @@ export function SetupPart() {
const { t } = useTranslation(); const { t } = useTranslation();
const navigate = useNavigate(); const navigate = useNavigate();
const { loading, setupStates, globalState } = useIsSetup(); const { loading, setupStates, globalState } = useIsSetup();
if (loading || !setupStates) return <p>Loading states...</p>; if (loading || !setupStates) return <p>Loading states...</p>; // TODO proper loading screen
const textLookupMap: Record< const textLookupMap: Record<
Status, Status,
@ -174,7 +176,11 @@ export function SetupPart() {
<SetupCheckList status={setupStates.proxy}> <SetupCheckList status={setupStates.proxy}>
{t("settings.connections.setup.items.proxy")} {t("settings.connections.setup.items.proxy")}
</SetupCheckList> </SetupCheckList>
<SetupCheckList grey status={setupStates.defaultProxy}> <SetupCheckList
grey
highlight={globalState === "unset"}
status={setupStates.defaultProxy}
>
{t("settings.connections.setup.items.default")} {t("settings.connections.setup.items.default")}
</SetupCheckList> </SetupCheckList>
</div> </div>