Skip to content

Commit

Permalink
Scope global input styles (#1042)
Browse files Browse the repository at this point in the history
  • Loading branch information
@NiallJoeMaher
NiallJoeMaher authored Sep 30, 2024
1 parent 5948ae1 commit a03b33e
Show file tree
Hide file tree
Showing 3 changed files with 48 additions and 47 deletions.
57 changes: 30 additions & 27 deletions app/(app)/create/[[...paramsArr]]/_client.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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
Expand All @@ -677,7 +677,7 @@ const Create = ({ session }: { session: Session }) => {
width={16}
className="mr-1"
/>
)}{" "}
)}
Upload image
</label>
<input
Expand Down Expand Up @@ -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">
<>
Expand Down
4 changes: 2 additions & 2 deletions app/(app)/settings/_client.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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)}>
Expand Down
34 changes: 16 additions & 18 deletions styles/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
Expand Down

0 comments on commit a03b33e

Please sign in to comment.