Update a bunch of non-breaking packages. (#1096)

* Update a bunch of non-breaking packages.

* Updates file formatting for tailwind prettier bump

app/(app)/[username]/_usernameClient.tsx

@@ -211,7 +211,7 @@ const Profile = ({ profile, isOwner, session }: Props) => {
                   rows={4}
                   name="note"
                   id="note"
-                  className="block w-full rounded-md border-0 py-1.5  shadow-sm ring-1 ring-inset ring-gray-900 placeholder:text-gray-400 focus:ring-2 focus:ring-inset dark:ring-gray-300  sm:text-sm sm:leading-6"
+                  className="block w-full rounded-md border-0 py-1.5 shadow-sm ring-1 ring-inset ring-gray-900 placeholder:text-gray-400 focus:ring-2 focus:ring-inset dark:ring-gray-300 sm:text-sm sm:leading-6"
                   defaultValue={""}
                 />
               </div>

app/(app)/alpha/additional-details/_client.tsx

@@ -154,7 +154,7 @@ function SlideOne({ details }: { details: UserDetails }) {
           </Field>
         </div>
 
-        <div className="mx-4 mt-4 ">
+        <div className="mx-4 mt-4">
           <Field>
             <Label>Surname</Label>
             <Input
@@ -301,17 +301,17 @@ function SlideTwo({ details }: { details: UserDetails }) {
   };
 
   return (
-    <form className="mx-auto  max-w-sm" onSubmit={handleSubmit(onFormSubmit)}>
+    <form className="mx-auto max-w-sm" onSubmit={handleSubmit(onFormSubmit)}>
       <div className="min-h-[32rem]">
-        <div className="mx-4 ">
+        <div className="mx-4">
           <Heading className="mt-16">Demographic</Heading>
           <Subheading>
             This information is private, but helps us improve
           </Subheading>
         </div>
         <Divider className="my-4 mt-4" />
 
-        <div className="mx-4 mt-4 ">
+        <div className="mx-4 mt-4">
           <Field>
             <Label>Gender</Label>
             <Select {...register("gender")} defaultValue="" id="gender">
@@ -333,8 +333,8 @@ function SlideTwo({ details }: { details: UserDetails }) {
         <Divider className="my-4 mt-4" />
 
         <Fieldset>
-          <Legend className="mx-4 ">Date of Birth</Legend>
-          <div className="mx-4 flex justify-between ">
+          <Legend className="mx-4">Date of Birth</Legend>
+          <div className="mx-4 flex justify-between">
             <Field>
               <Select
                 id="year"
@@ -471,7 +471,7 @@ function SlideThree({ details }: { details: UserDetails }) {
   return (
     <form className="mx-auto max-w-sm" onSubmit={handleSubmit(onFormSubmit)}>
       <div className="min-h-[32rem]">
-        <div className="mx-4 ">
+        <div className="mx-4">
           <Heading className="mt-16"> Work and education</Heading>
           <Subheading>
             This information is private but helpful to tailor our events and
@@ -480,7 +480,7 @@ function SlideThree({ details }: { details: UserDetails }) {
         </div>
         <Divider className="my-4 mt-4" />
         <Fieldset>
-          <Field className="mx-4 my-4 ">
+          <Field className="mx-4 my-4">
             <Label>Which best describes you?</Label>
 
             <Select
@@ -504,7 +504,7 @@ function SlideThree({ details }: { details: UserDetails }) {
 
           {getValues("professionalOrStudent") === "Working professional" && (
             <>
-              <Field className="mx-4 my-4 ">
+              <Field className="mx-4 my-4">
                 <Label>Where are you working?</Label>
                 <Input
                   id="workplace"
@@ -518,7 +518,7 @@ function SlideThree({ details }: { details: UserDetails }) {
                 )}
               </Field>
 
-              <Field className="mx-4 my-4 ">
+              <Field className="mx-4 my-4">
                 <Label>What is your job title?</Label>
                 <Input
                   id="job-title"
@@ -536,7 +536,7 @@ function SlideThree({ details }: { details: UserDetails }) {
 
           {getValues("professionalOrStudent") === "Current student" && (
             <>
-              <Field className="mx-4 my-4 ">
+              <Field className="mx-4 my-4">
                 <Label> What is your current level of study?</Label>
                 <Select id="level-of-study" {...register("levelOfStudy")}>
                   <option value="" disabled>
@@ -554,7 +554,7 @@ function SlideThree({ details }: { details: UserDetails }) {
                 )}
               </Field>
 
-              <Field className="mx-4 my-4 ">
+              <Field className="mx-4 my-4">
                 <Label>What are you studying?</Label>
                 <Input
                   id="course"

app/(app)/alpha/new/[[...postIdArr]]/_client.tsx

@@ -129,7 +129,7 @@ const Create = () => {
                       to find and know what your story is about.
                     </p>
                   </div>
-                  <div className="col-span-12  border-b border-neutral-300 pb-4">
+                  <div className="col-span-12 border-b border-neutral-300 pb-4">
                     <Disclosure>
                       {({ open }) => (
                         <>
@@ -199,7 +199,7 @@ const Create = () => {
           </div>
         </Transition>
         {dataStatus === "loading" && postId && (
-          <div className="bg-gray fixed left-0 top-0 z-40 flex h-screen w-screen items-center justify-center ">
+          <div className="bg-gray fixed left-0 top-0 z-40 flex h-screen w-screen items-center justify-center">
             <div className="z-50 flex flex-col items-center border-2 border-black bg-white px-5 py-2 opacity-100">
               <div className="loader-dots relative mt-2 block h-5 w-20">
                 <div className="absolute top-0 mt-1 h-3 w-3 rounded-full bg-gradient-to-r from-orange-400 to-pink-600 shadow-sm"></div>
@@ -222,7 +222,7 @@ const Create = () => {
                 <div className="h-full min-h-[40rem] px-4 py-0 sm:px-6 lg:px-4 lg:py-6">
                   {/* Start main area*/}
                   <div className="relative h-full">
-                    <div className="bg-neutral-900 text-white  shadow-xl">
+                    <div className="bg-neutral-900 text-white shadow-xl">
                       <div className="bg-neutral-900 px-4 py-6 sm:p-6 lg:pb-8">
                         {!body && (
                           <Controller

app/(app)/alpha/sponsorship/page.tsx

@@ -72,7 +72,7 @@ const Sponsorship = () => {
             Reach thousands of developers every month!
           </h3>
         </header>
-        <section className="relative bottom-12 flex items-center justify-center gap-8 overflow-hidden sm:bottom-20 sm:gap-20 md:bottom-24  md:gap-36 lg:gap-44">
+        <section className="relative bottom-12 flex items-center justify-center gap-8 overflow-hidden sm:bottom-20 sm:gap-20 md:bottom-24 md:gap-36 lg:gap-44">
           {images.map((image) => (
             <div
               key={image.alt}

app/(app)/articles/_client.tsx

@@ -62,7 +62,7 @@ const ArticlesPage = () => {
     <>
       <div className="mx-2">
         <div className="mt-8 flex max-w-5xl items-center justify-between border-b border-b-neutral-300 pb-2 dark:border-b-neutral-600 sm:mx-auto sm:max-w-2xl lg:max-w-5xl">
-          <h1 className="text-3xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50 sm:text-4xl ">
+          <h1 className="text-3xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50 sm:text-4xl">
             {typeof tag === "string" ? (
               <div className="flex items-center justify-center">
                 <TagIcon className="mr-3 h-6 w-6 text-neutral-800 dark:text-neutral-200" />

app/(app)/code-of-conduct/page.tsx

@@ -8,9 +8,9 @@ const CodeOfConduct = () => {
   return (
     <div>
       <main className="relative bg-white p-4 shadow-lg dark:border-neutral-600 dark:border-l-pink-600 dark:bg-neutral-900">
-        <div className="lg:max-w-8xl relative px-4 pb-16 pt-12 sm:px-6 sm:pt-16 lg:mx-auto lg:px-8 ">
+        <div className="lg:max-w-8xl relative px-4 pb-16 pt-12 sm:px-6 sm:pt-16 lg:mx-auto lg:px-8">
           <div className="lg:pl-8">
-            <div className="mx-auto max-w-prose text-base  ">
+            <div className="mx-auto max-w-prose text-base">
               <h1 className="mt-2 border-b-2 pb-8 text-3xl font-extrabold leading-8 tracking-tight text-black dark:text-white sm:text-6xl">
                 Code Of Conduct
               </h1>

app/(app)/create/[[...paramsArr]]/_client.tsx

@@ -485,7 +485,7 @@ const Create = ({ session }: { session: Session }) => {
                         </div>
                       )}
 
-                    <div className="col-span-12  border-b border-neutral-300 pb-4">
+                    <div className="col-span-12 border-b border-neutral-300 pb-4">
                       <Disclosure>
                         {({ open }) => (
                           <>
@@ -588,7 +588,7 @@ const Create = ({ session }: { session: Session }) => {
           </div>
         </Transition>
         {dataStatus === "loading" && postId && (
-          <div className="bg-gray fixed left-0 top-0 z-40 flex h-screen w-screen items-center justify-center ">
+          <div className="bg-gray fixed left-0 top-0 z-40 flex h-screen w-screen items-center justify-center">
             <div className="z-50 flex flex-col items-center border-2 border-black bg-white px-5 py-2 opacity-100">
               <div className="loader-dots relative mt-2 block h-5 w-20">
                 <div className="absolute top-0 mt-1 h-3 w-3 rounded-full bg-gradient-to-r from-orange-400 to-pink-600 shadow-sm"></div>
@@ -607,7 +607,7 @@ const Create = ({ session }: { session: Session }) => {
           <div className="mx-auto w-full max-w-7xl flex-grow lg:flex xl:px-8">
             {/* Left sidebar & main wrapper */}
             <div className="min-w-0 flex-1 xl:flex">
-              <div className="xl:w-64 xl:flex-shrink-0 ">
+              <div className="xl:w-64 xl:flex-shrink-0">
                 <div className="h-full py-6 pl-4 pr-6 sm:pl-6 lg:px-4 xl:pl-0">
                   {/* Start left column area */}
                   <div className="relative h-full">
@@ -635,7 +635,7 @@ const Create = ({ session }: { session: Session }) => {
                 </div>
               </div>
               <div className="lg:min-w-0 lg:flex-1">
-                <div className="h-full px-4 py-0 sm:px-6 lg:px-4 lg:py-6 ">
+                <div className="h-full px-4 py-0 sm:px-6 lg:px-4 lg:py-6">
                   {/* Start main area*/}
                   <div className="relative h-full">
                     <div className="bg-white text-black shadow dark:bg-neutral-900 dark:text-white">
@@ -663,7 +663,7 @@ const Create = ({ session }: { session: Session }) => {
                           <div className="mb-4 ml-2 flex items-center gap-2">
                             <label
                               htmlFor="file-input"
-                              className={`flex flex-row items-center gap-1 rounded-md border p-2 text-sm ${uploadStatus === "loading" ? "border-neutral-600 font-medium text-neutral-600 hover:cursor-not-allowed dark:border-neutral-500 dark:text-neutral-500" : "border-neutral-500  font-medium text-neutral-500 hover:bg-neutral-200 dark:border-neutral-600 dark:text-neutral-600 hover:dark:bg-neutral-800 hover:dark:text-neutral-400"}  `}
+                              className={`flex flex-row items-center gap-1 rounded-md border p-2 text-sm ${uploadStatus === "loading" ? "border-neutral-600 font-medium text-neutral-600 hover:cursor-not-allowed dark:border-neutral-500 dark:text-neutral-500" : "border-neutral-500 font-medium text-neutral-500 hover:bg-neutral-200 dark:border-neutral-600 dark:text-neutral-600 hover:dark:bg-neutral-800 hover:dark:text-neutral-400"} `}
                             >
                               {uploadStatus === "loading" ? (
                                 <LoaderCircle

app/(app)/error.tsx

@@ -37,9 +37,8 @@ export default function NotFound() {
             </Link>
           </div>
           <div className="mt-6 text-base text-neutral-500">
-            Or{" "}
-            <span className=" font-semibold">if you are feeling helpful</span>,
-            send us more details by opening an issue{" "}
+            Or <span className="font-semibold">if you are feeling helpful</span>
+            , send us more details by opening an issue{" "}
             <a
               className="bg-gradient-to-r from-orange-400 to-pink-600 bg-clip-text text-base font-semibold tracking-wide text-transparent"
               target="_blank"

app/(app)/get-started/_client.tsx

@@ -48,7 +48,7 @@ const GetStarted: NextPage = () => {
           <>
             <div>
               <input
-                className="w-full flex-auto appearance-none rounded-md border-neutral-200 bg-white pl-6 text-base font-medium text-neutral-950 ring-offset-0 placeholder:text-base placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-pink-300 focus:ring-transparent focus:ring-offset-2 dark:border-neutral-600 dark:bg-neutral-900 dark:text-white  [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden [&::-webkit-search-results-button]:hidden [&::-webkit-search-results-decoration]:hidden"
+                className="w-full flex-auto appearance-none rounded-md border-neutral-200 bg-white pl-6 text-base font-medium text-neutral-950 ring-offset-0 placeholder:text-base placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-pink-300 focus:ring-transparent focus:ring-offset-2 dark:border-neutral-600 dark:bg-neutral-900 dark:text-white [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden [&::-webkit-search-results-button]:hidden [&::-webkit-search-results-decoration]:hidden"
                 placeholder="Enter your email"
                 type="email"
                 onChange={(event) => {
@@ -77,8 +77,8 @@ const GetStarted: NextPage = () => {
               >
                 <div className="w-full border-t border-neutral-400 dark:border-gray-600" />
               </div>
-              <div className="relative flex justify-center text-sm font-medium ">
-                <span className="bg-neutral-100 px-6 text-base uppercase text-neutral-600 dark:bg-black  dark:text-neutral-400">
+              <div className="relative flex justify-center text-sm font-medium">
+                <span className="bg-neutral-100 px-6 text-base uppercase text-neutral-600 dark:bg-black dark:text-neutral-400">
                   Or
                 </span>
               </div>

app/(app)/my-posts/_client.tsx

@@ -148,7 +148,7 @@ const MyPosts = () => {
                         </h2>
                       </Link>
                     ) : (
-                      <h2 className=" mb-2 text-2xl font-semibold">{title}</h2>
+                      <h2 className="mb-2 text-2xl font-semibold">{title}</h2>
                     )}
                     <p className="break-words">
                       {excerpt || "No excerpt yet... Write more to see one."}

app/(app)/notifications/_client.tsx

@@ -146,7 +146,7 @@ const Notifications = () => {
                             <div className="flex gap-3 sm:gap-5">
                               <div>
                                 {image && (
-                                  <Link className="flex " href={`/${username}`}>
+                                  <Link className="flex" href={`/${username}`}>
                                     <img
                                       className="h-10 w-10 rounded-full"
                                       src={image}
@@ -185,7 +185,7 @@ const Notifications = () => {
                           <div className="ml-2 flex w-10 flex-col justify-center border-l border-neutral-300 pl-3 dark:border-neutral-700">
                             <button
                               title="Mark as read"
-                              className="h-8 w-8 fill-neutral-600  hover:fill-neutral-500 dark:text-white"
+                              className="h-8 w-8 fill-neutral-600 hover:fill-neutral-500 dark:text-white"
                               onClick={() => mutate({ id })}
                             >
                               <CheckCircleIcon

app/(app)/page.tsx

@@ -43,7 +43,7 @@ const Home = async () => {
 
       <div className="mx-2">
         <div className="mt-6 flex max-w-5xl items-center justify-between border-b border-b-neutral-300 pb-2 dark:border-b-neutral-600 sm:mx-auto sm:max-w-2xl lg:max-w-5xl">
-          <h3 className="text-3xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50 sm:text-4xl ">
+          <h3 className="text-3xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50 sm:text-4xl">
             Trending
           </h3>
         </div>

app/(app)/settings/_client.tsx

@@ -133,7 +133,7 @@ const Settings = ({ profile }: { profile: User }) => {
         <div className="text-neutral-700">
           <form onSubmit={handleSubmit(onSubmit)}>
             {/* Profile section */}
-            <div className="px-4 py-6 sm:p-6 lg:pb-8 ">
+            <div className="px-4 py-6 sm:p-6 lg:pb-8">
               <div>
                 <h2 className="text-3xl font-extrabold tracking-tight text-neutral-800 dark:text-white">
                   Profile Settings
@@ -166,7 +166,7 @@ const Settings = ({ profile }: { profile: User }) => {
                       <div>
                         <label htmlFor="username">Username</label>
                         <div className="mt-1 flex shadow-sm">
-                          <span className="mt-1  flex items-center bg-neutral-800 px-3 text-sm font-semibold text-white dark:bg-white dark:text-black">
+                          <span className="mt-1 flex items-center bg-neutral-800 px-3 text-sm font-semibold text-white dark:bg-white dark:text-black">
                             codu.co/
                           </span>
                           <input
@@ -196,7 +196,7 @@ const Settings = ({ profile }: { profile: User }) => {
                       <div className="mt-1 lg:hidden">
                         <div className="flex items-center">
                           <div
-                            className="relative h-16 w-16 flex-shrink-0 overflow-hidden rounded-full "
+                            className="relative h-16 w-16 flex-shrink-0 overflow-hidden rounded-full"
                             aria-hidden="true"
                           >
                             {profilePhoto.status === "error" ||
@@ -256,7 +256,7 @@ const Settings = ({ profile }: { profile: User }) => {
                           htmlFor="desktop-user-photo"
                           className="absolute inset-0 flex h-full w-full items-center justify-center bg-black bg-opacity-75 text-sm font-medium text-white opacity-0 focus-within:opacity-100 hover:opacity-100"
                         >
-                          <div className=" text-center text-xs">
+                          <div className="text-center text-xs">
                             Change Photo
                           </div>
                           <span className="sr-only"> user photo</span>

app/(app)/sponsorship/page.tsx

@@ -8,7 +8,7 @@ const Sponsorship = () => {
   return (
     <>
       <main className="relative bg-white lg:bg-transparent">
-        <div className="relative px-4 pb-16 pt-12 sm:px-6 sm:pt-16 lg:mx-auto lg:grid lg:max-w-7xl lg:grid-cols-2 lg:px-8 ">
+        <div className="relative px-4 pb-16 pt-12 sm:px-6 sm:pt-16 lg:mx-auto lg:grid lg:max-w-7xl lg:grid-cols-2 lg:px-8">
           <div className="lg:pl-8">
             <div className="mx-auto max-w-prose text-base lg:ml-0 lg:mr-16 lg:max-w-lg">
               <h2 className="bg-gradient-to-r from-orange-400 to-pink-600 bg-clip-text text-xl font-semibold uppercase leading-6 tracking-wide text-transparent">