Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2026-07-10 04:21:21 +02:00
Code Issues Packages Projects Releases Wiki Activity

mobile: update ui to match design

Browse Source
This commit is contained in:
Ammar Ahmed
2026-06-29 22:37:29 +05:00
parent cca26b117e
commit edb6f16fd6
11 changed files with 77 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
apps/mobile/app/components/container/floating-button.tsx
View File

@@ -36,6 +36,7 @@ import { getElevationStyle } from "../../utils/elevation";
import { AppFontSize, normalize } from "../../utils/size";
import { DefaultAppStyles } from "../../utils/styles";
import { hexToRGBA, RGB_Linear_Shade } from "../../utils/colors";
import AppIcon from "../ui/AppIcon";
interface FloatingButtonProps {
onPress: () => void;
@@ -140,7 +141,7 @@ const FloatingButton = ({
borderBottomWidth: 0,
borderLeftWidth: 0,
borderRightWidth: 0,
backgroundColor: colors.primary.background
backgroundColor: colors.primary.accent
}}
onPress={onPress}
>
@@ -148,26 +149,19 @@ const FloatingButton = ({
style={{
alignItems: "center",
justifyContent: "center",
height: normalize(size === "small" ? 40 : 60),
width: normalize(size === "small" ? 40 : 60),
height: 55,
width: 55,
backgroundColor: color
? RGB_Linear_Shade(0.87, hexToRGBA(color))
: colors.primary.shade,
: colors.primary.accent,
borderRadius: size === "small" ? 15 : 20
}}
>
<Icon
name={
icon
? icon
: route.name === "Notebooks"
? "notebook-plus"
: route.name === "Trash"
? "delete"
: "plus"
}
color={color || colors.primary.accent}
size={size === "small" ? AppFontSize.xl : AppFontSize.xxxl}
<AppIcon
name={icon ? icon : route.name === "Trash" ? "trash-alt" : "plus"}
iconFamily="notesnook"
color={color || colors.primary.accentForeground}
size={24}
/>
</View>
</TouchableOpacity>

8
apps/mobile/app/components/list-items/headers/section-header.tsx
View File

@@ -82,7 +82,7 @@ export const SectionHeader = React.memo<
width: "100%",
paddingHorizontal: Spacing.LEVEL_3,
marginBottom: Spacing.LEVEL_3,
marginTop: Spacing.LEVEL_3
marginTop: index === 0 ? 0 : Spacing.LEVEL_3
}}
>
<View
@@ -95,12 +95,13 @@ export const SectionHeader = React.memo<
}}
>
<Paragraph
fontSize="MD"
fontSize="SM"
fontFamily="MEDIUM"
style={{
alignSelf: "center",
textAlignVertical: "center"
}}
color={colors.secondary.heading}
color={colors.secondary.paragraph}
>
{!item.title || item.title === ""
? screen === "Search"
@@ -180,6 +181,7 @@ export const SectionHeader = React.memo<
: "normal"
});
}}
type={isCompactModeEnabled ? "shade" : undefined}
size={16}
/>
</>

12
apps/mobile/app/components/list-items/note/index.tsx
View File

