fix: dashboard layout styles (#86)

* fix: dashboard layout scroll

* feat: dashboard nav style animation

* chore: code input font

* style: format code

* pref: alert component extraction

* fix: global font var not found

* fix: code path beak line

* chore: remove framer-motion

* fix: status color

components/dashboard/settings/certificates/add-certificate.tsx

@@ -1,24 +1,25 @@
 import { Button } from "@/components/ui/button";
 import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
 } from "@/components/ui/dialog";
 import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/utils/api";
+import { AlertBlock } from "@/components/shared/alert-block";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { AlertTriangle } from "lucide-react";
 import { useEffect } from "react";
@@ -26,140 +27,135 @@ import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
 
+const certificateDataHolder = `-----BEGIN CERTIFICATE-----\nMIIFRDCCAyygAwIBAgIUEPOR47ys6VDwMVB9tYoeEka83uQwDQYJKoZIhvcNAQELBQAwGTEXMBUGA1UEAwwObWktZG9taW5pby5jb20wHhcNMjQwMzExMDQyNzU3WhcN\n------END CERTIFICATE-----`;
+
 const addCertificate = z.object({
-  name: z.string().min(1, "Name is required"),
-  certificateData: z.string().min(1, "Certificate data is required"),
-  privateKey: z.string().min(1, "Private key is required"),
-  autoRenew: z.boolean().optional(),
+	name: z.string().min(1, "Name is required"),
+	certificateData: z.string().min(1, "Certificate data is required"),
+	privateKey: z.string().min(1, "Private key is required"),
+	autoRenew: z.boolean().optional(),
 });
 
 type AddCertificate = z.infer<typeof addCertificate>;
 
 export const AddCertificate = () => {
-  const utils = api.useUtils();
+	const utils = api.useUtils();
 
-  const { mutateAsync, isError, error, isLoading } =
-    api.certificates.create.useMutation();
+	const { mutateAsync, isError, error, isLoading } =
+		api.certificates.create.useMutation();
 
-  const form = useForm<AddCertificate>({
-    defaultValues: {
-      name: "",
-      certificateData: "",
-      privateKey: "",
-      autoRenew: false,
-    },
-    resolver: zodResolver(addCertificate),
-  });
-  useEffect(() => {
-    form.reset();
-  }, [form, form.formState.isSubmitSuccessful, form.reset]);
+	const form = useForm<AddCertificate>({
+		defaultValues: {
+			name: "",
+			certificateData: "",
+			privateKey: "",
+			autoRenew: false,
+		},
+		resolver: zodResolver(addCertificate),
+	});
+	useEffect(() => {
+		form.reset();
+	}, [form, form.formState.isSubmitSuccessful, form.reset]);
 
-  const onSubmit = async (data: AddCertificate) => {
-    await mutateAsync({
-      name: data.name,
-      certificateData: data.certificateData,
-      privateKey: data.privateKey,
-      autoRenew: data.autoRenew,
-    })
-      .then(async () => {
-        toast.success("Certificate Created");
-        await utils.certificates.all.invalidate();
-      })
-      .catch(() => {
-        toast.error("Error to create the Certificate");
-      });
-  };
-  return (
-    <Dialog>
-      <DialogTrigger className="" asChild>
-        <Button>Add Certificate</Button>
-      </DialogTrigger>
-      <DialogContent className="max-h-screen  overflow-y-auto sm:max-w-2xl">
-        <DialogHeader>
-          <DialogTitle>Add Certificate</DialogTitle>
-          <DialogDescription>Add a new certificate</DialogDescription>
-        </DialogHeader>
-        {isError && (
-          <div className="flex flex-row gap-4 rounded-lg bg-red-50 p-2 dark:bg-red-950">
-            <AlertTriangle className="text-red-600 dark:text-red-400" />
-            <span className="text-sm text-red-600 dark:text-red-400">
-              {error?.message}
-            </span>
-          </div>
-        )}
+	const onSubmit = async (data: AddCertificate) => {
+		await mutateAsync({
+			name: data.name,
+			certificateData: data.certificateData,
+			privateKey: data.privateKey,
+			autoRenew: data.autoRenew,
+		})
+			.then(async () => {
+				toast.success("Certificate Created");
+				await utils.certificates.all.invalidate();
+			})
+			.catch(() => {
+				toast.error("Error to create the Certificate");
+			});
+	};
+	return (
+		<Dialog>
+			<DialogTrigger className="" asChild>
+				<Button>Add Certificate</Button>
+			</DialogTrigger>
+			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-2xl">
+				<DialogHeader>
+					<DialogTitle>Add Certificate</DialogTitle>
+					<DialogDescription>Add a new certificate</DialogDescription>
+				</DialogHeader>
+				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
 
-        <Form {...form}>
-          <form
-            id="hook-form-add-certificate"
-            onSubmit={form.handleSubmit(onSubmit)}
-            className="grid w-full gap-4 "
-          >
-            <FormField
-              control={form.control}
-              name="name"
-              render={({ field }) => {
-                return (
-                  <FormItem>
-                    <FormLabel>Certificate Name</FormLabel>
-                    <FormControl>
-                      <Input placeholder={"My Certificate"} {...field} />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                );
-              }}
-            />
-            <FormField
-              control={form.control}
-              name="certificateData"
-              render={({ field }) => (
-                <FormItem>
-                  <div className="space-y-0.5">
-                    <FormLabel>Certificate Data</FormLabel>
-                  </div>
-                  <FormControl>
-                    <Textarea
-                      className="h-32"
-                      placeholder={`-----BEGIN CERTIFICATE-----\nMIIFRDCCAyygAwIBAgIUEPOR47ys6VDwMVB9tYoeEka83uQwDQYJKoZIhvcNAQELBQAwGTEXMBUGA1UEAwwObWktZG9taW5pby5jb20wHhcNMjQwMzExMDQyNzU3WhcN\n------END CERTIFICATE-----`}
-                      {...field}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <FormField
-              control={form.control}
-              name="privateKey"
-              render={({ field }) => (
-                <FormItem>
-                  <div className="space-y-0.5">
-                    <FormLabel>Private Key</FormLabel>
-                  </div>
-                  <FormControl>
-                    <Textarea
-                      className="h-32"
-                      placeholder={`-----BEGIN CERTIFICATE-----\nMIIFRDCCAyygAwIBAgIUEPOR47ys6VDwMVB9tYoeEka83uQwDQYJKoZIhvcNAQELBQAwGTEXMBUGA1UEAwwObWktZG9taW5pby5jb20wHhcNMjQwMzExMDQyNzU3WhcN\n------END CERTIFICATE-----`}
-                      {...field}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-          </form>
+				<Form {...form}>
+					<form
+						id="hook-form-add-certificate"
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-4 "
+					>
+						<FormField
+							control={form.control}
+							name="name"
+							render={({ field }) => {
+								return (
+									<FormItem>
+										<FormLabel>Certificate Name</FormLabel>
+										<FormControl>
+											<Input placeholder={"My Certificate"} {...field} />
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								);
+							}}
+						/>
+						<FormField
+							control={form.control}
+							name="certificateData"
+							render={({ field }) => (
+								<FormItem>
+									<div className="space-y-0.5">
+										<FormLabel>Certificate Data</FormLabel>
+									</div>
+									<FormControl>
+										<Textarea
+											className="h-32"
+											placeholder={certificateDataHolder}
+											{...field}
+										/>
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="privateKey"
+							render={({ field }) => (
+								<FormItem>
+									<div className="space-y-0.5">
+										<FormLabel>Private Key</FormLabel>
+									</div>
+									<FormControl>
+										<Textarea
+											className="h-32"
+											placeholder={certificateDataHolder}
+											{...field}
+										/>
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+					</form>
 
-          <DialogFooter className="flex w-full flex-row !justify-between pt-3">
-            <Button
-              isLoading={isLoading}
-              form="hook-form-add-certificate"
-              type="submit"
-            >
-              Create
-            </Button>
-          </DialogFooter>
-        </Form>
-      </DialogContent>
-    </Dialog>
-  );
+					<DialogFooter className="flex w-full flex-row !justify-between pt-3">
+						<Button
+							isLoading={isLoading}
+							form="hook-form-add-certificate"
+							type="submit"
+						>
+							Create
+						</Button>
+					</DialogFooter>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
 };

components/dashboard/settings/destination/add-destination.tsx

@@ -18,8 +18,8 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
+import { AlertBlock } from "@/components/shared/alert-block";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { AlertTriangle } from "lucide-react";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -87,14 +87,7 @@ export const AddDestination = () => {
 						In this section you can add destinations for your backups.
 					</DialogDescription>
 				</DialogHeader>
-				{isError && (
-					<div className="flex flex-row gap-4 rounded-lg bg-red-50 p-2 dark:bg-red-950">
-						<AlertTriangle className="text-red-600 dark:text-red-400" />
-						<span className="text-sm text-red-600 dark:text-red-400">
-							{error?.message}
-						</span>
-					</div>
-				)}
+				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
 
 				<Form {...form}>
 					<form

components/dashboard/settings/destination/update-destination.tsx

@@ -18,8 +18,9 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
+import { AlertBlock } from "@/components/shared/alert-block";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { AlertTriangle, PenBoxIcon } from "lucide-react";
+import { PenBoxIcon } from "lucide-react";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -111,14 +112,7 @@ export const UpdateDestination = ({ destinationId }: Props) => {
 						Update the current destination config
 					</DialogDescription>
 				</DialogHeader>
-				{isError && (
-					<div className="flex flex-row gap-4 rounded-lg bg-red-50 p-2 dark:bg-red-950">
-						<AlertTriangle className="text-red-600 dark:text-red-400" />
-						<span className="text-sm text-red-600 dark:text-red-400">
-							{error?.message}
-						</span>
-					</div>
-				)}
+				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
 
 				<Form {...form}>
 					<form

components/dashboard/settings/users/add-permissions.tsx

@@ -21,8 +21,9 @@ import {
 import { Switch } from "@/components/ui/switch";
 import { extractServices } from "@/pages/dashboard/project/[projectId]";
 import { api } from "@/utils/api";
+import { AlertBlock } from "@/components/shared/alert-block";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { AlertTriangle, ListTodo } from "lucide-react";
+import { ListTodo } from "lucide-react";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -115,14 +116,7 @@ export const AddUserPermissions = ({ userId }: Props) => {
 					<DialogTitle>Permissions</DialogTitle>
 					<DialogDescription>Add or remove permissions</DialogDescription>
 				</DialogHeader>
-				{isError && (
-					<div className="flex flex-row gap-4 rounded-lg bg-red-50 p-2 dark:bg-red-950">
-						<AlertTriangle className="text-red-600 dark:text-red-400" />
-						<span className="text-sm text-red-600 dark:text-red-400">
-							{error?.message}
-						</span>
-					</div>
-				)}
+				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
 
 				<Form {...form}>
 					<form

components/dashboard/settings/users/add-user.tsx

@@ -19,8 +19,8 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
+import { AlertBlock } from "@/components/shared/alert-block";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { AlertTriangle } from "lucide-react";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -73,14 +73,7 @@ export const AddUser = () => {
 					<DialogTitle>Add User</DialogTitle>
 					<DialogDescription>Invite a new user</DialogDescription>
 				</DialogHeader>
-				{isError && (
-					<div className="flex flex-row gap-4 rounded-lg bg-red-50 p-2 dark:bg-red-950">
-						<AlertTriangle className="text-red-600 dark:text-red-400" />
-						<span className="text-sm text-red-600 dark:text-red-400">
-							{error?.message}
-						</span>
-					</div>
-				)}
+				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
 
 				<Form {...form}>
 					<form

components/dashboard/settings/users/show-users.tsx

@@ -47,7 +47,7 @@ export const ShowUsers = () => {
 										key={user.userId}
 										className="flex gap-2 flex-col justify-start border p-4 rounded-lg"
 									>
-										<span className="text-sm text-muted-foreground">
+										<span className="text-sm text-foreground">
 											{user.auth.email}
 										</span>
 										{!user.isRegistered && (

components/dashboard/settings/users/update-user.tsx

@@ -18,11 +18,12 @@ import {
 } from "@/components/ui/form";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
+import { AlertBlock } from "@/components/shared/alert-block";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useEffect } from "react";
 import { toast } from "sonner";
 import { Input } from "@/components/ui/input";
-import { AlertTriangle, SquarePen } from "lucide-react";
+import { SquarePen } from "lucide-react";
 import { api } from "@/utils/api";
 
 const updateUserSchema = z.object({
@@ -100,14 +101,7 @@ export const UpdateUser = ({ authId }: Props) => {
 					<DialogTitle>Update User</DialogTitle>
 					<DialogDescription>Update the user</DialogDescription>
 				</DialogHeader>
-				{isError && (
-					<div className="flex flex-row gap-4 rounded-lg bg-red-50 p-2 dark:bg-red-950">
-						<AlertTriangle className="text-red-600 dark:text-red-400" />
-						<span className="text-sm text-red-600 dark:text-red-400">
-							{error.message}
-						</span>
-					</div>
-				)}
+				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
 
 				<div className="grid gap-4">
 					<div className="grid items-center gap-4">

components/dashboard/settings/web-server/show-main-traefik-config.tsx

@@ -18,8 +18,8 @@ import {
 } from "@/components/ui/form";
 import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/utils/api";
+import { AlertBlock } from "@/components/shared/alert-block";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { AlertTriangle } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -89,14 +89,7 @@ export const ShowMainTraefikConfig = ({ children }: Props) => {
 					<DialogTitle>Update traefik config</DialogTitle>
 					<DialogDescription>Update the traefik config</DialogDescription>
 				</DialogHeader>
-				{isError && (
-					<div className="flex flex-row gap-4 rounded-lg bg-red-50 p-2 dark:bg-red-950">
-						<AlertTriangle className="text-red-600 dark:text-red-400" />
-						<span className="text-sm text-red-600 dark:text-red-400">
-							{error?.message}
-						</span>
-					</div>
-				)}
+				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
 
 				<Form {...form}>
 					<form
@@ -113,7 +106,7 @@ export const ShowMainTraefikConfig = ({ children }: Props) => {
 										<FormLabel>Traefik config</FormLabel>
 										<FormControl>
 											<Textarea
-												className="h-[35rem]"
+												className="h-[35rem] font-mono"
 												placeholder={`providers:
     docker:
         defaultRule: 'Host('dokploy.com')'
@@ -136,8 +129,10 @@ export const ShowMainTraefikConfig = ({ children }: Props) => {
 										<pre>
 											<FormMessage />
 										</pre>
-										<div className="flex justify-end absolute z-50 right-6 top-10">
+										<div className="flex justify-end absolute z-50 right-6 top-0">
 											<Button
+												className="shadow-sm"
+												variant="secondary"
 												type="button"
 												onClick={async () => {
 													setCanEdit(!canEdit);

components/dashboard/settings/web-server/show-server-middleware-config.tsx

@@ -18,8 +18,8 @@ import {
 } from "@/components/ui/form";
 import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/utils/api";
+import { AlertBlock } from "@/components/shared/alert-block";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { AlertTriangle } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -92,14 +92,7 @@ export const ShowServerMiddlewareConfig = ({ children }: Props) => {
 					<DialogTitle>Update Middleware config</DialogTitle>
 					<DialogDescription>Update the middleware config</DialogDescription>
 				</DialogHeader>
-				{isError && (
-					<div className="flex flex-row gap-4 rounded-lg bg-red-50 p-2 dark:bg-red-950">
-						<AlertTriangle className="text-red-600 dark:text-red-400" />
-						<span className="text-sm text-red-600 dark:text-red-400">
-							{error?.message}
-						</span>
-					</div>
-				)}
+				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
 
 				<Form {...form}>
 					<form
@@ -116,7 +109,7 @@ export const ShowServerMiddlewareConfig = ({ children }: Props) => {
 										<FormLabel>Traefik config</FormLabel>
 										<FormControl>
 											<Textarea
-												className="h-[35rem]"
+												className="h-[35rem] font-mono"
 												placeholder={`http:
 routers:
     router-name:
@@ -134,8 +127,10 @@ routers:
 										<pre>
 											<FormMessage />
 										</pre>
-										<div className="flex justify-end absolute z-50 right-6 top-10">
+										<div className="flex justify-end absolute z-50 right-6 top-0">
 											<Button
+												className="shadow-sm"
+												variant="secondary"
 												type="button"
 												onClick={async () => {
 													setCanEdit(!canEdit);

components/dashboard/settings/web-server/show-server-traefik-config.tsx

@@ -18,8 +18,8 @@ import {
 } from "@/components/ui/form";
 import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/utils/api";
+import { AlertBlock } from "@/components/shared/alert-block";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { AlertTriangle } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -92,14 +92,7 @@ export const ShowServerTraefikConfig = ({ children }: Props) => {
 					<DialogTitle>Update traefik config</DialogTitle>
 					<DialogDescription>Update the traefik config</DialogDescription>
 				</DialogHeader>
-				{isError && (
-					<div className="flex flex-row gap-4 rounded-lg bg-red-50 p-2 dark:bg-red-950">
-						<AlertTriangle className="text-red-600 dark:text-red-400" />
-						<span className="text-sm text-red-600 dark:text-red-400">
-							{error?.message}
-						</span>
-					</div>
-				)}
+				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
 
 				<Form {...form}>
 					<form
@@ -116,7 +109,7 @@ export const ShowServerTraefikConfig = ({ children }: Props) => {
 										<FormLabel>Traefik config</FormLabel>
 										<FormControl>
 											<Textarea
-												className="h-[35rem]"
+												className="h-[35rem] font-mono"
 												placeholder={`http:
 routers:
     router-name:
@@ -134,8 +127,10 @@ routers:
 										<pre>
 											<FormMessage />
 										</pre>
-										<div className="flex justify-end absolute z-50 right-6 top-10">
+										<div className="flex justify-end absolute z-50 right-6 top-0">
 											<Button
+												className="shadow-sm"
+												variant="secondary"
 												type="button"
 												onClick={async () => {
 													setCanEdit(!canEdit);