Better blank state

Author: samejr

apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.integrations.slack.tsx

@@ -5,6 +5,8 @@ import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { z } from "zod";
 import { DialogClose } from "@radix-ui/react-dialog";
 import { TrashIcon } from "@heroicons/react/20/solid";
+import { IconBugFilled } from "@tabler/icons-react";
+import { SlackMonoIcon } from "~/assets/icons/SlackMonoIcon";
 import { Button } from "~/components/primitives/Buttons";
 import { DateTime } from "~/components/primitives/DateTime";
 import {
@@ -193,17 +195,16 @@ export default function SlackIntegrationPage() {
           <PageTitle title="Slack integration" />
         </NavBar>
         <PageBody>
-          <MainHorizontallyCenteredContainer>
-            <div className="flex h-full items-center justify-center">
-              <div className="text-center">
-                <Header3 className="mb-2">No Slack integration found</Header3>
-                <Paragraph variant="small">
-                  This organization doesn't have a Slack integration configured. You can connect
-                  Slack when setting up alert channels in your project settings.
-                </Paragraph>
-              </div>
-            </div>
-          </MainHorizontallyCenteredContainer>
+          <div className="flex h-full flex-col items-center justify-center gap-3">
+            <SlackMonoIcon className="mb-2 size-16 text-charcoal-650" />
+            <Header2>No Slack integration found</Header2>
+            <Paragraph className="max-w-md text-center text-text-dimmed">
+              Your organization doesn't have a Slack integration configured. You can connect Slack
+              when setting up alerts from the{" "}
+              <IconBugFilled className="-ml-0.5 mb-0.5 inline size-5 text-errors" />
+              <span className="text-text-bright">Errors</span> page.
+            </Paragraph>
+          </div>
         </PageBody>
       </PageContainer>
     );