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

improved UI

This commit is contained in:
Daniel 2023-05-31 22:03:01 +03:30
parent facbf09604
commit 6ef8e8f870
15 changed files with 99 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/CollectionCard.tsx
View File

@ -44,11 +44,11 @@ export default function ({
};
return (
<div className="bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% self-stretch min-h-[12rem] rounded-md shadow duration-100 hover:shadow-none group relative">
<div className="bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% self-stretch min-h-[12rem] rounded-2xl shadow duration-100 hover:shadow-none group relative">
<div
onClick={() => setExpandDropdown(!expandDropdown)}
id={"expand-dropdown" + collection.id}
className="inline-flex absolute top-5 right-5 rounded-md cursor-pointer hover:bg-white hover:border-sky-500 border-sky-100 border duration-100 p-1"
className="inline-flex absolute top-5 right-5 rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
>
<FontAwesomeIcon
icon={faEllipsis}

6
components/LinkList.tsx
View File

@ -40,7 +40,7 @@ export default function ({ link, count }: Props) {
};
return (
<div className="bg-gradient-to-tr from-gray-100 from-10% to-slate-200 via-20% shadow-sm p-5 rounded-md flex items-start relative gap-5 sm:gap-10 group/item">
<div className="bg-gradient-to-tr from-slate-200 from-10% to-gray-50 via-20% shadow-sm p-5 rounded-2xl flex items-start relative gap-5 sm:gap-10 group/item">
{editModal ? (
<Modal toggleModal={toggleEditModal}>
<LinkModal
@ -94,7 +94,7 @@ export default function ({ link, count }: Props) {
{link.tags.map((e, i) => (
<Link key={i} href={`/tags/${e.id}`}>
<p className="px-2 py-1 bg-sky-200 text-sky-700 text-xs rounded-3xl cursor-pointer hover:bg-sky-100 duration-100">
# {e.name}
{e.name}
</p>
</Link>
))}
@ -118,7 +118,7 @@ export default function ({ link, count }: Props) {
<div
onClick={() => setExpandDropdown(!expandDropdown)}
id={"expand-dropdown" + link.id}
className="text-gray-500 inline-flex rounded-md cursor-pointer hover:bg-white outline outline-sky-100 hover:outline-sky-500 outline-1 duration-100 p-1"
className="text-gray-500 inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
>
<FontAwesomeIcon
icon={faEllipsis}

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

@ -4,6 +4,7 @@ import { faPenToSquare, faPlus } from "@fortawesome/free-solid-svg-icons";
import useCollectionStore from "@/store/collections";
import { CollectionIncludingMembers } from "@/types/global";
import RequiredBadge from "../../RequiredBadge";
import SubmitButton from "@/components/SubmitButton";
type Props = {
toggleCollectionModal: Function;
@ -72,18 +73,12 @@ export default function CollectionInfo({
</div>
</div>
<div className="flex flex-col justify-center items-center gap-2 mt-2">
<div
className="bg-sky-500 text-white flex items-center gap-2 py-2 px-5 rounded-md select-none font-bold cursor-pointer duration-100 hover:bg-sky-400"
onClick={submit}
>
<FontAwesomeIcon
icon={method === "CREATE" ? faPlus : faPenToSquare}
className="h-5"
/>
{method === "CREATE" ? "Add Collection" : "Edit Collection"}
</div>
</div>
<SubmitButton
onClick={submit}
label={method === "CREATE" ? "Add Collection" : "Edit Collection"}
icon={method === "CREATE" ? faPlus : faPenToSquare}
className="mx-auto mt-2"
/>
</div>
);
}

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

@ -12,6 +12,7 @@ import { useSession } from "next-auth/react";
import addMemberToCollection from "@/lib/client/addMemberToCollection";
import ImageWithFallback from "../../ImageWithFallback";
import Checkbox from "../../Checkbox";
import SubmitButton from "@/components/SubmitButton";
type Props = {
toggleCollectionModal: Function;
@ -73,7 +74,7 @@ export default function TeamManagement({
return (
<div className="flex flex-col gap-3 sm:w-[35rem] w-80">
<p className="text-xl text-sky-500 mb-2 text-center w-5/6 mx-auto">
Sharing & Collaboration Settings
Sharing & Collaboration
</p>
<p className="text-sm font-bold text-sky-300">Make Public</p>
@ -114,7 +115,7 @@ export default function TeamManagement({
<p className="text-sm font-bold text-sky-300">Member Management</p>
<div className="relative">
<div className="flex items-center gap-2">
<input
value={member.user.email}
onChange={(e) => {
@ -134,7 +135,7 @@ export default function TeamManagement({
}
type="text"
placeholder="Email"
className="w-full rounded-md p-3 pr-12 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
className="w-full rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
/>
<div
@ -146,9 +147,9 @@ export default function TeamManagement({
setMemberState
)
}
className="absolute flex items-center justify-center right-2 top-2 bottom-2 bg-sky-500 hover:bg-sky-400 duration-100 text-white w-9 rounded-md cursor-pointer"
className="flex items-center justify-center bg-sky-500 hover:bg-sky-400 duration-100 text-white w-12 h-12 p-3 rounded-md cursor-pointer"
>
<FontAwesomeIcon icon={faUserPlus} className="w-6 h-6" />
<FontAwesomeIcon icon={faUserPlus} className="w-5 h-5" />
</div>
</div>
{collection?.members[0]?.user ? (
@ -305,15 +306,12 @@ export default function TeamManagement({
</>
) : null}
<div className="flex flex-col justify-center items-center gap-2 mt-2">
<div
className="bg-sky-500 text-white flex items-center gap-2 py-2 px-5 rounded-md select-none font-bold cursor-pointer duration-100 hover:bg-sky-400"
onClick={submit}
>
<FontAwesomeIcon icon={faPenToSquare} className="h-5" />
Edit Collection
</div>
</div>
<SubmitButton
onClick={submit}
label="Edit Collection"
icon={faPenToSquare}
className="mx-auto mt-2"
/>
</div>
);
}

52
components/Modal/LinkModal.tsx
View File

@ -5,11 +5,12 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { LinkIncludingCollectionAndTags } from "@/types/global";
import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
import useLinkStore from "@/store/links";
import { faPlus, faTrashCan } from "@fortawesome/free-solid-svg-icons";
import { faPlus } from "@fortawesome/free-solid-svg-icons";
import RequiredBadge from "../RequiredBadge";
import { useSession } from "next-auth/react";
import useCollectionStore from "@/store/collections";
import { useRouter } from "next/router";
import SubmitButton from "../SubmitButton";
type Props =
| {
@ -47,7 +48,7 @@ export default function EditLink({
}
);
const { updateLink, removeLink, addLink } = useLinkStore();
const { updateLink, addLink } = useLinkStore();
const router = useRouter();
@ -97,7 +98,7 @@ export default function EditLink({
if (method === "UPDATE") response = await updateLink(link);
else if (method === "CREATE") response = await addLink(link);
toggleLinkModal();
response && toggleLinkModal();
};
return (
@ -107,7 +108,7 @@ export default function EditLink({
</p>
{method === "UPDATE" ? (
<p className="text-sky-700">
<p className="text-gray-500">
<b>{shortendURL}</b> | {link.title}
</p>
) : null}
@ -176,43 +177,12 @@ export default function EditLink({
</div>
</div>
<div className="flex flex-col justify-center items-center gap-2 mt-2">
<div
className="bg-sky-500 text-white flex items-center gap-2 py-2 px-5 rounded-md select-none font-bold cursor-pointer duration-100 hover:bg-sky-400"
onClick={submit}
>
<FontAwesomeIcon
icon={method === "CREATE" ? faPlus : faPenToSquare}
className="h-5"
/>
{method === "CREATE" ? "Add Link" : "Edit Link"}
</div>
{method === "UPDATE" ? (
<>
<div className="flex items-center justify-center gap-2">
<hr className="w-16 border" />
<p className="text-gray-400 font-bold">OR</p>
<hr className="w-16 border" />
</div>
<div
onClick={() => {
removeLink(link);
toggleLinkModal();
}}
className="w-fit inline-flex rounded-md cursor-pointer bg-red-500 hover:bg-red-400 duration-100 p-2"
>
<FontAwesomeIcon
icon={faTrashCan}
className="w-4 h-4 text-white"
/>
</div>
</>
) : null}
</div>
<SubmitButton
onClick={submit}
label={method === "CREATE" ? "Add Link" : "Edit Link"}
icon={method === "CREATE" ? faPlus : faPenToSquare}
className="mx-auto mt-2"
/>
</div>
);
}

16
components/Modal/UserSettings.tsx
View File

@ -9,6 +9,7 @@ import { resizeImage } from "@/lib/client/resizeImage";
import Modal from ".";
import ChangePassword from "./ChangePassword";
import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
import SubmitButton from "../SubmitButton";
type Props = {
toggleSettingsModal: Function;
@ -221,8 +222,8 @@ export default function UserSettings({ toggleSettingsModal }: Props) {
</p>
<p className="text-gray-500 text-sm mb-3">
Please provide the Email addresses of the users you wish to grant
visibility to your profile. Separate the addresses with a comma.
Users not included will be unable to view your profile.
visibility to your profile. Separate by comma. Users not included
will be unable to view your profile.
</p>
<textarea
className="w-full resize-none border rounded-md duration-100 bg-white p-2 outline-none border-sky-100 focus:border-sky-500"
@ -235,13 +236,12 @@ export default function UserSettings({ toggleSettingsModal }: Props) {
</div>
) : null}
<div
className="mx-auto mt-2 bg-sky-500 text-white flex items-center gap-2 py-2 px-5 rounded-md select-none font-bold cursor-pointer duration-100 hover:bg-sky-400"
<SubmitButton
onClick={submit}
>
<FontAwesomeIcon icon={faPenToSquare} className="h-5" />
Apply Settings
</div>
label="Apply Settings"
icon={faPenToSquare}
className="mx-auto mt-2"
/>
{passwordFormModal ? (
<Modal toggleModal={togglePasswordFormModal}>

6
components/Modal/index.tsx
View File

@ -12,14 +12,14 @@ export default function ({ toggleModal, children }: Props) {
return (
<div className="overflow-y-auto py-2 fixed top-0 bottom-0 right-0 left-0 bg-gray-500 bg-opacity-10 flex items-center fade-in z-30">
<ClickAwayHandler onClickOutside={toggleModal} className="w-fit m-auto">
<div className="slide-up relative border-sky-100 rounded-md border-solid border shadow-lg p-5 bg-white">
<div className="slide-up relative border-sky-100 rounded-2xl border-solid border shadow-lg p-5 bg-white">
<div
onClick={toggleModal as MouseEventHandler<HTMLDivElement>}
className="absolute top-5 left-5 inline-flex rounded-md cursor-pointer hover:bg-white hover:border-sky-500 border-sky-100 border duration-100 p-1"
className="absolute top-5 left-5 inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-2"
>
<FontAwesomeIcon
icon={faChevronLeft}
className="w-5 h-5 text-gray-500"
className="w-4 h-4 text-gray-500"
/>
</div>
{children}

15
components/Navbar.tsx
View File

@ -50,18 +50,23 @@ export default function () {
<div className="flex justify-between gap-2 items-center px-5 py-2 border-solid border-b-sky-100 border-b h-16">
<div
onClick={toggleSidebar}
className="inline-flex lg:hidden gap-1 items-center select-none cursor-pointer p-2 text-sky-500 rounded-md hover:outline-sky-500 outline duration-100 bg-white outline-sky-100 outline-1"
className="inline-flex lg:hidden gap-1 items-center select-none cursor-pointer p-[0.687rem] text-gray-500 rounded-md duration-100 hover:bg-slate-200"
>
<FontAwesomeIcon icon={faBars} className="w-6 h-6" />
<FontAwesomeIcon icon={faBars} className="w-5 h-5" />
</div>
<Search />
<div className="flex items-center gap-2">
<div
onClick={toggleLinkModal}
className="inline-flex gap-1 items-center font-semibold select-none cursor-pointer px-2 sm:px-3 py-2 rounded-md text-white bg-sky-500 hover:bg-sky-400 duration-100"
className="inline-flex gap-1 relative sm:w-[7.2rem] items-center font-semibold select-none cursor-pointer p-[0.687rem] sm:p-2 sm:px-3 rounded-md sm:rounded-full hover:bg-sky-100 text-sky-500 sm:text-white sm:bg-sky-500 sm:hover:bg-sky-400 duration-100 group"
>
<FontAwesomeIcon icon={faPlus} className="w-6 h-6 sm:w-5 sm:h-5" />
<span className="hidden sm:block">New Link</span>
<FontAwesomeIcon
icon={faPlus}
className="w-5 h-5 sm:group-hover:ml-9 sm:absolute duration-100"
/>
<span className="hidden sm:block group-hover:opacity-0 text-right w-full duration-100">
New Link
</span>
</div>
<div className="relative">

4
components/Search.tsx
View File

@ -35,7 +35,7 @@ export default function Search() {
>
<label
htmlFor="search-box"
className="inline-flex w-fit absolute right-2 pointer-events-none rounded-md p-1 text-sky-500 group-hover:text-sky-600"
className="inline-flex w-fit absolute left-2 pointer-events-none rounded-md p-1 text-sky-500 group-hover:text-sky-600"
>
<FontAwesomeIcon icon={faMagnifyingGlass} className="w-5 h-5" />
</label>
@ -50,7 +50,7 @@ export default function Search() {
router.push("/search");
}}
autoFocus={searchBox}
className="border border-sky-100 rounded-md pr-10 w-44 sm:w-60 focus:border-sky-500 sm:focus:w-80 hover:border-sky-500 duration-100 outline-none p-2"
className="border border-sky-100 rounded-md pl-10 py-2 pr-2 w-44 sm:w-60 focus:border-sky-500 sm:focus:w-80 hover:border-sky-500 duration-100 outline-none"
/>
</div>
);

27
components/SubmitButton.tsx Normal file
View File

@ -0,0 +1,27 @@
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { IconDefinition } from "@fortawesome/free-regular-svg-icons";
import { MouseEventHandler } from "react";
type Props = {
onClick: Function;
icon: IconDefinition;
label: string;
className?: string;
};
export default function SubmitButton({
onClick,
icon,
label,
className,
}: Props) {
return (
<div
className={`bg-sky-500 text-white flex items-center gap-2 py-2 px-5 rounded-xl select-none font-bold cursor-pointer duration-100 hover:bg-sky-400 w-fit ${className}`}
onClick={onClick as MouseEventHandler<HTMLDivElement>}
>
<FontAwesomeIcon icon={icon} className="h-5" />
{label}
</div>
);
}

6
pages/collections/[id].tsx
View File

@ -98,7 +98,7 @@ export default function () {
return (
<MainLayout>
<div className="p-5 flex flex-col gap-5 w-full">
<div className="bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% rounded shadow min-h-[10rem] p-5 flex gap-5 flex-col justify-between">
<div className="bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% rounded-xl shadow min-h-[10rem] p-5 flex gap-5 flex-col justify-between">
<div className="flex flex-col sm:flex-row gap-3 justify-between items-center sm:items-start">
<div className="flex gap-3 items-center">
<div className="flex gap-2">
@ -162,7 +162,7 @@ export default function () {
<div
onClick={() => setSortDropdown(!sortDropdown)}
id="sort-dropdown"
className="inline-flex rounded-md cursor-pointer hover:bg-white hover:border-sky-500 border-sky-100 border duration-100 p-1"
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
>
<FontAwesomeIcon
icon={faSort}
@ -183,7 +183,7 @@ export default function () {
<div
onClick={() => setExpandDropdown(!expandDropdown)}
id="expand-dropdown"
className="inline-flex rounded-md cursor-pointer hover:bg-white hover:border-sky-500 border-sky-100 border duration-100 p-1"
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
>
<FontAwesomeIcon
icon={faEllipsis}

6
pages/collections/index.tsx
View File

@ -90,7 +90,7 @@ export default function () {
<div
onClick={() => setExpandDropdown(!expandDropdown)}
id="expand-dropdown"
className="inline-flex rounded-md cursor-pointer hover:bg-white hover:border-sky-500 border-sky-100 border duration-100 p-1"
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
>
<FontAwesomeIcon
icon={faEllipsis}
@ -125,7 +125,7 @@ export default function () {
<div
onClick={() => setSortDropdown(!sortDropdown)}
id="sort-dropdown"
className="inline-flex rounded-md cursor-pointer hover:bg-white hover:border-sky-500 border-sky-100 border duration-100 p-1"
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
>
<FontAwesomeIcon
icon={faSort}
@ -193,7 +193,7 @@ export default function () {
})}
<div
className="p-5 self-stretch bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% min-h-[12rem] rounded-md cursor-pointer shadow duration-100 hover:shadow-none flex flex-col gap-4 justify-center items-center group"
className="p-5 self-stretch bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% min-h-[12rem] rounded-2xl cursor-pointer shadow duration-100 hover:shadow-none flex flex-col gap-4 justify-center items-center group"
onClick={toggleCollectionModal}
>
<p className="text-sky-900 group-hover:opacity-0 duration-100">

2
pages/links.tsx
View File

@ -64,7 +64,7 @@ export default function Links() {
<div
onClick={() => setSortDropdown(!sortDropdown)}
id="sort-dropdown"
className="inline-flex rounded-md cursor-pointer hover:bg-white hover:border-sky-500 border-sky-100 border duration-100 p-1"
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
>
<FontAwesomeIcon
icon={faSort}

10
pages/search.tsx
View File

@ -54,14 +54,16 @@ export default function Links() {
setSortedLinks(
linksArray.sort(
(a, b) =>
new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
new Date(b.createdAt as string).getTime() -
new Date(a.createdAt as string).getTime()
)
);
else if (sortBy === "Date (Oldest First)")
setSortedLinks(
linksArray.sort(
(a, b) =>
new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
new Date(a.createdAt as string).getTime() -
new Date(b.createdAt as string).getTime()
)
);
}, [searchSettings, links, sortBy]);
@ -80,7 +82,7 @@ export default function Links() {
<div
onClick={() => setFilterDropdown(!filterDropdown)}
id="filter-dropdown"
className="inline-flex rounded-md cursor-pointer hover:bg-white hover:border-sky-500 border-sky-100 border duration-100 p-1"
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
>
<FontAwesomeIcon
icon={faFilter}
@ -136,7 +138,7 @@ export default function Links() {
<div
onClick={() => setSortDropdown(!sortDropdown)}
id="sort-dropdown"
className="inline-flex rounded-md cursor-pointer hover:bg-white hover:border-sky-500 border-sky-100 border duration-100 p-1"
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
>
<FontAwesomeIcon
icon={faSort}

2
pages/tags/[id].tsx
View File

@ -83,7 +83,7 @@ export default function () {
<div
onClick={() => setSortDropdown(!sortDropdown)}
id="sort-dropdown"
className="inline-flex rounded-md cursor-pointer hover:bg-white hover:border-sky-500 border-sky-100 border duration-100 p-1"
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
>
<FontAwesomeIcon
icon={faSort}