xwx.moe/el.xwx.moe
xwx.moe/ el.xwx.moe
1
0
Disbranĉigi 0
Fontkodo Issues Tirpetoj Actions Packages Projects Eldonoj Wiki Activity

UI improvements

This commit is contained in:
daniel31x13 2023-10-09 08:35:33 -04:00
parent 417252d65e
commit 48eb253cac
7 changed files with 38 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/CollectionCard.tsx
View File

@ -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)}

6
components/Modal/Collection/TeamManagement.tsx
View File

@ -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`}
>

2
components/Modal/Link/LinkDetails.tsx
View File

@ -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(

2
components/ProfilePhoto.tsx
View File

@ -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}`}
/>
);
}

31
pages/collections/[id].tsx
View File

@ -19,12 +19,15 @@ import useModalStore from "@/store/modals";
import useLinks from "@/hooks/useLinks";
import usePermissions from "@/hooks/usePermissions";
import NoLinksFound from "@/components/NoLinksFound";
import { useTheme } from "next-themes";
export default function Index() {
const { setModal } = useModalStore();
const router = useRouter();
const { theme } = useTheme();
const { links } = useLinkStore();
const { collections } = useCollectionStore();
@ -50,8 +53,17 @@ export default function Index() {
return (
<MainLayout>
<div className="p-5 flex flex-col gap-5 w-full">
<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% rounded-2xl shadow min-h-[10rem] p-5 flex gap-5 flex-col justify-between">
<div className="flex flex-col sm:flex-row gap-3 justify-between items-center sm:items-start">
<div
style={{
backgroundImage: `linear-gradient(-45deg, ${
activeCollection?.color
}30 10%, ${theme === "dark" ? "#262626" : "#f3f4f6"} 50%, ${
theme === "dark" ? "#262626" : "#f9fafb"
} 100%)`,
}}
className="border border-solid border-sky-100 dark:border-neutral-700 rounded-2xl shadow min-h-[10rem] p-5 flex gap-5 flex-col justify-between"
>
<div className="flex flex-col sm:flex-row gap-3 justify-between sm:items-start">
{activeCollection && (
<div className="flex gap-3 items-center">
<div className="flex gap-2">
@ -84,15 +96,8 @@ export default function Index() {
defaultIndex: permissions === true ? 1 : 0,
})
}
className="flex justify-center sm:justify-end items-center w-fit mx-auto sm:mr-0 sm:ml-auto group cursor-pointer"
className="hover:opacity-80 duration-100 flex justify-center sm:justify-end items-center w-fit sm:mr-0 sm:ml-auto cursor-pointer"
>
<div
className={`bg-sky-700 p-2 leading-3 select-none group-hover:bg-sky-600 duration-100 text-white rounded-full text-xs ${
activeCollection.members[0] && "mr-1"
}`}
>
{permissions === true ? "Manage" : "View"} Team
</div>
{activeCollection?.members
.sort((a, b) => (a.userId as number) - (b.userId as number))
.map((e, i) => {
@ -100,7 +105,7 @@ export default function Index() {
<ProfilePhoto
key={i}
src={`/api/avatar/${e.userId}?${Date.now()}`}
className="-mr-3 duration-100 border-[3px]"
className="-mr-3 border-[3px]"
/>
);
})
@ -123,7 +128,7 @@ export default function Index() {
<div
onClick={() => setSortDropdown(!sortDropdown)}
id="sort-dropdown"
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
className="inline-flex rounded-md cursor-pointer hover:bg-black hover:dark:bg-white hover:bg-opacity-10 hover:dark:bg-opacity-10 duration-100 p-1"
>
<FontAwesomeIcon
icon={faSort}
@ -144,7 +149,7 @@ export default function Index() {
<div
onClick={() => setExpandDropdown(!expandDropdown)}
id="expand-dropdown"
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
className="inline-flex rounded-md cursor-pointer hover:bg-black hover:dark:bg-white hover:bg-opacity-10 hover:dark:bg-opacity-10 duration-100 p-1"
>
<FontAwesomeIcon
icon={faEllipsis}

5
pages/collections/index.tsx
View File

@ -15,8 +15,11 @@ import useModalStore from "@/store/modals";
import SortDropdown from "@/components/SortDropdown";
import { Sort } from "@/types/global";
import useSort from "@/hooks/useSort";
import { useTheme } from "next-themes";
export default function Collections() {
const { theme } = useTheme();
const { collections } = useCollectionStore();
const [expandDropdown, setExpandDropdown] = useState(false);
const [sortDropdown, setSortDropdown] = useState(false);
@ -111,7 +114,7 @@ export default function Collections() {
})}
<div
className="p-5 self-stretch 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% min-h-[12rem] rounded-2xl cursor-pointer shadow duration-100 hover:shadow-none flex flex-col gap-4 justify-center items-center group"
className="p-5 bg-gray-50 dark:bg-neutral-800 self-stretch border border-solid border-sky-100 dark:border-neutral-700 min-h-[12rem] rounded-2xl cursor-pointer shadow duration-100 hover:shadow-none flex flex-col gap-4 justify-center items-center group"
onClick={() => {
setModal({
modal: "COLLECTION",

4
pages/subscribe.tsx
View File

@ -51,7 +51,7 @@ export default function Subscribe() {
<div className="flex text-white dark:text-black gap-3 border border-solid border-sky-100 dark:border-neutral-700 w-4/5 mx-auto p-1 rounded-xl relative">
<button
onClick={() => setPlan(Plan.monthly)}
className={`w-full text-black dark:text-white duration-75 text-sm rounded-lg p-1 ${
className={`w-full text-black dark:text-white duration-100 text-sm rounded-lg p-1 ${
plan === Plan.monthly
? "text-white bg-sky-700 dark:bg-sky-700"
: "hover:opacity-80"
@ -62,7 +62,7 @@ export default function Subscribe() {
<button
onClick={() => setPlan(Plan.yearly)}
className={`w-full text-black dark:text-white duration-75 text-sm rounded-lg p-1 ${
className={`w-full text-black dark:text-white duration-100 text-sm rounded-lg p-1 ${
plan === Plan.yearly
? "text-white bg-sky-700 dark:bg-sky-700"
: "hover:opacity-80"