YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-06-05 22:09:59 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore: tweak dark mode styles

Browse Source
This commit is contained in:
Steven
2024-01-03 23:12:50 +08:00
parent 369b8af109
commit 96140f3875
29 changed files with 62 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -96,7 +96,7 @@ const CreateMemoRelationDialog: React.FC<Props> = (props: Props) => {
<div className="w-full flex flex-row justify-start items-start flex-wrap gap-2 mt-1">
{memoList.map((memo) => (
<div
className="max-w-[50%] text-sm px-3 py-1 flex flex-row justify-start items-center border rounded-md cursor-pointer truncate opacity-80 dark:text-gray-300 hover:opacity-60 hover:line-through"
className="max-w-[50%] text-sm px-3 py-1 flex flex-row justify-start items-center border rounded-md cursor-pointer truncate opacity-80 dark:text-gray-300 dark:border-zinc-700 hover:opacity-60 hover:line-through"
key={memo.id}
onClick={() => handleDeleteMemoRelation(memo)}
>

2
web/src/components/MemoContent/Code.tsx
View File

@ -3,7 +3,7 @@ interface Props {
}
const Code: React.FC<Props> = ({ content }: Props) => {
return <code>{content}</code>;
return <code className="text-sm">`{content}`</code>;
};
export default Code;

2
web/src/components/MemoContent/CodeBlock.tsx
View File

@ -29,7 +29,7 @@ const CodeBlock: React.FC<Props> = ({ language, content }: Props) => {
};
return (
<pre className="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-700 whitespace-pre-wrap relative">
<IconButton
size="sm"
className="!absolute top-0.5 right-0.5 opacity-50"

9
web/src/components/MemoEditor/ActionButton/TagSelector.tsx
View File

@ -24,14 +24,17 @@ const TagSelector = (props: Props) => {
}, []);
return (
<IconButton className="relative group flex flex-row justify-center items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer text-gray-600 dark:text-gray-400 hover:bg-gray-300 dark:hover:bg-zinc-800 hover:shadow">
<IconButton
className="relative group flex flex-row justify-center items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer text-gray-600 dark:!text-gray-400 hover:bg-gray-300 hover:shadow"
size="sm"
>
<Icon.Hash className="w-5 h-5 mx-auto" />
<div className="hidden flex-row justify-start items-start flex-wrap absolute top-8 left-0 mt-1 p-1 z-1 rounded w-52 h-auto max-h-48 overflow-y-auto font-mono shadow bg-zinc-200 dark:bg-zinc-600 group-hover:flex">
<div className="hidden flex-row justify-start items-start flex-wrap absolute top-8 left-0 mt-1 p-1 z-1 rounded w-52 h-auto max-h-48 overflow-y-auto font-mono shadow bg-zinc-100 dark:bg-zinc-700 group-hover:flex">
{tags.length > 0 ? (
tags.map((tag) => {
return (
<div
className="w-auto max-w-full text-black dark:text-gray-300 cursor-pointer rounded text-sm leading-6 px-2 hover:bg-zinc-300 dark:hover:bg-zinc-700 shrink-0"
className="w-auto max-w-full text-black dark:text-gray-300 cursor-pointer rounded text-sm leading-6 px-2 hover:bg-zinc-200 dark:hover:bg-zinc-800 shrink-0"
onClick={() => onTagSelectorClick(tag)}
key={tag}
>

4
web/src/components/MemoEditor/Editor/TagSuggestions.tsx
View File

@ -114,7 +114,7 @@ const TagSuggestions = ({ editorRef, editorActions }: Props) => {
if (!isVisibleRef.current || !position) return null;
return (
<div
className="z-20 p-1 mt-1 -ml-2 absolute max-w-[12rem] gap-px rounded font-mono flex flex-col justify-start items-start overflow-auto shadow bg-zinc-200 dark:bg-zinc-600"
className="z-20 p-1 mt-1 -ml-2 absolute max-w-[12rem] gap-px rounded font-mono flex flex-col justify-start items-start overflow-auto shadow bg-zinc-100 dark:bg-zinc-700"
style={{ left: position.left, top: position.top + position.height }}
>
{suggestionsRef.current.map((tag, i) => (
@ -122,7 +122,7 @@ const TagSuggestions = ({ editorRef, editorActions }: Props) => {
key={tag}
onMouseDown={() => autocomplete(tag)}
className={classNames(
"rounded p-1 px-2 w-full truncate text-sm dark:text-gray-300 cursor-pointer hover:bg-zinc-300 dark:hover:bg-zinc-700",
"rounded p-1 px-2 w-full truncate text-sm dark:text-gray-300 cursor-pointer hover:bg-zinc-200 dark:hover:bg-zinc-800",
i === selected ? "bg-zinc-300 dark:bg-zinc-700" : ""
)}
>

2
web/src/components/MemoEditor/Editor/index.tsx
View File

@ -145,7 +145,7 @@ const Editor = forwardRef(function Editor(props: Props, ref: React.ForwardedRef<
}, []);
return (
<div className={classNames("flex flex-col justify-start items-start relative w-full h-auto bg-inherit dark:text-gray-200", className)}>
<div className={classNames("flex flex-col justify-start items-start relative w-full h-auto bg-inherit dark:text-gray-300", className)}>
<textarea
className="w-full h-full max-h-[300px] my-1 text-base resize-none overflow-x-hidden overflow-y-auto bg-transparent outline-none whitespace-pre-wrap word-break"
rows={1}

2
web/src/components/MemoEditor/MemoEditorDialog.tsx
View File

@ -52,7 +52,7 @@ export default function showMemoEditorDialog(props: Pick<Props, "memoId" | "rela
{
className: "memo-editor-dialog",
dialogName: "memo-editor-dialog",
containerClassName: "dark:!bg-zinc-700",
containerClassName: "dark:!bg-zinc-800",
},
MemoEditorDialog,
props

4
web/src/components/MemoEditor/RelationListView.tsx
View File

@ -38,13 +38,13 @@ const RelationListView = (props: Props) => {
return (
<div
key={memo.id}
className="w-auto max-w-xs overflow-hidden flex flex-row justify-start items-center bg-gray-100 dark:bg-zinc-800 hover:opacity-80 rounded-md text-sm p-1 px-2 text-gray-500 cursor-pointer hover:line-through"
className="w-auto max-w-xs overflow-hidden flex flex-row justify-start items-center bg-zinc-100 dark:bg-zinc-900 hover:opacity-80 rounded-md text-sm p-1 px-2 text-gray-500 dark:text-gray-400 cursor-pointer hover:line-through"
onClick={() => handleDeleteRelation(memo)}
>
<Icon.Link className="w-4 h-auto shrink-0 opacity-80" />
<span className="px-1 shrink-0 opacity-80">#{memo.id}</span>
<span className="max-w-full text-ellipsis whitespace-nowrap overflow-hidden">{memo.content}</span>
<Icon.X className="w-4 h-auto hover:opacity-80 shrink-0 ml-1" />
<Icon.X className="w-4 h-auto cursor-pointer opacity-60 hover:opacity-100" />
</div>
);
})}

2
web/src/components/MemoEditor/ResourceListView.tsx
View File

@ -22,7 +22,7 @@ const ResourceListView = (props: Props) => {
return (
<div
key={resource.id}
className="max-w-full flex flex-row justify-start items-center flex-nowrap gap-x-1 bg-gray-100 dark:bg-zinc-800 px-2 py-1 rounded text-gray-500"
className="max-w-full flex flex-row justify-start items-center flex-nowrap gap-x-1 bg-zinc-100 dark:bg-zinc-900 px-2 py-1 rounded text-gray-500 dark:text-gray-400"
>
<ResourceIcon resource={resource} className="!w-4 !h-4 !opacity-100" />
<span className="text-sm max-w-[8rem] truncate">{resource.filename}</span>

8
web/src/components/MemoEditor/index.tsx
View File

@ -357,7 +357,7 @@ const MemoEditor = (props: Props) => {
<div
className={`${
className ?? ""
} relative w-full flex flex-col justify-start items-start bg-white dark:bg-zinc-700 px-4 pt-4 rounded-lg border border-gray-200 dark:border-zinc-600`}
} relative w-full flex flex-col justify-start items-start bg-white dark:bg-zinc-800 px-4 pt-4 rounded-lg border border-gray-200 dark:border-zinc-700`}
tabIndex={0}
onKeyDown={handleKeyDown}
onDrop={handleDropEvent}
@ -368,13 +368,15 @@ const MemoEditor = (props: Props) => {
<div className="flex flex-row justify-start items-center">
<TagSelector onTagSelectorClick={(tag) => handleTagSelectorClick(tag)} />
<IconButton
className="flex flex-row justify-center items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer text-gray-600 dark:text-gray-400 hover:bg-gray-300 dark:hover:bg-zinc-800 hover:shadow"
className="flex flex-row justify-center items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer text-gray-600 dark:!text-gray-400 hover:bg-gray-300 dark:hover:bg-zinc-800 hover:shadow"
size="sm"
onClick={handleUploadFileBtnClick}
>
<Icon.Image className="w-5 h-5 mx-auto" />
</IconButton>
<IconButton
className="flex flex-row justify-center items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer text-gray-600 dark:text-gray-400 hover:bg-gray-300 dark:hover:bg-zinc-800 hover:shadow"
className="flex flex-row justify-center items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer text-gray-600 dark:!text-gray-400 hover:bg-gray-300 dark:hover:bg-zinc-800 hover:shadow"
size="sm"
onClick={handleAddMemoRelationBtnClick}
>
<Icon.Link className="w-5 h-5 mx-auto" />

8
web/src/components/MemoFilter.tsx
View File

@ -18,14 +18,14 @@ const MemoFilter = () => {
return (
<div
className={`flex flex-row justify-start items-start w-full flex-wrap px-2 pb-2 text-sm font-mono leading-7 dark:text-gray-300 ${
className={`flex flex-row justify-start items-start w-full flex-wrap px-2 pb-2 text-sm font-mono leading-7 dark:text-gray-400 ${
showFilter ? "" : "!hidden"
}`}
>
<span className="mx-2 text-gray-400">{t("common.filter")}:</span>
<div
className={
"max-w-xs flex flex-row justify-start items-center px-2 mr-2 cursor-pointer dark:text-gray-300 bg-gray-200 dark:bg-zinc-700 rounded whitespace-nowrap truncate hover:line-through " +
"max-w-xs flex flex-row justify-start items-center px-2 mr-2 cursor-pointer dark:text-gray-400 bg-gray-200 dark:bg-zinc-800 rounded whitespace-nowrap truncate hover:line-through " +
(tagQuery ? "" : "!hidden")
}
onClick={() => {
@ -37,7 +37,7 @@ const MemoFilter = () => {
</div>
<div
className={
"max-w-xs flex flex-row justify-start items-center px-2 mr-2 cursor-pointer dark:text-gray-300 bg-gray-200 dark:bg-zinc-700 rounded whitespace-nowrap truncate hover:line-through " +
"max-w-xs flex flex-row justify-start items-center px-2 mr-2 cursor-pointer dark:text-gray-400 bg-gray-200 dark:bg-zinc-800 rounded whitespace-nowrap truncate hover:line-through " +
(visibility ? "" : "!hidden")
}
onClick={() => {
@ -49,7 +49,7 @@ const MemoFilter = () => {
</div>
<div
className={
"max-w-xs flex flex-row justify-start items-center px-2 mr-2 cursor-pointer dark:text-gray-300 bg-gray-200 dark:bg-zinc-700 rounded whitespace-nowrap truncate hover:line-through " +
"max-w-xs flex flex-row justify-start items-center px-2 mr-2 cursor-pointer dark:text-gray-400 bg-gray-200 dark:bg-zinc-800 rounded whitespace-nowrap truncate hover:line-through " +
(textQuery ? "" : "!hidden")
}
onClick={() => {

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

@ -42,7 +42,7 @@ const MemoRelationListView = (props: Props) => {
return (
<div key={memo.id} className="block w-auto max-w-[50%]">
<Link
className="px-2 border rounded-md w-auto text-sm leading-6 flex flex-row justify-start items-center flex-nowrap text-gray-600 dark:text-gray-300 dark:border-gray-600 hover:shadow hover:opacity-80"
className="px-2 border rounded-md w-auto text-sm leading-6 flex flex-row justify-start items-center flex-nowrap text-gray-600 dark:text-gray-400 dark:border-zinc-700 dark:bg-zinc-900 hover:shadow hover:opacity-80"
to={`/m/${memo.id}`}
unstable_viewTransition
>

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

@ -17,7 +17,7 @@ const MobileHeader = (props: Props) => {
return (
<div
className={classNames(
"sticky top-0 pt-3 pb-2 sm:pt-2 px-4 sm:px-6 sm: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-1",
"sticky top-0 pt-3 pb-2 sm:pt-2 px-4 sm:px-6 sm:mb-1 bg-zinc-100 dark:bg-zinc-900 bg-opacity-80 backdrop-blur-lg flex md:hidden flex-row justify-between items-center w-full h-auto flex-nowrap shrink-0 z-1",
offsetTop > 0 && "shadow-md"
)}
>

20
web/src/components/PersonalStatistics.tsx
View File

@ -35,32 +35,28 @@ const PersonalStatistics = (props: Props) => {
}, [memos.length, user.name]);
return (
<div className="w-full border mt-2 py-2 px-3 rounded-md space-y-0.5 bg-zinc-50 dark:bg-zinc-900 dark:border-zinc-800">
<p className="text-sm font-medium text-gray-500">Statistics</p>
<div className="w-full border mt-2 py-2 px-3 rounded-md space-y-0.5 text-gray-500 dark:text-gray-400 bg-zinc-50 dark:bg-zinc-900 dark:border-zinc-800">
<p className="text-sm font-medium">Statistics</p>
<div className="w-full flex justify-between items-center">
<div className="w-full flex justify-start items-center text-gray-500">
<div className="w-full flex justify-start items-center">
<Icon.CalendarDays className="w-4 h-auto mr-1" />
<span className="block text-base sm:text-sm">Days</span>
</div>
<span className="text-gray-500 font-mono">{days}</span>
<span className="font-mono">{days}</span>
</div>
<div className="w-full flex justify-between items-center">
<div className="w-full flex justify-start items-center text-gray-500">
<div className="w-full flex justify-start items-center">
<Icon.PencilLine className="w-4 h-auto mr-1" />
<span className="block text-base sm:text-sm">Memos</span>
</div>
{isRequesting ? (
<Icon.Loader className="animate-spin w-4 h-auto text-gray-400" />
) : (
<span className="text-gray-500 font-mono">{memoAmount}</span>
)}
{isRequesting ? <Icon.Loader className="animate-spin w-4 h-auto text-gray-400" /> : <span className="font-mono">{memoAmount}</span>}
</div>
<div className="w-full flex justify-between items-center">
<div className="w-full flex justify-start items-center text-gray-500">
<div className="w-full flex justify-start items-center">
<Icon.Hash className="w-4 h-auto mr-1" />
<span className="block text-base sm:text-sm">Tags</span>
</div>
<span className="text-gray-500 font-mono">{tags}</span>
<span className="font-mono">{tags}</span>
</div>
</div>
);

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

@ -27,7 +27,7 @@ const ResourceIcon = (props: Props) => {
return (
<SquareDiv className={classNames(className, "flex items-center justify-center overflow-clip")}>
<img
className="min-w-full min-h-full object-cover shadow"
className="min-w-full min-h-full object-cover border rounded dark:border-none"
src={resource.externalLink ? resourceUrl : resourceUrl + "?thumbnail=1"}
onClick={() => showPreviewImageDialog(resourceUrl)}
/>

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

@ -30,7 +30,7 @@ const SearchBar = () => {
return (
<div className="w-full h-9 flex flex-row justify-start items-center">
<Input
className="w-full !shadow-none !border-gray-200 dark:!border-zinc-800"
className="w-full !text-sm !shadow-none !border-gray-200 dark:!border-zinc-800"
size="md"
startDecorator={<Icon.Search className="w-4 h-auto opacity-30" />}
placeholder={t("memo.search-placeholder")}

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

@ -103,7 +103,7 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
<MemoContent nodes={memo.nodes} />
<MemoResourceListView resourceList={memo.resources} />
</div>
<div className="flex flex-row justify-between items-center w-full bg-gray-100 dark:bg-zinc-700 py-4 px-6">
<div className="flex flex-row justify-between items-center w-full bg-gray-100 dark:bg-zinc-900 py-4 px-6">
<div className="flex flex-row justify-start items-center">
<UserAvatar className="mr-2" avatarUrl={user.avatarUrl} />
<div className="w-auto grow truncate flex mr-2 flex-col justify-center items-start">

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

@ -75,7 +75,7 @@ const TagList = () => {
<span className="text-sm leading-6 font-mono text-gray-400">{t("common.tags")}</span>
<button
onClick={() => showCreateTagDialog()}
className="flex flex-col justify-center items-center w-5 h-5 bg-gray-200 dark:bg-zinc-700 rounded ml-2 hover:shadow"
className="flex flex-col justify-center items-center w-5 h-5 bg-gray-200 dark:bg-zinc-800 rounded ml-2 hover:shadow"
>
<Icon.Plus className="w-4 h-4 text-gray-400" />
</button>
@ -141,7 +141,7 @@ const TagItemContainer: React.FC<TagItemContainerProps> = (props: TagItemContain
</div>
{hasSubTags ? (
<div
className={`w-[calc(100%-0.5rem)] flex flex-col justify-start items-start h-auto ml-2 pl-2 border-l-2 border-l-gray-200 dark:border-l-gray-400 ${
className={`w-[calc(100%-0.5rem)] flex flex-col justify-start items-start h-auto ml-2 pl-2 border-l-2 border-l-gray-200 dark:border-l-zinc-800 ${
!showSubTags && "!hidden"
}`}
>