fix: some ui

Author: Innei

src/app/notes/[id]/page.module.css

@@ -8,7 +8,8 @@
     .paragraph .indent {
       border-bottom: 1px solid;
 
-      @apply border-accent/20 dark:border-accent/30;
+      /* @apply border-accent/20 dark:border-accent/20; */
+      @apply border-accent/10;
     }
 
     blockquote {

src/components/layout/header/internal/SiteOwnerAvatar.tsx

@@ -53,8 +53,8 @@ export const SiteOwnerAvatar: Component = ({ className }) => {
         width={40}
         height={40}
         className={clsxm(
-          'rounded-md ring-2 ring-slate-200 dark:ring-neutral-800',
-          isLiving ? 'rounded-full' : '',
+          'ring-2 ring-slate-200 dark:ring-neutral-800',
+          isLiving ? 'rounded-full' : 'mask mask-squircle',
         )}
       />
       {isLiving && (

src/components/ui/image/ZoomedImage.module.css

@@ -4,18 +4,18 @@
 }
 
 .loaded {
-  animation: zoomIn 500ms ease-in-out forwards;
+  animation: imageLoad 500ms ease-in-out forwards;
 }
 
-@keyframes zoomIn {
+@keyframes imageLoad {
   0% {
-    opacity: 0;
-    clip-path: inset(5%);
-    transform: scale(111.11%);
+    mask: linear-gradient(90deg, #000 25%, #000000e6 50%, #00000000) 150% 0 /
+      400% no-repeat;
+    opacity: 0.2;
   }
   100% {
+    mask: linear-gradient(90deg, #000 25%, #000000e6 50%, #00000000) 0 / 400%
+      no-repeat;
     opacity: 1;
-    clip-path: inset(0);
-    transform: scale(1);
   }
 }

src/components/ui/markdown/Markdown.tsx

@@ -24,7 +24,13 @@ import { KateXRule } from './parsers/katex'
 import { MarkRule } from './parsers/mark'
 import { MentionRule } from './parsers/mention'
 import { SpoilderRule } from './parsers/spoiler'
-import { MParagraph, MTableBody, MTableHead, MTableRow } from './renderers'
+import {
+  MParagraph,
+  MTable,
+  MTableBody,
+  MTableHead,
+  MTableRow,
+} from './renderers'
 import { MDetails } from './renderers/collapse'
 import { MFootNote } from './renderers/footnotes'
 import { MHeader } from './renderers/heading'
@@ -79,6 +85,7 @@ export const Markdown: FC<MdProps & MarkdownToJSX.Options & PropsWithChildren> =
           thead: MTableHead,
           tr: MTableRow,
           tbody: MTableBody,
+          table: MTable,
           // FIXME: footer tag in raw html will renders not as expected, but footer tag in this markdown lib will wrapper as linkReferer footnotes
           footer: MFootNote,
           details: MDetails,

src/components/ui/markdown/renderers/LinkRenderer.tsx

@@ -148,13 +148,17 @@ const FixedRatioContainer = ({
   children: React.ReactNode
 }) => {
   return (
-    <div
-      className="relative my-8 h-0 w-full"
-      style={{
-        paddingBottom: `${ratio}%`,
-      }}
-    >
-      {children}
+    <div className="mockup-window my-16 bg-base-300">
+      <div className="flex justify-center px-4">
+        <div
+          className="relative my-8 h-0 w-full"
+          style={{
+            paddingBottom: `${ratio}%`,
+          }}
+        >
+          {children}
+        </div>
+      </div>
     </div>
   )
 }

src/components/ui/markdown/renderers/table.tsx

@@ -1,11 +1,22 @@
 import React from 'react'
-import clsx from 'clsx'
 import type { FC } from 'react'
 
+import { clsxm } from '~/lib/helper'
+
+export const MTable: FC<JSX.IntrinsicElements['table']> = (props) => {
+  const { className, ...rest } = props
+  return (
+    <table
+      {...rest}
+      className={clsxm('table table-zebra table-pin-rows', className)}
+    />
+  )
+}
+
 export const MTableHead: FC<JSX.IntrinsicElements['thead']> = (props) => {
   const { children, className, ...rest } = props
   return (
-    <thead className={clsx(className, 'bg-base-content/20')} {...rest}>
+    <thead className={className} {...rest}>
       {children}
     </thead>
   )

src/components/widgets/comment/CommentBox/SwitchCommentMode.tsx

@@ -6,6 +6,7 @@ import type { FC } from 'react'
 
 import { useUser } from '@clerk/nextjs'
 
+import { useIsLogged } from '~/atoms'
 import { MotionButtonBase } from '~/components/ui/button'
 import { FloatPopover } from '~/components/ui/float-popover'
 
@@ -39,6 +40,9 @@ export const SwitchCommentMode = () => {
       </>
     )
   }).current
+
+  const isOwnerLogged = useIsLogged()
+  if (isOwnerLogged) return null
   return (
     <MotionButtonBase
       className={clsx(

src/styles/theme.css

@@ -94,7 +94,7 @@
   }
 
   .animation-blink {
-    animation: blink 2s ease infinite both;
+    animation: blink 1.2s linear infinite;
   }
 
   .mask-top {
@@ -107,12 +107,18 @@
     0% {
       opacity: 0;
     }
-    50% {
+    40% {
+      opacity: 0;
+    }
+    40.1% {
       opacity: 1;
     }
-    100% {
+    99.9% {
       opacity: 1;
     }
+    100% {
+      opacity: 0;
+    }
   }
 }
 

storybook/mock-packages/next_navigation/index.js

@@ -0,0 +1,7 @@
+export const useRouter = () => {
+  return {
+    push(path) {
+      location.pathname = path
+    },
+  }
+}

storybook/mock-packages/next_navigation/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "next_navigation",
+  "main": "./index.js"
+}

storybook/vite.config.mts

@@ -43,6 +43,7 @@ export default defineConfig({
       'next/image': resolve(__dirname, './mock-packages/next_image'),
       'next/link': resolve(__dirname, './mock-packages/next_link'),
       'next/dynamic': resolve(__dirname, './mock-packages/next_dynamic'),
+      'next/navigation': resolve(__dirname, './mock-packages/next_navigation'),
       '~': resolve(__dirname, '../src'),
     },
   },

tailwind.config.ts

@@ -291,8 +291,9 @@ const twConfig: Config = {
     addDynamicIconSelectors(),
     addShortcutPlugin,
 
-    daisyui,
     typography,
+    daisyui,
+
     require('tailwind-scrollbar'),
   ],
 }