YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-03-27 16:10:18 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore: fix button styles

Browse Source
This commit is contained in:
Steven 2023-12-19 21:29:07 +08:00
parent aeed25648a
commit 6290234ad1
3 changed files with 18 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
web/src/components/MemoContentV1/CodeBlock.tsx
View File

@ -1,7 +1,9 @@
import { IconButton } from "@mui/joy";
import classNames from "classnames"; import classNames from "classnames";
import copy from "copy-to-clipboard"; import copy from "copy-to-clipboard";
import hljs from "highlight.js"; import hljs from "highlight.js";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
import Icon from "../Icon";
interface Props { interface Props {
language: string; language: string;
@ -27,14 +29,21 @@ const CodeBlock: React.FC<Props> = ({ language, content }: Props) => {
}; };
return ( return (
<pre className="group w-full my-1 p-3 rounded bg-gray-100 dark:bg-zinc-600 whitespace-pre-wrap relative"> <pre className="w-full my-1 p-3 rounded bg-gray-100 dark:bg-zinc-600 whitespace-pre-wrap relative">
<button <IconButton
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" size="sm"
className="!absolute top-0.5 right-0.5 opacity-50"
sx={{
"--IconButton-size": "24px",
}}
onClick={handleCopyButtonClick} onClick={handleCopyButtonClick}
> >
copy <Icon.Copy className="w-4 h-auto" />
</button> </IconButton>
<code className={classNames(`language-${formatedLanguage}`, "block")} dangerouslySetInnerHTML={{ __html: highlightedCode }}></code> <code
className={classNames(`language-${formatedLanguage}`, "block text-sm")}
dangerouslySetInnerHTML={{ __html: highlightedCode }}
></code>
</pre> </pre>
); );
}; };

2
web/src/components/MobileHeader.tsx
View File

@ -17,7 +17,7 @@ const MobileHeader = (props: Props) => {
return ( return (
<div <div
className={classNames( 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" offsetTop > 0 && "shadow-md"
)} )}
> >

4
web/src/components/UserBanner.tsx
View File

@ -33,12 +33,12 @@ const UserBanner = () => {
}; };
return ( 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 <Dropdown
className="w-auto" className="w-auto"
trigger={ 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"> <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> <span className="px-1 text-lg font-medium text-slate-800 dark:text-gray-200 shrink truncate">{title}</span>
{user?.role === User_Role.HOST ? ( {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> <span className="text-xs px-1 bg-blue-600 dark:bg-blue-800 rounded text-white dark:text-gray-200 shadow">MOD</span>