From b8b6fe24bc6fa9ba60442b9b95c453a24db8ada0 Mon Sep 17 00:00:00 2001 From: daniel31x13 Date: Fri, 24 Nov 2023 03:06:33 -0500 Subject: [PATCH 01/49] WIP --- components/CollectionCard.tsx | 7 ++-- components/Navbar.tsx | 14 +------- components/ToggleDarkMode.tsx | 57 ++++++++++++++++++++++--------- layouts/CenteredForm.tsx | 7 ++-- package.json | 1 - pages/_app.tsx | 38 ++++++++++++--------- pages/collections/[id].tsx | 7 ++-- pages/dashboard.tsx | 2 ++ pages/links/[id].tsx | 6 ++-- pages/public/collections/[id].tsx | 7 ++-- pages/public/links/[id].tsx | 6 ++-- pages/settings/appearance.tsx | 13 ++----- styles/globals.css | 9 ++--- tailwind.config.js | 41 +++++++++++++++++++--- yarn.lock | 5 --- 15 files changed, 121 insertions(+), 99 deletions(-) diff --git a/components/CollectionCard.tsx b/components/CollectionCard.tsx index c382f6e..02f3f34 100644 --- a/components/CollectionCard.tsx +++ b/components/CollectionCard.tsx @@ -8,7 +8,6 @@ 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; @@ -25,8 +24,6 @@ type DropdownTrigger = export default function CollectionCard({ collection, className }: Props) { const { setModal } = useModalStore(); - const { theme } = useTheme(); - const formattedDate = new Date(collection.createdAt as string).toLocaleString( "en-US", { @@ -45,8 +42,8 @@ export default function CollectionCard({ collection, className }: Props) {
{ - if (theme === "dark") { - setTheme("light"); - } else { - setTheme("dark"); - } - }; - const [sidebar, setSidebar] = useState(false); const { width } = useWindowDimensions(); @@ -106,9 +95,8 @@ export default function Navbar() { href: "/settings/account", }, { - name: `Switch to ${theme === "light" ? "Dark" : "Light"}`, + name: `Switch to ${"light" ? "Dark" : "Light"}`, onClick: () => { - handleToggle(); setProfileDropdown(!profileDropdown); }, }, diff --git a/components/ToggleDarkMode.tsx b/components/ToggleDarkMode.tsx index cff56c0..b610ac0 100644 --- a/components/ToggleDarkMode.tsx +++ b/components/ToggleDarkMode.tsx @@ -1,31 +1,56 @@ -import { useTheme } from "next-themes"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faSun, faMoon } from "@fortawesome/free-solid-svg-icons"; +import { useEffect, useState } from "react"; type Props = { className?: string; }; export default function ToggleDarkMode({ className }: Props) { - const { theme, setTheme } = useTheme(); + const [theme, setTheme] = useState( + localStorage.getItem("theme") ? localStorage.getItem("theme") : "light" + ); - const handleToggle = () => { - if (theme === "dark") { - setTheme("light"); - } else { + const handleToggle = (e: any) => { + if (e.target.checked) { setTheme("dark"); + } else { + setTheme("light"); } }; + useEffect(() => { + localStorage.setItem("theme", theme || ""); + const localTheme = localStorage.getItem("theme"); + document + .querySelector("html") + ?.setAttribute("data-theme", localTheme || ""); + }, [theme]); + return ( -
- + -
+ + {/* sun icon */} + + + + + {/* moon icon */} + + + + ); } diff --git a/layouts/CenteredForm.tsx b/layouts/CenteredForm.tsx index 492d85e..f3dfa35 100644 --- a/layouts/CenteredForm.tsx +++ b/layouts/CenteredForm.tsx @@ -1,4 +1,3 @@ -import { useTheme } from "next-themes"; import Image from "next/image"; import Link from "next/link"; import React, { ReactNode } from "react"; @@ -9,14 +8,12 @@ interface Props { } export default function CenteredForm({ text, children }: Props) { - const { theme } = useTheme(); - return (
- {theme ? ( + {true ? ( Linkwarden) { - const defaultTheme: "light" | "dark" = "dark"; + const [theme, setTheme] = useState(""); useEffect(() => { - if (!localStorage.getItem("theme")) - localStorage.setItem("theme", defaultTheme); + setTheme( + localStorage.getItem("theme") + ? (localStorage.getItem("theme") as string) + : "light" + ); + + if (theme) localStorage.setItem("theme", theme as string); + const localTheme = localStorage.getItem("theme"); + document + .querySelector("html") + ?.setAttribute("data-theme", localTheme || ""); }, []); return ( @@ -50,17 +58,15 @@ export default function App({ - - - - + + ); diff --git a/pages/collections/[id].tsx b/pages/collections/[id].tsx index d4858e2..7f23631 100644 --- a/pages/collections/[id].tsx +++ b/pages/collections/[id].tsx @@ -18,15 +18,12 @@ 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(); @@ -54,8 +51,8 @@ export default function Index() { style={{ backgroundImage: `linear-gradient(-45deg, ${ activeCollection?.color - }30 10%, ${theme === "dark" ? "#262626" : "#f3f4f6"} 50%, ${ - theme === "dark" ? "#262626" : "#f9fafb" + }30 10%, ${"dark" ? "#262626" : "#f3f4f6"} 50%, ${ + "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" diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx index 4469c5a..5bf2786 100644 --- a/pages/dashboard.tsx +++ b/pages/dashboard.tsx @@ -106,6 +106,8 @@ export default function Dashboard() { return ( + +
diff --git a/pages/public/links/[id].tsx b/pages/public/links/[id].tsx index 15aec43..c42e171 100644 --- a/pages/public/links/[id].tsx +++ b/pages/public/links/[id].tsx @@ -9,7 +9,6 @@ import { } from "@/types/global"; import Image from "next/image"; import ColorThief, { RGBColor } from "colorthief"; -import { useTheme } from "next-themes"; import unescapeString from "@/lib/client/unescapeString"; import isValidUrl from "@/lib/client/isValidUrl"; import DOMPurify from "dompurify"; @@ -31,7 +30,6 @@ type LinkContent = { }; export default function Index() { - const { theme } = useTheme(); const { links, getLink } = useLinkStore(); const { setModal } = useModalStore(); @@ -140,13 +138,13 @@ export default function Index() { )})30`; } } - }, [colorPalette, theme]); + }, [colorPalette]); return (
{ setSubmitLoader(true); @@ -78,11 +75,8 @@ export default function Appearance() {
setTheme("dark")} >

Dark Theme

@@ -91,11 +85,8 @@ export default function Appearance() {
setTheme("light")} >

Light Theme

diff --git a/styles/globals.css b/styles/globals.css index eaf3dbb..38abe37 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -245,13 +245,14 @@ body { .reader-view code { padding: 0.15rem 0.4rem 0.15rem 0.4rem; } -[class="dark"] .reader-view code, -[class="dark"] .reader-view pre { + +[data-theme="dark"] .reader-view code, +[data-theme="dark"] .reader-view pre { background-color: rgb(49, 49, 49); border-radius: 8px; } -[class="light"] .reader-view code, -[class="light"] .reader-view pre { +[data-theme="light"] .reader-view code, +[data-theme="light"] .reader-view pre { background-color: rgb(230, 230, 230); border-radius: 8px; } diff --git a/tailwind.config.js b/tailwind.config.js index 34690e4..796b4a4 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,10 +1,38 @@ /** @type {import('tailwindcss').Config} */ +const plugin = require("tailwindcss/plugin"); module.exports = { - darkMode: "class", - // daisyui: { - // themes: ["light", "dark"], - // }, + daisyui: { + themes: [ + { + light: { + primary: "#0ea5e9", + secondary: "#22d3ee", + accent: "#4f46e5", + neutral: "#6b7280", + "base-100": "#f5f5f4", + info: "#a5f3fc", + success: "#22c55e", + warning: "#facc15", + error: "#dc2626", + }, + }, + { + dark: { + primary: "#38bdf8", + secondary: "#0284c7", + accent: "#818cf8", + neutral: "#1f2937", + "base-100": "#fcfcfc", + info: "#009ee4", + success: "#00b17d", + warning: "#eac700", + error: "#f1293c", + }, + }, + ], + }, + darkMode: ["class", '[data-theme="dark"]'], content: [ "./app/**/*.{js,ts,jsx,tsx}", "./pages/**/*.{js,ts,jsx,tsx}", @@ -14,6 +42,9 @@ module.exports = { "./layouts/**/*.{js,ts,jsx,tsx}", ], plugins: [ - // require("daisyui") + require("daisyui"), + plugin(({ addVariant }) => { + addVariant("dark", '&[data-theme="dark"]'); + }), ], }; diff --git a/yarn.lock b/yarn.lock index feb1783..eec8abe 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3825,11 +3825,6 @@ next-auth@^4.22.1: preact-render-to-string "^5.1.19" uuid "^8.3.2" -next-themes@^0.2.1: - version "0.2.1" - resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.2.1.tgz#0c9f128e847979daf6c67f70b38e6b6567856e45" - integrity sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A== - next@13.4.12: version "13.4.12" resolved "https://registry.yarnpkg.com/next/-/next-13.4.12.tgz#809b21ea0aabbe88ced53252c88c4a5bd5af95df" From 3afd5fef6e5f3c4dd66f042f0492742438732684 Mon Sep 17 00:00:00 2001 From: daniel31x13 Date: Fri, 24 Nov 2023 07:50:16 -0500 Subject: [PATCH 02/49] used daisyUI for dark mode --- components/CollectionCard.tsx | 6 ++++-- components/Navbar.tsx | 16 +++++++++++++++- components/ToggleDarkMode.tsx | 15 ++++++--------- layouts/CenteredForm.tsx | 8 ++++++-- pages/_app.tsx | 15 +++------------ pages/collections/[id].tsx | 9 ++++++--- pages/dashboard.tsx | 2 -- pages/links/[id].tsx | 5 ++++- pages/public/collections/[id].tsx | 7 +++++-- pages/public/links/[id].tsx | 5 ++++- pages/settings/appearance.tsx | 12 ++++++++++-- store/localSettings.ts | 30 ++++++++++++++++++++++++++---- styles/globals.css | 19 ++++++++++++++----- tailwind.config.js | 4 ++-- 14 files changed, 105 insertions(+), 48 deletions(-) diff --git a/components/CollectionCard.tsx b/components/CollectionCard.tsx index 02f3f34..d9aebfd 100644 --- a/components/CollectionCard.tsx +++ b/components/CollectionCard.tsx @@ -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 useLocalSettingsStore from "@/store/localSettings"; type Props = { collection: CollectionIncludingMembersAndLinkCount; @@ -23,6 +24,7 @@ type DropdownTrigger = export default function CollectionCard({ collection, className }: Props) { const { setModal } = useModalStore(); + const { settings } = useLocalSettingsStore(); const formattedDate = new Date(collection.createdAt as string).toLocaleString( "en-US", @@ -42,8 +44,8 @@ export default function CollectionCard({ collection, className }: Props) {
{ + if (settings.theme === "dark") { + updateSettings({ theme: "light" }); + } else { + updateSettings({ theme: "dark" }); + } + }; + useEffect(() => { setSidebar(false); }, [width]); @@ -95,9 +106,12 @@ export default function Navbar() { href: "/settings/account", }, { - name: `Switch to ${"light" ? "Dark" : "Light"}`, + name: `Switch to ${ + settings.theme === "light" ? "Dark" : "Light" + }`, onClick: () => { setProfileDropdown(!profileDropdown); + handleToggle(); }, }, { diff --git a/components/ToggleDarkMode.tsx b/components/ToggleDarkMode.tsx index b610ac0..f6078eb 100644 --- a/components/ToggleDarkMode.tsx +++ b/components/ToggleDarkMode.tsx @@ -1,3 +1,4 @@ +import useLocalSettingsStore from "@/store/localSettings"; import { useEffect, useState } from "react"; type Props = { @@ -5,9 +6,9 @@ type Props = { }; export default function ToggleDarkMode({ className }: Props) { - const [theme, setTheme] = useState( - localStorage.getItem("theme") ? localStorage.getItem("theme") : "light" - ); + const { updateSettings } = useLocalSettingsStore(); + + const [theme, setTheme] = useState(localStorage.getItem("theme")); const handleToggle = (e: any) => { if (e.target.checked) { @@ -18,11 +19,7 @@ export default function ToggleDarkMode({ className }: Props) { }; useEffect(() => { - localStorage.setItem("theme", theme || ""); - const localTheme = localStorage.getItem("theme"); - document - .querySelector("html") - ?.setAttribute("data-theme", localTheme || ""); + updateSettings({ theme: theme as string }); }, [theme]); return ( @@ -31,7 +28,7 @@ export default function ToggleDarkMode({ className }: Props) { type="checkbox" onChange={handleToggle} className="theme-controller" - checked={theme === "light" ? false : true} + checked={localStorage.getItem("theme") === "light" ? false : true} /> {/* sun icon */} diff --git a/layouts/CenteredForm.tsx b/layouts/CenteredForm.tsx index f3dfa35..2f875fe 100644 --- a/layouts/CenteredForm.tsx +++ b/layouts/CenteredForm.tsx @@ -1,3 +1,4 @@ +import useLocalSettingsStore from "@/store/localSettings"; import Image from "next/image"; import Link from "next/link"; import React, { ReactNode } from "react"; @@ -8,19 +9,22 @@ interface Props { } export default function CenteredForm({ text, children }: Props) { + const { settings } = useLocalSettingsStore(); return (
{true ? ( Linkwarden ) : undefined} - {/* {theme === "dark" ? ( + {/* {settings.theme === "dark" ? ( ) { - const [theme, setTheme] = useState(""); + const { setSettings } = useLocalSettingsStore(); useEffect(() => { - setTheme( - localStorage.getItem("theme") - ? (localStorage.getItem("theme") as string) - : "light" - ); - - if (theme) localStorage.setItem("theme", theme as string); - const localTheme = localStorage.getItem("theme"); - document - .querySelector("html") - ?.setAttribute("data-theme", localTheme || ""); + setSettings(); }, []); return ( diff --git a/pages/collections/[id].tsx b/pages/collections/[id].tsx index 7f23631..d2caa42 100644 --- a/pages/collections/[id].tsx +++ b/pages/collections/[id].tsx @@ -18,10 +18,13 @@ import useModalStore from "@/store/modals"; import useLinks from "@/hooks/useLinks"; import usePermissions from "@/hooks/usePermissions"; import NoLinksFound from "@/components/NoLinksFound"; +import useLocalSettingsStore from "@/store/localSettings"; export default function Index() { const { setModal } = useModalStore(); + const { settings } = useLocalSettingsStore(); + const router = useRouter(); const { links } = useLinkStore(); @@ -51,9 +54,9 @@ export default function Index() { style={{ backgroundImage: `linear-gradient(-45deg, ${ activeCollection?.color - }30 10%, ${"dark" ? "#262626" : "#f3f4f6"} 50%, ${ - "dark" ? "#262626" : "#f9fafb" - } 100%)`, + }30 10%, ${ + settings.theme === "dark" ? "#262626" : "#f3f4f6" + } 50%, ${settings.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" > diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx index 5bf2786..4469c5a 100644 --- a/pages/dashboard.tsx +++ b/pages/dashboard.tsx @@ -106,8 +106,6 @@ export default function Dashboard() { return ( - -
{ modal ? (document.body.style.overflow = "hidden") @@ -103,8 +106,8 @@ export default function PublicCollections() { className="h-screen" style={{ backgroundImage: `linear-gradient(${collection?.color}30 10%, ${ - "dark" ? "#262626" : "#f3f4f6" - } 50%, ${"dark" ? "#171717" : "#ffffff"} 100%)`, + settings.theme === "dark" ? "#262626" : "#f3f4f6" + } 50%, ${settings.theme === "dark" ? "#171717" : "#ffffff"} 100%)`, }} > diff --git a/pages/public/links/[id].tsx b/pages/public/links/[id].tsx index c42e171..0b61b5f 100644 --- a/pages/public/links/[id].tsx +++ b/pages/public/links/[id].tsx @@ -16,6 +16,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faBoxesStacked, faFolder } from "@fortawesome/free-solid-svg-icons"; import useModalStore from "@/store/modals"; import { useSession } from "next-auth/react"; +import useLocalSettingsStore from "@/store/localSettings"; type LinkContent = { title: string; @@ -33,6 +34,8 @@ export default function Index() { const { links, getLink } = useLinkStore(); const { setModal } = useModalStore(); + const { settings } = useLocalSettingsStore(); + const session = useSession(); const userId = session.data?.user.id; @@ -144,7 +147,7 @@ export default function Index() {
{ setSubmitLoader(true); @@ -75,8 +77,11 @@ export default function Appearance() {
updateSettings({ theme: "dark" })} >

Dark Theme

@@ -85,8 +90,11 @@ export default function Appearance() {
updateSettings({ theme: "light" })} >

Light Theme

diff --git a/store/localSettings.ts b/store/localSettings.ts index 8eebcef..8a3eb08 100644 --- a/store/localSettings.ts +++ b/store/localSettings.ts @@ -1,23 +1,45 @@ import { create } from "zustand"; type LocalSettings = { - darkMode: boolean; + theme: string; }; type LocalSettingsStore = { settings: LocalSettings; updateSettings: (settings: LocalSettings) => void; + setSettings: () => void; }; const useLocalSettingsStore = create((set) => ({ settings: { - darkMode: false, + theme: "", }, updateSettings: async (newSettings) => { + if ( + newSettings.theme && + newSettings.theme !== localStorage.getItem("theme") + ) { + localStorage.setItem("theme", newSettings.theme); + + const localTheme = localStorage.getItem("theme"); + + document + .querySelector("html") + ?.setAttribute("data-theme", localTheme || ""); + } + set((state) => ({ settings: { ...state.settings, ...newSettings } })); }, + setSettings: async () => { + if (!localStorage.getItem("theme")) { + localStorage.setItem("theme", "dark"); + } + + const localTheme = localStorage.getItem("theme"); + document + .querySelector("html") + ?.setAttribute("data-theme", localTheme || ""); + }, })); export default useLocalSettingsStore; - -// TODO: Add Dark mode. diff --git a/styles/globals.css b/styles/globals.css index 38abe37..5ac3955 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -2,8 +2,22 @@ @tailwind components; @tailwind utilities; +:root { + --my-color: #fff; + /* or any other variables/style */ +} + +[data-theme="dark"] { + --my-color: #000; +} + +[data-theme="light"] { + --my-color: #ffabc8; +} + html, body { + color-scheme: dark; scroll-behavior: smooth; } @@ -140,11 +154,6 @@ body { } /* Theme */ -@layer base { - body { - @apply dark:bg-neutral-900 bg-white text-black dark:text-white; - } -} /* react-select */ @layer components { diff --git a/tailwind.config.js b/tailwind.config.js index 796b4a4..932705e 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -10,7 +10,7 @@ module.exports = { secondary: "#22d3ee", accent: "#4f46e5", neutral: "#6b7280", - "base-100": "#f5f5f4", + "base-100": "#ffffff", info: "#a5f3fc", success: "#22c55e", warning: "#facc15", @@ -23,7 +23,7 @@ module.exports = { secondary: "#0284c7", accent: "#818cf8", neutral: "#1f2937", - "base-100": "#fcfcfc", + "base-100": "#171717", info: "#009ee4", success: "#00b17d", warning: "#eac700", From 14f93783757439cf675ba1f3fcebc4e645c45acc Mon Sep 17 00:00:00 2001 From: daniel31x13 Date: Fri, 24 Nov 2023 08:07:08 -0500 Subject: [PATCH 03/49] minor fix --- styles/globals.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/styles/globals.css b/styles/globals.css index 5ac3955..5b62cf9 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -9,15 +9,16 @@ [data-theme="dark"] { --my-color: #000; + color-scheme: dark; } [data-theme="light"] { --my-color: #ffabc8; + color-scheme: light; } html, body { - color-scheme: dark; scroll-behavior: smooth; } From 73954fe78e429b88594d01b39d3ad172a61d9bb9 Mon Sep 17 00:00:00 2001 From: daniel31x13 Date: Fri, 24 Nov 2023 08:09:40 -0500 Subject: [PATCH 04/49] minor change --- styles/globals.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/styles/globals.css b/styles/globals.css index 5b62cf9..d8470af 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -4,17 +4,18 @@ :root { --my-color: #fff; - /* or any other variables/style */ } [data-theme="dark"] { --my-color: #000; color-scheme: dark; + color: white; } [data-theme="light"] { --my-color: #ffabc8; color-scheme: light; + color: black; } html, From 75d4fce8ec22a1f1ffd37534693af1948f61a593 Mon Sep 17 00:00:00 2001 From: daniel31x13 Date: Fri, 24 Nov 2023 08:39:55 -0500 Subject: [PATCH 05/49] removed extra classNames --- components/CollectionCard.tsx | 4 +- components/Dropdown.tsx | 2 +- components/FilterSearchDropdown.tsx | 4 +- components/LinkCard.tsx | 8 ++-- components/LinkPreview.tsx | 6 +-- components/LinkSidebar.tsx | 12 ++---- .../Modal/Collection/CollectionInfo.tsx | 8 ++-- .../Modal/Collection/DeleteCollection.tsx | 8 ++-- .../Modal/Collection/TeamManagement.tsx | 26 +++++------- components/Modal/Collection/ViewTeam.tsx | 8 +--- components/Modal/Collection/index.tsx | 2 +- components/Modal/Link/AddOrEditLink.tsx | 12 +++--- components/Modal/Link/PreservedFormats.tsx | 8 ++-- components/Navbar.tsx | 2 +- components/NoLinksFound.tsx | 4 +- components/PublicPage/PublicLinkCard.tsx | 2 +- components/RadioButton.tsx | 4 +- components/RequiredBadge.tsx | 11 ----- components/SettingsSidebar.tsx | 40 +++++-------------- components/Sidebar.tsx | 24 +++-------- components/SortDropdown.tsx | 4 +- layouts/CenteredForm.tsx | 2 +- pages/choose-username.tsx | 6 +-- pages/collections/[id].tsx | 4 +- pages/collections/index.tsx | 16 +++----- pages/confirmation.tsx | 2 +- pages/dashboard.tsx | 36 ++++++----------- pages/forgot.tsx | 13 ++---- pages/links/[id].tsx | 8 ++-- pages/links/index.tsx | 8 +--- pages/links/pinned.tsx | 10 ++--- pages/login.tsx | 13 ++---- pages/public/links/[id].tsx | 8 ++-- pages/register.tsx | 25 ++++-------- pages/search.tsx | 4 +- pages/settings/account.tsx | 26 +++++------- pages/settings/appearance.tsx | 4 +- pages/settings/billing.tsx | 4 +- pages/settings/delete.tsx | 6 +-- pages/settings/password.tsx | 4 +- pages/subscribe.tsx | 4 +- pages/tags/[id].tsx | 4 +- 42 files changed, 137 insertions(+), 269 deletions(-) delete mode 100644 components/RequiredBadge.tsx diff --git a/components/CollectionCard.tsx b/components/CollectionCard.tsx index d9aebfd..2699705 100644 --- a/components/CollectionCard.tsx +++ b/components/CollectionCard.tsx @@ -66,7 +66,7 @@ export default function CollectionCard({ collection, className }: Props) { href={`/collections/${collection.id}`} className="flex flex-col gap-2 justify-between min-h-[12rem] h-full select-none p-5" > -

+

{collection.name}

@@ -90,7 +90,7 @@ export default function CollectionCard({ collection, className }: Props) { ) : null}
-
+
{collection.isPublic ? (
-

{e.name}

+

{e.name}

); diff --git a/components/FilterSearchDropdown.tsx b/components/FilterSearchDropdown.tsx index 90648e0..be39585 100644 --- a/components/FilterSearchDropdown.tsx +++ b/components/FilterSearchDropdown.tsx @@ -27,9 +27,7 @@ export default function FilterSearchDropdown({ }} className="absolute top-8 right-0 border border-sky-100 dark:border-neutral-700 shadow-md bg-gray-50 dark:bg-neutral-800 rounded-md p-2 z-20 w-40" > -

- Filter by -

+

Filter by

{count + 1}

-

+

{unescapeString(link.name || link.description)}

@@ -204,9 +204,7 @@ export default function LinkCard({ link, count, className }: Props) { className="w-4 h-4 mt-1 drop-shadow" style={{ color: collection?.color }} /> -

- {collection?.name} -

+

{collection?.name}

{/* {link.tags[0] ? ( @@ -219,7 +217,7 @@ export default function LinkCard({ link, count, className }: Props) { onClick={(e) => { e.stopPropagation(); }} - className="px-2 bg-sky-200 text-black dark:text-white dark:bg-sky-900 text-xs rounded-3xl cursor-pointer hover:opacity-60 duration-100 truncate max-w-[19rem]" + className="px-2 bg-sky-200 dark:bg-sky-900 text-xs rounded-3xl cursor-pointer hover:opacity-60 duration-100 truncate max-w-[19rem]" > {e.name} diff --git a/components/LinkPreview.tsx b/components/LinkPreview.tsx index c81e46e..652ed29 100644 --- a/components/LinkPreview.tsx +++ b/components/LinkPreview.tsx @@ -75,7 +75,7 @@ export default function LinkPreview({ link, className, settings }: Props) {

{1}

-

+

{unescapeString(link.name as string)}

@@ -84,9 +84,7 @@ export default function LinkPreview({ link, className, settings }: Props) { icon={faFolder} className="w-4 h-4 mt-1 drop-shadow text-sky-400" /> -

- Landing Pages ⚡️ -

+

Landing Pages ⚡️

-

- Edit -

+

Edit

) : undefined} @@ -102,9 +100,7 @@ export default function LinkSidebar({ className, onClick }: Props) { className="w-6 h-6 text-gray-500 dark:text-gray-300" /> -

- Preserved Formats -

+

Preserved Formats

{link?.collection.ownerId === userId || @@ -127,9 +123,7 @@ export default function LinkSidebar({ className, onClick }: Props) { className="w-6 h-6 text-gray-500 dark:text-gray-300" /> -

- Delete -

+

Delete

) : undefined}
diff --git a/components/Modal/Collection/CollectionInfo.tsx b/components/Modal/Collection/CollectionInfo.tsx index 962e9ee..117db41 100644 --- a/components/Modal/Collection/CollectionInfo.tsx +++ b/components/Modal/Collection/CollectionInfo.tsx @@ -60,7 +60,7 @@ export default function CollectionInfo({
-

Name

+

Name

-

Color

+

Color

setCollection({ ...collection, color: "#0ea5e9" }) } @@ -96,7 +96,7 @@ export default function CollectionInfo({
-

Description

+

Description