Skip to content
This repository has been archived by the owner on Jan 15, 2025. It is now read-only.

Commit

Permalink
Merge pull request #1521 from ecency/bugfix/menu-dark-theme
Browse files Browse the repository at this point in the history 
Fixed navbar menu text and icon alignment
  • Loading branch information
@feruzm
feruzm authored Nov 26, 2023
2 parents d4184e1 + c4dfe92 commit 4939186
Show file tree
Hide file tree
Showing 5 changed files with 31 additions and 31 deletions.
4 changes: 2 additions & 2 deletions src/common/components/comment/__snapshots__/index.spec.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -203,7 +203,7 @@ exports[`(1) Default render 1`] = `
</div>
<div
className="editor-tool"
id="editor-tool-emoji-picker-2b0bdaf3-1d21-4569-ab93-7223d93b6af0"
id="editor-tool-emoji-picker-43d6de46-315c-41df-bf3a-2009e0004867"
role="none"
title="Emoji"
>
Expand Down Expand Up @@ -551,7 +551,7 @@ exports[`(2) Cancellable, in progress 1`] = `
</div>
<div
className="editor-tool"
id="editor-tool-emoji-picker-399e6b28-feb3-4280-bb6a-693d6f4eddf8"
id="editor-tool-emoji-picker-3cad035b-5713-4675-968a-367eeb616cc5"
role="none"
title="Emoji"
>
Expand Down
8 changes: 4 additions & 4 deletions src/common/components/navbar/__snapshots__/index.spec.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ exports[`(1) Default render 1`] = `
id="sticky-container"
>
<div
className="flex items-center justify-between bg-light-200 dark:bg-dark-200 md:hidden h-[64px] border-b px-3"
className="flex items-center justify-between bg-light-200 dark:bg-dark-200 md:hidden h-[64px] border-b border-[--border-color] px-3"
>
<div
className="h-[40px] w-[40px] shrink-0 cursor-pointer"
Expand Down Expand Up @@ -315,7 +315,7 @@ exports[`(2) Night Theme 1`] = `
id="sticky-container"
>
<div
className="flex items-center justify-between bg-light-200 dark:bg-dark-200 md:hidden h-[64px] border-b px-3"
className="flex items-center justify-between bg-light-200 dark:bg-dark-200 md:hidden h-[64px] border-b border-[--border-color] px-3"
>
<div
className="h-[40px] w-[40px] shrink-0 cursor-pointer"
Expand Down Expand Up @@ -624,7 +624,7 @@ exports[`(3) With active user 1`] = `
id="sticky-container"
>
<div
className="flex items-center justify-between bg-light-200 dark:bg-dark-200 md:hidden h-[64px] border-b px-3"
className="flex items-center justify-between bg-light-200 dark:bg-dark-200 md:hidden h-[64px] border-b border-[--border-color] px-3"
>
<div
className="h-[40px] w-[40px] shrink-0 cursor-pointer"
Expand Down Expand Up @@ -933,7 +933,7 @@ exports[`(4) With active user && usePrivate = false 1`] = `
id="sticky-container"
>
<div
className="flex items-center justify-between bg-light-200 dark:bg-dark-200 md:hidden h-[64px] border-b px-3"
className="flex items-center justify-between bg-light-200 dark:bg-dark-200 md:hidden h-[64px] border-b border-[--border-color] px-3"
>
<div
className="h-[40px] w-[40px] shrink-0 cursor-pointer"
Expand Down
2 changes: 1 addition & 1 deletion src/common/components/navbar/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
.navbar-default {
.switch-language {
.dropdown-btn {
@apply ml-3 text-dark-default;
@apply ml-3 text-dark-default dark:text-white;

.label {
font-size: 1rem;
Expand Down
46 changes: 23 additions & 23 deletions src/common/components/navbar/navbar-default.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,21 +89,21 @@ export function NavbarDefault({ setSmVisible, history }: Props) {
</Link>
)}
<div onClick={() => !showMobileSearch && setShowMobileSearch(true)}>
<div className="p-2 pl-3 w-full mb-2 flex items-center text-dark-default">
<div className="p-2 pl-3 w-full mb-2 flex items-center text-dark-default dark:text-white">
{showMobileSearch ? (
<>
<Search containerClassName="w-full" history={history} />
<div
onClick={() => setShowMobileSearch(false)}
className="w-6 h-6 text-gray-600 ml-2"
className="w-6 h-6 flex text-gray-600 ml-2"
>
{closeSvg}
</div>
</>
) : (
<>
<div className="w-6 h-6">{magnifyResponsibleSvg}</div>
<div className="ml-3 text-15">{_t("g.search")}</div>
<div className="w-6 h-6 flex">{magnifyResponsibleSvg}</div>
<div className="ml-3 leading-1">{_t("g.search")}</div>
</>
)}
</div>
Expand All @@ -112,18 +112,18 @@ export function NavbarDefault({ setSmVisible, history }: Props) {
{!activeUser && (
<>
<div
className="p-2 pl-3 w-full mb-2 flex items-center text-dark-default"
className="p-2 pl-3 w-full mb-2 flex items-center text-dark-default dark:text-white"
onClick={() => {
toggleUIProp("login");
setSmVisible(false);
}}
>
<div className="navbar-icon">{userOutlineSvg}</div>
<div className="flex">{userOutlineSvg}</div>
<div className="ml-3 text-15">{_t("g.login")}</div>
</div>
<Link to="/signup" onClick={() => !showMobileSearch && setSmVisible(false)}>
<div className="p-2 pl-3 w-full mb-2 flex items-center text-dark-default">
<div className="navbar-icon">{keySvg}</div>
<div className="p-2 pl-3 w-full mb-2 flex items-center text-dark-default dark:text-white">
<div className="flex">{keySvg}</div>
<div className="ml-3 text-15">{_t("g.signup")}</div>
</div>
</Link>
Expand All @@ -133,12 +133,12 @@ export function NavbarDefault({ setSmVisible, history }: Props) {
<div>
{activeUser && (
<div
className="p-2 pl-3 w-full mb-2 flex items-center text-dark-default"
className="p-2 pl-3 w-full mb-2 flex items-center text-dark-default dark:text-white"
onClick={() => setShowProfileMenu(!showProfileMenu)}
>
<div className="navbar-icon">{userOutlineSvg}</div>
<div className="flex">{userOutlineSvg}</div>
<div className="ml-3 text-15">{_t("user-nav.profile-menu")}</div>
<div className="ml-3 text-15 icon-stroke">
<div className="ml-3 text-15 flex">
{showProfileMenu ? upArrowSvg : downArrowSvg}
</div>
</div>
Expand Down Expand Up @@ -227,26 +227,26 @@ export function NavbarDefault({ setSmVisible, history }: Props) {
{activeUser && (
<>
<div
className="p-2 pl-3 w-full mb-2 flex items-center text-dark-default"
className="p-2 pl-3 w-full mb-2 flex items-center text-dark-default dark:text-white"
onClick={() => toggleUIProp("notifications")}
>
<div className="navbar-icon text-dark-default">{notificationSvg}</div>
<div className="flex text-dark-default dark:text-white">{notificationSvg}</div>
<div className="ml-3 text-15">{_t("user-nav.notifications")}</div>
</div>
<div
onClick={() => setShowPurchaseDialog(true)}
className="p-2 pl-3 w-full mb-2 flex items-center text-dark-default"
className="p-2 pl-3 w-full mb-2 flex items-center text-dark-default dark:text-white"
>
<div className="navbar-icon text-dark-default">{rocketSvg}</div>
<div className="flex text-dark-default dark:text-white">{rocketSvg}</div>
<div className="ml-3 text-15">{_t("user-nav.boost")}</div>
</div>
<Link
className="text-dark-default dark:text-white"
to={`/@${activeUser?.username}/wallet`}
onClick={() => setSmVisible(false)}
>
<div className="p-2 pl-3 w-full mb-2 flex items-center text-dark-default">
<div className="icon-stroke text-dark-default">{walletSvg}</div>
<div className="p-2 pl-3 w-full mb-2 flex items-center text-dark-default dark:text-white">
<div className="flex text-dark-default dark:text-white">{walletSvg}</div>
<div className="ml-3 text-15 flex">
{_t("user-nav.wallet")}
<div className="dot align-self-start ml-1" />
Expand All @@ -258,8 +258,8 @@ export function NavbarDefault({ setSmVisible, history }: Props) {
to="/submit"
onClick={() => setSmVisible(false)}
>
<div className="p-2 pl-3 w-full mb-2 flex items-center text-dark-default">
<div className="icon-stroke text-dark-default [&>svg]:w-[20px]">
<div className="p-2 pl-3 w-full mb-2 flex items-center text-dark-default dark:text-white">
<div className="flex text-dark-default dark:text-white [&>svg]:w-[20px]">
{pencilOutlineSvg}
</div>
<div className="ml-3 text-15 flex">
Expand All @@ -271,16 +271,16 @@ export function NavbarDefault({ setSmVisible, history }: Props) {
</>
)}

<div className="p-2 pl-3 w-full mb-2 flex items-center text-dark-default relative">
<div className="navbar-icon">{globeSvg}</div>
<div className="p-2 pl-3 w-full mb-2 flex items-center text-dark-default dark:text-white relative">
<div className="flex">{globeSvg}</div>
<SwitchLang label={_t("community-settings.lang")} history={history} />
</div>

<div
className="p-2 pl-3 w-full mb-2 flex items-center text-dark-default"
className="p-2 pl-3 w-full mb-2 flex items-center text-dark-default dark:text-white"
onClick={changeTheme}
>
<div className="navbar-icon">{global.theme == Theme.day ? moonSvg : sunSvg}</div>
<div className="flex">{global.theme == Theme.day ? moonSvg : sunSvg}</div>
<div className="ml-3 text-15">
{_t("user-nav.switch-to")}{" "}
{global.theme == Theme.day ? _t("user-nav.dark") : _t("user-nav.light")}
Expand Down
2 changes: 1 addition & 1 deletion src/common/components/navbar/navbar-mobile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export function NavbarMobile({
return (
<div
className={classNameObject({
"flex items-center justify-between bg-light-200 dark:bg-dark-200 md:hidden h-[64px] border-b px-3":
"flex items-center justify-between bg-light-200 dark:bg-dark-200 md:hidden h-[64px] border-b border-[--border-color] px-3":
true,
transparent: step === 1
})}
Expand Down

0 comments on commit 4939186

Please sign in to comment.