Overhaul (#83)

* WIP Layout Refactor

* New Connection Dialog

* WIP form overhaul

* Fix remaining config pages

src/components/UI/Typography/Blockquote.tsx

@@ -0,0 +1,9 @@
+export interface BlockquoteProps {
+  children: React.ReactNode;
+}
+
+export const BlockQuote = ({ children }: BlockquoteProps): JSX.Element => (
+  <blockquote className="mt-6 border-l-2 border-slate-300 pl-6 italic text-slate-800 dark:border-slate-600 dark:text-slate-200">
+    {children}
+  </blockquote>
+);

src/components/UI/Typography/Code.tsx

@@ -0,0 +1,9 @@
+export interface CodeProps {
+  children: React.ReactNode;
+}
+
+export const Code = ({ children }: CodeProps): JSX.Element => (
+  <code className="relative rounded bg-slate-100 py-[0.2rem] px-[0.3rem] font-mono text-sm font-semibold text-slate-900 dark:bg-slate-800 dark:text-slate-400">
+    {children}
+  </code>
+);

src/components/UI/Typography/H1.tsx

@@ -0,0 +1,9 @@
+export interface H1Props {
+  children: React.ReactNode;
+}
+
+export const H1 = ({ children }: H1Props): JSX.Element => (
+  <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
+    {children}
+  </h1>
+);

src/components/UI/Typography/H2.tsx

@@ -0,0 +1,9 @@
+export interface H2Props {
+  children: React.ReactNode;
+}
+
+export const H2 = ({ children }: H2Props): JSX.Element => (
+  <h2 className="scroll-m-20 border-b border-b-slate-200 pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0 dark:border-b-slate-700">
+    {children}
+  </h2>
+);

src/components/UI/Typography/H3.tsx

@@ -0,0 +1,9 @@
+export interface H3Props {
+  children: React.ReactNode;
+}
+
+export const H3 = ({ children }: H3Props): JSX.Element => (
+  <h3 className="scroll-m-20 text-2xl font-semibold tracking-tight">
+    {children}
+  </h3>
+);

src/components/UI/Typography/H4.tsx

@@ -0,0 +1,17 @@
+import { cn } from "@app/core/utils/cn.js";
+
+export interface H4Props {
+  className?: string;
+  children: React.ReactNode;
+}
+
+export const H4 = ({ className, children }: H4Props): JSX.Element => (
+  <h4
+    className={cn(
+      "scroll-m-20 text-xl font-semibold tracking-tight",
+      className
+    )}
+  >
+    {children}
+  </h4>
+);

src/components/UI/Typography/Link.tsx

@@ -0,0 +1,15 @@
+export interface LinkProps {
+  href: string;
+  children: React.ReactNode;
+}
+
+export const Link = ({ href, children }: LinkProps): JSX.Element => (
+  <a
+    href={href}
+    target={"_blank"}
+    rel="noopener noreferrer"
+    className="font-medium text-slate-900 underline underline-offset-4 dark:text-slate-50"
+  >
+    {children}
+  </a>
+);

src/components/UI/Typography/P.tsx

@@ -0,0 +1,7 @@
+export interface PProps {
+  children: React.ReactNode;
+}
+
+export const P = ({ children }: PProps): JSX.Element => (
+  <p className="leading-7 [&:not(:first-child)]:mt-6">{children}</p>
+);

src/components/UI/Typography/Subtle.tsx

@@ -0,0 +1,7 @@
+export interface SubtleProps {
+  children: React.ReactNode;
+}
+
+export const Subtle = ({ children }: SubtleProps): JSX.Element => (
+  <p className="text-sm text-slate-500 dark:text-slate-400">{children}</p>
+);