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: adjust header style (#1493)

Browse Source
This commit is contained in:
boojack
2023-04-08 21:50:07 +08:00
committed by GitHub
parent 4e023e2500
commit 680b8ede6c
4 changed files with 30 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
web/src/components/Header.tsx
View File

@ -57,11 +57,11 @@ const Header = () => {
className={({ isActive }) => className={({ isActive }) =>
`${ `${
isActive && "bg-white dark:bg-zinc-700 shadow" isActive && "bg-white dark:bg-zinc-700 shadow"
} px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg dark:text-gray-200 hover:bg-white hover:shadow dark:hover:bg-zinc-700` } px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:shadow dark:hover:bg-zinc-700`
} }
> >
<> <>
<Icon.Home className="mr-4 w-6 h-auto opacity-80" /> {t("common.home")} <Icon.Home className="mr-3 w-6 h-auto opacity-70" /> {t("common.home")}
</> </>
</NavLink> </NavLink>
<NavLink <NavLink
@ -70,11 +70,11 @@ const Header = () => {
className={({ isActive }) => className={({ isActive }) =>
`${ `${
isActive && "bg-white dark:bg-zinc-700 shadow" isActive && "bg-white dark:bg-zinc-700 shadow"
} px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg dark:text-gray-200 hover:bg-white hover:shadow dark:hover:bg-zinc-700` } px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:shadow dark:hover:bg-zinc-700`
} }
> >
<> <>
<Icon.Calendar className="mr-4 w-6 h-auto opacity-80" /> {t("daily-review.title")} <Icon.Calendar className="mr-3 w-6 h-auto opacity-70" /> {t("daily-review.title")}
</> </>
</NavLink> </NavLink>
<NavLink <NavLink
@ -83,11 +83,11 @@ const Header = () => {
className={({ isActive }) => className={({ isActive }) =>
`${ `${
isActive && "bg-white dark:bg-zinc-700 shadow" isActive && "bg-white dark:bg-zinc-700 shadow"
} px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg dark:text-gray-200 hover:bg-white hover:shadow dark:hover:bg-zinc-700` } px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:shadow dark:hover:bg-zinc-700`
} }
> >
<> <>
<Icon.Paperclip className="mr-4 w-6 h-auto opacity-80" /> {t("common.resources")} <Icon.Paperclip className="mr-3 w-6 h-auto opacity-70" /> {t("common.resources")}
</> </>
</NavLink> </NavLink>
</> </>
@ -98,35 +98,35 @@ const Header = () => {
className={({ isActive }) => className={({ isActive }) =>
`${ `${
isActive && "bg-white dark:bg-zinc-700 shadow" isActive && "bg-white dark:bg-zinc-700 shadow"
} px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg dark:text-gray-200 hover:bg-white hover:shadow dark:hover:bg-zinc-700` } px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:shadow dark:hover:bg-zinc-700`
} }
> >
<> <>
<Icon.Hash className="mr-4 w-6 h-auto opacity-80" /> {t("common.explore")} <Icon.Hash className="mr-3 w-6 h-auto opacity-70" /> {t("common.explore")}
</> </>
</NavLink> </NavLink>
{!isVisitorMode && ( {!isVisitorMode && (
<> <>
<button <button
id="header-ask-ai" id="header-ask-ai"
className="px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg dark:text-gray-200 hover:bg-white hover:shadow dark:hover:bg-zinc-700" className="px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:shadow dark:hover:bg-zinc-700"
onClick={() => showAskAIDialog()} onClick={() => showAskAIDialog()}
> >
<Icon.Bot className="mr-4 w-6 h-auto opacity-80" /> {t("ask-ai.title")} <Icon.Bot className="mr-3 w-6 h-auto opacity-70" /> {t("ask-ai.title")}
</button> </button>
<button <button
id="header-archived-memo" id="header-archived-memo"
className="px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg dark:text-gray-200 hover:bg-white hover:shadow dark:hover:bg-zinc-700" className="px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:shadow dark:hover:bg-zinc-700"
onClick={() => showArchivedMemoDialog()} onClick={() => showArchivedMemoDialog()}
> >
<Icon.Archive className="mr-4 w-6 h-auto opacity-80" /> {t("common.archived")} <Icon.Archive className="mr-3 w-6 h-auto opacity-70" /> {t("common.archived")}
</button> </button>
<button <button
id="header-settings" id="header-settings"
className="px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg dark:text-gray-200 hover:bg-white hover:shadow dark:hover:bg-zinc-700" className="px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:shadow dark:hover:bg-zinc-700"
onClick={() => showSettingDialog()} onClick={() => showSettingDialog()}
> >
<Icon.Settings className="mr-4 w-6 h-auto opacity-80" /> {t("common.settings")} <Icon.Settings className="mr-3 w-6 h-auto opacity-70" /> {t("common.settings")}
</button> </button>
</> </>
)} )}
@ -138,19 +138,19 @@ const Header = () => {
className={({ isActive }) => className={({ isActive }) =>
`${ `${
isActive && "bg-white dark:bg-zinc-700 shadow" isActive && "bg-white dark:bg-zinc-700 shadow"
} px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg dark:text-gray-200 hover:bg-white hover:shadow dark:hover:bg-zinc-700` } px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:shadow dark:hover:bg-zinc-700`
} }
> >
<> <>
<Icon.LogIn className="mr-4 w-6 h-auto opacity-80" /> {t("common.sign-in")} <Icon.LogIn className="mr-3 w-6 h-auto opacity-70" /> {t("common.sign-in")}
</> </>
</NavLink> </NavLink>
<button <button
id="header-about" id="header-about"
className="px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg dark:text-gray-200 hover:bg-white hover:shadow dark:hover:bg-zinc-700" className="px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:shadow dark:hover:bg-zinc-700"
onClick={() => showAboutSiteDialog()} onClick={() => showAboutSiteDialog()}
> >
<Icon.CupSoda className="mr-4 w-6 h-auto opacity-80" /> {t("common.about")} <Icon.CupSoda className="mr-3 w-6 h-auto opacity-70" /> {t("common.about")}
</button> </button>
</> </>
)} )}

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

@ -201,12 +201,12 @@ const Memo: React.FC<Props> = (props: Props) => {
</Link> </Link>
)} )}
{memo.visibility !== "PRIVATE" && !isVisitorMode && ( {memo.visibility !== "PRIVATE" && !isVisitorMode && (
<span <>
className={`status-text ${memo.visibility.toLocaleLowerCase()}`} <span className="text-xs mx-1 font-mono text-gray-200 dark:text-gray-600">/</span>
onClick={() => handleMemoVisibilityClick(memo.visibility)} <span className="text-sm text-gray-400 cursor-pointer" onClick={() => handleMemoVisibilityClick(memo.visibility)}>
>
{t(`memo.visibility.${memo.visibility.toLowerCase()}`)} {t(`memo.visibility.${memo.visibility.toLowerCase()}`)}
</span> </span>
</>
)} )}
</div> </div>
{!isVisitorMode && ( {!isVisitorMode && (

7
web/src/components/Settings/StorageSection.tsx
View File

@ -82,7 +82,7 @@ const StorageSection = () => {
</button> </button>
</div> </div>
<div className="mt-2 w-full flex flex-col"> <div className="mt-2 w-full flex flex-col">
<div className="py-2 w-full border-t last:border-b flex flex-row items-center justify-between"> <div className="py-2 w-full border-t dark:border-zinc-700 flex flex-row items-center justify-between">
<div className="flex flex-row items-center"> <div className="flex flex-row items-center">
<p className="ml-2">Local</p> <p className="ml-2">Local</p>
</div> </div>
@ -103,7 +103,10 @@ const StorageSection = () => {
</div> </div>
</div> </div>
{storageList.map((storage) => ( {storageList.map((storage) => (
<div key={storage.id} className="py-2 w-full border-t last:border-b flex flex-row items-center justify-between"> <div
key={storage.id}
className="py-2 w-full border-t last:border-b dark:border-zinc-700 flex flex-row items-center justify-between"
>
<div className="flex flex-row items-center"> <div className="flex flex-row items-center">
<p className="ml-2">{storage.name}</p> <p className="ml-2">{storage.name}</p>
</div> </div>

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

@ -109,7 +109,7 @@ const DailyReview = () => {
className="w-7 h-7 mr-2 flex justify-center items-center rounded cursor-pointer select-none last:mr-0 hover:bg-gray-200 dark:hover:bg-zinc-700 p-0.5 share" className="w-7 h-7 mr-2 flex justify-center items-center rounded cursor-pointer select-none last:mr-0 hover:bg-gray-200 dark:hover:bg-zinc-700 p-0.5 share"
onClick={handleShareBtnClick} onClick={handleShareBtnClick}
> >
<Icon.Share2 size={16} /> <Icon.Share size={20} />
</button> </button>
</div> </div>
<DatePicker <DatePicker