From 05a221190b7efa76a6ab316c726918e9f6d9a43f Mon Sep 17 00:00:00 2001
From: Mateo Presa Castro <mateopresacastro@gmail.com>
Date: Fri, 8 Nov 2024 13:34:57 +0100
Subject: [PATCH] chore: Fix build and UI

---
 app/[userName]/[samplePackName]/page.tsx |  4 ++--
 components/edit-pack-button.tsx          | 13 ++++++-------
 components/ui/input.tsx                  |  2 +-
 3 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/app/[userName]/[samplePackName]/page.tsx b/app/[userName]/[samplePackName]/page.tsx
index dceed31..0b83116 100644
--- a/app/[userName]/[samplePackName]/page.tsx
+++ b/app/[userName]/[samplePackName]/page.tsx
@@ -36,14 +36,14 @@ export default async function Page({
         <span className="block text-neutral-400">{samplePack.description}</span>
         <Link href={`/${userName}`} prefetch={true}>
           <span className="text-neutral-400 block pt-1 font-medium text-xs">
-            by @{userName}
+            @{userName}
           </span>
         </Link>
         <NumberFlow
           value={Number(samplePack.price.toFixed(2))}
           format={{ style: "currency", currency: "USD" }}
           locales="en-US"
-          className="pt-1"
+          className="pt-4"
         />
         <Button className="font-medium w-full my-6 text-base" size="lg">
           Buy
diff --git a/components/edit-pack-button.tsx b/components/edit-pack-button.tsx
index 6fb96ab..2035dda 100644
--- a/components/edit-pack-button.tsx
+++ b/components/edit-pack-button.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { set, z } from "zod";
+import { z } from "zod";
 import { Button, buttonVariants } from "@/components/ui/button";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useUser } from "@clerk/nextjs";
@@ -40,7 +40,6 @@ import {
   updateSamplePackAction,
 } from "@/lib/db/actions";
 import { urlNameToTitle } from "@/lib/utils";
-import { ChartNoAxesColumnDecreasing } from "lucide-react";
 import { useEffect, useState } from "react";
 
 // TODO: handle image upload
@@ -105,12 +104,12 @@ export default function EditPackButton({
   });
 
   useEffect(() => {
-    if (!newSamplePackName || newSamplePackName === samplePackName) {
+    if (!newSamplePackName) {
       return;
     }
 
     router.push(`/${userName}/${newSamplePackName}`);
-  }, [newSamplePackName]);
+  }, [newSamplePackName, router, samplePackName, userName]);
 
   function onSubmit() {
     // TODO check that user actually changed values
@@ -125,7 +124,7 @@ export default function EditPackButton({
         </Button>
       </DialogTrigger>
       <DialogContent>
-        <DialogHeader>
+        <DialogHeader className="p-1">
           <DialogTitle>Edit sample pack</DialogTitle>
           <DialogDescription>
             If you want to change the samples delete this pack and create a new
@@ -135,7 +134,7 @@ export default function EditPackButton({
         <Form {...form}>
           <form
             onSubmit={form.handleSubmit(onSubmit)}
-            className="space-y-14 w-full pt-8 overflow-y-scroll"
+            className="space-y-8 w-full pt-8 overflow-y-scroll px-1"
           >
             <FormField
               control={form.control}
@@ -183,7 +182,7 @@ export default function EditPackButton({
                 </FormItem>
               )}
             />
-            <div className="flex justify-between items-center">
+            <div className="flex justify-between items-center pt-8">
               <Button type="submit">Submit</Button>
               <AlertDialog>
                 <AlertDialogTrigger
diff --git a/components/ui/input.tsx b/components/ui/input.tsx
index 7b6ffa1..f25bea9 100644
--- a/components/ui/input.tsx
+++ b/components/ui/input.tsx
@@ -10,7 +10,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-9 w-full rounded-md border border-neutral-200 bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-neutral-950 placeholder:text-neutral-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-950 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-800 dark:file:text-neutral-50 dark:placeholder:text-neutral-400 dark:focus-visible:ring-neutral-300",
+          "flex h-9 w-full rounded-xl border border-neutral-200 bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-neutral-950 placeholder:text-neutral-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-950 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-800 dark:file:text-neutral-50 dark:placeholder:text-neutral-400 dark:focus-visible:ring-neutral-300",
           className
         )}
         ref={ref}