chore: minor changes page component subscription (#1903)

* chore: minor changes

* chore: add changelog

Author: mxkaske

apps/status-page/src/app/(status-page)/[domain]/(public)/manage/[token]/page.tsx

@@ -93,7 +93,7 @@ export default function VerifyPage() {
             Manage your subscription to receive updates on the status page.
           </FormCardDescription>
         </FormCardHeader>
-        <FormCardContent>
+        <FormCardContent className="px-0">
           <FormManageSubscription
             id="manage-subscription-form"
             defaultValues={{

apps/status-page/src/app/(status-page)/[domain]/(public)/verify/[token]/page.tsx

@@ -41,12 +41,26 @@ export default function VerifyPage() {
         >
           {title}
         </StatusBlankTitle>
-        <StatusBlankLink
-          href="../"
-          disabled={verifyEmailMutation.isPending || !verifyEmailMutation.data}
-        >
-          Go back
-        </StatusBlankLink>
+        <div className="flex justify-center gap-2">
+          <StatusBlankLink
+            href="/"
+            disabled={
+              verifyEmailMutation.isPending || !verifyEmailMutation.data
+            }
+          >
+            Go back
+          </StatusBlankLink>
+          {verifyEmailMutation.isSuccess && (
+            <StatusBlankLink
+              href={`/manage/${token}`}
+              disabled={
+                verifyEmailMutation.isPending || !verifyEmailMutation.data
+              }
+            >
+              Manage
+            </StatusBlankLink>
+          )}
+        </div>
       </StatusBlankContent>
     </StatusBlankContainer>
   );

apps/status-page/src/components/forms/form-card.tsx

@@ -11,9 +11,8 @@ import { cn } from "@openstatus/ui/lib/utils";
 
 import { type VariantProps, cva } from "class-variance-authority";
 
-// py-0
 const formCardVariants = cva(
-  "group relative w-full overflow-hidden py-0 shadow-none gap-4",
+  "group relative w-full overflow-hidden py-0 shadow-none gap-4 rounded-lg",
   {
     variants: {
       variant: {

apps/status-page/src/components/forms/form-manage-subscription.tsx

@@ -87,7 +87,7 @@ export function FormManageSubscription({
           control={form.control}
           name="subscribeComponents"
           render={({ field }) => (
-            <FormItem className="flex items-center gap-2">
+            <FormItem className="flex items-center gap-2 px-4">
               <FormControl>
                 <Checkbox
                   checked={field.value}
@@ -108,7 +108,10 @@ export function FormManageSubscription({
                 if (tracker.type === "group") {
                   const groupIds = tracker.components.map((c) => c.id);
                   return (
-                    <div key={tracker.groupId} className="flex flex-col gap-2">
+                    <div
+                      key={tracker.groupId}
+                      className="flex flex-col gap-2 px-4"
+                    >
                       <FormField
                         control={form.control}
                         name="pageComponents"
@@ -189,7 +192,7 @@ export function FormManageSubscription({
                     control={form.control}
                     name="pageComponents"
                     render={({ field }) => (
-                      <FormItem className="flex items-center gap-2">
+                      <FormItem className="flex items-center gap-2 px-4">
                         <FormControl>
                           <Checkbox
                             checked={field.value?.includes(
@@ -219,7 +222,7 @@ export function FormManageSubscription({
                 );
               })
             ) : (
-              <StatusBlankContainer>
+              <StatusBlankContainer className="px-4">
                 <StatusBlankTitle>
                   No components to subscribe to
                 </StatusBlankTitle>