Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2026-02-24 12:12:54 +01:00
Code Issues Packages Projects Releases Wiki Activity

web: minor ui fixes

Browse Source
This commit is contained in:
Abdullah Atta
2025-03-03 14:18:39 +05:00
parent 9dc549d0d3
commit 1ac4dca6b5
4 changed files with 125 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
apps/web/src/components/editor/action-bar.tsx
View File

@@ -269,12 +269,18 @@ const TabStrip = React.memo(function TabStrip() {
onDoubleClick={(e) => e.stopPropagation()}
>
<Button
variant="secondary"
variant="accent"
{...CREATE_BUTTON_MAP.notes}
data-test-id={`create-new-note`}
sx={{ p: 1, bg: "accent" }}
sx={{
p: 0,
borderRadius: "100%",
mr: "small",
height: 28,
width: 28
}}
>
<NoteAdd size={16} color="accentForeground" />
<Plus size={18} color="accentForeground" />
</Button>
<Button
disabled={!canGoBack}

199
apps/web/src/components/navigation-menu/index.tsx
View File

@@ -671,109 +671,108 @@ function NavigationDropdown() {
const notLoggedIn = Boolean(!user || !user.id);
return (
<Flex sx={{ flexDirection: "row", alignItems: "center", gap: 1 }}>
<Flex
onClick={(e) => {
e.preventDefault();
Menu.openMenu(
[
{
type: "popup",
component: () => <UserProfile minimal />,
key: "profile"
},
{
type: "separator",
key: "sep"
},
{
type: "button",
title: strings.toggleDarkLightMode(),
key: "toggle-theme-mode",
icon: theme === "dark" ? LightMode.path : DarkMode.path,
onClick: () => {
setFollowSystemTheme(false);
toggleNightMode();
}
},
{
type: "button",
title: strings.upgradeToPro(),
icon: Pro.path,
key: "upgrade",
isHidden: notLoggedIn || isPro
},
{
type: "button",
title: settings.title,
key: settings.id,
icon: settings.icon.path,
onClick: () => {
hashNavigate(settings.path);
}
},
{
type: "button",
title: strings.helpAndSupport(),
icon: Documentation.path,
key: "help-and-support",
onClick: () => {
window.open("https://help.notesnook.com/", "_blank");
}
},
{
type: "button",
title: strings.login(),
icon: Login.path,
key: "login",
isHidden: !notLoggedIn,
onClick: () => hardNavigate("/login")
},
{
type: "button",
title: strings.logout(),
icon: Logout.path,
key: "logout",
isHidden: notLoggedIn,
onClick: () => logout()
}
],
<Button
variant="secondary"
onClick={(e) => {
e.preventDefault();
Menu.openMenu(
[
{
position: {
target: e.currentTarget,
location: "below",
yOffset: 5
type: "popup",
component: () => <UserProfile minimal />,
key: "profile"
},
{
type: "separator",
key: "sep"
},
{
type: "button",
title: strings.toggleDarkLightMode(),
key: "toggle-theme-mode",
icon: theme === "dark" ? LightMode.path : DarkMode.path,
onClick: () => {
setFollowSystemTheme(false);
toggleNightMode();
}
},
{
type: "button",
title: strings.upgradeToPro(),
icon: Pro.path,
key: "upgrade",
isHidden: notLoggedIn || isPro
},
{
type: "button",
title: settings.title,
key: settings.id,
icon: settings.icon.path,
onClick: () => {
hashNavigate(settings.path);
}
},
{
type: "button",
title: strings.helpAndSupport(),
icon: Documentation.path,
key: "help-and-support",
onClick: () => {
window.open("https://help.notesnook.com/", "_blank");
}
},
{
type: "button",
title: strings.login(),
icon: Login.path,
key: "login",
isHidden: !notLoggedIn,
onClick: () => hardNavigate("/login")
},
{
type: "button",
title: strings.logout(),
icon: Logout.path,
key: "logout",
isHidden: notLoggedIn,
onClick: () => logout()
}
);
}}
variant="columnCenter"
data-test-id="profile-dropdown"
sx={{
bg: "background-secondary",
size: 25,
borderRadius: 80,
cursor: "pointer",
position: "relative",
border: "1px solid var(--border)",
alignItems: "center"
}}
>
{!user || !user.id || !profile?.profilePicture ? (
<User size={14} color="icon" />
) : (
<Image
sx={{
width: "100%",
height: "100%",
objectFit: "contain",
borderRadius: 80
}}
src={profile.profilePicture}
/>
)}
</Flex>
</Flex>
],
{
position: {
target: e.currentTarget,
location: "below",
yOffset: 5
}
}
);
}}
data-test-id="profile-dropdown"
sx={{
bg: "background-secondary",
size: 26,
borderRadius: 80,
cursor: "pointer",
position: "relative",
border: "1px solid var(--border)",
alignItems: "center",
p: 0
}}
>
{!user || !user.id || !profile?.profilePicture ? (
<User size={14} color="icon" />
) : (
<Image
sx={{
width: "100%",
height: "100%",
objectFit: "contain",
borderRadius: 80
}}
src={profile.profilePicture}
/>
)}
</Button>
);
}

19
apps/web/src/components/navigation-menu/navigation-item.tsx
View File

@@ -90,20 +90,19 @@ function NavigationItem(
}}
data-test-id={`navigation-item`}
title={title}
onContextMenu={(e) => {
if (!menuItems) return;
e.preventDefault();
e.stopPropagation();
Menu.openMenu(menuItems);
}}
>
<Button
<Flex
sx={{
p: 0,
flex: 1,
alignItems: "center",
justifyContent: isCollapsed ? "center" : "flex-start",
display: "flex"
}}
onContextMenu={(e) => {
if (!menuItems) return;
e.preventDefault();
e.stopPropagation();
Menu.openMenu(menuItems);
justifyContent: isCollapsed ? "center" : "flex-start"
}}
>
{Icon ? (
@@ -130,7 +129,7 @@ function NavigationItem(
{title}
</Text>
)}
</Button>
</Flex>
{children && !isCollapsed ? children : null}
</Flex>
);

28
apps/web/src/components/navigation-menu/tab-item.tsx
View File

@@ -53,32 +53,20 @@ export function TabItem(props: TabItemProps & FlexProps) {
}
),
borderRadius: "default",
p: 0,
alignItems: "center",
justifyContent: "center",
position: "relative",
":focus": { bg: selected ? "hover-selected" : "hover" },
p: 1,
...sx
}}
data-test-id={`tab-item`}
title={title}
onClick={() => {
if (onClick) onClick();
}}
>
<Button
data-test-id={`tab-item`}
sx={{
p: 1,
flex: 1,
alignItems: "center",
justifyContent: "center",
display: "flex"
}}
title={title}
onClick={() => {
if (onClick) onClick();
}}
>
<Icon
size={16}
color={color || (selected ? "icon-selected" : "icon")}
/>
</Button>
<Icon size={16} color={color || (selected ? "icon-selected" : "icon")} />
</Flex>
);
}