Skip to content

Commit a03b33e

Browse files
NiallJoeMaherNiallJoeMaher
authored
Scope global input styles (#1042)
1 parent 5948ae1 commit a03b33e

File tree

3 files changed

+48
-47
lines changed

3 files changed

+48
-47
lines changed

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

Lines changed: 30 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -369,7 +369,7 @@ const Create = ({ session }: { session: Session }) => {
369369
<>
370370
<form onSubmit={handleSubmit(onSubmit)}>
371371
<Transition show={open} as={Fragment}>
372-
<div className="fixed bottom-0 left-0 top-0 z-50 h-screen w-full overflow-y-scroll bg-white dark:bg-black">
372+
<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">
373373
<div className="m-2 max-w-full">
374374
<button
375375
type="button"
@@ -663,7 +663,7 @@ const Create = ({ session }: { session: Session }) => {
663663
<div className="mb-4 ml-2 flex items-center gap-2">
664664
<label
665665
htmlFor="file-input"
666-
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"} `}
666+
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"} `}
667667
>
668668
{uploadStatus === "loading" ? (
669669
<LoaderCircle
@@ -677,7 +677,7 @@ const Create = ({ session }: { session: Session }) => {
677677
width={16}
678678
className="mr-1"
679679
/>
680-
)}{" "}
680+
)}
681681
Upload image
682682
</label>
683683
<input
@@ -707,30 +707,33 @@ const Create = ({ session }: { session: Session }) => {
707707
</button>
708708
)}
709709
</div>
710-
{/* TODO: FOLLOW UP WITH THIS, LABEL SHOULD BE VISIBLE */}
711-
<label htmlFor="article-title" className="sr-only">
712-
Article title
713-
</label>
714-
<input
715-
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"
716-
placeholder="Article title"
717-
type="text"
718-
id="article-title"
719-
{...register("title")}
720-
/>
721-
722-
{/* TODO: FOLLOW UP WITH THIS, LABEL SHOULD BE VISIBLE */}
723-
<label htmlFor="article-content" className="sr-only">
724-
Enter Article Content
725-
</label>
726-
<CustomTextareaAutosize
727-
placeholder="Enter your content here 💖"
728-
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"
729-
minRows={25}
730-
id="article-content"
731-
{...register("body")}
732-
inputRef={textareaRef}
733-
/>
710+
<div className="flex flex-col">
711+
<label htmlFor="article-title" className="sr-only">
712+
Article title
713+
</label>
714+
<input
715+
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"
716+
placeholder="Article title"
717+
type="text"
718+
id="article-title"
719+
{...register("title")}
720+
/>
721+
722+
<label
723+
htmlFor="article-content"
724+
className="sr-only"
725+
>
726+
Enter Article Content
727+
</label>
728+
<CustomTextareaAutosize
729+
placeholder="Enter your content here 💖"
730+
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"
731+
minRows={25}
732+
id="article-content"
733+
{...register("body")}
734+
inputRef={textareaRef}
735+
/>
736+
</div>
734737

735738
<div className="flex items-center justify-between">
736739
<>

‎app/(app)/settings/_client.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ const Settings = ({ profile }: { profile: User }) => {
102102
const { size, type } = file;
103103

104104
await getUploadUrl(
105-
{ size, type, config: { kind: "uploads", userId: "me" } },
105+
{ size, type },
106106
{
107107
onError(error) {
108108
if (error) return toast.error(error.message);
@@ -128,7 +128,7 @@ const Settings = ({ profile }: { profile: User }) => {
128128
};
129129

130130
return (
131-
<div className="py-8">
131+
<div className="old-input py-8">
132132
<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">
133133
<div className="text-neutral-700">
134134
<form onSubmit={handleSubmit(onSubmit)}>

‎styles/globals.css‎

Lines changed: 16 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -18,31 +18,29 @@ body {
1818
@tailwind components;
1919
@tailwind utilities;
2020

21-
/* Removed search styles because it upset new search bar */
22-
2321
@layer base {
24-
[type="text"],
25-
[type="email"],
26-
[type="url"],
27-
[type="password"],
28-
[type="number"],
29-
[type="date"],
30-
[type="datetime-local"],
31-
[type="month"],
32-
[type="tel"],
33-
[type="time"],
34-
[type="week"],
35-
[multiple],
36-
textarea,
37-
select {
22+
.old-input [type="text"]:not(#article-title),
23+
.old-input [type="email"],
24+
.old-input [type="url"],
25+
.old-input [type="password"],
26+
.old-input [type="number"],
27+
.old-input [type="date"],
28+
.old-input [type="datetime-local"],
29+
.old-input [type="month"],
30+
.old-input [type="tel"],
31+
.old-input [type="time"],
32+
.old-input [type="week"],
33+
.old-input [multiple],
34+
.old-input textarea:not(#article-content),
35+
.old-input select {
3836
@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;
3937
}
4038

41-
a {
39+
.old-input a {
4240
@apply focus-style;
4341
}
4442

45-
label {
43+
.old-input label {
4644
@apply block text-sm font-medium text-neutral-900 dark:text-white;
4745
}
4846
}

0 commit comments

Comments
 (0)