mirror of
https://github.com/usememos/memos.git
synced 2024-12-24 22:23:01 +08:00
chore: update memo detail styles
This commit is contained in:
parent
078bc164d5
commit
91f7839b31
2 changed files with 14 additions and 17 deletions
|
@ -311,7 +311,7 @@ const Memo: React.FC<Props> = (props: Props) => {
|
|||
</>
|
||||
)}
|
||||
<Icon.Dot className="w-4 h-auto text-gray-400 dark:text-zinc-400" />
|
||||
<Link className="flex flex-row justify-start items-center" to={`/m/${memo.id}#comments`}>
|
||||
<Link className="flex flex-row justify-start items-center" to={`/m/${memo.id}`}>
|
||||
<Icon.MessageCircle className="w-4 h-auto text-gray-400 dark:text-zinc-400" />
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400 ml-1">{commentRelations.length}</span>
|
||||
</Link>
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { Select, Tooltip, Option, IconButton, Divider } from "@mui/joy";
|
||||
import { Select, Tooltip, Option, IconButton } from "@mui/joy";
|
||||
import copy from "copy-to-clipboard";
|
||||
import { useEffect, useState } from "react";
|
||||
import { toast } from "react-hot-toast";
|
||||
|
@ -108,8 +108,8 @@ const MemoDetail = () => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<section className="relative top-0 w-full min-h-full overflow-x-hidden bg-zinc-100 dark:bg-zinc-800">
|
||||
<div className="relative w-full h-auto mx-auto flex flex-col justify-start items-center bg-white dark:bg-zinc-900">
|
||||
<section className="relative top-0 w-full min-h-full overflow-x-hidden bg-zinc-100 dark:bg-zinc-900">
|
||||
<div className="relative w-full h-auto mx-auto flex flex-col justify-start items-center bg-white dark:bg-zinc-800">
|
||||
<div className="w-full flex flex-col justify-start items-center py-8">
|
||||
<UserAvatar className="!w-20 h-auto mb-2 drop-shadow" avatarUrl={systemStatus.customizedProfile.logoUrl} />
|
||||
<p className="text-3xl text-black opacity-80 dark:text-gray-200">{systemStatus.customizedProfile.name}</p>
|
||||
|
@ -186,16 +186,16 @@ const MemoDetail = () => {
|
|||
<div className="py-6 w-full border-t dark:border-t-zinc-700">
|
||||
<div className="relative mx-auto flex-grow max-w-2xl w-full min-h-full flex flex-col justify-start items-start px-4 gap-y-1">
|
||||
{comments.length === 0 ? (
|
||||
<div className="w-full flex flex-col justify-center items-center py-6">
|
||||
<div className="w-full flex flex-col justify-center items-center py-6 mb-2">
|
||||
<Icon.MessageCircle strokeWidth={1} className="w-8 h-auto text-gray-400" />
|
||||
<p className="text-gray-400 italic text-sm">No comments</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="w-full flex flex-row justify-start items-center mb-2">
|
||||
<Icon.MessageCircle strokeWidth={1} className="w-5 h-auto text-gray-400 mr-1" />
|
||||
<div className="w-full flex flex-row justify-start items-center pl-3 mb-3">
|
||||
<Icon.MessageCircle className="w-5 h-auto text-gray-400 mr-1" />
|
||||
<span className="text-gray-400 text-sm">Comments</span>
|
||||
<span className="text-gray-400 text-sm">({comments.length})</span>
|
||||
<span className="text-gray-400 text-sm ml-0.5">({comments.length})</span>
|
||||
</div>
|
||||
{comments.map((comment) => (
|
||||
<Memo key={comment.id} memo={comment} />
|
||||
|
@ -205,15 +205,12 @@ const MemoDetail = () => {
|
|||
|
||||
{/* Only show comment editor when user login */}
|
||||
{currentUser && (
|
||||
<>
|
||||
{comments.length === 0 && <Divider className="!my-4" />}
|
||||
<MemoEditor
|
||||
key={memo.id}
|
||||
className="border-none"
|
||||
relationList={[{ memoId: UNKNOWN_ID, relatedMemoId: memo.id, type: "COMMENT" }]}
|
||||
onConfirm={() => fetchMemoComments()}
|
||||
/>
|
||||
</>
|
||||
<MemoEditor
|
||||
key={memo.id}
|
||||
className="!border"
|
||||
relationList={[{ memoId: UNKNOWN_ID, relatedMemoId: memo.id, type: "COMMENT" }]}
|
||||
onConfirm={() => fetchMemoComments()}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
Loading…
Reference in a new issue