feat: update layout for some blocks to support darkmode

alex-guoba · Feb 27, 2024 · 80b713b · 80b713b
1 parent 4de2568
commit 80b713b
Show file tree

Hide file tree

Showing 14 changed files with 830 additions and 102 deletions.
diff --git a/app/(blog)/article/[...slug]/layout.tsx b/app/(blog)/article/[...slug]/layout.tsx
@@ -1,6 +1,8 @@
 // import Script from "next/script"
 import React from "react";
 
+import 'simplebar-react/dist/simplebar.min.css'
+
 export default async function LobyLayout({ children }: { children: React.ReactNode }) {
   return <div className="relative flex min-h-screen flex-col">{children}</div>;
 }
diff --git a/app/notion/_components/bookmark.tsx b/app/notion/_components/bookmark.tsx
@@ -87,7 +87,7 @@ function UnfurledBookmarkPreview({
   return (
     <div key={id} className={className}>
       <Link href={url} target="_blank">
-        <div className="flex w-full max-w-full overflow-hidden border border-gray-200">
+        <div className="flex w-full max-w-full overflow-hidden border rounded-md border-gray-200  hover:bg-slate-200 dark:hover:bg-stone-500">
           {/* <span className="sr-only">{url}</span> */}
 
           <div className="w-96 flex-auto space-y-2 p-4">

diff --git a/app/notion/_components/callout.tsx b/app/notion/_components/callout.tsx
@@ -17,7 +17,7 @@ export function CalloutRender({ block, className }: CalloutBlockProps) {
       key={id}
       className={cn(
         className,
-        "box-border inline-flex w-full items-center rounded-[4px] border border-none bg-stone-100 p-4"
+        "inline-flex w-full items-center rounded-md border border-none bg-stone-100 dark:bg-stone-500 p-4"
       )}
     >
       {icon && <IconRender type={icon.type} emoji={icon.emoji} external={icon.external} file={icon.file} />}

diff --git a/app/notion/_components/embed.tsx b/app/notion/_components/embed.tsx
@@ -18,7 +18,7 @@ export function EmbedRender({ block, className }: EmbedProps) {
 
   return (
     <figure key={id} className={cn(className, "mx-0 my-2 flex min-w-full max-w-full flex-col self-center")}>
-      <div className="flex w-full max-w-full justify-center self-center ">
+      <div className="flex w-full max-w-full justify-center self-center">
         <iframe
           width="95%"
           height="540"

diff --git a/app/notion/_components/equation.tsx b/app/notion/_components/equation.tsx
@@ -46,7 +46,7 @@ export function EquationRender({ block, className, displayMode = true }: Equatio
 
   // TODO: add copy to clipboard feature
   return (
-    <span key={id} ref={katexTextRef} className={cn(className, "block text-base", displayMode ? "my-12" : "")}>
+    <span key={id} ref={katexTextRef} className={cn(className, "block text-base p-4 hover:bg-slate-200 dark:hover:bg-stone-500", displayMode ? "my-6" : "")}>
       {expression}
     </span>
   );

diff --git a/app/notion/_components/link-preview.tsx b/app/notion/_components/link-preview.tsx
@@ -75,7 +75,7 @@ function UnfurledLinkPreview({
   return (
     <div key={id} className={className}>
       <Link href={url} target="_blank">
-        <div className="flex w-full max-w-full overflow-hidden border border-gray-200">
+        <div className="flex w-full max-w-full overflow-hidden border border-gray-200  hover:bg-slate-200 dark:hover:bg-stone-500 rounded-md">
           <span className="sr-only">{url}</span>
           {icon ? (
             <div className="flex w-12 flex-none justify-center">