add feedback form

src/components/App.tsx

@@ -7,19 +7,17 @@ import { OnboardWarning } from "~/components/OnboardWarning";
 import { CombinedActivity } from "./Activity";
 import { useMegaStore } from "~/state/megaStore";
 import { Match, Show, Suspense, Switch } from "solid-js";
-import { ExternalLink } from "./layout/ExternalLink";
 import { BetaWarningModal } from "~/components/BetaWarningModal";
 import settings from "~/assets/icons/settings.svg";
 import pixelLogo from "~/assets/mutiny-pixel-logo.png";
 import plusLogo from "~/assets/mutiny-plus-logo.png";
 import { PendingNwc } from "./PendingNwc";
-import { useI18n } from "~/i18n/context";
 import { DecryptDialog } from "./DecryptDialog";
 import { LoadingIndicator } from "./LoadingIndicator";
+import { FeedbackLink } from "~/routes/Feedback";
 
 export default function App() {
     const [state, _actions] = useMegaStore();
-    const i18n = useI18n();
 
     return (
         <SafeArea>
@@ -86,14 +84,9 @@ export default function App() {
                         </Suspense>
                     </VStack>
                 </Card>
-                <p class="self-center text-neutral-500 mt-4 font-normal">
-                    Bugs? Feedback?{" "}
-                    <span class="text-neutral-400">
-                        <ExternalLink href="https://github.com/MutinyWallet/mutiny-web/issues">
-                            {i18n.t("create_an_issue")}
-                        </ExternalLink>
-                    </span>
-                </p>
+                <div class="self-center mt-4">
+                    <FeedbackLink />
+                </div>
             </DefaultMain>
             <DecryptDialog />
             <BetaWarningModal />

src/components/SetupErrorDisplay.tsx

@@ -11,19 +11,15 @@ import { Match, Switch } from "solid-js";
 import { ImportExport } from "./ImportExport";
 import { Logs } from "./Logs";
 import { DeleteEverything } from "./DeleteEverything";
+import { FeedbackLink } from "~/routes/Feedback";
 
 function ErrorFooter() {
     return (
         <>
             <div class="h-full" />
-            <p class="self-center text-neutral-500 mt-4">
-                Bugs? Feedback?{" "}
-                <span class="text-neutral-400">
-                    <ExternalLink href="https://github.com/MutinyWallet/mutiny-web/issues">
-                        Create an issue
-                    </ExternalLink>
-                </span>
-            </p>
+            <div class="self-center mt-4">
+                <FeedbackLink setupError={true} />
+            </div>
         </>
     );
 }

src/components/layout/BackPop.tsx

@@ -0,0 +1,23 @@
+import { useLocation, useNavigate } from "solid-start";
+import { BackButton } from "./BackButton";
+
+type StateWithPrevious = {
+    previous?: string;
+};
+
+export function BackPop() {
+    const navigate = useNavigate();
+    const location = useLocation();
+
+    const state = location.state as StateWithPrevious;
+
+    const backPath = () => (state?.previous ? state?.previous : "/");
+
+    return (
+        <BackButton
+            title="Back"
+            onClick={() => navigate(backPath())}
+            showOnDesktop
+        />
+    );
+}

src/components/layout/Button.tsx

@@ -16,13 +16,15 @@ const button = cva(
                 glowy: "bg-black/10 shadow-xl text-white border border-m-blue hover:m-blue-dark hover:text-m-blue",
                 blue: "bg-m-blue text-white shadow-inner-button hover:bg-m-blue-dark text-shadow-button",
                 red: "bg-m-red text-white shadow-inner-button hover:bg-m-red-dark text-shadow-button",
-                green: "bg-m-green text-white shadow-inner-button hover:bg-m-green-dark text-shadow-button"
+                green: "bg-m-green text-white shadow-inner-button hover:bg-m-green-dark text-shadow-button",
+                text: ""
             },
             layout: {
                 flex: "flex-1 text-xl",
                 pad: "px-8 text-xl",
                 small: "px-4 py-2 w-auto text-lg",
-                xs: "px-4 py-2 w-auto rounded-lg text-base"
+                xs: "px-4 py-2 w-auto rounded-lg text-base",
+                full: "w-full text-xl"
             }
         },
         defaultVariants: {

src/components/layout/index.tsx

@@ -320,10 +320,15 @@ export function Checkbox(props: {
     label: string;
     checked: boolean;
     onChange: (checked: boolean) => void;
+    caption?: string;
 }) {
     return (
         <KCheckbox.Root
-            class="inline-flex items-center gap-2"
+            class="inline-flex gap-2"
+            classList={{
+                "items-center": !props.caption,
+                "items-start": !!props.caption
+            }}
             checked={props.checked}
             onChange={props.onChange}
         >
@@ -333,8 +338,11 @@ export function Checkbox(props: {
                     <img src={check} class="w-8 h-8" alt="check" />
                 </KCheckbox.Indicator>
             </KCheckbox.Control>
-            <KCheckbox.Label class="flex-1 text-xl font-light">
+            <KCheckbox.Label class="flex-1 text-xl font-light flex flex-col gap-1">
                 {props.label}
+                <Show when={props.caption}>
+                    <TinyText>{props.caption}</TinyText>
+                </Show>
             </KCheckbox.Label>
         </KCheckbox.Root>
     );