usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-11-09 08:52:29 +08:00
Code Issues Projects Releases Packages Wiki Activity

fix: border color

Browse source
This commit is contained in:
Johnny 2025-06-08 00:39:51 +08:00
parent f5c64849d2
commit 522da2a114
16 changed files with 30 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
web/src/components/HomeSidebar/TagsSection.tsx
View file

@ -106,7 +106,7 @@ const TagsSection = observer((props: Props) => {
) )
) : ( ) : (
!props.readonly && ( !props.readonly && (
<div className="p-2 border border-dashed dark:border-zinc-800 rounded-md flex flex-row justify-start items-start gap-1 text-gray-400 dark:text-gray-500"> <div className="p-2 border border-dashed border-zinc-200 dark:border-zinc-800 rounded-md flex flex-row justify-start items-start gap-1 text-gray-400 dark:text-gray-500">
<TagsIcon /> <TagsIcon />
<p className="mt-0.5 text-sm leading-snug italic">{t("tag.create-tags-guide")}</p> <p className="mt-0.5 text-sm leading-snug italic">{t("tag.create-tags-guide")}</p>
</div> </div>

2
web/src/components/MemoContent/EmbeddedContent/EmbeddedMemo.tsx
View file

@ -67,7 +67,7 @@ const EmbeddedMemo = observer(({ resourceId: uid, params: paramsStr }: Props) =>
}; };
return ( return (
<div className="relative flex flex-col justify-start items-start w-full px-3 py-2 bg-zinc-50 dark:bg-zinc-900 rounded-lg border border-gray-200 dark:border-zinc-700 hover:shadow"> <div className="relative flex flex-col justify-start items-start w-full px-3 py-2 bg-zinc-50 dark:bg-zinc-900 rounded-lg border border-zinc-200 dark:border-zinc-700 hover:shadow">
<div className="w-full mb-1 flex flex-row justify-between items-center text-gray-400 dark:text-gray-500"> <div className="w-full mb-1 flex flex-row justify-between items-center text-gray-400 dark:text-gray-500">
<div className="text-sm leading-5 select-none"> <div className="text-sm leading-5 select-none">
<relative-time datetime={memo.displayTime?.toISOString()} format="datetime"></relative-time> <relative-time datetime={memo.displayTime?.toISOString()} format="datetime"></relative-time>

8
web/src/components/MemoContent/Table.tsx
View file

@ -9,9 +9,9 @@ interface Props {
const Table = ({ header, rows }: Props) => { const Table = ({ header, rows }: Props) => {
return ( return (
<table className="w-auto max-w-full border border-gray-300 dark:border-zinc-600 divide-y divide-gray-300 dark:divide-zinc-600"> <table className="w-auto max-w-full border border-zinc-200 dark:border-zinc-600 divide-y divide-zinc-200 dark:divide-zinc-600">
<thead className="text-sm font-medium leading-5 text-left text-gray-900 dark:text-gray-400"> <thead className="text-sm font-medium leading-5 text-left text-gray-900 dark:text-gray-400">
<tr className="divide-x divide-gray-300 dark:divide-zinc-600"> <tr className="divide-x divide-zinc-200 dark:divide-zinc-600">
{header.map((h, i) => ( {header.map((h, i) => (
<th key={i} className="py-1 px-2"> <th key={i} className="py-1 px-2">
<Renderer key={`${h.type}-${i}`} index={String(i)} node={h} /> <Renderer key={`${h.type}-${i}`} index={String(i)} node={h} />
@ -19,9 +19,9 @@ const Table = ({ header, rows }: Props) => {
))} ))}
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-gray-300 dark:divide-zinc-600 text-sm leading-5 text-left text-gray-900 dark:text-gray-400"> <tbody className="divide-y divide-zinc-200 dark:divide-zinc-600 text-sm leading-5 text-left text-gray-900 dark:text-gray-400">
{rows.map((row, i) => ( {rows.map((row, i) => (
<tr key={i} className="divide-x divide-gray-300 dark:divide-zinc-600"> <tr key={i} className="divide-x divide-zinc-200 dark:divide-zinc-600">
{row.cells.map((r, j) => ( {row.cells.map((r, j) => (
<td key={j} className="py-1 px-2"> <td key={j} className="py-1 px-2">
<Renderer key={`${r.type}-${i}-${j}`} index={String(j)} node={r} /> <Renderer key={`${r.type}-${i}-${j}`} index={String(j)} node={r} />

8
web/src/components/MemoDetailSidebar/MemoDetailSidebar.tsx
View file

@ -23,7 +23,7 @@ const MemoDetailSidebar = ({ memo, className, parentPage }: Props) => {
> >
<div className="flex flex-col justify-start items-start w-full px-1 gap-2 h-auto shrink-0 flex-nowrap hide-scrollbar"> <div className="flex flex-col justify-start items-start w-full px-1 gap-2 h-auto shrink-0 flex-nowrap hide-scrollbar">
{shouldShowRelationGraph && ( {shouldShowRelationGraph && (
<div className="relative w-full h-36 border rounded-lg bg-zinc-50 dark:bg-zinc-900 dark:border-zinc-800"> <div className="relative w-full h-36 border border-zinc-200 rounded-lg bg-zinc-50 dark:bg-zinc-900 dark:border-zinc-800">
<MemoRelationForceGraph className="w-full h-full" memo={memo} parentPage={parentPage} /> <MemoRelationForceGraph className="w-full h-full" memo={memo} parentPage={parentPage} />
<div className="absolute top-1 left-2 text-xs opacity-60 font-mono gap-1 flex flex-row items-center"> <div className="absolute top-1 left-2 text-xs opacity-60 font-mono gap-1 flex flex-row items-center">
<span>{t("common.relations")}</span> <span>{t("common.relations")}</span>
@ -52,7 +52,7 @@ const MemoDetailSidebar = ({ memo, className, parentPage }: Props) => {
</p> </p>
<div className="w-full flex flex-row justify-start items-center gap-x-2 gap-y-1 flex-wrap text-gray-500 dark:text-gray-400"> <div className="w-full flex flex-row justify-start items-center gap-x-2 gap-y-1 flex-wrap text-gray-500 dark:text-gray-400">
{property.hasLink && ( {property.hasLink && (
<div className="w-auto border dark:border-zinc-800 pl-1 pr-1.5 rounded-md flex justify-between items-center"> <div className="w-auto border border-zinc-200 dark:border-zinc-800 pl-1 pr-1.5 rounded-md flex justify-between items-center">
<div className="w-auto flex justify-start items-center mr-1"> <div className="w-auto flex justify-start items-center mr-1">
<LinkIcon className="w-4 h-auto mr-1" /> <LinkIcon className="w-4 h-auto mr-1" />
<span className="block text-sm">{t("memo.links")}</span> <span className="block text-sm">{t("memo.links")}</span>
@ -60,7 +60,7 @@ const MemoDetailSidebar = ({ memo, className, parentPage }: Props) => {
</div> </div>
)} )}
{property.hasTaskList && ( {property.hasTaskList && (
<div className="w-auto border dark:border-zinc-800 pl-1 pr-1.5 rounded-md flex justify-between items-center"> <div className="w-auto border border-zinc-200 dark:border-zinc-800 pl-1 pr-1.5 rounded-md flex justify-between items-center">
<div className="w-auto flex justify-start items-center mr-1"> <div className="w-auto flex justify-start items-center mr-1">
<CheckCircleIcon className="w-4 h-auto mr-1" /> <CheckCircleIcon className="w-4 h-auto mr-1" />
<span className="block text-sm">{t("memo.to-do")}</span> <span className="block text-sm">{t("memo.to-do")}</span>
@ -68,7 +68,7 @@ const MemoDetailSidebar = ({ memo, className, parentPage }: Props) => {
</div> </div>
)} )}
{property.hasCode && ( {property.hasCode && (
<div className="w-auto border dark:border-zinc-800 pl-1 pr-1.5 rounded-md flex justify-between items-center"> <div className="w-auto border border-zinc-200 dark:border-zinc-800 pl-1 pr-1.5 rounded-md flex justify-between items-center">
<div className="w-auto flex justify-start items-center mr-1"> <div className="w-auto flex justify-start items-center mr-1">
<Code2Icon className="w-4 h-auto mr-1" /> <Code2Icon className="w-4 h-auto mr-1" />
<span className="block text-sm">{t("memo.code")}</span> <span className="block text-sm">{t("memo.code")}</span>

2
web/src/components/MemoFilters.tsx
View file

@ -49,7 +49,7 @@ const MemoFilters = observer(() => {
{filters.map((filter: MemoFilter) => ( {filters.map((filter: MemoFilter) => (
<div <div
key={getMemoFilterKey(filter)} key={getMemoFilterKey(filter)}
className="w-auto leading-7 h-7 shrink-0 flex flex-row items-center gap-1 bg-white dark:bg-zinc-800 border dark:border-zinc-700 pl-1.5 pr-1 rounded-md hover:line-through cursor-pointer" className="w-auto leading-7 h-7 shrink-0 flex flex-row items-center gap-1 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 pl-1.5 pr-1 rounded-md hover:line-through cursor-pointer"
onClick={() => memoFilterStore.removeFilter((f: MemoFilter) => isEqual(f, filter))} onClick={() => memoFilterStore.removeFilter((f: MemoFilter) => isEqual(f, filter))}
> >
<FactorIcon className="w-4 h-auto text-gray-500 dark:text-gray-400 opacity-60" factor={filter.factor} /> <FactorIcon className="w-4 h-auto text-gray-500 dark:text-gray-400 opacity-60" factor={filter.factor} />

6
web/src/components/MemoRelationListView.tsx
View file

@ -29,7 +29,7 @@ const MemoRelationListView = (props: Props) => {
} }
return ( return (
<div className="relative flex flex-col justify-start items-start w-full px-2 pt-2 pb-1.5 bg-zinc-50 dark:bg-zinc-900 rounded-lg border border-gray-200 dark:border-zinc-700"> <div className="relative flex flex-col justify-start items-start w-full px-2 pt-2 pb-1.5 bg-zinc-50 dark:bg-zinc-900 rounded-lg border border-zinc-200 dark:border-zinc-700">
<div className="w-full flex flex-row justify-start items-center mb-1 gap-3 opacity-60"> <div className="w-full flex flex-row justify-start items-center mb-1 gap-3 opacity-60">
{referencingMemoList.length > 0 && ( {referencingMemoList.length > 0 && (
<button <button
@ -71,7 +71,7 @@ const MemoRelationListView = (props: Props) => {
from: parentPage, from: parentPage,
}} }}
> >
<span className="text-xs opacity-60 leading-4 border font-mono px-1 rounded-full mr-1 dark:border-zinc-700"> <span className="text-xs opacity-60 leading-4 border border-zinc-200 font-mono px-1 rounded-full mr-1 dark:border-zinc-700">
{memo.uid.slice(0, 6)} {memo.uid.slice(0, 6)}
</span> </span>
<span className="truncate">{memo.snippet}</span> <span className="truncate">{memo.snippet}</span>
@ -93,7 +93,7 @@ const MemoRelationListView = (props: Props) => {
from: parentPage, from: parentPage,
}} }}
> >
<span className="text-xs opacity-60 leading-4 border font-mono px-1 rounded-full mr-1 dark:border-zinc-700"> <span className="text-xs opacity-60 leading-4 border border-zinc-200 font-mono px-1 rounded-full mr-1 dark:border-zinc-700">
{memo.uid.slice(0, 6)} {memo.uid.slice(0, 6)}
</span> </span>
<span className="truncate">{memo.snippet}</span> <span className="truncate">{memo.snippet}</span>

2
web/src/components/MemoResourceListView.tsx
View file

@ -48,7 +48,7 @@ const MemoResourceListView = ({ resources = [] }: { resources: Resource[] }) =>
return ( return (
<video <video
className={cn( className={cn(
"cursor-pointer h-full w-auto rounded-lg border dark:border-zinc-800 object-contain bg-zinc-100 dark:bg-zinc-800", "cursor-pointer h-full w-auto rounded-lg border border-zinc-200 dark:border-zinc-800 object-contain bg-zinc-100 dark:bg-zinc-800",
className, className,
)} )}
preload="metadata" preload="metadata"

4
web/src/components/Navigation.tsx
View file

@ -78,9 +78,9 @@ const Navigation = observer((props: Props) => {
<NavLink <NavLink
className={({ isActive }) => className={({ isActive }) =>
cn( cn(
"px-2 py-2 rounded-2xl border flex flex-row items-center text-lg text-gray-800 dark:text-gray-400 hover:bg-white hover:border-gray-200 dark:hover:border-zinc-700 dark:hover:bg-zinc-800", "px-2 py-2 rounded-2xl border flex flex-row items-center text-lg text-gray-800 dark:text-gray-400 hover:bg-white hover:border-zinc-200 dark:hover:border-zinc-700 dark:hover:bg-zinc-800",
collapsed ? "" : "w-full px-4", collapsed ? "" : "w-full px-4",
isActive ? "bg-white drop-shadow-sm dark:bg-zinc-900 border-gray-200 dark:border-zinc-700" : "border-transparent", isActive ? "bg-white drop-shadow-sm dark:bg-zinc-900 border-zinc-200 dark:border-zinc-700" : "border-transparent",
) )
} }
key={navLink.id} key={navLink.id}

5
web/src/components/ReactionSelector.tsx
View file

@ -58,7 +58,10 @@ const ReactionSelector = observer((props: Props) => {
<Dropdown open={open} onOpenChange={(_, isOpen) => setOpen(isOpen)}> <Dropdown open={open} onOpenChange={(_, isOpen) => setOpen(isOpen)}>
<MenuButton slots={{ root: "div" }}> <MenuButton slots={{ root: "div" }}>
<span <span
className={cn("h-7 w-7 flex justify-center items-center rounded-full border dark:border-zinc-700 hover:opacity-70", className)} className={cn(
"h-7 w-7 flex justify-center items-center rounded-full border border-zinc-200 dark:border-zinc-700 hover:opacity-70",
className,
)}
> >
<SmilePlusIcon className="w-4 h-4 mx-auto text-gray-500 dark:text-gray-400" /> <SmilePlusIcon className="w-4 h-4 mx-auto text-gray-500 dark:text-gray-400" />
</span> </span>

2
web/src/components/ReactionView.tsx
View file

@ -68,7 +68,7 @@ const ReactionView = observer((props: Props) => {
<Tooltip title={stringifyUsers(users, reactionType)} placement="top"> <Tooltip title={stringifyUsers(users, reactionType)} placement="top">
<div <div
className={cn( className={cn(
"h-7 border px-2 py-0.5 rounded-full flex flex-row justify-center items-center gap-1 dark:border-zinc-700", "h-7 border border-zinc-200 px-2 py-0.5 rounded-full flex flex-row justify-center items-center gap-1 dark:border-zinc-700",
"text-sm text-gray-600 dark:text-gray-400", "text-sm text-gray-600 dark:text-gray-400",
currentUser && !readonly && "cursor-pointer", currentUser && !readonly && "cursor-pointer",
hasReaction && "bg-blue-100 border-blue-200 dark:bg-zinc-900", hasReaction && "bg-blue-100 border-blue-200 dark:bg-zinc-900",

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

@ -35,7 +35,7 @@ const SearchBar = observer(() => {
<SearchIcon className="absolute left-2 w-4 h-auto opacity-40 dark:text-zinc-300" /> <SearchIcon className="absolute left-2 w-4 h-auto opacity-40 dark:text-zinc-300" />
<input <input
className={cn( className={cn(
"w-full text-gray-500 leading-6 dark:text-zinc-300 placeholder:opacity-80 bg-zinc-50 dark:bg-zinc-900 border dark:border-zinc-800 border-zinc-200 text-sm rounded-xl p-1 pl-8 outline-0", "w-full text-gray-500 leading-6 dark:text-zinc-300 placeholder:opacity-80 bg-zinc-50 dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 text-sm rounded-xl p-1 pl-8 outline-0",
)} )}
placeholder={t("memo.search-placeholder")} placeholder={t("memo.search-placeholder")}
value={queryText} value={queryText}

2
web/src/components/Settings/AccessTokenSection.tsx
View file

@ -73,7 +73,7 @@ const AccessTokenSection = () => {
</div> </div>
<div className="w-full mt-2 flow-root"> <div className="w-full mt-2 flow-root">
<div className="overflow-x-auto"> <div className="overflow-x-auto">
<div className="inline-block min-w-full border rounded-lg align-middle dark:border-zinc-600"> <div className="inline-block min-w-full border border-zinc-200 rounded-lg align-middle dark:border-zinc-600">
<table className="min-w-full divide-y divide-gray-300 dark:divide-zinc-600"> <table className="min-w-full divide-y divide-gray-300 dark:divide-zinc-600">
<thead> <thead>
<tr> <tr>

4
web/src/components/Settings/MemberSection.tsx
View file

@ -143,7 +143,7 @@ const MemberSection = observer(() => {
return ( return (
<div className="w-full flex flex-col gap-2 pt-2 pb-4"> <div className="w-full flex flex-col gap-2 pt-2 pb-4">
<p className="font-medium text-gray-700 dark:text-gray-500">{t("setting.member-section.create-a-member")}</p> <p className="font-medium text-gray-700 dark:text-gray-500">{t("setting.member-section.create-a-member")}</p>
<div className="w-auto flex flex-col justify-start items-start gap-2 border rounded-md py-2 px-3 dark:border-zinc-700"> <div className="w-auto flex flex-col justify-start items-start gap-2 border border-zinc-200 rounded-md py-2 px-3 dark:border-zinc-700">
<div className="flex flex-col justify-start items-start gap-1"> <div className="flex flex-col justify-start items-start gap-1">
<span>{t("common.username")}</span> <span>{t("common.username")}</span>
<Input <Input
@ -181,7 +181,7 @@ const MemberSection = observer(() => {
<div className="title-text">{t("setting.member-list")}</div> <div className="title-text">{t("setting.member-list")}</div>
</div> </div>
<div className="w-full overflow-x-auto"> <div className="w-full overflow-x-auto">
<div className="inline-block min-w-full align-middle border rounded-lg dark:border-zinc-600"> <div className="inline-block min-w-full align-middle border border-zinc-200 rounded-lg dark:border-zinc-600">
<table className="min-w-full divide-y divide-gray-300 dark:divide-zinc-600"> <table className="min-w-full divide-y divide-gray-300 dark:divide-zinc-600">
<thead> <thead>
<tr className="text-sm font-semibold text-left text-gray-900 dark:text-gray-400"> <tr className="text-sm font-semibold text-left text-gray-900 dark:text-gray-400">

2
web/src/components/Settings/WebhookSection.tsx
View file

@ -60,7 +60,7 @@ const WebhookSection = () => {
</div> </div>
<div className="w-full mt-2 flow-root"> <div className="w-full mt-2 flow-root">
<div className="overflow-x-auto"> <div className="overflow-x-auto">
<div className="inline-block min-w-full border rounded-lg align-middle dark:border-zinc-600"> <div className="inline-block min-w-full border border-zinc-200 rounded-lg align-middle dark:border-zinc-600">
<table className="min-w-full divide-y divide-gray-300 dark:divide-zinc-600"> <table className="min-w-full divide-y divide-gray-300 dark:divide-zinc-600">
<thead> <thead>
<tr> <tr>

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

@ -93,7 +93,7 @@ const MemoDetail = observer(() => {
{parentMemo && ( {parentMemo && (
<div className="w-auto inline-block mb-2"> <div className="w-auto inline-block mb-2">
<Link <Link
className="px-3 py-1 border rounded-lg max-w-xs w-auto text-sm flex flex-row justify-start items-center flex-nowrap text-gray-600 dark:text-gray-400 dark:border-gray-500 hover:shadow hover:opacity-80" className="px-3 py-1 border border-zinc-200 rounded-lg max-w-xs w-auto text-sm flex flex-row justify-start items-center flex-nowrap text-gray-600 dark:text-gray-400 dark:border-gray-500 hover:shadow hover:opacity-80"
to={`/${parentMemo.name}`} to={`/${parentMemo.name}`}
state={locationState} state={locationState}
viewTransition viewTransition

4
web/src/pages/Resources.tsx
View file

@ -111,7 +111,7 @@ const Resources = observer(() => {
{resources.map((resource) => { {resources.map((resource) => {
return ( return (
<div key={resource.name} className="w-24 sm:w-32 h-auto flex flex-col justify-start items-start"> <div key={resource.name} className="w-24 sm:w-32 h-auto flex flex-col justify-start items-start">
<div className="w-24 h-24 flex justify-center items-center sm:w-32 sm:h-32 border dark:border-zinc-900 overflow-clip rounded-xl cursor-pointer hover:shadow hover:opacity-80"> <div className="w-24 h-24 flex justify-center items-center sm:w-32 sm:h-32 border border-zinc-200 dark:border-zinc-900 overflow-clip rounded-xl cursor-pointer hover:shadow hover:opacity-80">
<ResourceIcon resource={resource} strokeWidth={0.5} /> <ResourceIcon resource={resource} strokeWidth={0.5} />
</div> </div>
<div className="w-full max-w-full flex flex-row justify-between items-center mt-1 px-1"> <div className="w-full max-w-full flex flex-row justify-between items-center mt-1 px-1">
@ -143,7 +143,7 @@ const Resources = observer(() => {
{unusedResources.map((resource) => { {unusedResources.map((resource) => {
return ( return (
<div key={resource.name} className="w-24 sm:w-32 h-auto flex flex-col justify-start items-start"> <div key={resource.name} className="w-24 sm:w-32 h-auto flex flex-col justify-start items-start">
<div className="w-24 h-24 flex justify-center items-center sm:w-32 sm:h-32 border dark:border-zinc-900 overflow-clip rounded-xl cursor-pointer hover:shadow hover:opacity-80"> <div className="w-24 h-24 flex justify-center items-center sm:w-32 sm:h-32 border border-zinc-200 dark:border-zinc-900 overflow-clip rounded-xl cursor-pointer hover:shadow hover:opacity-80">
<ResourceIcon resource={resource} strokeWidth={0.5} /> <ResourceIcon resource={resource} strokeWidth={0.5} />
</div> </div>
<div className="w-full max-w-full flex flex-row justify-between items-center mt-1 px-1"> <div className="w-full max-w-full flex flex-row justify-between items-center mt-1 px-1">