From 6290234ad114ce76b735c1f625f56892fb8fe821 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Tue, 19 Dec 2023 21:29:07 +0800
Subject: [PATCH] chore: fix button styles

---
 .../components/MemoContentV1/CodeBlock.tsx    | 21 +++++++++++++------
 web/src/components/MobileHeader.tsx           |  2 +-
 web/src/components/UserBanner.tsx             |  4 ++--
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/web/src/components/MemoContentV1/CodeBlock.tsx b/web/src/components/MemoContentV1/CodeBlock.tsx
index ce08e4d5..4f25bda1 100644
--- a/web/src/components/MemoContentV1/CodeBlock.tsx
+++ b/web/src/components/MemoContentV1/CodeBlock.tsx
@@ -1,7 +1,9 @@
+import { IconButton } from "@mui/joy";
 import classNames from "classnames";
 import copy from "copy-to-clipboard";
 import hljs from "highlight.js";
 import toast from "react-hot-toast";
+import Icon from "../Icon";
 
 interface Props {
   language: string;
@@ -27,14 +29,21 @@ const CodeBlock: React.FC<Props> = ({ language, content }: Props) => {
   };
 
   return (
-    <pre className="group w-full my-1 p-3 rounded bg-gray-100 dark:bg-zinc-600 whitespace-pre-wrap relative">
-      <button
-        className="text-xs font-mono italic absolute top-0 right-0 px-2 leading-6 border btn-text rounded opacity-0 group-hover:opacity-60"
+    <pre className="w-full my-1 p-3 rounded bg-gray-100 dark:bg-zinc-600 whitespace-pre-wrap relative">
+      <IconButton
+        size="sm"
+        className="!absolute top-0.5 right-0.5 opacity-50"
+        sx={{
+          "--IconButton-size": "24px",
+        }}
         onClick={handleCopyButtonClick}
       >
-        copy
-      </button>
-      <code className={classNames(`language-${formatedLanguage}`, "block")} dangerouslySetInnerHTML={{ __html: highlightedCode }}></code>
+        <Icon.Copy className="w-4 h-auto" />
+      </IconButton>
+      <code
+        className={classNames(`language-${formatedLanguage}`, "block text-sm")}
+        dangerouslySetInnerHTML={{ __html: highlightedCode }}
+      ></code>
     </pre>
   );
 };
diff --git a/web/src/components/MobileHeader.tsx b/web/src/components/MobileHeader.tsx
index 0dae8df4..4acf0a25 100644
--- a/web/src/components/MobileHeader.tsx
+++ b/web/src/components/MobileHeader.tsx
@@ -17,7 +17,7 @@ const MobileHeader = (props: Props) => {
   return (
     <div
       className={classNames(
-        "sticky top-0 pt-4 sm:pt-1 px-4 pb-1 mb-1 backdrop-blur flex md:hidden flex-row justify-between items-center w-full h-auto flex-nowrap shrink-0 z-2",
+        "sticky top-0 pt-4 sm:pt-1 px-4 pb-1 mb-1 bg-zinc-100 dark:bg-zinc-800 bg-opacity-80 backdrop-blur-lg flex md:hidden flex-row justify-between items-center w-full h-auto flex-nowrap shrink-0 z-2",
         offsetTop > 0 && "shadow-md"
       )}
     >
diff --git a/web/src/components/UserBanner.tsx b/web/src/components/UserBanner.tsx
index ab153395..21c22068 100644
--- a/web/src/components/UserBanner.tsx
+++ b/web/src/components/UserBanner.tsx
@@ -33,12 +33,12 @@ const UserBanner = () => {
   };
 
   return (
-    <div className="flex flex-row justify-between items-center relative w-full h-auto px-2 flex-nowrap shrink-0">
+    <div className="relative w-full h-auto px-2 shrink-0">
       <Dropdown
         className="w-auto"
         trigger={
           <div className="px-4 py-2 max-w-full flex flex-row justify-start items-center cursor-pointer rounded-2xl hover:shadow hover:bg-white dark:hover:bg-zinc-700">
-            <UserAvatar className="shadow" avatarUrl={user?.avatarUrl} />
+            <UserAvatar className="shadow shrink-0" avatarUrl={user?.avatarUrl} />
             <span className="px-1 text-lg font-medium text-slate-800 dark:text-gray-200 shrink truncate">{title}</span>
             {user?.role === User_Role.HOST ? (
               <span className="text-xs px-1 bg-blue-600 dark:bg-blue-800 rounded text-white dark:text-gray-200 shadow">MOD</span>