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

2
components/Dropdown.tsx
View File

@ -34,7 +34,7 @@ export default function Dropdown({ onClickOutside, className, items }: Props) {
{items.map((e, i) => {
const inner = (
<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>
</div>
</div>

4
components/InputSelect/styles.ts
View File

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

4
components/LinkList.tsx
View File

@ -123,7 +123,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 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
icon={faEllipsis}
@ -184,7 +184,7 @@ export default function ({ link, count }: Props) {
if (target.id !== "expand-dropdown" + link.id)
setExpandDropdown(false);
}}
className="absolute top-7 right-0 w-36"
className="absolute top-8 right-0 w-36"
/>
) : null}
</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
</span>
</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
</span>
</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
</span>
</label>

10
components/Sidebar/SidebarItem.tsx
View File

@ -27,13 +27,15 @@ export default function ({ text, icon, path, className }: SidebarItemProps) {
<Link href={path}>
<div
className={`${
active ? "bg-sky-500" : "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 w-full ${className}`}
active ? "bg-sky-500" : "hover:bg-slate-200 bg-gray-100"
} duration-100 py-1 px-4 cursor-pointer flex items-center gap-2 w-full ${className}`}
>
{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}
</p>
</div>

28
components/Sidebar/index.tsx
View File

@ -32,9 +32,9 @@ export default function ({ className }: { className?: string }) {
return (
<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
</p>
@ -43,12 +43,12 @@ export default function ({ className }: { className?: string }) {
className={`${
active === "/dashboard"
? "bg-sky-500"
: "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`}
: "hover:bg-slate-200 bg-gray-100"
} outline-sky-100 outline-1 duration-100 py-1 px-4 cursor-pointer flex items-center gap-2`}
>
<FontAwesomeIcon
icon={faChartSimple}
className={`w-4 ${
className={`w-4 h-4 ${
active === "/dashboard" ? "text-white" : "text-sky-300"
}`}
/>
@ -67,12 +67,12 @@ export default function ({ className }: { className?: string }) {
className={`${
active === "/links"
? "bg-sky-500"
: "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`}
: "hover:bg-slate-200 bg-gray-100"
} outline-sky-100 outline-1 duration-100 py-1 px-4 cursor-pointer flex items-center gap-2`}
>
<FontAwesomeIcon
icon={faBookmark}
className={`w-4 ${
className={`w-4 h-4 ${
active === "/links" ? "text-white" : "text-sky-300"
}`}
/>
@ -87,14 +87,12 @@ export default function ({ className }: { className?: string }) {
<Link href="/collections">
<div
className={`${
active === "/collections"
? "bg-sky-500"
: "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`}
active === "/collections" ? "bg-sky-500" : "hover:bg-slate-200"
} outline-sky-100 outline-1 duration-100 py-1 px-4 cursor-pointer flex items-center gap-2`}
>
<FontAwesomeIcon
icon={faBox}
className={`w-4 ${
className={`w-4 h-4 ${
active === "/collections" ? "text-white" : "text-sky-300"
}`}
/>
@ -109,7 +107,7 @@ export default function ({ className }: { className?: string }) {
</Link>
<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>
{collections
@ -127,7 +125,7 @@ export default function ({ className }: { className?: string }) {
})}
</div>
<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>
{tags

4
pages/dashboard.tsx
View File

@ -84,8 +84,8 @@ export default function () {
{links
.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()
)
.slice(0, 5)
.map((e, i) => (