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

improved dashboard design + blurred icons based on personal preferences

This commit is contained in:
daniel31x13 2023-11-10 22:32:56 -05:00
parent 3dfbccaf23
commit e3b32fd791
9 changed files with 117 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/DashboardItem.tsx
View File

@ -9,8 +9,8 @@ type Props = {
export default function dashboardItem({ name, value, icon }: Props) {
return (
<div className="flex gap-5 items-end">
<div className="p-4 h-full bg-sky-500 bg-opacity-20 dark:bg-opacity-10 rounded-xl select-none">
<div className="flex gap-4 items-end">
<div className="p-4 bg-sky-500 bg-opacity-20 dark:bg-opacity-10 rounded-xl select-none">
<FontAwesomeIcon
icon={icon}
className="w-8 h-8 text-sky-500 dark:text-sky-500"
@ -20,7 +20,7 @@ export default function dashboardItem({ name, value, icon }: Props) {
<p className="text-gray-500 dark:text-gray-400 text-sm tracking-wider">
{name}
</p>
<p className="font-thin text-5xl text-sky-500 dark:text-sky-500">
<p className="font-thin text-6xl text-sky-500 dark:text-sky-500">
{value}
</p>
</div>

4
components/LinkCard.tsx
View File

@ -165,7 +165,7 @@ export default function LinkCard({ link, count, className }: Props) {
onClick={() => router.push("/links/" + link.id)}
className="flex items-start cursor-pointer gap-5 sm:gap-10 h-full w-full p-5"
>
{url && (
{url && account.blurredFavicons && (
<Image
src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${url.origin}&size=32`}
width={64}
@ -195,7 +195,7 @@ export default function LinkCard({ link, count, className }: Props) {
onClick={(e) => {
e.stopPropagation();
}}
className="flex items-center gap-1 max-w-full w-fit my-3 hover:opacity-70 duration-100"
className="flex items-center gap-1 max-w-full w-fit my-1 hover:opacity-70 duration-100"
>
<FontAwesomeIcon
icon={faFolder}

1
lib/api/controllers/users/userId/updateUserById.ts
View File

@ -132,6 +132,7 @@ export default async function updateUserById(
archiveAsScreenshot: data.archiveAsScreenshot,
archiveAsPDF: data.archiveAsPDF,
archiveAsWaybackMachine: data.archiveAsWaybackMachine,
blurredFavicons: data.blurredFavicons,
password:
data.newPassword && data.newPassword !== ""
? newHashedPassword

5
pages/settings/account.tsx
View File

@ -9,7 +9,6 @@ import TextInput from "@/components/TextInput";
import { resizeImage } from "@/lib/client/resizeImage";
import ProfilePhoto from "@/components/ProfilePhoto";
import SubmitButton from "@/components/SubmitButton";
import { useSession, signOut } from "next-auth/react";
import React from "react";
import { MigrationFormat, MigrationRequest } from "@/types/global";
import Link from "next/link";
@ -17,8 +16,6 @@ import ClickAwayHandler from "@/components/ClickAwayHandler";
import Checkbox from "@/components/Checkbox";
export default function Account() {
const { update, data } = useSession();
const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER;
const [submitLoader, setSubmitLoader] = useState(false);
@ -154,7 +151,7 @@ export default function Account() {
return (
<SettingsLayout>
<div className="flex flex-col gap-10 justify-between sm:w-[35rem] w-80 mx-auto lg:mx-0">
<div className="flex flex-col gap-10">
<div className="grid sm:grid-cols-2 gap-3 auto-rows-auto">
<div className="flex flex-col gap-3">
<div>

84
pages/settings/appearance.tsx
View File

@ -2,12 +2,73 @@ import SettingsLayout from "@/layouts/SettingsLayout";
import { useTheme } from "next-themes";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faSun, faMoon } from "@fortawesome/free-solid-svg-icons";
import { useState, useEffect } from "react";
import { faClose } from "@fortawesome/free-solid-svg-icons";
import useAccountStore from "@/store/account";
import { AccountSettings } from "@/types/global";
import { toast } from "react-hot-toast";
import TextInput from "@/components/TextInput";
import { resizeImage } from "@/lib/client/resizeImage";
import ProfilePhoto from "@/components/ProfilePhoto";
import SubmitButton from "@/components/SubmitButton";
import React from "react";
import Checkbox from "@/components/Checkbox";
export default function Appearance() {
const { theme, setTheme } = useTheme();
const submit = async () => {
setSubmitLoader(true);
const load = toast.loading("Applying...");
const response = await updateAccount({
...user,
});
toast.dismiss(load);
if (response.ok) {
toast.success("Settings Applied!");
} else toast.error(response.data as string);
setSubmitLoader(false);
};
const [submitLoader, setSubmitLoader] = useState(false);
const { account, updateAccount } = useAccountStore();
const [user, setUser] = useState<AccountSettings>(
!objectIsEmpty(account)
? account
: ({
// @ts-ignore
id: null,
name: "",
username: "",
email: "",
emailVerified: null,
blurredFavicons: null,
image: "",
isPrivate: true,
// @ts-ignore
createdAt: null,
whitelistedUsers: [],
} as unknown as AccountSettings)
);
function objectIsEmpty(obj: object) {
return Object.keys(obj).length === 0;
}
useEffect(() => {
if (!objectIsEmpty(account)) setUser({ ...account });
}, [account]);
return (
<SettingsLayout>
<div className="flex flex-col gap-3">
<div>
<p className="mb-3">Select Theme</p>
<div className="flex gap-3 w-full">
<div
@ -25,7 +86,9 @@ export default function Appearance() {
</div>
<div
className={`w-full text-center outline-solid outline-sky-100 outline dark:outline-neutral-700 h-40 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-white ${
theme === "light" ? "outline-sky-500 text-sky-500" : "text-black"
theme === "light"
? "outline-sky-500 text-sky-500"
: "text-black"
}`}
onClick={() => setTheme("light")}
>
@ -34,6 +97,25 @@ export default function Appearance() {
{/* <hr className="my-3 outline-1 outline-sky-100 dark:outline-neutral-700" /> */}
</div>
</div>
</div>
<div>
<Checkbox
label="Blurred Link Icons"
state={user.blurredFavicons}
onClick={() =>
setUser({ ...user, blurredFavicons: !user.blurredFavicons })
}
/>
</div>
<SubmitButton
onClick={submit}
loading={submitLoader}
label="Save"
className="mt-2 mx-auto lg:mx-0"
/>
</div>
</SettingsLayout>
);
}

2
pages/settings/billing.tsx
View File

@ -11,7 +11,7 @@ export default function Billing() {
return (
<SettingsLayout>
<div className=" w-full mx-auto flex flex-col gap-3 justify-between">
<div className="w-full mx-auto flex flex-col gap-3 justify-between">
<p className="text-md text-black dark:text-white">
To manage/cancel your subsciption, visit the{" "}
<a

2
pages/settings/delete.tsx
View File

@ -134,7 +134,7 @@ export default function Password() {
) : undefined}
<button
className={`mx-auto lg:mx-0 text-white flex items-center gap-2 py-1 px-3 rounded-md text-lg tracking-wide select-none font-semibold duration-100 w-fit ${
className={`mx-auto text-white flex items-center gap-2 py-1 px-3 rounded-md text-lg tracking-wide select-none font-semibold duration-100 w-fit ${
submitLoader
? "bg-red-400 cursor-auto"
: "bg-red-500 hover:bg-red-400 cursor-pointer"

2
prisma/migrations/20231110154938_add_blurred_favicons_field/migration.sql Normal file
View File

@ -0,0 +1,2 @@
-- AlterTable
ALTER TABLE "User" ADD COLUMN "blurredFavicons" BOOLEAN NOT NULL DEFAULT true;

2
prisma/schema.prisma
View File

@ -33,6 +33,8 @@ model User {
isPrivate Boolean @default(false)
blurredFavicons Boolean @default(true)
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt @default(now())
}