@@ -381,7 +381,7 @@ const NoteItem = ({
<Heading
numberOfLines={1}
color={primaryColors.heading}
size={AppFontSize.sm}
fontSize="MD"
style={{
flexShrink: 1
}}
@@ -475,6 +475,7 @@ const NoteItem = ({
flexWrap: "wrap"
}}
color={primaryColors.paragraph}
fontSize="SM"
numberOfLines={2}
>
{decode(item.headline, {
@@ -492,21 +493,24 @@ const NoteItem = ({
{compactMode ? null : (
<View
style={{
gap: Spacing.LEVEL_0 + 2,
gap: Spacing.LEVEL_0,
flexDirection: "row"
}}
>
<AppIcon
color={colors.secondary.icon}
size={13}
size={12}
style={{
marginTop: 1
}}
name="calendar"
iconFamily="notesnook"
/>
<Paragraph
style={{
fontSize: AppFontSize.xs,
color: colors.secondary.paragraph
}}
fontSize="XS"
>
{getFormattedDate(
date,

28
apps/mobile/app/components/list-items/selection-wrapper/index.tsx
View File

@@ -73,7 +73,6 @@ const SelectionWrapper = ({
return (
<View
style={{
// paddingHorizontal: Spacing.LEVEL_3,
backgroundColor: isEditingNote ? colors.selected.background : undefined
}}
>
@@ -87,16 +86,19 @@ const SelectionWrapper = ({
customAlpha={!isDark ? -0.02 : 0.02}
customOpacity={1}
style={{
width: "100%",
alignSelf: "center",
overflow: "hidden",
paddingHorizontal: Spacing.LEVEL_3,
borderRadius: 0,
alignItems: "flex-start",
// paddingVertical: Spacing.LEVEL_2,
paddingTop: Spacing.LEVEL_2
paddingHorizontal: Spacing.LEVEL_3
}}
>
{hasGroupHeader ? null : (
<View
style={{
marginVertical: Spacing.LEVEL_2,
borderBottomWidth: 1,
borderBottomColor: colors.primary.separator,
width: "100%"
}}
/>
)}
<View
style={{
width: "100%",
@@ -105,14 +107,6 @@ const SelectionWrapper = ({
>
{children}
</View>
<View
style={{
marginTop: Spacing.LEVEL_2,
borderBottomWidth: 1,
borderBottomColor: colors.primary.border,
width: "100%"
}}
/>
</Pressable>
</View>
);

5
apps/mobile/app/components/list/card.tsx
View File

@@ -49,8 +49,7 @@ export const Card = ({
style={{
width: "100%",
paddingHorizontal: Spacing.LEVEL_3,
marginBottom: Spacing.LEVEL_4,
marginTop: Spacing.LEVEL_3
marginBottom: Spacing.LEVEL_4
}}
>
<Pressable
@@ -80,7 +79,7 @@ export const Card = ({
style={{
width: 34,
height: 34,
borderRadius: Radius.XXS,
borderRadius: Radius.XS,
alignItems: "center",
justifyContent: "center",
backgroundColor: colors.secondary.background

17
apps/mobile/app/components/side-menu/index.tsx
View File

@@ -183,8 +183,9 @@ export const SideMenu = React.memo(
flex: 1,
backgroundColor: colors.primary.background,
paddingTop: Math.max(insets.top, Spacing.LEVEL_4),
paddingBottom: Math.max(insets.bottom, Spacing.LEVEL_4) + Spacing.LEVEL_1,
paddingLeft: insets.left,
paddingBottom:
Math.max(insets.bottom, Spacing.LEVEL_4) + Spacing.LEVEL_1,
paddingLeft: insets.left
}}
>
<SimpleTabView
@@ -238,6 +239,7 @@ const TabBar = (props: SimpleTabBarProps) => {
flexDirection: "row",
width: "100%",
justifyContent: "space-between",
paddingHorizontal: isSelectionEnabled ? Spacing.LEVEL_5 : 0,
backgroundColor: colors.primary.background,
borderTopWidth: 1,
borderTopColor: colors.primary.separator,
@@ -439,7 +441,11 @@ const TabBar = (props: SimpleTabBarProps) => {
name: "title",
placeholder: "eg. journal",
ref: React.createRef(),
validators: [validators.required(strings.allFieldsRequired())]
validators: [
validators.required(
strings.allFieldsRequired()
)
]
}
],
onFormSubmit: async (form) => {
@@ -451,7 +457,10 @@ const TabBar = (props: SimpleTabBarProps) => {
useTagStore.getState().refresh();
return true;
} catch (e) {
form.setError("title", (e as Error).message);
form.setError(
"title",
(e as Error).message
);
return false;
}
}

31
apps/mobile/app/components/side-menu/side-menu-tags.tsx
View File

@@ -76,7 +76,7 @@ const TagItem = (props: {
>
{item ? (
<Pressable
type={isSelected || isFocused ? "selected" : "transparent"}
type={isFocused ? "selected" : "transparent"}
onLongPress={() => {
Properties.present(item, false, [
{
@@ -147,21 +147,16 @@ const TagItem = (props: {
</View>
{enabled ? (
<View
style={{
width: 22,
height: 22,
justifyContent: "center",
alignItems: "center"
}}
>
<AppIcon
name={
isSelected ? "checkbox-outline" : "checkbox-blank-outline"
}
color={isSelected ? colors.selected.icon : colors.primary.icon}
/>
</View>
<AppIcon
name={isSelected ? "checkbox" : "box-empty"}
iconFamily="notesnook"
size={16}
color={
isSelected
? [colors.primary.accent, colors.primary.accentForeground]
: colors.primary.icon
}
/>
) : (
<>
{item?.id && totalNotes.totalNotes?.(item?.id) !== undefined ? (
@@ -322,9 +317,9 @@ export const SideMenuTags = () => {
style={{
width: "100%",
backgroundColor: colors.primary.background,
borderTopColor: colors.primary.border,
borderTopColor: colors.primary.separator,
borderTopWidth: 1,
paddingVertical: DefaultAppStyles.GAP_VERTICAL,
paddingVertical: Spacing.LEVEL_2,
flexDirection: "row",
justifyContent: "space-between"
}}

8
apps/mobile/app/components/ui/icon-button/index.tsx
View File

@@ -53,10 +53,10 @@ export const IconButton = ({
style,
size = AppFontSize.xxl,
iconStyle = {},
left = 10,
right = 10,
top = 30,
bottom = 10,
left = 4,
right = 4,
top = 4,
bottom = 4,
onLongPress,
tooltipText,
type = "plain",

6
apps/mobile/app/hooks/use-actions.tsx
View File

@@ -416,6 +416,10 @@ export const useActions = ({
presentDialog({
title: strings.doActions.delete.unknown(item.type, 1),
paragraph: strings.actionConfirmations.delete.unknown(item.type, 1),
icon: "warning-circle",
centered: true,
iconFamily: "notesnook",
iconType: "error",
positivePress: async () => {
if (item.type === "reminder") {
await db.reminders.remove(item.id);
@@ -434,7 +438,7 @@ export const useActions = ({
});
},
positiveText: strings.delete(),
positiveType: "errorShade"
positiveType: "accent"
});
return;
}

3
apps/mobile/app/screens/home/index.tsx
View File

@@ -31,6 +31,7 @@ import useNavigationStore from "../../stores/use-navigation-store";
import { useNotes } from "../../stores/use-notes-store";
import { openEditor } from "../notes/common";
import LineSeparator from "../../components/ui/seperator/line-separator";
import { Spacing } from "../../common/design/spacing";
export const Home = ({ navigation, route }: NavigationProps<"Notes">) => {
const [notes, loading] = useNotes();
@@ -67,7 +68,7 @@ export const Home = ({ navigation, route }: NavigationProps<"Notes">) => {
onPressDefaultRightButton={openEditor}
/>
<LineSeparator />
<LineSeparator paddingVertical={Spacing.LEVEL_3} />
<DelayLayout wait={loading}>
<List

4
apps/mobile/app/utils/functions.ts
View File

@@ -172,6 +172,10 @@ export const deleteItems = async (
positiveText: strings.delete(),
negativeText: strings.cancel(),
paragraph: strings.actionConfirmations.delete.tag(2),
icon: "warning-circle",
centered: true,
iconFamily: "notesnook",
iconType: "error",
positivePress: async () => {
await db.tags.remove(...itemIds);
useTagStore.getState().refresh();