From a3a4e37cb0b3e99e48cce14cb10fbe22e2d6b875 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Wed, 20 Mar 2024 09:07:54 +0800
Subject: [PATCH] chore: update memo content styles

---
 web/src/components/MemoContent/Code.tsx |  2 +-
 web/src/components/MemoView.tsx         |  4 ++--
 web/src/pages/UserProfile.tsx           | 12 +++++++-----
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/web/src/components/MemoContent/Code.tsx b/web/src/components/MemoContent/Code.tsx
index 2e3bbc2d..b974d9ed 100644
--- a/web/src/components/MemoContent/Code.tsx
+++ b/web/src/components/MemoContent/Code.tsx
@@ -3,7 +3,7 @@ interface Props {
 }
 
 const Code: React.FC<Props> = ({ content }: Props) => {
-  return <code className="inline break-all px-1 rounded bg-gray-100 dark:bg-zinc-700">{content}</code>;
+  return <code className="inline break-all px-1 font-mono rounded bg-gray-100 dark:bg-zinc-700">{content}</code>;
 };
 
 export default Code;
diff --git a/web/src/components/MemoView.tsx b/web/src/components/MemoView.tsx
index 9cc098d6..af11ba60 100644
--- a/web/src/components/MemoView.tsx
+++ b/web/src/components/MemoView.tsx
@@ -76,13 +76,13 @@ const MemoView: React.FC<Props> = (props: Props) => {
   return (
     <div
       className={classNames(
-        "group relative flex flex-col justify-start items-start w-full px-4 pt-4 pb-3 mb-2 gap-2 bg-white dark:bg-zinc-800 rounded-lg border border-white dark:border-zinc-800 hover:border-gray-200 dark:hover:border-zinc-700",
+        "group relative flex flex-col justify-start items-start w-full px-4 py-3 mb-2 gap-2 bg-white dark:bg-zinc-800 rounded-lg border border-white dark:border-zinc-800 hover:border-gray-200 dark:hover:border-zinc-700",
         memo.pinned && props.showPinned && "border-gray-200 border dark:border-zinc-700",
         className,
       )}
       ref={memoContainerRef}
     >
-      <div className="w-full h-7 flex flex-row justify-between items-center gap-2">
+      <div className="w-full flex flex-row justify-between items-center gap-2">
         <div className="w-auto max-w-[calc(100%-8rem)] grow flex flex-row justify-start items-center">
           {creator && (
             <div className="w-full flex flex-row justify-start items-center">
diff --git a/web/src/pages/UserProfile.tsx b/web/src/pages/UserProfile.tsx
index f9b74339..44f8199a 100644
--- a/web/src/pages/UserProfile.tsx
+++ b/web/src/pages/UserProfile.tsx
@@ -121,13 +121,15 @@ const UserProfile = () => {
                   {t("common.share")}
                 </Button>
               </div>
-              <div className="w-full flex flex-row justify-start items-center pt-4 pb-8 px-3">
-                <UserAvatar className="!w-16 !h-16 drop-shadow mr-3 rounded-3xl" avatarUrl={user?.avatarUrl} />
-                <div className="w-auto max-w-[calc(100%-6rem)] flex flex-col justify-center items-start">
-                  <p className="w-full text-4xl text-black leading-tight opacity-80 dark:text-gray-200 truncate">
+              <div className="w-full flex flex-col justify-start items-start pt-4 pb-8 px-3">
+                <UserAvatar className="!w-16 !h-16 drop-shadow rounded-3xl" avatarUrl={user?.avatarUrl} />
+                <div className="mt-2 w-auto max-w-[calc(100%-6rem)] flex flex-col justify-center items-start">
+                  <p className="w-full text-3xl text-black leading-tight opacity-80 dark:text-gray-200 truncate">
                     {user.nickname || user.username}
                   </p>
-                  <p className="w-full text-gray-500 opacity-80 dark:text-gray-400 truncate">{user.description}</p>
+                  <p className="w-full text-gray-500 leading-snug opacity-80 dark:text-gray-400 whitespace-pre-wrap truncate line-clamp-6">
+                    {user.description}
+                  </p>
                 </div>
               </div>
               <MemoFilter className="px-2 pb-3" />