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 }) =>
`${
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
@ -70,11 +70,11 @@ const Header = () => {
className={({ isActive }) =>
`${
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
@ -83,11 +83,11 @@ const Header = () => {
className={({ isActive }) =>
`${
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>
</>
@ -98,35 +98,35 @@ const Header = () => {
className={({ isActive }) =>
`${
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>
{!isVisitorMode && (
<>
<button
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()}
>
<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
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()}
>
<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
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()}
>
<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>
</>
)}
@ -138,19 +138,19 @@ const Header = () => {
className={({ isActive }) =>
`${
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>
<button
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()}
>
<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>
</>
)}

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

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

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

@ -82,7 +82,7 @@ const StorageSection = () => {
</button>
</div>
<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">
<p className="ml-2">Local</p>
</div>
@ -103,7 +103,10 @@ const StorageSection = () => {
</div>
</div>
{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">
<p className="ml-2">{storage.name}</p>
</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"
onClick={handleShareBtnClick}
>
<Icon.Share2 size={16} />
<Icon.Share size={20} />
</button>
</div>
<DatePicker