Skip to content

C
canifa_note
Unverified Commit 680b8ede authored by boojack's avatar boojack Committed by GitHub
Browse files
Options

chore: adjust header style (#1493)

parent 4e023e25
Hide whitespace changes
Inline Side-by-side
Showing with 30 additions and 27 deletions
web/src/components/Header.tsx
View file @ 680b8ede
......@@ -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>
</>
)}
......
web/src/components/Memo.tsx
View file @ 680b8ede
......@@ -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 && (
......
web/src/components/Settings/StorageSection.tsx
View file @ 680b8ede
......@@ -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>
......
web/src/pages/DailyReview.tsx
View file @ 680b8ede
......@@ -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
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment