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

styling improvements

This commit is contained in:
Daniel 2023-09-01 18:04:11 -04:00
parent 0b8d8c0645
commit 6a603d7d56
4 changed files with 21 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/LinkCard.tsx
View File

@ -106,7 +106,7 @@ export default function LinkCard({ link, count, className }: Props) {
return ( return (
<div <div
className={`bg-gradient-to-tr from-slate-200 dark:from-neutral-800 from-10% to-gray-50 dark:to-[#303030] via-20% shadow hover:shadow-none cursor-pointer duration-100 rounded-2xl relative group ${className}`} className={`h-fit bg-gradient-to-tr from-slate-200 dark:from-neutral-800 from-10% to-gray-50 dark:to-[#303030] via-20% shadow hover:shadow-none cursor-pointer duration-100 rounded-2xl relative group ${className}`}
> >
{(permissions === true || {(permissions === true ||
permissions?.canUpdate || permissions?.canUpdate ||
@ -144,7 +144,7 @@ export default function LinkCard({ link, count, className }: Props) {
width={64} width={64}
height={64} height={64}
alt="" alt=""
className="blur-sm absolute w-16 group-hover:opacity-80 duration-100 rounded-md bottom-5 right-5 opacity-60 select-none" className="blur-sm absolute w-16 group-hover:opacity-80 duration-100 rounded-2xl bottom-5 right-5 opacity-60 select-none"
draggable="false" draggable="false"
onError={(e) => { onError={(e) => {
const target = e.target as HTMLElement; const target = e.target as HTMLElement;

2
layouts/MainLayout.tsx
View File

@ -36,7 +36,7 @@ export default function MainLayout({ children }: Props) {
<Sidebar className="fixed top-0" /> <Sidebar className="fixed top-0" />
</div> </div>
<div className="w-full lg:ml-64 xl:ml-80"> <div className="w-full flex flex-col h-screen lg:ml-64 xl:ml-80">
<Navbar /> <Navbar />
{children} {children}
</div> </div>

22
pages/dashboard.tsx
View File

@ -47,7 +47,7 @@ export default function Dashboard() {
return ( return (
<MainLayout> <MainLayout>
<div className="p-5 flex flex-col gap-5"> <div style={{ flex: "1 1 auto" }} className="p-5 flex flex-col gap-5">
<div className="flex gap-3 items-center"> <div className="flex gap-3 items-center">
<div className="flex gap-2"> <div className="flex gap-2">
<FontAwesomeIcon <FontAwesomeIcon
@ -61,7 +61,7 @@ export default function Dashboard() {
</div> </div>
<div className="flex flex-col md:flex-row md:items-center gap-5"> <div className="flex flex-col md:flex-row md:items-center gap-5">
<div className="flex flex-col justify-center items-center gap-2 md:w-full rounded-2xl p-10 border border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800"> <div className="sky-shadow flex flex-col justify-center items-center gap-2 md:w-full rounded-2xl p-10 border border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800">
<p className="font-bold text-6xl text-sky-500 dark:text-sky-500"> <p className="font-bold text-6xl text-sky-500 dark:text-sky-500">
{numberOfLinks} {numberOfLinks}
</p> </p>
@ -70,7 +70,7 @@ export default function Dashboard() {
</p> </p>
</div> </div>
<div className="flex flex-col justify-center items-center gap-2 md:w-full rounded-2xl p-10 border border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800"> <div className="sky-shadow flex flex-col justify-center items-center gap-2 md:w-full rounded-2xl p-10 border border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800">
<p className="font-bold text-6xl text-sky-500 dark:text-sky-500"> <p className="font-bold text-6xl text-sky-500 dark:text-sky-500">
{collections.length} {collections.length}
</p> </p>
@ -79,7 +79,7 @@ export default function Dashboard() {
</p> </p>
</div> </div>
<div className="flex flex-col justify-center items-center gap-2 md:w-full rounded-2xl p-10 border border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800"> <div className="sky-shadow flex flex-col justify-center items-center gap-2 md:w-full rounded-2xl p-10 border border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800">
<p className="font-bold text-6xl text-sky-500 dark:text-sky-500"> <p className="font-bold text-6xl text-sky-500 dark:text-sky-500">
{tags.length} {tags.length}
</p> </p>
@ -113,7 +113,10 @@ export default function Dashboard() {
) : undefined} ) : undefined}
</div> </div>
<div className="flex flex-col 2xl:flex-row items-start justify-evenly 2xl:gap-2"> <div
style={{ flex: "1 1 auto" }}
className="flex flex-col 2xl:flex-row items-start justify-evenly 2xl:gap-2"
>
{links.some((e) => e.pinnedBy && e.pinnedBy[0]) ? ( {links.some((e) => e.pinnedBy && e.pinnedBy[0]) ? (
<div <div
className={`grid overflow-hidden 2xl:grid-cols-3 xl:grid-cols-2 grid-cols-1 gap-5 w-full ${ className={`grid overflow-hidden 2xl:grid-cols-3 xl:grid-cols-2 grid-cols-1 gap-5 w-full ${
@ -127,11 +130,14 @@ export default function Dashboard() {
))} ))}
</div> </div>
) : ( ) : (
<div className="border border-solid border-sky-100 dark:border-neutral-700 w-full mx-auto p-10 rounded-2xl bg-gray-50 dark:bg-neutral-800"> <div
style={{ flex: "1 1 auto" }}
className="sky-shadow flex flex-col justify-center h-full border border-solid border-sky-100 dark:border-neutral-700 w-full mx-auto p-10 rounded-2xl bg-gray-50 dark:bg-neutral-800"
>
<p className="text-center text-2xl text-black dark:text-white"> <p className="text-center text-2xl text-black dark:text-white">
No Pinned Links Pin Your Favorite Links Here!
</p> </p>
<p className="text-center text-gray-500 dark:text-gray-300 text-sm mt-2"> <p className="text-center mx-auto w-96 text-gray-500 dark:text-gray-300 text-sm mt-2">
You can Pin your favorite Links by clicking on the three dots on You can Pin your favorite Links by clicking on the three dots on
each Link and clicking{" "} each Link and clicking{" "}
<span className="font-semibold">Pin to Dashboard</span>. <span className="font-semibold">Pin to Dashboard</span>.

4
styles/globals.css
View File

@ -227,3 +227,7 @@
@apply dark:text-white; @apply dark:text-white;
} }
} }
.sky-shadow {
box-shadow: 0px 0px 3px #0ea5e9;
}