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

final touch

Browse Source
This commit is contained in:
daniel31x13
2023-12-17 23:32:33 -05:00
parent 141ca8f60b
commit 1677e132f3
23 changed files with 130 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/LinkViews/LinkComponents/LinkCollection.tsx
+8 -2
View File
@@ -5,7 +5,10 @@ import {
import { useRouter } from "next/router";
import React from "react";
export default function LinkCollection({ link, collection }: {
export default function LinkCollection({
link,
collection,
}: {
link: LinkIncludingShortenedCollectionAndTags;
collection: CollectionIncludingMembersAndLinkCount;
}) {
@@ -19,7 +22,10 @@ export default function LinkCollection({ link, collection }: {
}}
className="flex items-center gap-1 max-w-full w-fit hover:opacity-70 duration-100"
>
<i className="bi-folder2 text-lg shadow" style={{ color: collection?.color }}></i>
<i
className="bi-folder-fill text-lg drop-shadow"
style={{ color: collection?.color }}
></i>
<p className="truncate capitalize">{collection?.name}</p>
</div>
);
components/Modal/Collection/CollectionInfo.tsx
+1 -1
View File
@@ -67,7 +67,7 @@ export default function CollectionInfo({
<div className="flex flex-col justify-between items-center w-32">
<p className="w-full mb-2">Color</p>
<div style={{ color: collection.color }}>
<i className={"bi-folder2"}></i>
<i className={"bi-folder-fill"}></i>
</div>
<div
className="btn btn-ghost btn-xs"
components/ModalContent/EditCollectionModal.tsx
+4 -1
View File
@@ -68,7 +68,10 @@ export default function EditCollectionModal({
<p className="w-full mb-2">Color</p>
<div className="color-picker flex justify-between">
<div className="flex flex-col gap-2 items-center w-32">
<i className="bi-folder2 text-5xl drop-shadow" style={{ color: collection.color }}></i>
<i
className="bi-folder-fill text-5xl drop-shadow"
style={{ color: collection.color }}
></i>
<div
className="btn btn-ghost btn-xs"
onClick={() =>
components/ModalContent/NewCollectionModal.tsx
+4 -1
View File
@@ -68,7 +68,10 @@ export default function NewCollectionModal({ onClose }: Props) {
<p className="w-full mb-2">Color</p>
<div className="color-picker flex justify-between">
<div className="flex flex-col gap-2 items-center w-32">
<i className={"bi-folder2 text-5xl"} style={{ color: collection.color }}></i>
<i
className={"bi-folder-fill text-5xl"}
style={{ color: collection.color }}
></i>
<div
className="btn btn-ghost btn-xs"
onClick={() =>
components/ModalContent/NewLinkModal.tsx
+15 -9
View File
@@ -146,14 +146,6 @@ export default function NewLinkModal({ onClose }: Props) {
</div>
<div className={"mt-2"}>
<div
onClick={() => setOptionsExpanded(!optionsExpanded)}
className={`cursor-pointer duration-100 flex items-center text-sm`}
>
<span>{optionsExpanded ? "Hide" : "More"} Options</span>
<i className={`ml-0.5 ${optionsExpanded ? 'bi-chevron-up' : 'bi-chevron-down'}`}></i>
</div>
{optionsExpanded ? (
<div className="mt-5">
{/* <hr className="mb-3 border border-neutral-content" /> */}
@@ -194,7 +186,21 @@ export default function NewLinkModal({ onClose }: Props) {
) : undefined}
</div>
<div className="flex items-center justify-end mt-5">
<div className="flex justify-between items-center mt-5">
<div
onClick={() => setOptionsExpanded(!optionsExpanded)}
className={`rounded-md cursor-pointer btn btn-sm btn-ghost duration-100 flex items-center px-2 w-fit text-sm`}
>
<p className="font-normal">
{optionsExpanded ? "Hide" : "More"} Options
</p>
<i
className={`${
optionsExpanded ? "bi-chevron-up" : "bi-chevron-down"
}`}
></i>
</div>
<button
className="btn btn-accent dark:border-violet-400 text-white"
onClick={submit}
components/Navbar.tsx
+4 -4
View File
@@ -55,7 +55,7 @@ export default function Navbar() {
onClick={toggleSidebar}
className="text-neutral btn btn-square btn-sm btn-ghost lg:hidden"
>
<i className="bi-list text-xl"></i>
<i className="bi-list text-2xl leading-none"></i>
</div>
<SearchBar />
<div className="flex items-center gap-2">
@@ -66,13 +66,13 @@ export default function Navbar() {
<div
tabIndex={0}
role="button"
className="flex min-w-[3.4rem] items-center group btn btn-accent dark:border-violet-400 text-white btn-sm px-2"
className="flex min-w-[3.4rem] items-center btn btn-accent dark:border-violet-400 text-white btn-sm max-h-[2rem] px-2 relative"
>
<span>
<i className="bi-plus text-xl"></i>
<i className="bi-plus text-4xl absolute -top-[0.3rem] left-0 pointer-events-none"></i>
</span>
<span>
<i className="bi-caret-down-fill text-xs"></i>
<i className="bi-caret-down-fill text-xs absolute top-2 right-[0.3rem] pointer-events-none"></i>
</span>
</div>
</div>
components/NoLinksFound.tsx
+1 -3
View File
@@ -33,9 +33,7 @@ export default function NoLinksFound({ text }: Props) {
}}
className="inline-flex gap-1 relative w-[11rem] items-center btn btn-accent dark:border-violet-400 text-white group"
>
<i
className="bi-plus text-4xl left-2 group-hover:ml-[4rem] absolute duration-100"
></i>
<i className="bi-plus-lg text-3xl left-2 group-hover:ml-[4rem] absolute duration-100"></i>
<span className="group-hover:opacity-0 text-right w-full duration-100">
Create New Link
</span>
components/PageHeader.tsx
+1 -1
View File
@@ -16,7 +16,7 @@ export default function PageHeader({
></i>
<div>
<p className="text-3xl capitalize font-thin">{title}</p>
<p>{description}</p>
<p className="text-xs sm:text-sm">{description}</p>
</div>
</div>
);
components/ProfilePhoto.tsx
+5 -5
View File
@@ -6,7 +6,7 @@ type Props = {
className?: string;
priority?: boolean;
name?: string;
dimensionClass?: string;
large?: boolean;
};
export default function ProfilePhoto({
@@ -14,7 +14,7 @@ export default function ProfilePhoto({
className,
priority,
name,
dimensionClass,
large,
}: Props) {
const [image, setImage] = useState("");
@@ -30,14 +30,14 @@ export default function ProfilePhoto({
return !image ? (
<div
className={`avatar drop-shadow-md placeholder ${className || ""} ${
dimensionClass || "w-8 h-8 "
large ? "w-28 h-28" : "w-8 h-8"
}`}
>
<div className="bg-base-100 text-neutral rounded-full w-full h-full ring-2 ring-neutral-content select-none">
{name ? (
<span className="text-2xl capitalize">{name.slice(0, 1)}</span>
) : (
<i className="bi-person text-xl"></i>
<i className={`bi-person ${large ? "text-5xl" : "text-xl"}`}></i>
)}
</div>
</div>
@@ -45,7 +45,7 @@ export default function ProfilePhoto({
<div
className={`avatar skeleton rounded-full drop-shadow-md ${
className || ""
} ${dimensionClass || "w-8 h-8 "}`}
} ${large || "w-8 h-8"}`}
>
<div className="rounded-full w-full h-full ring-2 ring-neutral-content">
<Image
components/ReadableView.tsx
+2 -4
View File
@@ -172,9 +172,7 @@ export default function ReadableView({ link }: Props) {
target="_blank"
className="hover:opacity-60 duration-100 break-all text-sm flex items-center gap-1 text-neutral w-fit"
>
<i
className="bi-link-45deg"
></i>
<i className="bi-link-45deg"></i>
{isValidUrl(link?.url || "")
? new URL(link?.url as string).host
@@ -190,7 +188,7 @@ export default function ReadableView({ link }: Props) {
className="flex items-center gap-1 cursor-pointer hover:opacity-60 duration-100 mr-2 z-10"
>
<i
className="bi-folder2 drop-shadow text-2xl"
className="bi-folder-fill drop-shadow text-2xl"
style={{ color: link?.collection.color }}
></i>
<p
components/Sidebar.tsx
+9 -9
View File
@@ -15,7 +15,7 @@ export default function Sidebar({ className }: { className?: string }) {
() => {
const storedValue = localStorage.getItem("collectionDisclosure");
return storedValue ? storedValue === "true" : true;
},
}
);
const { collections } = useCollectionStore();
@@ -32,7 +32,7 @@ export default function Sidebar({ className }: { className?: string }) {
useEffect(() => {
localStorage.setItem(
"collectionDisclosure",
collectionDisclosure ? "true" : "false",
collectionDisclosure ? "true" : "false"
);
}, [collectionDisclosure]);
@@ -78,7 +78,7 @@ export default function Sidebar({ className }: { className?: string }) {
: "hover:bg-neutral/20"
} duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
>
<i className="bi-folder2 text-primary text-2xl drop-shadow"></i>
<i className="bi-folder text-primary text-2xl drop-shadow"></i>
<p className="truncate w-full">All Collections</p>
</div>
</Link>
@@ -104,9 +104,9 @@ export default function Sidebar({ className }: { className?: string }) {
}}
className="flex items-center justify-between w-full text-left mb-2 pl-2 font-bold text-neutral mt-5"
>
<p className="text-sm ">Collections</p>
<p className="text-sm">Collections</p>
<i
className={`bi-chevron-down text-primary drop-shadow ${
className={`bi-chevron-down ${
collectionDisclosure ? "rotate-reverse" : "rotate"
}`}
></i>
@@ -134,14 +134,14 @@ export default function Sidebar({ className }: { className?: string }) {
} duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
>
<i
className="bi-folder2 text-2xl drop-shadow"
className="bi-folder-fill text-2xl drop-shadow"
style={{ color: e.color }}
></i>
<p className="truncate w-full">{e.name}</p>
{e.isPublic ? (
<i
className="bi-globe-americas text-sm text-black/50 dark:text-white/50 drop-shadow"
className="bi-globe2 text-sm text-black/50 dark:text-white/50 drop-shadow"
title="This collection is being shared publicly."
></i>
) : undefined}
@@ -173,8 +173,8 @@ export default function Sidebar({ className }: { className?: string }) {
>
<p className="text-sm">Tags</p>
<i
className={`bi-chevron-down text-primary drop-shadow ${
collectionDisclosure ? "rotate-reverse" : "rotate"
className={`bi-chevron-down ${
tagDisclosure ? "rotate-reverse" : "rotate"
}`}
></i>
</Disclosure.Button>
components/SortDropdown.tsx
+1 -3
View File
@@ -14,9 +14,7 @@ export default function SortDropdown({ sortBy, setSort }: Props) {
role="button"
className="btn btn-sm btn-square btn-ghost"
>
<i
className="bi-filter text-neutral text-2xl"
></i>
<i className="bi-chevron-expand text-neutral text-2xl"></i>
</div>
<ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-xl w-52 mt-1">
<li>
components/ToggleDarkMode.tsx
+2 -2
View File
@@ -32,8 +32,8 @@ export default function ToggleDarkMode({ className }: Props) {
className="theme-controller"
checked={localStorage.getItem("theme") === "light" ? false : true}
/>
<i className="bi-sun text-xl swap-on"></i>
<i className="bi-moon text-xl swap-off"></i>
<i className="bi-sun-fill text-xl swap-on"></i>
<i className="bi-moon-fill text-xl swap-off"></i>
</label>
</div>
);