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 design

This commit is contained in:
Daniel 2023-05-29 01:36:49 +03:30
parent ba8dd7dd8f
commit 785ddb9a3f
8 changed files with 51 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
components/CollectionCard.tsx
View File

@ -14,6 +14,7 @@ import Modal from "@/components/Modal";
import CollectionInfo from "@/components/Modal/Collection/CollectionInfo"; import CollectionInfo from "@/components/Modal/Collection/CollectionInfo";
import DeleteCollection from "@/components/Modal/Collection/DeleteCollection"; import DeleteCollection from "@/components/Modal/Collection/DeleteCollection";
import ProfilePhoto from "./ProfilePhoto"; import ProfilePhoto from "./ProfilePhoto";
import TeamManagement from "./Modal/Collection/TeamManagement";
export default function ({ export default function ({
collection, collection,
@ -32,12 +33,17 @@ export default function ({
const [expandDropdown, setExpandDropdown] = useState(false); const [expandDropdown, setExpandDropdown] = useState(false);
const [editCollectionModal, setEditCollectionModal] = useState(false); const [editCollectionModal, setEditCollectionModal] = useState(false);
const [collectionMembersModal, setCollectionMembersModal] = useState(false);
const [deleteCollectionModal, setDeleteCollectionModal] = useState(false); const [deleteCollectionModal, setDeleteCollectionModal] = useState(false);
const toggleEditCollectionModal = () => { const toggleEditCollectionModal = () => {
setEditCollectionModal(!editCollectionModal); setEditCollectionModal(!editCollectionModal);
}; };
const toggleCollectionMembersModal = () => {
setCollectionMembersModal(!collectionMembersModal);
};
const toggleDeleteCollectionModal = () => { const toggleDeleteCollectionModal = () => {
setDeleteCollectionModal(!deleteCollectionModal); setDeleteCollectionModal(!deleteCollectionModal);
}; };
@ -101,6 +107,13 @@ export default function ({
setExpandDropdown(false); setExpandDropdown(false);
}, },
}, },
{
name: "Share/Collaborate",
onClick: () => {
toggleCollectionMembersModal();
setExpandDropdown(false);
},
},
{ {
name: "Delete Collection", name: "Delete Collection",
onClick: () => { onClick: () => {
@ -128,6 +141,15 @@ export default function ({
</Modal> </Modal>
) : null} ) : null}
{collectionMembersModal ? (
<Modal toggleModal={toggleCollectionMembersModal}>
<TeamManagement
toggleCollectionModal={toggleCollectionMembersModal}
activeCollection={collection}
/>
</Modal>
) : null}
{deleteCollectionModal ? ( {deleteCollectionModal ? (
<Modal toggleModal={toggleDeleteCollectionModal}> <Modal toggleModal={toggleDeleteCollectionModal}>
<DeleteCollection <DeleteCollection

2
components/Dropdown.tsx
View File

@ -34,7 +34,7 @@ export default function Dropdown({ onClickOutside, className, items }: Props) {
{items.map((e, i) => { {items.map((e, i) => {
const inner = ( const inner = (
<div className="cursor-pointer rounded-md"> <div className="cursor-pointer rounded-md">
<div className="flex items-center gap-2 py-1 px-2 hover:bg-sky-200 duration-100"> <div className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 duration-100">
<p className="text-sky-900 select-none">{e.name}</p> <p className="text-sky-900 select-none">{e.name}</p>
</div> </div>
</div> </div>

4
components/InputSelect/styles.ts
View File

@ -15,7 +15,7 @@ export const styles: StylesConfig = {
cursor: "pointer", cursor: "pointer",
backgroundColor: state.isSelected ? "#0ea5e9" : "inherit", backgroundColor: state.isSelected ? "#0ea5e9" : "inherit",
"&:hover": { "&:hover": {
backgroundColor: state.isSelected ? "#0ea5e9" : "#bae6fd", backgroundColor: state.isSelected ? "#0ea5e9" : "#e2e8f0",
}, },
transition: "all 50ms", transition: "all 50ms",
}), }),
@ -43,7 +43,7 @@ export const styles: StylesConfig = {
}), }),
clearIndicator: (styles) => ({ clearIndicator: (styles) => ({
...styles, ...styles,
cursor: "pointer", visibility: "hidden",
}), }),
placeholder: (styles) => ({ placeholder: (styles) => ({
...styles, ...styles,

4
components/LinkList.tsx
View File

@ -123,7 +123,7 @@ export default function ({ link, count }: Props) {
<div <div
onClick={() => setExpandDropdown(!expandDropdown)} onClick={() => setExpandDropdown(!expandDropdown)}
id={"expand-dropdown" + link.id} id={"expand-dropdown" + link.id}
className="text-gray-500 inline-flex rounded-md cursor-pointer hover:bg-white hover:outline outline-sky-100 outline-1 duration-100 p-1" 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"
> >
<FontAwesomeIcon <FontAwesomeIcon
icon={faEllipsis} icon={faEllipsis}
@ -184,7 +184,7 @@ export default function ({ link, count }: Props) {
if (target.id !== "expand-dropdown" + link.id) if (target.id !== "expand-dropdown" + link.id)
setExpandDropdown(false); setExpandDropdown(false);
}} }}
className="absolute top-7 right-0 w-36" className="absolute top-8 right-0 w-36"
/> />
) : null} ) : null}
</div> </div>

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

@ -239,7 +239,7 @@ export default function TeamManagement({
}); });
}} }}
/> />
<span className="text-sky-900 peer-checked:bg-sky-500 text-sm hover:bg-sky-200 duration-75 peer-checked:text-white rounded p-1 select-none"> <span className="text-sky-900 peer-checked:bg-sky-500 text-sm hover:bg-slate-200 duration-75 peer-checked:text-white rounded p-1 select-none">
Create Create
</span> </span>
</label> </label>
@ -268,7 +268,7 @@ export default function TeamManagement({
}); });
}} }}
/> />
<span className="text-sky-900 peer-checked:bg-sky-500 text-sm hover:bg-sky-200 duration-75 peer-checked:text-white rounded p-1 select-none"> <span className="text-sky-900 peer-checked:bg-sky-500 text-sm hover:bg-slate-200 duration-75 peer-checked:text-white rounded p-1 select-none">
Update Update
</span> </span>
</label> </label>
@ -297,7 +297,7 @@ export default function TeamManagement({
}); });
}} }}
/> />
<span className="text-sky-900 peer-checked:bg-sky-500 text-sm hover:bg-sky-200 duration-75 peer-checked:text-white rounded p-1 select-none"> <span className="text-sky-900 peer-checked:bg-sky-500 text-sm hover:bg-slate-200 duration-75 peer-checked:text-white rounded p-1 select-none">
Delete Delete
</span> </span>
</label> </label>

