UI improvements
This commit is contained in:
@@ -8,6 +8,7 @@ import ProfilePhoto from "./ProfilePhoto";
|
||||
import { faCalendarDays } from "@fortawesome/free-regular-svg-icons";
|
||||
import useModalStore from "@/store/modals";
|
||||
import usePermissions from "@/hooks/usePermissions";
|
||||
import { useTheme } from "next-themes";
|
||||
|
||||
type Props = {
|
||||
collection: CollectionIncludingMembersAndLinkCount;
|
||||
@@ -17,6 +18,8 @@ type Props = {
|
||||
export default function CollectionCard({ collection, className }: Props) {
|
||||
const { setModal } = useModalStore();
|
||||
|
||||
const { theme } = useTheme();
|
||||
|
||||
const formattedDate = new Date(collection.createdAt as string).toLocaleString(
|
||||
"en-US",
|
||||
{
|
||||
@@ -32,7 +35,12 @@ export default function CollectionCard({ collection, className }: Props) {
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`border border-solid border-sky-100 dark:border-neutral-700 bg-gradient-to-tr from-sky-100 dark:from-gray-800 from-10% via-gray-100 via-20% to-white dark:to-neutral-800 to-100% self-stretch min-h-[12rem] rounded-2xl shadow duration-100 hover:shadow-none hover:opacity-80 group relative ${className}`}
|
||||
style={{
|
||||
backgroundImage: `linear-gradient(45deg, ${collection.color}30 10%, ${
|
||||
theme === "dark" ? "#262626" : "#f3f4f6"
|
||||
} 50%, ${theme === "dark" ? "#262626" : "#f9fafb"} 100%)`,
|
||||
}}
|
||||
className={`border border-solid border-sky-100 dark:border-neutral-700 self-stretch min-h-[12rem] rounded-2xl shadow duration-100 hover:shadow-none hover:opacity-80 group relative ${className}`}
|
||||
>
|
||||
<div
|
||||
onClick={() => setExpandDropdown(!expandDropdown)}
|
||||
|
||||
@@ -310,7 +310,7 @@ export default function TeamManagement({
|
||||
<span
|
||||
className={`text-black dark:text-white peer-checked:bg-sky-200 dark:peer-checked:bg-sky-600 text-sm ${
|
||||
permissions === true
|
||||
? "hover:bg-slate-200 hover:dark:bg-neutral-700 duration-75"
|
||||
? "hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100"
|
||||
: ""
|
||||
} rounded p-1 select-none`}
|
||||
>
|
||||
@@ -355,7 +355,7 @@ export default function TeamManagement({
|
||||
<span
|
||||
className={`text-black dark:text-white peer-checked:bg-sky-200 dark:peer-checked:bg-sky-600 text-sm ${
|
||||
permissions === true
|
||||
? "hover:bg-slate-200 hover:dark:bg-neutral-700 duration-75"
|
||||
? "hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100"
|
||||
: ""
|
||||
} rounded p-1 select-none`}
|
||||
>
|
||||
@@ -400,7 +400,7 @@ export default function TeamManagement({
|
||||
<span
|
||||
className={`text-black dark:text-white peer-checked:bg-sky-200 dark:peer-checked:bg-sky-600 text-sm ${
|
||||
permissions === true
|
||||
? "hover:bg-slate-200 hover:dark:bg-neutral-700 duration-75"
|
||||
? "hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100"
|
||||
: ""
|
||||
} rounded p-1 select-none`}
|
||||
>
|
||||
|
||||
@@ -29,7 +29,7 @@ type Props = {
|
||||
};
|
||||
|
||||
export default function LinkDetails({ link, isOwnerOrMod }: Props) {
|
||||
const { theme, setTheme } = useTheme();
|
||||
const { theme } = useTheme();
|
||||
|
||||
const [imageError, setImageError] = useState<boolean>(false);
|
||||
const formattedDate = new Date(link.createdAt as string).toLocaleString(
|
||||
|
||||
@@ -43,7 +43,7 @@ export default function ProfilePhoto({
|
||||
src={src}
|
||||
height={112}
|
||||
width={112}
|
||||
className={`h-10 w-10 shadow rounded-full aspect-square border border-slate-200 dark:border-neutral-700 ${className}`}
|
||||
className={`h-10 w-10 bg-sky-600 dark:bg-sky-600 shadow rounded-full aspect-square border border-slate-200 dark:border-neutral-700 ${className}`}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user