update collection action icons

This commit is contained in:
Yee Jia Wei 2023-12-17 16:46:21 +08:00
parent 500f7a338c
commit cf1306d2c4
4 changed files with 16 additions and 49 deletions

View File

@ -1,10 +1,7 @@
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faEllipsis, faGlobe, faLink } from "@fortawesome/free-solid-svg-icons";
import Link from "next/link";
import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
import { useEffect, useState } from "react";
import React, { useEffect, useState } from "react";
import ProfilePhoto from "./ProfilePhoto";
import { faCalendarDays } from "@fortawesome/free-regular-svg-icons";
import usePermissions from "@/hooks/usePermissions";
import useLocalSettingsStore from "@/store/localSettings";
import getPublicUserData from "@/lib/client/getPublicUserData";
@ -71,9 +68,10 @@ export default function CollectionCard({ collection, className }: Props) {
role="button"
className="btn btn-ghost btn-sm btn-square text-neutral"
>
<FontAwesomeIcon icon={faEllipsis} title="More" className="w-5 h-5" />
<i className="bi-three-dots text-xl" title="More"></i>
</div>
<ul className="dropdown-content z-[1] menu shadow bg-base-200 border border-neutral-content rounded-box w-52 mt-1">
<ul
className="dropdown-content z-[1] menu shadow bg-base-200 border border-neutral-content rounded-box w-52 mt-1">
{permissions === true ? (
<li>
<div
@ -168,21 +166,17 @@ export default function CollectionCard({ collection, className }: Props) {
<div className="text-right">
<div className="font-bold text-sm flex justify-end gap-1 items-center">
{collection.isPublic ? (
<FontAwesomeIcon
icon={faGlobe}
title="This collection is being shared publicly."
className="w-4 h-4 drop-shadow text-neutral"
/>
<i className="bi-globe-americas drop-shadow text-neutral"
title="This collection is being shared publicly."></i>
) : undefined}
<FontAwesomeIcon
icon={faLink}
className="w-5 h-5 text-neutral"
/>
<i className="bi-link-45deg text-lg text-neutral"
title="This collection is being shared publicly."></i>
{collection._count && collection._count.links}
</div>
<div className="flex items-center justify-end gap-1 text-neutral">
<p className="font-bold text-xs flex gap-1 items-center">
<FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />{" "}
<i className="bi-calendar3 text-neutral"
title="This collection is being shared publicly."></i>
{formattedDate}
</p>
</div>

View File

@ -2,11 +2,6 @@ import React, { useEffect, useState } from "react";
import TextInput from "@/components/TextInput";
import useCollectionStore from "@/store/collections";
import toast from "react-hot-toast";
import {
faRightFromBracket,
faTrashCan,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
import { useRouter } from "next/router";
import usePermissions from "@/hooks/usePermissions";
@ -89,19 +84,7 @@ export default function DeleteCollectionModal({
</div>
<div role="alert" className="alert alert-warning">
<svg
xmlns="http://www.w3.org/2000/svg"
className="stroke-current shrink-0 h-6 w-6"
fill="none"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
/>
</svg>
<i className="bi-exclamation-triangle text-xl"></i>
<span>
<b>Warning:</b> Deleting this collection will permanently erase
all its contents, and it will become inaccessible to everyone,
@ -124,10 +107,7 @@ export default function DeleteCollectionModal({
}`}
onClick={submit}
>
<FontAwesomeIcon
icon={permissions === true ? faTrashCan : faRightFromBracket}
className="h-5"
/>
<i className="bi-trash text-xl"></i>
{permissions === true ? "Delete" : "Leave"} Collection
</button>
</div>

View File

@ -1,10 +1,8 @@
import React, { useEffect, useState } from "react";
import React, { useState } from "react";
import TextInput from "@/components/TextInput";
import useCollectionStore from "@/store/collections";
import toast, { Toaster } from "react-hot-toast";
import { faFolder } from "@fortawesome/free-solid-svg-icons";
import toast from "react-hot-toast";
import { HexColorPicker } from "react-colorful";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
import Modal from "../Modal";
@ -70,12 +68,7 @@ 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">
<div style={{ color: collection.color }}>
<FontAwesomeIcon
icon={faFolder}
className="w-12 h-12 drop-shadow"
/>
</div>
<i className="bi-folder2 text-5xl drop-shadow" style={{ color: collection.color }}></i>
<div
className="btn btn-ghost btn-xs"
onClick={() =>

View File

@ -182,7 +182,7 @@ export default function EditCollectionSharingModal({
}
className="btn btn-accent text-white btn-square btn-sm h-10 w-10"
>
<FontAwesomeIcon icon={faUserPlus} className="w-5 h-5" />
<i className="bi-person-add text-xl"></i>
</div>
</div>
</>