10
components/Sidebar/SidebarItem.tsx
View File

@ -27,13 +27,15 @@ export default function ({ text, icon, path, className }: SidebarItemProps) {
<Link href={path}> <Link href={path}>
<div <div
className={`${ className={`${
active ? "bg-sky-500" : "hover:bg-gray-50 hover:outline bg-gray-100" active ? "bg-sky-500" : "hover:bg-slate-200 bg-gray-100"
} outline-sky-100 outline-1 duration-100 rounded-md my-1 p-2 cursor-pointer flex items-center gap-2 w-full ${className}`} } duration-100 py-1 px-4 cursor-pointer flex items-center gap-2 w-full ${className}`}
> >
{React.cloneElement(icon, { {React.cloneElement(icon, {
className: `w-4 ${active ? "text-white" : "text-sky-300"}`, className: `w-4 h-4 ${active ? "text-white" : "text-sky-300"}`,
})} })}
<p className={`${active ? "text-white" : "text-sky-900"} truncate`}> <p
className={`${active ? "text-white" : "text-sky-900"} truncate w-4/6`}
>
{text} {text}
</p> </p>
</div> </div>

28
components/Sidebar/index.tsx
View File

@ -32,9 +32,9 @@ export default function ({ className }: { className?: string }) {
return ( return (
<div <div
className={`bg-gray-100 h-screen w-64 xl:w-80 p-2 overflow-y-auto border-solid border-r-sky-100 border z-20 ${className}`} className={`bg-gray-100 h-screen w-64 xl:w-80 overflow-y-auto border-solid border-r-sky-100 border z-20 ${className}`}
> >
<p className="p-2 text-sky-500 font-bold text-xl mb-5 leading-4"> <p className="p-4 text-sky-500 font-bold text-2xl my-2 leading-4">
Linkwarden Linkwarden
</p> </p>
@ -43,12 +43,12 @@ export default function ({ className }: { className?: string }) {
className={`${ className={`${
active === "/dashboard" active === "/dashboard"
? "bg-sky-500" ? "bg-sky-500"
: "hover:bg-gray-50 hover:outline bg-gray-100" : "hover:bg-slate-200 bg-gray-100"
} outline-sky-100 outline-1 duration-100 rounded-md my-1 p-2 cursor-pointer flex items-center gap-2`} } outline-sky-100 outline-1 duration-100 py-1 px-4 cursor-pointer flex items-center gap-2`}
> >
<FontAwesomeIcon <FontAwesomeIcon
icon={faChartSimple} icon={faChartSimple}
className={`w-4 ${ className={`w-4 h-4 ${
active === "/dashboard" ? "text-white" : "text-sky-300" active === "/dashboard" ? "text-white" : "text-sky-300"
}`} }`}
/> />
@ -67,12 +67,12 @@ export default function ({ className }: { className?: string }) {
className={`${ className={`${
active === "/links" active === "/links"
? "bg-sky-500" ? "bg-sky-500"
: "hover:bg-gray-50 hover:outline bg-gray-100" : "hover:bg-slate-200 bg-gray-100"
} outline-sky-100 outline-1 duration-100 rounded-md my-1 p-2 cursor-pointer flex items-center gap-2`} } outline-sky-100 outline-1 duration-100 py-1 px-4 cursor-pointer flex items-center gap-2`}
> >
<FontAwesomeIcon <FontAwesomeIcon
icon={faBookmark} icon={faBookmark}
className={`w-4 ${ className={`w-4 h-4 ${
active === "/links" ? "text-white" : "text-sky-300" active === "/links" ? "text-white" : "text-sky-300"
}`} }`}
/> />
@ -87,14 +87,12 @@ export default function ({ className }: { className?: string }) {
<Link href="/collections"> <Link href="/collections">
<div <div
className={`${ className={`${
active === "/collections" active === "/collections" ? "bg-sky-500" : "hover:bg-slate-200"
? "bg-sky-500" } outline-sky-100 outline-1 duration-100 py-1 px-4 cursor-pointer flex items-center gap-2`}
: "hover:bg-gray-50 hover:outline bg-gray-100"
} outline-sky-100 outline-1 duration-100 rounded-md my-1 p-2 cursor-pointer flex items-center gap-2`}
> >
<FontAwesomeIcon <FontAwesomeIcon
icon={faBox} icon={faBox}
className={`w-4 ${ className={`w-4 h-4 ${
active === "/collections" ? "text-white" : "text-sky-300" active === "/collections" ? "text-white" : "text-sky-300"
}`} }`}
/> />
@ -109,7 +107,7 @@ export default function ({ className }: { className?: string }) {
</Link> </Link>
<div className="text-gray-500 mt-5"> <div className="text-gray-500 mt-5">
<p className="text-sm p-2">Collections</p> <p className="text-sm px-4 mb-2">Collections</p>
</div> </div>
<div> <div>
{collections {collections
@ -127,7 +125,7 @@ export default function ({ className }: { className?: string }) {
})} })}
</div> </div>
<div className="text-gray-500 mt-5"> <div className="text-gray-500 mt-5">
<p className="text-sm p-2">Tags</p> <p className="text-sm px-4 mb-2">Tags</p>
</div> </div>
<div> <div>
{tags {tags

4
pages/dashboard.tsx
View File

@ -84,8 +84,8 @@ export default function () {
{links {links
.sort( .sort(
(a, b) => (a, b) =>
new Date(b.createdAt).getTime() - new Date(b.createdAt as string).getTime() -
new Date(a.createdAt).getTime() new Date(a.createdAt as string).getTime()
) )
.slice(0, 5) .slice(0, 5)
.map((e, i) => ( .map((e, i) => (