YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-02-16 03:12:13 +01: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
Show Stats 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"
}`}
>

2
web/src/css/global.css
View File

@ -1,5 +1,5 @@
body {
@apply text-base w-full min-h-[100svh] p-0 m-0 bg-zinc-100 dark:bg-zinc-800;
@apply text-base w-full min-h-[100svh] p-0 m-0 bg-zinc-100 dark:bg-zinc-900;
}
#root {

2
web/src/layouts/Root.tsx
View File

@ -11,7 +11,7 @@ function Root() {
<div className="w-full min-h-full">
<div className="w-full sm:pl-56 md:pl-64 mx-auto flex flex-row justify-center items-start">
{sm && (
<div className="hidden sm:block fixed top-0 left-0 w-56 md:w-64 px-4 border-r dark:border-zinc-800 h-full bg-zinc-50 dark:bg-zinc-700 dark:bg-opacity-40 transition-all hover:shadow-xl z-2">
<div className="hidden sm:block fixed top-0 left-0 w-56 md:w-64 px-4 border-r dark:border-zinc-800 h-full bg-zinc-50 dark:bg-zinc-800 dark:bg-opacity-60 transition-all hover:shadow-xl z-2">
<Navigation />
</div>
)}

4
web/src/less/base-dialog.less
View File

@ -10,14 +10,14 @@
}
> .dialog-container {
@apply max-w-full shadow flex flex-col justify-start items-start bg-white dark:bg-zinc-800 dark:text-gray-200 p-4 rounded-lg;
@apply max-w-full shadow flex flex-col justify-start items-start bg-white dark:bg-zinc-800 dark:text-gray-300 p-4 rounded-lg;
> .dialog-header-container {
@apply flex flex-row justify-between items-center w-full mb-4;
> .title-text {
> .icon-text {
@apply mr-2 text-base;
@apply mr-2 text-base dark:text-gray-300;
}
}

6
web/src/less/memo.less
View File

@ -1,8 +1,8 @@
.memo-wrapper {
@apply relative flex flex-col justify-start items-start w-full p-4 pt-3 mb-2 bg-white dark:bg-zinc-700 rounded-lg border border-white dark:border-zinc-600 hover:border-gray-200 dark:hover:border-zinc-600;
@apply relative flex flex-col justify-start items-start w-full p-4 pt-3 mb-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;
&.pinned {
@apply border-gray-200 border dark:border-zinc-600;
@apply border-gray-200 border dark:border-zinc-700;
}
> .memo-top-wrapper {
@ -15,7 +15,7 @@
@apply hidden flex-col justify-start items-center absolute top-2 -right-4 flex-nowrap hover:flex p-3;
> .more-action-btns-container {
@apply w-auto h-auto p-1 z-1 whitespace-nowrap rounded-lg bg-white dark:bg-zinc-800;
@apply w-auto h-auto p-1 z-1 whitespace-nowrap rounded-lg bg-white dark:bg-zinc-700;
box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);
> .btn {

2
web/src/less/setting.less
View File

@ -1,5 +1,5 @@
.setting-page-wrapper {
@apply flex flex-row justify-start items-start relative w-full h-full shadow p-4 rounded-lg bg-white dark:bg-zinc-700 dark:text-gray-200 sm:gap-x-4;
@apply flex flex-row justify-start items-start relative w-full h-full shadow p-4 rounded-lg bg-white dark:bg-zinc-800 dark:text-gray-300 sm:gap-x-4;
> .section-selector-container {
@apply hidden sm:flex flex-col justify-start items-start sm:w-40 h-auto sm:h-full shrink-0 pb-2 border-r dark:border-r-zinc-600;

2
web/src/pages/Archived.tsx
View File

@ -86,7 +86,7 @@ const Archived = () => {
{archivedMemos.map((memo) => (
<div
key={memo.id}
className="relative flex flex-col justify-start items-start w-full p-4 pt-3 mb-2 bg-white dark:bg-zinc-700 rounded-lg"
className="relative flex flex-col justify-start items-start w-full p-4 pt-3 mb-2 bg-white dark:bg-zinc-800 rounded-lg"
>
<div className="w-full mb-1 flex flex-row justify-between items-center">
<div className="w-full max-w-[calc(100%-20px)] flex flex-row justify-start items-center mr-1">

4
web/src/pages/Inboxes.tsx
View File

@ -23,13 +23,13 @@ const Inboxes = () => {
<section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
<MobileHeader />
<div className="w-full px-4 sm:px-6">
<div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-700 text-black dark:text-gray-300">
<div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-800 text-black dark:text-gray-300">
<div className="relative w-full flex flex-row justify-between items-center">
<p className="px-2 py-1 flex flex-row justify-start items-center select-none opacity-80">
<Icon.Bell className="w-5 h-auto mr-1" /> {t("common.inbox")}
</p>
</div>
<div className="w-full h-auto flex flex-col justify-start items-start px-2 pb-4 bg-white dark:bg-zinc-700">
<div className="w-full h-auto flex flex-col justify-start items-start px-2 pb-4">
{inboxes.length === 0 && (
<div className="w-full mt-4 mb-8 flex flex-col justify-center items-center italic">
<Empty />

2
web/src/pages/MemoDetail.tsx
View File

@ -115,7 +115,7 @@ const MemoDetail = () => {
<section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
<MobileHeader />
<div className="w-full px-4 sm:px-6">
<div className="relative flex-grow w-full min-h-full flex flex-col justify-start items-start border dark:border-zinc-700 bg-white dark:bg-zinc-700 shadow hover:shadow-xl transition-all p-4 pb-3 rounded-lg">
<div className="relative flex-grow w-full min-h-full flex flex-col justify-start items-start border dark:border-zinc-700 bg-white dark:bg-zinc-800 shadow hover:shadow-xl transition-all p-4 pb-3 rounded-lg">
<div className="mb-3">
<Link to={`/u/${encodeURIComponent(extractUsernameFromName(memo.creator))}`} unstable_viewTransition>
<span className="w-full flex flex-row justify-start items-center">

2
web/src/pages/Resources.tsx
View File

@ -69,7 +69,7 @@ const Resources = () => {
<section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
<MobileHeader />
<div className="w-full px-4 sm:px-6">
<div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-700 text-black dark:text-gray-300">
<div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-800 text-black dark:text-gray-300">
<div className="relative w-full flex flex-row justify-between items-center">
<p className="px-2 py-1 flex flex-row justify-start items-center select-none opacity-80">
<Icon.Paperclip className="w-5 h-auto mr-1" /> {t("common.resources")}

7
web/src/pages/SignIn.tsx
View File

@ -142,7 +142,12 @@ const SignIn = () => {
</div>
</div>
<div className="flex flex-row justify-start items-center w-full mt-6">
<Checkbox label={t("common.remember-me")} checked={remember} onChange={(e) => setRemember(e.target.checked)} />
<Checkbox
className="dark:!text-gray-400"
label={t("common.remember-me")}
checked={remember}
onChange={(e) => setRemember(e.target.checked)}
/>
</div>
<div className="flex flex-row justify-end items-center w-full mt-6">
<Button

6
web/src/pages/Timeline.tsx
View File

@ -61,7 +61,7 @@ const Timeline = () => {
<section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
<MobileHeader />
<div className="w-full px-4 sm:px-6">
<div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-700 text-black dark:text-gray-300">
<div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-800 text-black dark:text-gray-300">
<div className="relative w-full flex flex-row justify-start items-center">
<p
className="px-2 py-1 mr-2 flex flex-row justify-start items-center cursor-pointer select-none rounded opacity-80 hover:bg-gray-100 dark:hover:bg-zinc-700"
@ -89,7 +89,7 @@ const Timeline = () => {
handleClickAway={() => toggleShowDatePicker(false)}
/>
</div>
<div className="w-full h-auto flex flex-col justify-start items-start px-2 pb-4 bg-white dark:bg-zinc-700">
<div className="w-full h-auto flex flex-col justify-start items-start px-2 pb-4 bg-white dark:bg-zinc-800">
<div className="flex flex-col justify-start items-start w-full mt-2">
{sortedMemos.map((memo, index) => (
<div
@ -101,7 +101,7 @@ const Timeline = () => {
{index !== sortedMemos.length - 1 && (
<div className="absolute top-2 left-[7px] h-full w-0.5 bg-gray-400 dark:bg-gray-500 block"></div>
)}
<div className="border-4 rounded-full border-white relative dark:border-zinc-700">
<div className="border-4 rounded-full border-white relative dark:border-zinc-800">
<Icon.Circle className="w-2 h-auto bg-gray-400 text-gray-400 dark:bg-gray-500 dark:text-gray-500 rounded-full" />
</div>
</div>