From 6291796091fd8fd61690336b3ceb27c51d24b146 Mon Sep 17 00:00:00 2001
From: NiallJoeMaher <nialljoemaher@gmail.com>
Date: Mon, 30 Sep 2024 15:27:44 +0100
Subject: [PATCH] Scope global input styles

---
 app/(app)/create/[[...paramsArr]]/_client.tsx | 57 ++++++++++---------
 app/(app)/settings/_client.tsx                |  4 +-
 styles/globals.css                            | 34 ++++++-----
 3 files changed, 48 insertions(+), 47 deletions(-)

diff --git a/app/(app)/create/[[...paramsArr]]/_client.tsx b/app/(app)/create/[[...paramsArr]]/_client.tsx
index 85e9d96e..36c36553 100644
--- a/app/(app)/create/[[...paramsArr]]/_client.tsx
+++ b/app/(app)/create/[[...paramsArr]]/_client.tsx
@@ -369,7 +369,7 @@ const Create = ({ session }: { session: Session }) => {
     <>
       <form onSubmit={handleSubmit(onSubmit)}>
         <Transition show={open} as={Fragment}>
-          <div className="fixed bottom-0 left-0 top-0 z-50 h-screen w-full overflow-y-scroll bg-white dark:bg-black">
+          <div className="old-input fixed bottom-0 left-0 top-0 z-50 h-screen w-full overflow-y-scroll bg-white dark:bg-black">
             <div className="m-2 max-w-full">
               <button
                 type="button"
@@ -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={`inline-flex 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
@@ -677,7 +677,7 @@ const Create = ({ session }: { session: Session }) => {
                                   width={16}
                                   className="mr-1"
                                 />
-                              )}{" "}
+                              )}
                               Upload image
                             </label>
                             <input
@@ -707,30 +707,33 @@ const Create = ({ session }: { session: Session }) => {
                               </button>
                             )}
                           </div>
-                          {/* TODO: FOLLOW UP WITH THIS, LABEL SHOULD BE VISIBLE */}
-                          <label htmlFor="article-title" className="sr-only">
-                            Article title
-                          </label>
-                          <input
-                            className="border-none bg-white text-2xl leading-5 outline-none placeholder:text-neutral-400 focus:bg-neutral-200 dark:bg-neutral-900 placeholder:dark:text-neutral-700 focus:dark:bg-black"
-                            placeholder="Article title"
-                            type="text"
-                            id="article-title"
-                            {...register("title")}
-                          />
-
-                          {/* TODO: FOLLOW UP WITH THIS, LABEL SHOULD BE VISIBLE */}
-                          <label htmlFor="article-content" className="sr-only">
-                            Enter Article Content
-                          </label>
-                          <CustomTextareaAutosize
-                            placeholder="Enter your content here 💖"
-                            className="mb-8 border-none bg-white text-lg shadow-none outline-none placeholder:text-neutral-400 focus:bg-neutral-200 dark:bg-neutral-900 placeholder:dark:text-neutral-700 dark:focus:bg-black"
-                            minRows={25}
-                            id="article-content"
-                            {...register("body")}
-                            inputRef={textareaRef}
-                          />
+                          <div className="flex flex-col">
+                            <label htmlFor="article-title" className="sr-only">
+                              Article title
+                            </label>
+                            <input
+                              className="border-none bg-white text-2xl leading-5 placeholder:text-neutral-400 focus:bg-neutral-200 focus:ring-0 dark:bg-neutral-900 placeholder:dark:text-neutral-700 focus:dark:bg-black"
+                              placeholder="Article title"
+                              type="text"
+                              id="article-title"
+                              {...register("title")}
+                            />
+
+                            <label
+                              htmlFor="article-content"
+                              className="sr-only"
+                            >
+                              Enter Article Content
+                            </label>
+                            <CustomTextareaAutosize
+                              placeholder="Enter your content here 💖"
+                              className="mb-8 border-none bg-white text-lg shadow-none outline-none placeholder:text-neutral-400 focus:bg-neutral-200 focus:ring-0 dark:bg-neutral-900 placeholder:dark:text-neutral-700 dark:focus:bg-black"
+                              minRows={25}
+                              id="article-content"
+                              {...register("body")}
+                              inputRef={textareaRef}
+                            />
+                          </div>
 
                           <div className="flex items-center justify-between">
                             <>
diff --git a/app/(app)/settings/_client.tsx b/app/(app)/settings/_client.tsx
index 833b70d2..216bec8f 100644
--- a/app/(app)/settings/_client.tsx
+++ b/app/(app)/settings/_client.tsx
@@ -102,7 +102,7 @@ const Settings = ({ profile }: { profile: User }) => {
       const { size, type } = file;
 
       await getUploadUrl(
-        { size, type, config: { kind: "uploads", userId: "me" } },
+        { size, type },
         {
           onError(error) {
             if (error) return toast.error(error.message);
@@ -128,7 +128,7 @@ const Settings = ({ profile }: { profile: User }) => {
   };
 
   return (
-    <div className="py-8">
+    <div className="old-input py-8">
       <div className="mx-auto flex w-full max-w-2xl flex-grow flex-col justify-center px-4 sm:px-6 lg:col-span-9">
         <div className="text-neutral-700">
           <form onSubmit={handleSubmit(onSubmit)}>
diff --git a/styles/globals.css b/styles/globals.css
index 05c5bd7e..0421fa80 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -18,31 +18,29 @@ body {
 @tailwind components;
 @tailwind utilities;
 
-/* Removed search styles because it upset new search bar */
-
 @layer base {
-  [type="text"],
-  [type="email"],
-  [type="url"],
-  [type="password"],
-  [type="number"],
-  [type="date"],
-  [type="datetime-local"],
-  [type="month"],
-  [type="tel"],
-  [type="time"],
-  [type="week"],
-  [multiple],
-  textarea,
-  select {
+  .old-input [type="text"]:not(#article-title),
+  .old-input [type="email"],
+  .old-input [type="url"],
+  .old-input [type="password"],
+  .old-input [type="number"],
+  .old-input [type="date"],
+  .old-input [type="datetime-local"],
+  .old-input [type="month"],
+  .old-input [type="tel"],
+  .old-input [type="time"],
+  .old-input [type="week"],
+  .old-input [multiple],
+  .old-input textarea:not(#article-content),
+  .old-input select {
     @apply mt-1 block w-full border px-2 py-2 text-black shadow-sm ring-offset-1 focus:border-pink-500 focus:outline-none focus:ring-2 focus:ring-neutral-300 disabled:opacity-50 dark:border-white dark:bg-black dark:text-white sm:text-sm;
   }
 
-  a {
+  .old-input a {
     @apply focus-style;
   }
 
-  label {
+  .old-input label {
     @apply block text-sm font-medium text-neutral-900 dark:text-white;
   }
 }