egutierrez/linkwarden
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui improvements

Browse Source
This commit is contained in:
Daniel
2023-03-25 17:47:34 +03:30
parent 2e3ec53d2a
commit 3a5ae28f86
17 changed files with 117 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Sidebar/SidebarItem.tsx
+1 -2
View File
@@ -1,4 +1,3 @@
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import Link from "next/link";
import React, { ReactElement } from "react";
@@ -11,7 +10,7 @@ interface SidebarItemProps {
export default function ({ text, icon, path }: SidebarItemProps) {
return (
<Link href={path}>
<div className="hover:bg-gray-50 hover:outline outline-sky-100 outline-1 duration-100 rounded my-1 p-3 cursor-pointer flex items-center gap-2">
<div className="hover:bg-gray-50 hover:outline outline-sky-100 outline-1 duration-100 rounded-md my-1 p-2 cursor-pointer flex items-center gap-2">
{React.cloneElement(icon, {
className: "w-4 text-sky-300",
})}
components/Sidebar/index.tsx
+10 -9
View File
@@ -48,10 +48,10 @@ export default function () {
};
return (
<div className="fixed bg-gray-100 top-0 bottom-0 left-0 w-80 p-5 overflow-y-auto hide-scrollbar border-solid border-r-sky-100 border z-10">
<div className="fixed bg-gray-100 top-0 bottom-0 left-0 w-80 p-2 overflow-y-auto hide-scrollbar border-solid border-r-sky-100 border z-10">
<div className="relative w-fit">
<div
className="flex gap-2 items-center mb-5 p-3 w-fit text-gray-600 cursor-pointer hover:outline outline-sky-100 outline-1 hover:bg-gray-50 rounded duration-100"
className="flex gap-2 items-center mb-5 p-2 w-fit text-gray-600 cursor-pointer hover:outline outline-sky-100 outline-1 hover:bg-gray-50 rounded-md duration-100"
onClick={() => setProfileDropdown(!profileDropdown)}
id="profile-dropdown"
>
@@ -84,27 +84,27 @@ export default function () {
const target = e.target as HTMLInputElement;
if (target.id !== "profile-dropdown") setProfileDropdown(false);
}}
className="absolute top-12 left-0"
className="absolute top-10 left-0"
/>
) : null}
</div>
<Link href="links">
<div className="hover:bg-gray-50 hover:outline outline-sky-100 outline-1 duration-100 text-sky-900 rounded my-1 p-3 cursor-pointer flex items-center gap-2">
<div className="hover:bg-gray-50 hover:outline outline-sky-100 outline-1 duration-100 text-sky-900 rounded-md my-1 p-2 cursor-pointer flex items-center gap-2">
<FontAwesomeIcon icon={faBookmark} className="w-4 text-sky-300" />
<p>All Links</p>
</div>
</Link>
<Link href="/collections">
<div className="hover:bg-gray-50 hover:outline outline-sky-100 outline-1 duration-100 text-sky-900 rounded my-1 p-3 cursor-pointer flex items-center gap-2">
<div className="hover:bg-gray-50 hover:outline outline-sky-100 outline-1 duration-100 text-sky-900 rounded-md my-1 p-2 cursor-pointer flex items-center gap-2">
<FontAwesomeIcon icon={faBox} className="w-4 text-sky-300" />
<p>All Collections</p>
</div>
</Link>
<div className="text-gray-500 flex items-center justify-between mt-5">
<p className="text-sm p-3">Collections</p>
<p className="text-sm p-2">Collections</p>
{collectionInput ? (
<ClickAwayHandler
onClickOutside={toggleCollectionInput}
@@ -113,7 +113,7 @@ export default function () {
<input
type="text"
placeholder="Enter Collection Name"
className="w-44 rounded p-2 border-sky-100 border-solid border text-sm outline-none"
className="w-44 rounded-md p-1 border-sky-500 border-solid border text-sm outline-none"
onKeyDown={submitCollection}
autoFocus
/>
@@ -122,7 +122,8 @@ export default function () {
<FontAwesomeIcon
icon={faPlus}
onClick={toggleCollectionInput}
className="select-none cursor-pointer p-2 w-3"
title="Add Collection"
className="select-none text-gray-500 rounded-md cursor-pointer hover:bg-white hover:outline outline-sky-100 outline-1 duration-100 p-1 w-3"
/>
)}
</div>
@@ -139,7 +140,7 @@ export default function () {
})}
</div>
<div className="text-gray-500 flex items-center justify-between mt-5">
<p className="text-sm p-3">Tags</p>
<p className="text-sm p-2">Tags</p>
</div>
<div>
{tags.map((e, i) => {