xwx.moe/el.xwx.moe
xwx.moe/ el.xwx.moe
1
0
Disbranĉigi 0
Fontkodo Issues Tirpetoj Actions Packages Projects Eldonoj Wiki Activity

better input coloring in darkmode

This commit is contained in:
Daniel 2023-08-17 16:05:44 -04:00
parent 122b331efa
commit bf8a0df4c2
14 changed files with 79 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
components/Modal/Collection/CollectionInfo.tsx
View File

@ -11,6 +11,7 @@ import SubmitButton from "@/components/SubmitButton";
import { HexColorPicker } from "react-colorful";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { toast } from "react-hot-toast";
import TextInput from "@/components/TextInput";
type Props = {
toggleCollectionModal: Function;
@ -65,14 +66,12 @@ export default function CollectionInfo({
<RequiredBadge />
</p>
<div className="flex flex-col gap-3">
<input
<TextInput
value={collection.name}
placeholder="e.g. Example Collection"
onChange={(e) =>
setCollection({ ...collection, name: e.target.value })
}
type="text"
placeholder="e.g. Example Collection"
className="w-full rounded-md p-3 dark:bg-neutral-900 border-solid border outline-none border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 duration-100"
/>
<div className="color-picker flex justify-between">
<div className="flex flex-col justify-between items-center w-32">
@ -105,7 +104,7 @@ export default function CollectionInfo({
<div className="w-full">
<p className="text-sm text-black dark:text-white mb-2">Description</p>
<textarea
className="w-full h-[11.4rem] resize-none border rounded-md duration-100 bg-white dark:bg-neutral-900 p-3 outline-none border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600"
className="w-full h-[11.4rem] resize-none border rounded-md duration-100 bg-white dark:bg-neutral-950 p-2 outline-none border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600"
placeholder="The purpose of this Collection..."
value={collection.description}
onChange={(e) =>

8
components/Modal/Collection/DeleteCollection.tsx
View File

@ -9,6 +9,7 @@ import useCollectionStore from "@/store/collections";
import { useRouter } from "next/router";
import usePermissions from "@/hooks/usePermissions";
import { toast } from "react-hot-toast";
import TextInput from "@/components/TextInput";
type Props = {
toggleDeleteCollectionModal: Function;
@ -87,13 +88,12 @@ export default function DeleteCollection({
&quot; in the box below:
</p>
<input
autoFocus
<TextInput
autoFocus={true}
value={inputField}
onChange={(e) => setInputField(e.target.value)}
type="text"
placeholder={`Type "${collection.name}" Here.`}
className="w-72 sm:w-96 rounded-md p-3 mx-auto border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 dark:bg-neutral-900 border-solid border outline-none duration-100"
className="w-3/4 mx-auto"
/>
</div>
</>

11
components/Modal/Collection/TeamManagement.tsx
View File

@ -17,6 +17,7 @@ import ProfilePhoto from "@/components/ProfilePhoto";
import usePermissions from "@/hooks/usePermissions";
import { toast } from "react-hot-toast";
import getPublicUserData from "@/lib/client/getPublicUserData";
import TextInput from "@/components/TextInput";
type Props = {
toggleCollectionModal: Function;
@ -148,7 +149,7 @@ export default function TeamManagement({
console.log(err);
}
}}
className="w-full hide-scrollbar overflow-x-auto whitespace-nowrap rounded-md p-3 border-sky-100 dark:border-neutral-700 border-solid border outline-none hover:border-sky-300 dark:hover:border-sky-600 duration-100 cursor-text"
className="w-full hide-scrollbar overflow-x-auto whitespace-nowrap rounded-md p-2 dark:bg-neutral-950 border-sky-100 dark:border-neutral-700 border-solid border outline-none hover:border-sky-300 dark:hover:border-sky-600 duration-100 cursor-text"
>
{publicCollectionURL}
</div>
@ -164,8 +165,9 @@ export default function TeamManagement({
</p>
<div className="flex items-center gap-2">
<input
<TextInput
value={member.user.username || ""}
placeholder="Username (without the '@')"
onChange={(e) => {
setMember({
...member,
@ -181,9 +183,6 @@ export default function TeamManagement({
setMemberState
)
}
type="text"
placeholder="Username (without the '@')"
className="w-full rounded-md p-3 dark:bg-neutral-900 border-solid border outline-none border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 duration-100"
/>
<div
@ -195,7 +194,7 @@ export default function TeamManagement({
setMemberState
)
}
className="flex items-center justify-center bg-sky-700 dark:bg-sky-400 hover:bg-sky-600 duration-100 text-white w-12 h-12 p-3 rounded-md cursor-pointer"
className="flex items-center justify-center bg-sky-700 hover:bg-sky-600 duration-100 text-white w-10 h-10 p-2 rounded-md cursor-pointer"
>
<FontAwesomeIcon icon={faUserPlus} className="w-5 h-5" />
</div>

11
components/Modal/Link/AddOrEditLink.tsx
View File

@ -12,6 +12,7 @@ import { useRouter } from "next/router";
import SubmitButton from "../../SubmitButton";
import { toast } from "react-hot-toast";
import Link from "next/link";
import TextInput from "@/components/TextInput";
type Props =
| {
@ -130,12 +131,10 @@ export default function AddOrEditLink({
Address (URL)
<RequiredBadge />
</p>
<input
<TextInput
value={link.url}
onChange={(e) => setLink({ ...link, url: e.target.value })}
type="text"
placeholder="e.g. http://example.com/"
className="w-full rounded-md p-2 dark:bg-neutral-900 border-solid border outline-none border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 duration-100"
/>
</div>
) : null}
@ -172,12 +171,10 @@ export default function AddOrEditLink({
<div className="sm:col-span-2">
<p className="text-sm text-black dark:text-white mb-2">Name</p>
<input
<TextInput
value={link.name}
onChange={(e) => setLink({ ...link, name: e.target.value })}
type="text"
placeholder="e.g. Example Link"
className="w-full rounded-md p-2 dark:bg-neutral-900 border-solid border outline-none border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 duration-100"
/>
</div>
@ -191,7 +188,7 @@ export default function AddOrEditLink({
? "Will be auto generated if nothing is provided."
: ""
}
className="resize-none w-full rounded-md p-2 border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100 dark:bg-neutral-900"
className="resize-none w-full rounded-md p-2 border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100 dark:bg-neutral-950"
/>
</div>
</div>

14
components/Modal/User/ChangePassword.tsx
View File

@ -5,6 +5,7 @@ import { signOut, useSession } from "next-auth/react";
import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
import SubmitButton from "@/components/SubmitButton";
import { toast } from "react-hot-toast";
import TextInput from "@/components/TextInput";
type Props = {
togglePasswordFormModal: Function;
@ -80,26 +81,25 @@ export default function ChangePassword({
return (
<div className="mx-auto sm:w-[35rem] w-80">
<div className="max-w-[25rem] w-full mx-auto flex flex-col gap-3 justify-between">
<div className="max-w-[25rem] w-full mx-auto flex flex-col gap-2 justify-between">
<p className="text-sm text-black dark:text-white">New Password</p>
<input
<TextInput
value={newPassword}
onChange={(e) => setNewPassword1(e.target.value)}
type="password"
placeholder="••••••••••••••"
className="w-full rounded-md p-3 mx-auto dark:bg-neutral-900 border-solid border outline-none border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 duration-100"
type="password"
/>
<p className="text-sm text-black dark:text-white">
Confirm New Password
</p>
<input
<TextInput
value={newPassword2}
onChange={(e) => setNewPassword2(e.target.value)}
type="password"
placeholder="••••••••••••••"
className="w-full rounded-md p-3 mx-auto dark:bg-neutral-900 border-solid border outline-none border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 duration-100"
type="password"
/>
<SubmitButton

2
components/Modal/User/PrivacySettings.tsx
View File

@ -144,7 +144,7 @@ export default function PrivacySettings({
visibility to your profile. Separated by comma.
</p>
<textarea
className="w-full resize-none border rounded-md duration-100 bg-white dark:bg-neutral-900 p-2 outline-none border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600"
className="w-full resize-none border rounded-md duration-100 bg-white dark:bg-neutral-950 p-2 outline-none border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600"
placeholder="Your profile is hidden from everyone right now..."
value={whitelistedUsersTextbox}
onChange={(e) => {

24
components/Modal/User/ProfileSettings.tsx
View File

@ -9,6 +9,7 @@ import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
import SubmitButton from "../../SubmitButton";
import ProfilePhoto from "../../ProfilePhoto";
import { toast } from "react-hot-toast";
import TextInput from "@/components/TextInput";
type Props = {
toggleSettingsModal: Function;
@ -150,32 +151,26 @@ export default function ProfileSettings({
<p className="text-sm text-black dark:text-white mb-2">
Display Name
</p>
<input
type="text"
value={user.name}
<TextInput
value={user.name || ""}
onChange={(e) => setUser({ ...user, name: e.target.value })}
className="w-full rounded-md p-2 border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 border-solid border outline-none focus:border-sky-700 focus:dark:border-sky-600 duration-100"
/>
</div>
<div>
<p className="text-sm text-black dark:text-white mb-2">Username</p>
<input
type="text"
<TextInput
value={user.username || ""}
onChange={(e) => setUser({ ...user, username: e.target.value })}
className="w-full rounded-md p-2 border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 border-solid border outline-none focus:border-sky-700 focus:dark:border-sky-600 duration-100"
/>
</div>
{emailEnabled ? (
<div>
<p className="text-sm text-black dark:text-white mb-2">Email</p>
<input
type="text"
<TextInput
value={user.email || ""}
onChange={(e) => setUser({ ...user, email: e.target.value })}
className="w-full rounded-md p-2 border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 border-solid border outline-none focus:border-sky-700 focus:dark:border-sky-600 duration-100"
/>
</div>
) : undefined}
@ -188,15 +183,6 @@ export default function ProfileSettings({
</div>
</div>
{/* <hr /> TODO: Export functionality
<p className="text-black">Data Settings</p>
<div className="w-fit">
<div className="border border-sky-100 rounded-md bg-white px-2 py-1 text-center select-none cursor-pointer text-black duration-100 hover:border-sky-700">
Export Data
</div>
</div> */}
<SubmitButton
onClick={submit}
loading={submitLoader}

2
components/Search.tsx
View File

@ -44,7 +44,7 @@ export default function Search() {
router.push("/search/" + encodeURIComponent(searchQuery))
}
autoFocus={searchBox}
className="border border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 rounded-md pl-10 py-2 pr-2 w-44 sm:w-60 dark:hover:border-neutral-600 md:focus:w-80 hover:border-sky-300 duration-100 outline-none bg-inherit"
className="border border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 rounded-md pl-10 py-2 pr-2 w-44 sm:w-60 dark:hover:border-neutral-600 md:focus:w-80 hover:border-sky-300 duration-100 outline-none dark:bg-neutral-950"
/>
</div>
);

33
components/TextInput.tsx Normal file
View File

@ -0,0 +1,33 @@
import { ChangeEventHandler, KeyboardEventHandler } from "react";
type Props = {
autoFocus?: boolean;
value?: string;
type?: string;
placeholder?: string;
onChange: ChangeEventHandler<HTMLInputElement>;
onKeyDown?: KeyboardEventHandler<HTMLInputElement> | undefined;
className?: string;
};
export default function TextInput({
autoFocus,
value,
type,
placeholder,
onChange,
onKeyDown,
className,
}: Props) {
return (
<input
autoFocus={autoFocus}
type={type ? type : "text"}
placeholder={placeholder}
value={value}
onChange={onChange}
onKeyDown={onKeyDown}
className={`w-full rounded-md p-2 border-sky-100 dark:border-neutral-700 dark:bg-neutral-950 border-solid border outline-none focus:border-sky-700 focus:dark:border-sky-600 duration-100 ${className}`}
/>
);
}

5
pages/choose-username.tsx
View File

@ -7,6 +7,7 @@ import { useSession } from "next-auth/react";
import { useRouter } from "next/router";
import useAccountStore from "@/store/account";
import CenteredForm from "@/layouts/CenteredForm";
import TextInput from "@/components/TextInput";
export default function Subscribe() {
const [submitLoader, setSubmitLoader] = useState(false);
@ -49,12 +50,10 @@ export default function Subscribe() {
Username
</p>
<input
type="text"
<TextInput
placeholder="john"
value={inputedUsername}
onChange={(e) => setInputedUsername(e.target.value)}
className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 dark:focus:border-sky-600 dark:border-neutral-700 dark:bg-neutral-900 duration-100"
/>
</div>
<div>

6
pages/forgot.tsx
View File

@ -1,4 +1,5 @@
import SubmitButton from "@/components/SubmitButton";
import TextInput from "@/components/TextInput";
import CenteredForm from "@/layouts/CenteredForm";
import { signIn } from "next-auth/react";
import Image from "next/image";
@ -59,12 +60,11 @@ export default function Forgot() {
Email
</p>
<input
type="text"
<TextInput
type="email"
placeholder="johnny@example.com"
value={form.email}
onChange={(e) => setForm({ ...form, email: e.target.value })}
className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none dark:focus:border-sky-600 dark:border-neutral-700 dark:bg-neutral-900 focus:border-sky-700 duration-100"
/>
</div>

8
pages/login.tsx
View File

@ -1,4 +1,5 @@
import SubmitButton from "@/components/SubmitButton";
import TextInput from "@/components/TextInput";
import CenteredForm from "@/layouts/CenteredForm";
import { signIn } from "next-auth/react";
import Image from "next/image";
@ -58,12 +59,10 @@ export default function Login() {
{emailEnabled ? " or Email" : undefined}
</p>
<input
type="text"
<TextInput
placeholder="johnny"
value={form.username}
onChange={(e) => setForm({ ...form, username: e.target.value })}
className="w-full rounded-md p-2 mx-auto border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 border-solid border outline-none focus:border-sky-300 dark:focus:border-sky-600 duration-100"
/>
</div>
@ -72,12 +71,11 @@ export default function Login() {
Password
</p>
<input
<TextInput
type="password"
placeholder="••••••••••••••"
value={form.password}
onChange={(e) => setForm({ ...form, password: e.target.value })}
className="w-full rounded-md p-2 mx-auto border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 border-solid border outline-none focus:border-sky-300 dark:focus:border-sky-600 duration-100"
/>
{emailEnabled && (
<div className="w-fit ml-auto mt-1">

18
pages/register.tsx
View File

@ -5,6 +5,7 @@ import SubmitButton from "@/components/SubmitButton";
import { signIn } from "next-auth/react";
import { useRouter } from "next/router";
import CenteredForm from "@/layouts/CenteredForm";
import TextInput from "@/components/TextInput";
const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER;
@ -107,12 +108,10 @@ export default function Register() {
Display Name
</p>
<input
type="text"
<TextInput
placeholder="Johnny"
value={form.name}
onChange={(e) => setForm({ ...form, name: e.target.value })}
className="w-full rounded-md p-2 mx-auto border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 border-solid border outline-none focus:border-sky-700 dark:focus:border-sky-600 duration-100"
/>
</div>
@ -122,12 +121,10 @@ export default function Register() {
Username
</p>
<input
type="text"
<TextInput
placeholder="john"
value={form.username}
onChange={(e) => setForm({ ...form, username: e.target.value })}
className="w-full rounded-md p-2 mx-auto border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 border-solid border outline-none focus:border-sky-700 dark:focus:border-sky-600 duration-100"
/>
</div>
)}
@ -138,12 +135,11 @@ export default function Register() {
Email
</p>
<input
<TextInput
type="email"
placeholder="johnny@example.com"
value={form.email}
onChange={(e) => setForm({ ...form, email: e.target.value })}
className="w-full rounded-md p-2 mx-auto border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 border-solid border outline-none focus:border-sky-700 dark:focus:border-sky-600 duration-100"
/>
</div>
) : undefined}
@ -153,12 +149,11 @@ export default function Register() {
Password
</p>
<input
<TextInput
type="password"
placeholder="••••••••••••••"
value={form.password}
onChange={(e) => setForm({ ...form, password: e.target.value })}
className="w-full rounded-md p-2 mx-auto border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 border-solid border outline-none focus:border-sky-700 dark:focus:border-sky-600 duration-100"
/>
</div>
@ -167,14 +162,13 @@ export default function Register() {
Confirm Password
</p>
<input
<TextInput
type="password"
placeholder="••••••••••••••"
value={form.passwordConfirmation}
onChange={(e) =>
setForm({ ...form, passwordConfirmation: e.target.value })
}
className="w-full rounded-md p-2 mx-auto border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 border-solid border outline-none focus:border-sky-700 dark:focus:border-sky-600 duration-100"
/>
</div>

4
styles/globals.css
View File

@ -183,7 +183,6 @@
}
/* Theme */
@layer base {
body {
@apply dark:bg-neutral-900 bg-white dark:text-white;
@ -191,10 +190,9 @@
}
/* react-select */
@layer components {
.react-select-container .react-select__control {
@apply dark:bg-neutral-900 dark:border-neutral-700 dark:hover:border-neutral-500;
@apply dark:bg-neutral-950 dark:border-neutral-700 dark:hover:border-neutral-500;
}
.react-select-container {