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

mobile: user profile

Browse Source
This commit is contained in:
Ammar Ahmed
2024-02-05 12:14:45 +05:00
committed by Abdullah Atta
parent 2713f26f90
commit ae43d58a38
93 changed files with 810 additions and 522 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
apps/mobile/app/components/announcements/announcement.js
View File

@@ -23,12 +23,14 @@ import { View } from "react-native";
import { useMessageStore } from "../../stores/use-message-store";
import { useSelectionStore } from "../../stores/use-selection-store";
import { allowedOnPlatform, renderItem } from "./functions";
import { getContainerBorder } from "../../utils/colors";
export const Announcement = ({ color }) => {
const { colors } = useThemeColors();
const announcements = useMessageStore((state) => state.announcements);
let announcement = announcements.length > 0 ? announcements[0] : null;
const selectionMode = useSelectionStore((state) => state.selectionMode);
return !announcement || selectionMode ? null : (
<View
style={{
@@ -45,7 +47,8 @@ export const Announcement = ({ color }) => {
borderRadius: 10,
overflow: "hidden",
backgroundColor: colors.secondary.background,
paddingBottom: 12
paddingBottom: 12,
...getContainerBorder(colors.secondary.background)
}}
>
<View

4
apps/mobile/app/components/announcements/cta.js
View File

@@ -103,7 +103,7 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
key={item.title}
title={item.title}
fontSize={SIZE.sm}
type="gray"
type="plain"
onPress={() => onPress(item)}
width={null}
height={30}
@@ -149,7 +149,7 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
key={item.title}
title={item.title}
fontSize={SIZE.xs}
type="gray"
type="plain"
onPress={() => onPress(item)}
width={null}
height={30}

2
apps/mobile/app/components/announcements/title.js
View File

@@ -54,7 +54,7 @@ export const Title = ({ text, style = {}, inline }) => {
</Heading>
<Button
type="gray"
type="plain"
icon="close"
height={null}
onPress={() => {

2
apps/mobile/app/components/app-lock-overlay/index.tsx
View File

@@ -199,7 +199,7 @@ const AppLockedOverlay = () => {
<IconButton
name="fingerprint"
size={100}
customStyle={{
style={{
width: 100,
height: 100,
marginBottom: 20,

12
apps/mobile/app/components/attachments/actions.tsx
View File

@@ -50,7 +50,7 @@ import { openNote } from "../list-items/note/wrapper";
import { DateMeta } from "../properties/date-meta";
import { Button } from "../ui/button";
import { Notice } from "../ui/notice";
import { PressableButton } from "../ui/pressable";
import { Pressable } from "../ui/pressable";
import Heading from "../ui/typography/heading";
import Paragraph from "../ui/typography/paragraph";
@@ -291,7 +291,7 @@ const Actions = ({
</Heading>
{notes.map((item) => (
<PressableButton
<Pressable
onPress={async () => {
eSendEvent(eCloseSheet, contextId);
await sleep(150);
@@ -299,7 +299,7 @@ const Actions = ({
await sleep(300);
openNote(item, (item as any).type === "trash");
}}
customStyle={{
style={{
paddingVertical: 12,
alignItems: "flex-start",
@@ -308,7 +308,7 @@ const Actions = ({
key={item.id}
>
<Paragraph size={SIZE.xs}>{item.title}</Paragraph>
</PressableButton>
</Pressable>
))}
</>
</View>
@@ -319,7 +319,7 @@ const Actions = ({
key={item.name}
buttonType={{
text:
item.name === "Delete" || item.name === "PermDelete"
item.name === "Delete"
? colors.error.paragraph
: colors.primary.paragraph
}}
@@ -327,7 +327,7 @@ const Actions = ({
title={item.name}
icon={item.icon}
loading={loading?.name === item.name}
type="gray"
type="plain"
fontSize={SIZE.sm}
style={{
borderRadius: 0,

2
apps/mobile/app/components/attachments/download-attachments.tsx
View File

@@ -245,7 +245,7 @@ const DownloadAttachments = ({
onPress={() => {
close?.();
}}
type="grayBg"
type="secondary"
title="No"
/>
<Button

8
apps/mobile/app/components/attachments/index.tsx
View File

@@ -209,7 +209,7 @@ export const AttachmentDialog = ({ note }: { note?: Note }) => {
) : (
<IconButton
name="check-all"
customStyle={{
style={{
height: 40,
width: 40,
marginRight: 10
@@ -222,7 +222,7 @@ export const AttachmentDialog = ({ note }: { note?: Note }) => {
<IconButton
name="download"
customStyle={{
style={{
height: 40,
width: 40
}}
@@ -265,7 +265,9 @@ export const AttachmentDialog = ({ note }: { note?: Note }) => {
>
{attachmentTypes.map((item) => (
<Button
type={currentFilter === item.filterBy ? "grayAccent" : "gray"}
type={
currentFilter === item.filterBy ? "secondaryAccented" : "plain"
}
key={item.title}
title={item.title}
style={{

2
apps/mobile/app/components/auth/auth-modal.js
View File

@@ -158,7 +158,7 @@ const AuthModal = () => {
hideAuth();
}}
iconSize={16}
type="gray"
type="plain"
iconPosition="right"
icon="chevron-right"
height={25}

2
apps/mobile/app/components/auth/forgot-password.js
View File

@@ -113,7 +113,7 @@ export const ForgotPassword = () => {
}}
>
<IconButton
customStyle={{
style={{
width: null,
height: null
}}

4
apps/mobile/app/components/auth/login.js
View File

@@ -103,7 +103,7 @@ export const Login = ({ changeMode }) => {
justifyContent: "flex-end",
paddingHorizontal: 20,
backgroundColor: colors.secondary.background,
borderBottomWidth: 1,
borderBottomWidth: 0.8,
marginBottom: 12,
borderBottomColor: colors.primary.border,
alignSelf: deviceMode !== "mobile" ? "center" : undefined,
@@ -222,7 +222,7 @@ export const Login = ({ changeMode }) => {
textDecorationLine: "underline"
}}
fontSize={SIZE.xs}
type="gray"
type="plain"
/>
</>
)}

2
apps/mobile/app/components/auth/session-expired.js
View File

@@ -178,7 +178,7 @@ export const SessionExpired = () => {
}}
>
<IconButton
customStyle={{
style={{
width: 60,
height: 60
}}

2
apps/mobile/app/components/auth/signup.js
View File

@@ -111,7 +111,7 @@ export const Signup = ({ changeMode, trial }) => {
paddingHorizontal: 20,
backgroundColor: colors.secondary.background,
marginBottom: 20,
borderBottomWidth: 1,
borderBottomWidth: 0.8,
borderBottomColor: colors.primary.border,
alignSelf: deviceMode !== "mobile" ? "center" : undefined,
borderWidth: deviceMode !== "mobile" ? 1 : null,

18
apps/mobile/app/components/auth/two-factor.js
View File

@@ -32,7 +32,7 @@ import { SIZE } from "../../utils/size";
import { Button } from "../ui/button";
import { IconButton } from "../ui/icon-button";
import Input from "../ui/input";
import { PressableButton } from "../ui/pressable";
import { Pressable } from "../ui/pressable";
import Seperator from "../ui/seperator";
import Heading from "../ui/typography/heading";
import Paragraph from "../ui/typography/paragraph";
@@ -151,7 +151,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
}}
>
<IconButton
customStyle={{
style={{
width: 70,
height: 70
}}
@@ -183,7 +183,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
{currentMethod.method === "sms" || currentMethod.method === "email" ? (
<Button
onPress={onSendCode}
type={seconds ? "gray" : "transparent"}
type={seconds ? "plain" : "transparent"}
title={
sending
? ""
@@ -247,7 +247,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
<Button
title={secondaryMethodsText[currentMethod.method]}
type="gray"
type="plain"
onPress={onRequestSecondaryMethod}
height={30}
/>
@@ -255,7 +255,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
) : (
<>
{getMethods().map((item) => (
<PressableButton
<Pressable
key={item.title}
onPress={() => {
setCurrentMethod({
@@ -263,7 +263,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
isPrimary: false
});
}}
customStyle={{
style={{
paddingHorizontal: 12,
paddingVertical: 12,
marginTop: 0,
@@ -275,8 +275,8 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
}}
>
<IconButton
type="grayAccent"
customStyle={{
type="secondaryAccented"
style={{
width: 40,
height: 40,
marginRight: 10
@@ -292,7 +292,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
>
<Paragraph size={SIZE.md}>{item.title}</Paragraph>
</View>
</PressableButton>
</Pressable>
))}
</>
)}

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

@@ -34,7 +34,7 @@ import { useSettingStore } from "../../stores/use-setting-store";
import { getElevationStyle } from "../../utils/elevation";
import { SIZE, normalize } from "../../utils/size";
import NativeTooltip from "../../utils/tooltip";
import { PressableButton } from "../ui/pressable";
import { Pressable } from "../ui/pressable";
interface FloatingButtonProps {
title: string;
@@ -116,11 +116,11 @@ const FloatingButton = ({
animatedStyle
]}
>
<PressableButton
<Pressable
testID={notesnook.buttons.add}
type="accent"
accentColor={color}
customStyle={{
style={{
...getElevationStyle(5),
borderRadius: 100
}}
@@ -145,7 +145,7 @@ const FloatingButton = ({
size={SIZE.xxl}
/>
</View>
</PressableButton>
</Pressable>
</Animated.View>
);
};

13
apps/mobile/app/components/dialog/dialog-buttons.js
View File

@@ -25,6 +25,7 @@ import { useThemeColors } from "@notesnook/theme";
import { SIZE } from "../../utils/size";
import { Button } from "../ui/button";
import Paragraph from "../ui/typography/paragraph";
import { getColorLinearShade } from "../../utils/colors";
const DialogButtons = ({
onPressPositive,
@@ -35,7 +36,7 @@ const DialogButtons = ({
doneText,
positiveType
}) => {
const { colors } = useThemeColors();
const { colors, isDark } = useThemeColors();
return (
<View
@@ -46,7 +47,13 @@ const DialogButtons = ({
height: 60,
borderBottomRightRadius: 10,
borderBottomLeftRadius: 10,
paddingHorizontal: 12
paddingHorizontal: 12,
borderTopWidth: 0.7,
borderTopColor: getColorLinearShade(
colors.secondary.background,
0.05,
isDark
)
}
]}
>
@@ -80,7 +87,7 @@ const DialogButtons = ({
onPress={onPressNegative}
fontSize={SIZE.md}
testID={notesnook.ids.default.dialog.no}
type="gray"
type="plain"
bold
title={negativeTitle}
/>

21
apps/mobile/app/components/dialog/dialog-container.tsx
View File

@@ -22,6 +22,7 @@ import { View, ViewProps } from "react-native";
import { DDS } from "../../services/device-detection";
import { useThemeColors } from "@notesnook/theme";
import { getElevationStyle } from "../../utils/elevation";
import { getContainerBorder } from "../../utils/colors";
const DialogContainer = ({
width,
@@ -37,17 +38,15 @@ const DialogContainer = ({
return (
<View
{...restProps}
style={[
{
...getElevationStyle(5),
width: width || DDS.isTab ? 500 : "85%",
maxHeight: height || 450,
borderRadius: 10,
backgroundColor: colors.primary.background,
paddingTop: 12
},
style
]}
style={{
...getElevationStyle(5),
width: width || DDS.isTab ? 500 : "85%",
maxHeight: height || 450,
borderRadius: 10,
backgroundColor: colors.primary.background,
paddingTop: 12,
...getContainerBorder(colors.secondary.background, 0.8, 0.05)
}}
/>
);
};

10
apps/mobile/app/components/dialog/dialog-header.tsx
View File

@@ -22,7 +22,7 @@ import { Text, View, ViewStyle } from "react-native";
import { useThemeColors } from "@notesnook/theme";
import { SIZE } from "../../utils/size";
import { Button } from "../ui/button";
import { PressableButtonProps } from "../ui/pressable";
import { PressableProps } from "../ui/pressable";
import Heading from "../ui/typography/heading";
import Paragraph from "../ui/typography/paragraph";
@@ -34,7 +34,7 @@ type DialogHeaderProps = {
onPress?: () => void;
loading?: boolean;
title?: string;
type?: PressableButtonProps["type"];
type?: PressableProps["type"];
icon?: string;
};
paragraphColor?: string;
@@ -86,7 +86,9 @@ const DialogHeader = ({
>
{title}{" "}
{titlePart ? (
<Text style={{ color: colors.primary.accent }}>{titlePart}</Text>
<Text style={{ color: colors.primary.accent }}>
{titlePart}
</Text>
) : null}
</Heading>
@@ -101,7 +103,7 @@ const DialogHeader = ({
fontSize={13}
title={button.title}
icon={button.icon}
type={button.type || "grayBg"}
type={button.type || "secondary"}
height={25}
/>
) : null}

4
apps/mobile/app/components/dialog/functions.ts
View File

@@ -29,8 +29,8 @@ type DialogInfo = {
onClose?: () => void;
positiveType?:
| "transparent"
| "gray"
| "grayBg"
| "plain"
| "secondary"
| "accent"
| "inverted"
| "shade"

8
apps/mobile/app/components/dialogs/jump-to-section/index.tsx
View File

@@ -41,7 +41,7 @@ import {
} from "../../../utils/events";
import { SIZE } from "../../../utils/size";
import BaseDialog from "../../dialog/base-dialog";
import { PressableButton } from "../../ui/pressable";
import { Pressable } from "../../ui/pressable";
import Paragraph from "../../ui/typography/paragraph";
const JumpToSectionDialog = () => {
@@ -181,11 +181,11 @@ const JumpToSectionDialog = () => {
>
{groups?.map((item, index) => {
return (
<PressableButton
<Pressable
key={item.group.id}
onPress={() => onPress(item)}
type={currentIndex === index ? "accent" : "transparent"}
customStyle={{
style={{
minWidth: "20%",
width: null,
paddingHorizontal: 12,
@@ -208,7 +208,7 @@ const JumpToSectionDialog = () => {
>
{item.group.title}
</Paragraph>
</PressableButton>
</Pressable>
);
})}
</View>

2
apps/mobile/app/components/dialogs/pdf-preview/index.js
View File

@@ -211,7 +211,7 @@ const PDFPreview = () => {
color={colors.static.white}
name="arrow-left"
onPress={close}
customStyle={{
style={{
marginRight: 12
}}
size={SIZE.xxl}

5
apps/mobile/app/components/dialogs/vault/index.js
View File

@@ -53,6 +53,7 @@ import { Button } from "../../ui/button";
import Input from "../../ui/input";
import Seperator from "../../ui/seperator";
import Paragraph from "../../ui/typography/paragraph";
import { getColorLinearShade } from "../../../utils/colors";
export class VaultDialog extends Component {
constructor(props) {
@@ -858,10 +859,10 @@ export class VaultDialog extends Component {
title="Biometric unlocking"
iconColor={
this.state.biometricUnlock
? colors.selected.icon
? colors.selected.accent
: colors.primary.icon
}
type={this.state.biometricUnlock ? "transparent" : "selected"}
type={this.state.biometricUnlock ? "transparent" : "plain"}
/>
) : null}
</View>

2
apps/mobile/app/components/header/left-menus.tsx
View File

@@ -54,7 +54,7 @@ export const LeftMenus = ({
return isTablet && !canGoBack ? null : (
<IconButton
testID={notesnook.ids.default.header.buttons.left}
customStyle={{
style={{
justifyContent: "center",
alignItems: "center",
height: 40,

6
apps/mobile/app/components/header/right-menus.tsx
View File

@@ -61,7 +61,7 @@ export const RightMenus = ({
testID="icon-search"
name="magnify"
color={colors.primary.paragraph}
customStyle={styles.rightBtn}
style={styles.rightBtn}
/>
) : null}
@@ -108,7 +108,7 @@ export const RightMenus = ({
}}
name="dots-vertical"
color={colors.primary.paragraph}
customStyle={styles.rightBtn}
style={styles.rightBtn}
/>
}
>
@@ -119,7 +119,7 @@ export const RightMenus = ({
justifyContent: "flex-start",
borderRadius: 0
}}
type="gray"
type="plain"
buttonType={{
text: contextMenuColors.primary.paragraph
}}

2
apps/mobile/app/components/intro/welcome.js
View File

@@ -108,7 +108,7 @@ export const WelcomeNotice = () => {
eSendEvent(eCloseLoading);
}}
iconSize={20}
type="gray"
type="plain"
iconPosition="right"
icon="chevron-right"
height={25}

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

@@ -109,12 +109,12 @@ export const NotebookHeader = ({
name={isPinnedToMenu ? "link-variant-off" : "link-variant"}
onPress={onPinNotebook}
tooltipText={"Create shortcut in side menu"}
customStyle={{
style={{
marginRight: 15,
width: 40,
height: 40
}}
type={isPinnedToMenu ? "grayBg" : "grayBg"}
type={isPinnedToMenu ? "secondary" : "secondary"}
color={isPinnedToMenu ? colors.primary.accent : colors.primary.icon}
size={SIZE.lg}
/>
@@ -123,9 +123,9 @@ export const NotebookHeader = ({
onPress={onEditNotebook}
tooltipText="Edit this notebook"
name="pencil"
type="grayBg"
type="secondary"
color={colors.primary.icon}
customStyle={{
style={{
width: 40,
height: 40
}}

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

@@ -144,12 +144,12 @@ export const SectionHeader = React.memo<
? 10
: 0
}}
type="gray"
type="plain"
iconPosition="right"
/>
<IconButton
customStyle={{
style={{
width: 25,
height: 25
}}

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

@@ -118,7 +118,7 @@ const NoteItem = ({
key={item.id}
height={25}
icon={item.type === "notebook" ? "bookmark" : "book-outline"}
type="grayBg"
type="secondary"
fontSize={SIZE.xs}
iconSize={SIZE.sm}
textStyle={{
@@ -287,7 +287,7 @@ const NoteItem = ({
title={"#" + item.title}
key={item.id}
height={23}
type="gray"
type="plain"
textStyle={{
textDecorationLine: "underline"
}}
@@ -397,7 +397,7 @@ const NoteItem = ({
name="dots-horizontal"
size={SIZE.xl}
onPress={() => !noOpen && Properties.present(item)}
customStyle={{
style={{
justifyContent: "center",
height: 35,
width: 35,

2
apps/mobile/app/components/list-items/notebook/index.tsx
View File

@@ -198,7 +198,7 @@ export const NotebookItem = ({
testID={notesnook.ids.notebook.menu}
size={SIZE.xl}
onPress={() => Properties.present(item)}
customStyle={{
style={{
justifyContent: "center",
height: 35,
width: 35,

2
apps/mobile/app/components/list-items/reminder/index.tsx
View File

@@ -176,7 +176,7 @@ const ReminderItem = React.memo(
name="dots-horizontal"
size={SIZE.xl}
onPress={() => Properties.present(item, [], isSheet)}
customStyle={{
style={{
justifyContent: "center",
height: 35,
width: 35,

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

@@ -21,7 +21,7 @@ import { useThemeColors } from "@notesnook/theme";
import React, { PropsWithChildren, useRef } from "react";
import { useIsCompactModeEnabled } from "../../../hooks/use-is-compact-mode-enabled";
import { useSelectionStore } from "../../../stores/use-selection-store";
import { PressableButton } from "../../ui/pressable";
import { Pressable } from "../../ui/pressable";
import { Filler } from "./back-fill";
import { SelectionIcon } from "./selection";
import { Item, TrashItem } from "@notesnook/core";
@@ -60,7 +60,7 @@ const SelectionWrapper = ({
};
return (
<PressableButton
<Pressable
customColor={isSheet ? colors.primary.hover : "transparent"}
testID={testID}
onLongPress={onLongPress}
@@ -68,7 +68,7 @@ const SelectionWrapper = ({
customSelectedColor={colors.primary.hover}
customAlpha={!isDark ? -0.02 : 0.02}
customOpacity={1}
customStyle={{
style={{
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
@@ -83,7 +83,7 @@ const SelectionWrapper = ({
{item.type === "note" ? <Filler item={item} color={color} /> : null}
<SelectionIcon item={item} />
{children}
</PressableButton>
</Pressable>
);
};

2
apps/mobile/app/components/list-items/tag/index.tsx
View File

@@ -105,7 +105,7 @@ const TagItem = React.memo(
Properties.present(item);
}}
testID={notesnook.ids.tag.menu}
customStyle={{
style={{
justifyContent: "center",
height: 35,
width: 35,

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

@@ -24,7 +24,7 @@ import { useMessageStore } from "../../stores/use-message-store";
import { useThemeColors } from "@notesnook/theme";
import { hexToRGBA } from "../../utils/colors";
import { SIZE } from "../../utils/size";
import { PressableButton } from "../ui/pressable";
import { Pressable } from "../ui/pressable";
import Paragraph from "../ui/typography/paragraph";
export const Card = ({ color }: { color?: string }) => {
@@ -41,10 +41,10 @@ export const Card = ({ color }: { color?: string }) => {
width: "95%"
}}
>
<PressableButton
<Pressable
onPress={messageBoardState.onPress}
type="gray"
customStyle={{
type="plain"
style={{
paddingVertical: 12,
flexDirection: "row",
alignItems: "center",
@@ -122,7 +122,7 @@ export const Card = ({ color }: { color?: string }) => {
/>
</View>
)}
</PressableButton>
</Pressable>
</View>
);
};

4
apps/mobile/app/components/list/empty.tsx
View File

@@ -98,13 +98,13 @@ export const Empty = React.memo(function Empty({
{placeholder?.button && (
<Button
testID={notesnook.buttons.add}
type="grayAccent"
type="accent"
title={placeholder?.button}
iconPosition="right"
icon="arrow-right"
onPress={placeholder?.action}
buttonType={{
text: color || colors.primary.accent
text: "white"
}}
style={{
alignSelf: "flex-start",

2
apps/mobile/app/components/merge-conflicts/index.js
View File

@@ -190,7 +190,7 @@ const MergeConflicts = () => {
setDialogVisible(true);
}}
title="Save a copy"
type="grayBg"
type="secondary"
height={30}
style={{
borderRadius: 100,

4
apps/mobile/app/components/premium/component.js
View File

@@ -98,7 +98,7 @@ export const Component = ({ close, promo }) => {
onPress={() => {
close();
}}
customStyle={{
style={{
position: "absolute",
right: DDS.isTab ? 30 : 15,
top: Platform.OS === "ios" ? 0 : 30,
@@ -219,7 +219,7 @@ export const Component = ({ close, promo }) => {
title={
promo ? promo.text : user ? "See all plans" : "Sign up for free"
}
type={userCanRequestTrial ? "grayAccent" : "accent"}
type={userCanRequestTrial ? "secondaryAccented" : "accent"}
width={250}
style={{
paddingHorizontal: 12,

2
apps/mobile/app/components/premium/expiring.js
View File

@@ -186,7 +186,7 @@ export const Expiring = () => {
{status.extend && (
<Button
type="gray"
type="plain"
title="Not sure yet? Extend trial for 7 days"
textStyle={{
textDecorationLine: "underline"

10
apps/mobile/app/components/premium/pricing-item.tsx
View File

@@ -20,7 +20,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
import React from "react";
import { Platform, View } from "react-native";
import { SIZE } from "../../utils/size";
import { PressableButton } from "../ui/pressable";
import { Pressable } from "../ui/pressable";
import Heading from "../ui/typography/heading";
import Paragraph from "../ui/typography/paragraph";
import RNIap from "react-native-iap";
@@ -42,10 +42,10 @@ export const PricingItem = ({
compact?: boolean;
}) => {
return (
<PressableButton
<Pressable
onPress={onPress}
type="grayBg"
customStyle={{
type="secondary"
style={{
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
@@ -95,6 +95,6 @@ export const PricingItem = ({
: "/month"}
</Paragraph>
</View>
</PressableButton>
</Pressable>
);
};

2
apps/mobile/app/components/premium/pricing-plans.tsx
View File

@@ -328,7 +328,7 @@ export const PricingPlans = ({
}
}}
title={"Try free for 14 days"}
type="grayAccent"
type="secondaryAccented"
width={250}
style={{
paddingHorizontal: 12,

18
apps/mobile/app/components/properties/color-tags.tsx
View File

@@ -34,8 +34,8 @@ import { refreshNotesPage } from "../../utils/events";
import { SIZE } from "../../utils/size";
import ColorPicker from "../dialogs/color-picker";
import { Button } from "../ui/button";
import { PressableButton } from "../ui/pressable";
import NativeTooltip from "../../utils/tooltip";
import { Pressable } from "../ui/pressable";
const ColorItem = ({ item, note }: { item: Color; note: Note }) => {
const { colors } = useThemeColors();
@@ -64,7 +64,7 @@ const ColorItem = ({ item, note }: { item: Color; note: Note }) => {
};
return (
<PressableButton
<Pressable
type="accent"
accentColor={item.colorCode}
accentText={colors.static.white}
@@ -74,7 +74,7 @@ const ColorItem = ({ item, note }: { item: Color; note: Note }) => {
onLongPress={(event) => {
NativeTooltip.show(event, item.title, NativeTooltip.POSITIONS.TOP);
}}
customStyle={{
style={{
width: 35,
height: 35,
borderRadius: 100,
@@ -86,7 +86,7 @@ const ColorItem = ({ item, note }: { item: Color; note: Note }) => {
{isLinked ? (
<Icon testID="icon-check" name="check" color="white" size={SIZE.lg} />
) : null}
</PressableButton>
</Pressable>
);
};
@@ -143,7 +143,7 @@ export const ColorTags = ({ item }: { item: Note }) => {
text: colors.primary.accent
}}
title="Add color"
type="grayBg"
type="secondary"
icon="plus"
iconPosition="right"
height={30}
@@ -155,8 +155,8 @@ export const ColorTags = ({ item }: { item: Note }) => {
}}
/>
) : (
<PressableButton
customStyle={{
<Pressable
style={{
width: 35,
height: 35,
borderRadius: 100,
@@ -164,7 +164,7 @@ export const ColorTags = ({ item }: { item: Note }) => {
alignItems: "center",
marginRight: 5
}}
type="grayBg"
type="secondary"
onPress={() => {
useSettingStore.getState().setSheetKeyboardHandler(false);
setVisible(true);
@@ -176,7 +176,7 @@ export const ColorTags = ({ item }: { item: Note }) => {
color={colors.primary.icon}
size={SIZE.lg}
/>
</PressableButton>
</Pressable>
)
}
/>

26
apps/mobile/app/components/properties/items.js
View File

@@ -26,7 +26,7 @@ import { useSettingStore } from "../../stores/use-setting-store";
import { useThemeColors } from "@notesnook/theme";
import { SIZE } from "../../utils/size";
import { Button } from "../ui/button";
import { PressableButton } from "../ui/pressable";
import { Pressable } from "../ui/pressable";
import Paragraph from "../ui/typography/paragraph";
export const Items = ({ item, buttons, close }) => {
@@ -54,10 +54,10 @@ export const Items = ({ item, buttons, close }) => {
marginBottom: 10
}}
>
<PressableButton
<Pressable
onPress={item.func}
type={item.on ? "shade" : "grayBg"}
customStyle={{
type={item.on ? "shade" : "secondary"}
style={{
height: columnItemWidth - 12,
width: columnItemWidth - 12,
borderRadius: 10,
@@ -80,7 +80,7 @@ export const Items = ({ item, buttons, close }) => {
: colors.secondary.icon
}
/>
</PressableButton>
</Pressable>
<Paragraph
size={SIZE.xs}
@@ -105,7 +105,7 @@ export const Items = ({ item, buttons, close }) => {
onPress={item.func}
title={item.title}
icon={item.icon}
type={item.on ? "shade" : "gray"}
type={item.on ? "shade" : "plain"}
fontSize={SIZE.sm}
style={{
borderRadius: 0,
@@ -119,22 +119,22 @@ export const Items = ({ item, buttons, close }) => {
const renderTopBarItem = (item, index) => {
const isLast = index === topBarItems.length;
return (
<PressableButton
<Pressable
onPress={item.func}
key={item.id}
testID={"icon-" + item.id}
activeOpacity={1}
customStyle={{
style={{
alignSelf: "flex-start",
marginRight: isLast ? 0 : 10,
paddingHorizontal: 0,
width: topBarItemWidth
}}
>
<PressableButton
<Pressable
onPress={item.func}
type={item.on ? "shade" : "gray"}
customStyle={{
type={item.on ? "shade" : "plain"}
style={{
height: topBarItemWidth,
width: topBarItemWidth,
justifyContent: "center",
@@ -157,7 +157,7 @@ export const Items = ({ item, buttons, close }) => {
: colors.secondary.icon
}
/>
</PressableButton>
</Pressable>
<Paragraph
textBreakStrategy="simple"
@@ -166,7 +166,7 @@ export const Items = ({ item, buttons, close }) => {
>
{item.title}
</Paragraph>
</PressableButton>
</Pressable>
);
};

12
apps/mobile/app/components/properties/notebooks.js
View File

@@ -28,7 +28,7 @@ import { eClearEditor } from "../../utils/events";
import { SIZE } from "../../utils/size";
import { Button } from "../ui/button";
import Heading from "../ui/typography/heading";
import { PressableButton } from "../ui/pressable";
import { Pressable } from "../ui/pressable";
export default function Notebooks({ note, close, full }) {
const { colors } = useThemeColors();
@@ -48,15 +48,15 @@ export default function Notebooks({ note, close, full }) {
};
const renderItem = (item) => (
<PressableButton
<Pressable
key={item.id}
onPress={() => {
navigateNotebook(item.id);
eSendEvent(eClearEditor);
close();
}}
type={full ? "transparent" : "grayBg"}
customStyle={{
type={full ? "transparent" : "secondary"}
style={{
justifyContent: "flex-start",
paddingHorizontal: 12,
flexDirection: "row",
@@ -85,7 +85,7 @@ export default function Notebooks({ note, close, full }) {
>
{item.title}
</Heading>
</PressableButton>
</Pressable>
);
return noteNotebooks.length === 0 ? null : (
@@ -110,7 +110,7 @@ export default function Notebooks({ note, close, full }) {
paddingHorizontal: 0,
backgroundColor: "transparent"
}}
type="gray"
type="plain"
textStyle={{
textDecorationLine: "underline"
}}

2
apps/mobile/app/components/properties/synced.js
View File

@@ -102,7 +102,7 @@ export const Synced = ({ item, close }) => {
title="Learn more"
fontSize={SIZE.xs}
height={30}
type="grayAccent"
type="secondaryAccented"
/>
</View>
) : null;

4
apps/mobile/app/components/properties/tags.js
View File

@@ -52,7 +52,7 @@ export const Tags = ({ item, close }) => {
text: colors.primary.accent
}}
title="Add tag"
type="grayBg"
type="secondary"
icon="plus"
iconPosition="right"
height={30}
@@ -103,7 +103,7 @@ const TagItem = ({ tag, close }) => {
<Button
onPress={onPress}
title={"#" + tag}
type="grayBg"
type="secondary"
height={20}
fontSize={SIZE.xs}
style={style}

22
apps/mobile/app/components/selection-header/index.tsx
View File

@@ -155,7 +155,7 @@ export const SelectionHeader = React.memo(
}}
>
<IconButton
customStyle={{
style={{
justifyContent: "center",
alignItems: "center",
height: 40,
@@ -163,7 +163,7 @@ export const SelectionHeader = React.memo(
borderRadius: 100,
marginRight: 10
}}
type="grayBg"
type="secondary"
onPress={() => {
clearSelection();
}}
@@ -203,7 +203,7 @@ export const SelectionHeader = React.memo(
}}
tooltipText="Select all"
tooltipPosition={4}
customStyle={{
style={{
marginLeft: 10
}}
color={
@@ -220,7 +220,7 @@ export const SelectionHeader = React.memo(
await sleep(100);
ManageTagsSheet.present(selectedItemsList);
}}
customStyle={{
style={{
marginLeft: 10
}}
color={colors.primary.icon}
@@ -236,7 +236,7 @@ export const SelectionHeader = React.memo(
}}
tooltipText="Export"
tooltipPosition={4}
customStyle={{
style={{
marginLeft: 10
}}
color={colors.primary.paragraph}
@@ -248,7 +248,7 @@ export const SelectionHeader = React.memo(
onPress={async () => {
MoveNoteSheet.present();
}}
customStyle={{
style={{
marginLeft: 10
}}
tooltipText="Add to notebooks"
@@ -271,7 +271,7 @@ export const SelectionHeader = React.memo(
clearSelection();
}
}}
customStyle={{
style={{
marginLeft: 10
}}
tooltipText={`Remove from Notebook`}
@@ -286,7 +286,7 @@ export const SelectionHeader = React.memo(
{focusedRouteId === "Favorites" ? (
<IconButton
onPress={addToFavorite}
customStyle={{
style={{
marginLeft: 10
}}
tooltipText="Remove from favorites"
@@ -299,7 +299,7 @@ export const SelectionHeader = React.memo(
{type === "trash" ? null : (
<IconButton
customStyle={{
style={{
marginLeft: 10
}}
onPress={() => {
@@ -322,7 +322,7 @@ export const SelectionHeader = React.memo(
{type === "trash" ? (
<>
<IconButton
customStyle={{
style={{
marginLeft: 10
}}
color={colors.primary.paragraph}
@@ -334,7 +334,7 @@ export const SelectionHeader = React.memo(
/>
<IconButton
customStyle={{
style={{
marginLeft: 10
}}
color={colors.primary.paragraph}

2
apps/mobile/app/components/sheet-provider/index.js
View File

@@ -177,7 +177,7 @@ const SheetProvider = ({ context = "global" }) => {
data.valueArray.map((v) => (
<Button
title={v}
type="gray"
type="plain"
key={v}
textStyle={{ fontWeight: "normal" }}
fontSize={SIZE.sm}

4
apps/mobile/app/components/sheets/add-to/index.tsx
View File

@@ -192,12 +192,12 @@ const MoveNoteSheet = ({
>
<IconButton
name="restore"
type="grayAccent"
type="secondaryAccented"
onPress={() => {
const items = note ? [note.id] : selectedItemsList;
updateInitialSelectionState(items);
}}
customStyle={{
style={{
width: 40,
height: 40
}}

14
apps/mobile/app/components/sheets/add-to/notebook-item.tsx
View File

@@ -26,7 +26,7 @@ import { useNotebook } from "../../../hooks/use-notebook";
import useNavigationStore from "../../../stores/use-navigation-store";
import { SIZE } from "../../../utils/size";
import { IconButton } from "../../ui/icon-button";
import { PressableButton } from "../../ui/pressable";
import { Pressable } from "../../ui/pressable";
import Paragraph from "../../ui/typography/paragraph";
import { AddNotebookSheet } from "../add-notebook";
import {
@@ -108,7 +108,7 @@ export const NotebookItem = ({
width: "100%"
}}
>
<PressableButton
<Pressable
type={"transparent"}
onLongPress={() => {
if (!item) return;
@@ -129,7 +129,7 @@ export const NotebookItem = ({
}}
testID={`add-to-notebook-item-${currentLevel}-${index}`}
onPress={onPress}
customStyle={{
style={{
justifyContent: "space-between",
width: "100%",
alignItems: "center",
@@ -158,7 +158,7 @@ export const NotebookItem = ({
left={0}
bottom={0}
right={0}
customStyle={{
style={{
width: 35,
height: 35
}}
@@ -180,7 +180,7 @@ export const NotebookItem = ({
left={0}
bottom={0}
right={0}
customStyle={{
style={{
width: 40,
height: 40
}}
@@ -219,7 +219,7 @@ export const NotebookItem = ({
) : null}
<IconButton
name="plus"
customStyle={{
style={{
width: 40 * fontScale,
height: 40 * fontScale
}}
@@ -236,7 +236,7 @@ export const NotebookItem = ({
size={SIZE.xl}
/>
</View>
</PressableButton>
</Pressable>
{!expanded
? null

14
apps/mobile/app/components/sheets/export-notes/index.tsx
View File

@@ -43,7 +43,7 @@ import DialogHeader from "../../dialog/dialog-header";
import { ProTag } from "../../premium/pro-tag";
import { Button } from "../../ui/button";
import { IconButton } from "../../ui/icon-button";
import { PressableButton } from "../../ui/pressable";
import { Pressable } from "../../ui/pressable";
import Seperator from "../../ui/seperator";
import Heading from "../../ui/typography/heading";
import Paragraph from "../../ui/typography/paragraph";
@@ -183,9 +183,9 @@ const ExportNotesSheet = ({
actions.map((item) => (
<Fragment key={item.title}>
<Seperator half />
<PressableButton
<Pressable
onPress={item.func}
customStyle={{
style={{
width: "100%",
alignItems: "center",
flexDirection: "row",
@@ -232,7 +232,7 @@ const ExportNotesSheet = ({
{item.desc}
</Paragraph>
</View>
</PressableButton>
</Pressable>
</Fragment>
))
) : (
@@ -263,7 +263,7 @@ const ExportNotesSheet = ({
name="export"
color={colors.primary.icon}
size={50}
customStyle={{
style={{
width: 70,
height: 70
}}
@@ -316,7 +316,7 @@ const ExportNotesSheet = ({
/>
<Button
title="Share"
type="grayAccent"
type="secondaryAccented"
width={250}
fontSize={SIZE.md}
style={{
@@ -340,7 +340,7 @@ const ExportNotesSheet = ({
/>
<Button
title="Export in another format"
type="grayAccent"
type="secondaryAccented"
width={250}
fontSize={SIZE.md}
style={{

16
apps/mobile/app/components/sheets/manage-tags/index.tsx
View File

@@ -44,7 +44,7 @@ import { useRelationStore } from "../../../stores/use-relation-store";
import { useTagStore } from "../../../stores/use-tag-store";
import { SIZE } from "../../../utils/size";
import Input from "../../ui/input";
import { PressableButton } from "../../ui/pressable";
import { Pressable } from "../../ui/pressable";
import Heading from "../../ui/typography/heading";
import Paragraph from "../../ui/typography/paragraph";
@@ -283,9 +283,9 @@ const ManageTagsSheet = (props: {
/>
{query && !queryExists ? (
<PressableButton
<Pressable
key={"query_item"}
customStyle={{
style={{
flexDirection: "row",
marginVertical: 5,
justifyContent: "space-between",
@@ -298,7 +298,7 @@ const ManageTagsSheet = (props: {
Add {'"' + "#" + query + '"'}
</Heading>
<Icon name="plus" color={colors.selected.icon} size={SIZE.lg} />
</PressableButton>
</Pressable>
) : null}
<FlatList
@@ -362,9 +362,9 @@ const TagItem = ({
);
return !tag ? null : (
<PressableButton
<Pressable
key={tag?.id}
customStyle={{
style={{
flexDirection: "row",
marginVertical: 5,
justifyContent: "flex-start",
@@ -374,7 +374,7 @@ const TagItem = ({
if (!tag) return;
onPress(tag.id);
}}
type="gray"
type="plain"
>
{!tag ? null : (
<Icon
@@ -418,6 +418,6 @@ const TagItem = ({
}}
/>
)}
</PressableButton>
</Pressable>
);
};

10
apps/mobile/app/components/sheets/move-notes/movenote.tsx
View File

@@ -35,7 +35,7 @@ import { Dialog } from "../../dialog";
import DialogHeader from "../../dialog/dialog-header";
import { Button } from "../../ui/button";
import { IconButton } from "../../ui/icon-button";
import { PressableButton } from "../../ui/pressable";
import { Pressable } from "../../ui/pressable";
import Seperator from "../../ui/seperator";
import Paragraph from "../../ui/typography/paragraph";
@@ -166,7 +166,7 @@ const SelectableNoteItem = React.memo(
);
return exists ? null : (
<PressableButton
<Pressable
testID="listitem.select"
onPress={() => {
if (!item) return;
@@ -175,7 +175,7 @@ const SelectableNoteItem = React.memo(
.markAs(item, selected ? "deselected" : "selected");
}}
type={"transparent"}
customStyle={{
style={{
paddingVertical: 12,
flexDirection: "row",
width: "100%",
@@ -186,7 +186,7 @@ const SelectableNoteItem = React.memo(
{!item ? null : (
<>
<IconButton
customStyle={{
style={{
backgroundColor: "transparent",
marginRight: 5
}}
@@ -227,7 +227,7 @@ const SelectableNoteItem = React.memo(
</View>
</>
)}
</PressableButton>
</Pressable>
);
}
);

30
apps/mobile/app/components/sheets/notebook-sheet/index.tsx
View File

@@ -40,7 +40,7 @@ import { findRootNotebookId } from "../../../utils/notebooks";
import { SIZE, normalize } from "../../../utils/size";
import { Properties } from "../../properties";
import { IconButton } from "../../ui/icon-button";
import { PressableButton } from "../../ui/pressable";
import { Pressable } from "../../ui/pressable";
import Paragraph from "../../ui/typography/paragraph";
import { AddNotebookSheet } from "../add-notebook";
import Sort from "../sort";
@@ -208,11 +208,11 @@ export const NotebookSheet = () => {
marginTop: -80
}}
>
<PressableButton
<Pressable
testID={notesnook.buttons.add}
type="accent"
onPress={openEditor}
customStyle={{
style={{
borderRadius: 100
}}
>
@@ -226,7 +226,7 @@ export const NotebookSheet = () => {
>
<Icon name="plus" color="white" size={SIZE.xxl} />
</View>
</PressableButton>
</Pressable>
</View>
<View
style={{
@@ -254,7 +254,7 @@ export const NotebookSheet = () => {
{enabled ? (
<>
<IconButton
customStyle={{
style={{
marginLeft: 10,
width: 40 * fontScale,
height: 40 * fontScale
@@ -279,7 +279,7 @@ export const NotebookSheet = () => {
/>
<IconButton
customStyle={{
style={{
marginLeft: 10,
width: 40 * fontScale,
height: 40 * fontScale
@@ -314,7 +314,7 @@ export const NotebookSheet = () => {
testID="group-topic-button"
color={colors.primary.icon}
size={22}
customStyle={{
style={{
width: 40 * fontScale,
height: 40 * fontScale
}}
@@ -328,7 +328,7 @@ export const NotebookSheet = () => {
testID="add-notebook-button"
color={colors.primary.icon}
size={22}
customStyle={{
style={{
width: 40 * fontScale,
height: 40 * fontScale
}}
@@ -347,7 +347,7 @@ export const NotebookSheet = () => {
}}
color={colors.primary.icon}
size={22}
customStyle={{
style={{
width: 40 * fontScale,
height: 40 * fontScale
}}
@@ -430,7 +430,7 @@ const NotebookItem = ({
width: "100%"
}}
>
<PressableButton
<Pressable
type={isSelected || isFocused ? "selected" : "transparent"}
onLongPress={() => {
if (enabled || !item) return;
@@ -453,7 +453,7 @@ const NotebookItem = ({
}
NotebookScreen.navigate(item, true);
}}
customStyle={{
style={{
justifyContent: "space-between",
width: "100%",
alignItems: "center",
@@ -480,7 +480,7 @@ const NotebookItem = ({
left={0}
bottom={0}
right={0}
customStyle={{
style={{
width: 35,
height: 35
}}
@@ -503,7 +503,7 @@ const NotebookItem = ({
left={0}
bottom={0}
right={0}
customStyle={{
style={{
width: 35,
height: 35,
marginRight: 5
@@ -540,7 +540,7 @@ const NotebookItem = ({
) : null}
<IconButton
name="dots-horizontal"
customStyle={{
style={{
width: 40 * fontScale,
height: 40 * fontScale
}}
@@ -556,7 +556,7 @@ const NotebookItem = ({
size={SIZE.xl}
/>
</View>
</PressableButton>
</Pressable>
{!expanded
? null

2
apps/mobile/app/components/sheets/rate-app/index.js
View File

@@ -126,7 +126,7 @@ const RateAppSheet = () => {
onPress={onClose}
fontSize={SIZE.md}
width="48%"
type="grayBg"
type="secondary"
title="Later"
/>
</View>

8
apps/mobile/app/components/sheets/recovery-key/index.js
View File

@@ -292,7 +292,7 @@ class RecoveryKeySheet extends React.Component {
icon="content-copy"
title="Copy to clipboard"
width="100%"
type="grayAccent"
type="secondaryAccented"
fontSize={SIZE.md}
/>
<Seperator />
@@ -300,7 +300,7 @@ class RecoveryKeySheet extends React.Component {
title="Save QR-Code to gallery"
onPress={this.saveQRCODE}
width="100%"
type="grayAccent"
type="secondaryAccented"
fontSize={SIZE.md}
icon="qrcode"
/>
@@ -309,7 +309,7 @@ class RecoveryKeySheet extends React.Component {
onPress={this.saveToTextFile}
title="Save to text file"
width="100%"
type="grayAccent"
type="secondaryAccented"
icon="text"
fontSize={SIZE.md}
/>
@@ -319,7 +319,7 @@ class RecoveryKeySheet extends React.Component {
onPress={this.shareFile}
title="Share to Cloud"
width="100%"
type="grayAccent"
type="secondaryAccented"
icon="cloud"
fontSize={SIZE.md}
/>

4
apps/mobile/app/components/sheets/relations-list/index.tsx
View File

@@ -33,7 +33,7 @@ import DialogHeader from "../../dialog/dialog-header";
import List from "../../list";
import SheetProvider from "../../sheet-provider";
import { Button } from "../../ui/button";
import { PressableButtonProps } from "../../ui/pressable";
import { PressableProps } from "../../ui/pressable";
import Paragraph from "../../ui/typography/paragraph";
import { Item, ItemReference, ItemType } from "@notesnook/core/dist/types";
import { VirtualizedGrouping } from "@notesnook/core";
@@ -54,7 +54,7 @@ type Button = {
onPress?: (() => void) | undefined;
loading?: boolean | undefined;
title?: string | undefined;
type?: PressableButtonProps["type"];
type?: PressableProps["type"];
icon?: string;
};

2
apps/mobile/app/components/sheets/reminder-notify/index.tsx
View File

@@ -138,7 +138,7 @@ export default function ReminderNotify({
{QuickActions.map((item) => {
return (
<Button
type="grayAccent"
type="secondaryAccented"
key={item.title}
title={item.title}
height={30}

18
apps/mobile/app/components/sheets/reminder/index.tsx
View File

@@ -287,8 +287,8 @@ export default function ReminderSheet({
ReminderNotificationModes[
mode as keyof typeof ReminderNotificationModes
]
? "grayAccent"
: "gray"
? "secondaryAccented"
: "plain"
}
onPress={() => {
const _mode = ReminderNotificationModes[
@@ -358,7 +358,7 @@ export default function ReminderSheet({
reminderMode ===
ReminderModes[mode as keyof typeof ReminderModes]
? "selected"
: "gray"
: "plain"
}
onPress={() => {
if (mode === "Repeat" && !PremiumService.get()) return;
@@ -413,8 +413,8 @@ export default function ReminderSheet({
type={
recurringMode ===
RecurringModes[mode as keyof typeof RecurringModes]
? "selected"
: "gray"
? "secondaryAccented"
: "plain"
}
onPress={() => {
setRecurringMode(
@@ -441,7 +441,7 @@ export default function ReminderSheet({
index as keyof typeof WeekDayNames
].slice(0, 1)}
type={
selectedDays.indexOf(index) > -1 ? "accent" : "gray"
selectedDays.indexOf(index) > -1 ? "accent" : "plain"
}
fontSize={SIZE.sm - 1}
style={{
@@ -471,7 +471,9 @@ export default function ReminderSheet({
key={index + "monthday"}
title={index + 1 + ""}
type={
selectedDays.indexOf(index + 1) > -1 ? "accent" : "gray"
selectedDays.indexOf(index + 1) > -1
? "accent"
: "plain"
}
fontSize={SIZE.sm - 1}
style={{
@@ -545,7 +547,7 @@ export default function ReminderSheet({
width: "100%"
}}
title={date ? date.toLocaleDateString() : "Select date"}
type={date ? "grayAccent" : "grayBg"}
type={date ? "secondaryAccented" : "secondary"}
icon="calendar"
fontSize={SIZE.md}
onPress={() => {

6
apps/mobile/app/components/sheets/sort/index.js
View File

@@ -136,7 +136,7 @@ const Sort = ({ type, screen }) => {
>
{groupOptions.groupBy === "abc" ? (
<Button
type={"grayBg"}
type="secondary"
title="Title"
height={40}
iconPosition="left"
@@ -154,7 +154,7 @@ const Sort = ({ type, screen }) => {
item === "dateEdited") ? null : (
<Button
key={item}
type={groupOptions.sortBy === item ? "selected" : "gray"}
type={groupOptions.sortBy === item ? "selected" : "plain"}
title={SORT[item]}
height={40}
iconPosition="left"
@@ -213,7 +213,7 @@ const Sort = ({ type, screen }) => {
key={item}
testID={"btn-" + item}
type={
groupOptions.groupBy === GROUP[item] ? "selected" : "gray"
groupOptions.groupBy === GROUP[item] ? "selected" : "plain"
}
buttonType={{
text:

10
apps/mobile/app/components/sheets/update/index.js
View File

File diff suppressed because one or more lines are too long

8
apps/mobile/app/components/side-menu/color-section.tsx
View File

@@ -30,7 +30,7 @@ import { useSettingStore } from "../../stores/use-setting-store";
import { SIZE, normalize } from "../../utils/size";
import ReorderableList from "../list/reorderable-list";
import { Properties } from "../properties";
import { PressableButton } from "../ui/pressable";
import { Pressable } from "../ui/pressable";
import Heading from "../ui/typography/heading";
import Paragraph from "../ui/typography/paragraph";
import { useSideBarDraggingStore } from "./dragging-store";
@@ -97,14 +97,14 @@ const ColorItem = React.memo(
};
return (
<PressableButton
<Pressable
customColor={isFocused ? "rgba(0,0,0,0.04)" : "transparent"}
onLongPress={onLongPress}
customSelectedColor={item.colorCode}
customAlpha={!isDark ? -0.02 : 0.02}
customOpacity={0.12}
onPress={() => onPress(item)}
customStyle={{
style={{
width: "100%",
alignSelf: "center",
borderRadius: 5,
@@ -150,7 +150,7 @@ const ColorItem = React.memo(
</Paragraph>
)}
</View>
</PressableButton>
</Pressable>
);
},
(prev, next) => {

12
apps/mobile/app/components/side-menu/pinned-section.tsx
View File

@@ -33,7 +33,7 @@ import { SIZE, normalize } from "../../utils/size";
import ReorderableList from "../list/reorderable-list";
import { Button } from "../ui/button";
import { Notice } from "../ui/notice";
import { PressableButton } from "../ui/pressable";
import { Pressable } from "../ui/pressable";
import Seperator from "../ui/seperator";
import SheetWrapper from "../ui/sheet";
import Heading from "../ui/typography/heading";
@@ -152,16 +152,16 @@ export const PinItem = React.memo(
}}
fontSize={SIZE.md}
width="95%"
customStyle={{
style={{
marginBottom: 30
}}
/>
</SheetWrapper>
)}
<PressableButton
type={isFocused ? "selected" : "gray"}
<Pressable
type={isFocused ? "selected" : "plain"}
onPress={() => onPress(item)}
customStyle={{
style={{
width: "100%",
alignSelf: "center",
borderRadius: 5,
@@ -233,7 +233,7 @@ export const PinItem = React.memo(
)}
</View>
</View>
</PressableButton>
</Pressable>
</>
);
},

83
apps/mobile/app/components/side-menu/user-status.js
View File

@@ -17,23 +17,25 @@ You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import { useThemeColors } from "@notesnook/theme";
import { useNetInfo } from "@react-native-community/netinfo";
import React from "react";
import { ActivityIndicator, Platform, View } from "react-native";
import { ActivityIndicator, Image, Platform, View } from "react-native";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";
import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
import useSyncProgress from "../../hooks/use-sync-progress";
import { eSendEvent } from "../../services/event-manager";
import Sync from "../../services/sync";
import { useThemeColors } from "@notesnook/theme";
import { SyncStatus, useUserStore } from "../../stores/use-user-store";
import { eOpenLoginDialog } from "../../utils/events";
import { tabBarRef } from "../../utils/global-refs";
import { SIZE } from "../../utils/size";
import { PressableButton } from "../ui/pressable";
import { Pressable } from "../ui/pressable";
import { TimeSince } from "../ui/time-since";
import Heading from "../ui/typography/heading";
import Paragraph from "../ui/typography/paragraph";
import { useNetInfo } from "@react-native-community/netinfo";
const PROFILE_PIC_URL = `https://picsum.photos/id/177/367/267`;
export const UserStatus = () => {
const { colors } = useThemeColors();
const user = useUserStore((state) => state.user);
@@ -61,7 +63,7 @@ export const UserStatus = () => {
alignItems: "center"
}}
>
<PressableButton
<Pressable
onPress={async () => {
if (user) {
Sync.run();
@@ -70,22 +72,55 @@ export const UserStatus = () => {
eSendEvent(eOpenLoginDialog);
}
}}
type="gray"
customStyle={{
type="plain"
style={{
flexDirection: "row",
justifyContent: "flex-start",
padding: 12,
paddingHorizontal: 20,
borderRadius: 0
borderRadius: 0,
alignItems: "center"
}}
>
{user ? (
<Image
source={{
uri: PROFILE_PIC_URL
}}
style={{
width: 35,
height: 35,
borderRadius: 100,
backgroundColor: "red",
marginRight: 10
}}
/>
) : null}
<View
style={{
flexShrink: 1,
flexGrow: 1
}}
>
<Heading
<Paragraph
style={{
flexWrap: "wrap"
}}
size={SIZE.sm}
color={colors.primary.heading}
>
{!user
? "Login to sync your notes."
: lastSyncStatus === SyncStatus.Failed
? "Sync failed, tap to retry"
: syncing
? `Syncing your notes${
progress ? ` (${progress.current})` : ""
}`
: "Ammar Ahmed"}
</Paragraph>
<Paragraph
style={{
flexWrap: "wrap"
}}
@@ -93,17 +128,18 @@ export const UserStatus = () => {
color={colors.secondary.heading}
>
{!user ? (
"You are not logged in"
"Not logged in"
) : lastSynced && lastSynced !== "Never" ? (
<>
Synced{" "}
{lastSyncStatus === SyncStatus.Failed
? "Sync failed"
: "Synced"}{" "}
<TimeSince
style={{
fontSize: SIZE.xs,
color: colors.secondary.paragraph
}}
time={lastSynced}
bold={true}
/>
{isOffline ? " (offline)" : ""}
</>
@@ -122,23 +158,6 @@ export const UserStatus = () => {
: colors.success.icon
}
/>
</Heading>
<Paragraph
style={{
flexWrap: "wrap"
}}
color={colors.primary.heading}
>
{!user
? "Login to sync your notes."
: lastSyncStatus === SyncStatus.Failed
? "Last sync failed, tap to try again"
: syncing
? `Syncing your notes${
progress ? ` (${progress.current})` : ""
}`
: "Tap here to sync your notes."}
</Paragraph>
</View>
@@ -161,7 +180,7 @@ export const UserStatus = () => {
/>
)
) : null}
</PressableButton>
</Pressable>
</View>
</View>
);

2
apps/mobile/app/components/tip/index.tsx
View File

@@ -88,7 +88,7 @@ export const Tip = ({
{neverShowAgain && (
<Button
title="Never show again"
type="grayBg"
type="secondary"
icon="close"
fontSize={SIZE.xs}
iconSize={SIZE.xs}

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

@@ -29,7 +29,7 @@ import Icon from "react-native-vector-icons/MaterialCommunityIcons";
import { SIZE } from "../../../utils/size";
import NativeTooltip from "../../../utils/tooltip";
import { ButtonProps } from "../button";
import { PressableButton, useButton } from "../pressable";
import { Pressable, useButton } from "../pressable";
import Heading from "../typography/heading";
import Paragraph from "../typography/paragraph";
const AnimatedIcon = Animated.createAnimatedComponent(Icon);
@@ -71,7 +71,7 @@ export const AnimatedButton = ({
exiting={FadeOut}
layout={Layout.springify()}
>
<PressableButton
<Pressable
{...restProps}
fwdRef={fwdRef}
onPress={onPress}
@@ -92,7 +92,7 @@ export const AnimatedButton = ({
customSelectedColor={buttonType?.selected}
customOpacity={buttonType?.opacity}
customAlpha={buttonType?.alpha}
customStyle={{
style={{
height: height,
width: (width as DimensionValue) || undefined,
paddingHorizontal: 12,
@@ -152,7 +152,7 @@ export const AnimatedButton = ({
size={iconSize}
/>
) : null}
</PressableButton>
</Pressable>
</Animated.View>
);
};

10
apps/mobile/app/components/ui/button/index.tsx
View File

@@ -32,10 +32,10 @@ import { useUserStore } from "../../../stores/use-user-store";
import { SIZE } from "../../../utils/size";
import NativeTooltip from "../../../utils/tooltip";
import { ProTag } from "../../premium/pro-tag";
import { PressableButton, PressableButtonProps, useButton } from "../pressable";
import { Pressable, PressableProps, useButton } from "../pressable";
import Heading from "../typography/heading";
import Paragraph from "../typography/paragraph";
export interface ButtonProps extends PressableButtonProps {
export interface ButtonProps extends PressableProps {
height?: number;
icon?: string;
fontSize?: number;
@@ -95,7 +95,7 @@ export const Button = ({
const Component = bold ? Heading : Paragraph;
return (
<PressableButton
<Pressable
{...restProps}
fwdRef={fwdRef}
onPress={onPress}
@@ -116,7 +116,7 @@ export const Button = ({
customSelectedColor={buttonType?.selected}
customOpacity={buttonType?.opacity}
customAlpha={buttonType?.alpha}
customStyle={{
style={{
height: height,
width: (width as DimensionValue) || undefined,
paddingHorizontal: 12,
@@ -176,6 +176,6 @@ export const Button = ({
size={iconSize}
/>
) : null}
</PressableButton>
</Pressable>
);
};

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

@@ -24,8 +24,8 @@ import Icon from "react-native-vector-icons/MaterialCommunityIcons";
import { RGB_Linear_Shade, hexToRGBA } from "../../../utils/colors";
import { SIZE } from "../../../utils/size";
import NativeTooltip from "../../../utils/tooltip";
import { PressableButton, PressableButtonProps } from "../pressable";
interface IconButtonProps extends PressableButtonProps {
import { Pressable, PressableProps } from "../pressable";
interface IconButtonProps extends PressableProps {
name: string;
color?: ColorValue;
size?: number;
@@ -43,7 +43,7 @@ export const IconButton = ({
onPress,
name,
color,
customStyle,
style: customStyle,
size = SIZE.xxl,
iconStyle = {},
left = 10,
@@ -52,7 +52,7 @@ export const IconButton = ({
bottom = 10,
onLongPress,
tooltipText,
type = "gray",
type = "plain",
fwdRef,
tooltipPosition = NativeTooltip.POSITIONS.TOP,
...restProps
@@ -70,14 +70,14 @@ export const IconButton = ({
};
return (
<PressableButton
<Pressable
{...restProps}
fwdRef={fwdRef}
onPress={onPress}
hitSlop={{ top: top, left: left, right: right, bottom: bottom }}
onLongPress={_onLongPress}
type={type}
customStyle={{
style={{
width: 40,
height: 40,
justifyContent: "center",
@@ -97,6 +97,6 @@ export const IconButton = ({
}
size={size}
/>
</PressableButton>
</Pressable>
);
};

9
apps/mobile/app/components/ui/notice/index.tsx
View File

@@ -17,12 +17,14 @@ You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import { useThemeColors } from "@notesnook/theme";
import React from "react";
import { View } from "react-native";
import { useThemeColors } from "@notesnook/theme";
import { getContainerBorder } from "../../../utils/colors";
import { SIZE } from "../../../utils/size";
import { IconButton } from "../icon-button";
import Paragraph from "../typography/paragraph";
export interface NoticeProps {
type?: "alert" | "information";
text: string;
@@ -46,13 +48,14 @@ export const Notice = ({
flexDirection: "row",
backgroundColor: colors.secondary.background,
borderRadius: isSmall ? 5 : 10,
alignItems: "flex-start"
alignItems: "flex-start",
...getContainerBorder(colors.secondary.background)
}}
>
<IconButton
size={isSmall ? SIZE.lg + 1 : SIZE.xxl}
name={type}
customStyle={{
style={{
width: isSmall ? undefined : 40,
height: isSmall ? undefined : 40,
alignSelf: "flex-start"

283
apps/mobile/app/components/ui/pressable/index.tsx
View File

@@ -17,20 +17,24 @@ You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import { useThemeColors } from "@notesnook/theme";
import { VariantsWithStaticColors, useThemeColors } from "@notesnook/theme";
import React, { RefObject, useCallback } from "react";
import {
ColorValue,
Pressable,
PressableProps,
Pressable as RNPressable,
PressableProps as RNPressableProps,
PressableStateCallbackType,
View,
ViewStyle
} from "react-native";
import { RGB_Linear_Shade, hexToRGBA } from "../../../utils/colors";
import {
RGB_Linear_Shade,
getColorLinearShade,
hexToRGBA
} from "../../../utils/colors";
import { br } from "../../../utils/size";
export interface PressableButtonProps extends PressableProps {
customStyle?: ViewStyle;
export interface PressableProps extends RNPressableProps {
style?: ViewStyle;
noborder?: boolean;
type?: ButtonTypes;
accentColor?: string;
@@ -44,18 +48,152 @@ export interface PressableButtonProps extends PressableProps {
}
type ButtonTypes =
| "plain"
| "transparent"
| "accent"
| "shade"
| "gray"
| "grayBg"
| "grayAccent"
| "secondary"
| "secondaryAccented"
| "inverted"
| "white"
| "error"
| "errorShade"
| "warn"
| "selected";
type ButtonVariant = {
primary: string;
text: string;
selected: string;
colorOpacity?: number;
borderWidth?: number;
borderColor?: string;
borderSelectedColor?: string;
};
const buttonTypes = (
colors: VariantsWithStaticColors<true>,
accent?: string,
text?: string,
isDark?: boolean
): {
[name: string]: ButtonVariant;
} => ({
plain: {
primary: "transparent",
text: colors.primary.paragraph,
selected: colors.primary.hover,
borderWidth: 0.8,
borderSelectedColor: getColorLinearShade(
colors.selected.background,
0.05,
isDark
)
},
transparent: {
primary: "transparent",
text: colors.primary.accent,
selected: colors.secondary.background,
borderWidth: 0.8,
borderSelectedColor: getColorLinearShade(
colors.selected.background,
0.05,
isDark
)
},
secondary: {
primary: colors.secondary.background,
text: colors.secondary.paragraph,
selected: colors.secondary.background,
borderWidth: 0.8,
borderColor: getColorLinearShade(colors.secondary.background, 0.05, isDark),
borderSelectedColor: getColorLinearShade(
colors.selected.background,
0.05,
isDark
)
},
selected: {
primary: colors.selected.background,
text: colors.selected.paragraph,
selected: colors.selected.background,
borderWidth: 0.8,
borderColor: getColorLinearShade(colors.selected.background, 0.05, isDark),
borderSelectedColor: getColorLinearShade(
colors.selected.background,
0.05,
isDark
)
},
secondaryAccented: {
primary: colors.secondary.background,
text: colors.primary.accent,
selected: colors.secondary.background,
borderWidth: 0.8,
borderColor: getColorLinearShade(colors.secondary.background, 0.05, isDark),
borderSelectedColor: getColorLinearShade(
colors.secondary.background,
0.05,
isDark
)
},
accent: {
primary: accent || colors.primary.accent,
text: text || colors.primary.accentForeground,
selected: accent || colors.primary.accent,
borderWidth: 0.8,
borderColor: getColorLinearShade(colors.primary.accent, 0.3, false),
borderSelectedColor: getColorLinearShade(colors.primary.accent, 0.3, false)
},
inverted: {
primary: colors.primary.background,
text: colors.primary.accent,
selected: colors.primary.background
},
white: {
primary: "transparent",
text: colors.static.white,
selected: colors.primary.hover
},
shade: {
primary: colors.primary.shade,
text: colors.primary.accent,
selected: colors.primary.accent,
colorOpacity: 0.12,
borderWidth: 0.8,
borderColor: getColorLinearShade(colors.primary.shade, 0.3, isDark),
borderSelectedColor: getColorLinearShade(colors.primary.shade, 0.3, isDark)
},
error: {
primary: colors.error.background,
text: colors.error.paragraph,
selected: colors.error.background,
borderWidth: 0.8,
borderColor: getColorLinearShade(colors.error.background, 0.05, isDark),
borderSelectedColor: getColorLinearShade(
colors.error.background,
0.07,
isDark
)
},
errorShade: {
primary: "transparent",
text: colors.error.paragraph,
selected: colors.error.background,
borderWidth: 0.8,
borderSelectedColor: getColorLinearShade(
colors.error.background,
0.05,
isDark
)
},
warn: {
primary: colors.static.orange,
text: colors.static.white,
selected: colors.static.orange
}
});
export const useButton = ({
type,
accent,
@@ -64,96 +202,20 @@ export const useButton = ({
accent?: string;
text?: string;
type: ButtonTypes;
}): {
primary: string;
text: string;
selected: string;
colorOpacity?: number;
} => {
const { colors } = useThemeColors();
const buttonTypes: {
[name: string]: {
primary: string;
text: string;
selected: string;
colorOpacity?: number;
};
} = {
transparent: {
primary: "transparent",
text: colors.primary.accent,
selected: colors.secondary.background
},
gray: {
primary: "transparent",
text: colors.secondary.paragraph,
selected: colors.primary.hover
},
grayBg: {
primary: colors.secondary.background,
text: colors.secondary.paragraph,
selected: colors.secondary.background
},
selected: {
primary: colors.selected.background,
text: colors.selected.paragraph,
selected: colors.selected.background
},
grayAccent: {
primary: colors.secondary.background,
text: colors.primary.accent,
selected: colors.secondary.background
},
accent: {
primary: accent || colors.primary.accent,
text: text || colors.primary.accentForeground,
selected: accent || colors.primary.accent
},
inverted: {
primary: colors.primary.background,
text: colors.primary.accent,
selected: colors.primary.background
},
white: {
primary: "transparent",
text: colors.static.white,
selected: colors.primary.hover
},
shade: {
primary: colors.primary.shade,
text: colors.primary.accent,
selected: colors.primary.accent,
colorOpacity: 0.12
},
error: {
primary: colors.error.background,
text: colors.error.paragraph,
selected: colors.error.background
},
errorShade: {
primary: "transparent",
text: colors.error.paragraph,
selected: colors.error.background
},
warn: {
primary: colors.static.orange,
text: colors.static.white,
selected: colors.static.orange
}
};
return buttonTypes[type];
}): ButtonVariant => {
const { colors, isDark } = useThemeColors();
return buttonTypes(colors, accent, text, isDark)[type];
};
export const PressableButton = ({
export const Pressable = ({
children,
onPress,
customStyle = {},
style = {},
onLongPress,
hitSlop,
testID,
disabled,
type = "gray",
type = "plain",
noborder,
accentColor,
accentText = "#ffffff",
@@ -163,9 +225,16 @@ export const PressableButton = ({
customOpacity,
fwdRef,
hidden
}: PressableButtonProps) => {
}: PressableProps) => {
const { isDark } = useThemeColors();
const { primary, selected, colorOpacity } = useButton({
const {
primary,
selected,
colorOpacity,
borderColor,
borderSelectedColor,
borderWidth
} = useButton({
type,
accent: accentColor,
text: accentText
@@ -177,28 +246,42 @@ export const PressableButton = ({
: type === "accent"
? 1
: colorOpacity;
const alpha = customAlpha ? customAlpha : isDark ? 0.04 : -0.04;
const alpha = customAlpha ? customAlpha : isDark ? 0.03 : -0.03;
const getStyle = useCallback(
({ pressed }: PressableStateCallbackType): ViewStyle | ViewStyle[] => [
{
backgroundColor: pressed
? RGB_Linear_Shade(alpha, hexToRGBA(selectedColor, opacity || 1))
: hexToRGBA(primaryColor, opacity || 1 - 0.02),
: hexToRGBA(primaryColor, opacity || 1),
width: "100%",
alignSelf: "center",
borderRadius: noborder ? 0 : br,
justifyContent: "center",
alignItems: "center",
marginBottom: 0
marginBottom: 0,
borderColor: pressed
? borderSelectedColor || borderColor
: borderColor || "transparent",
borderWidth: borderWidth
},
customStyle
style
],
[alpha, selectedColor, opacity, primaryColor, noborder, customStyle]
[
alpha,
selectedColor,
opacity,
primaryColor,
noborder,
borderSelectedColor,
borderColor,
borderWidth,
style
]
);
return hidden ? null : (
<Pressable
<RNPressable
testID={testID}
ref={fwdRef}
disabled={disabled}
@@ -208,6 +291,6 @@ export const PressableButton = ({
style={getStyle}
>
{children}
</Pressable>
</RNPressable>
);
};

2
apps/mobile/app/components/ui/reminder-time/index.tsx
View File

@@ -55,7 +55,7 @@ export const ReminderTime = ({
icon="bell"
fontSize={SIZE.xs}
iconSize={SIZE.sm}
type="grayBg"
type="secondary"
buttonType={
isTodayOrTomorrow
? {

2
apps/mobile/app/components/walkthroughs/index.tsx
View File

@@ -121,7 +121,7 @@ export const Walkthrough = ({
onPress={async () => {
eSendEvent(eCloseSheet);
}}
type="gray"
type="plain"
title="Skip introduction"
/>
) : null}

19
apps/mobile/app/components/walkthroughs/walkthroughs.tsx
View File

@@ -40,6 +40,7 @@ import Seperator from "../ui/seperator";
import Heading from "../ui/typography/heading";
import Paragraph from "../ui/typography/paragraph";
import { useThemeColors } from "@notesnook/theme";
import { getContainerBorder } from "../../utils/colors";
export type TStep = {
text?: string;
@@ -82,7 +83,8 @@ const NotebookWelcome = () => {
width: "100%",
padding: 12,
backgroundColor: colors.secondary.background,
borderRadius: 10
borderRadius: 10,
...getContainerBorder(colors.secondary.background)
}}
>
<View
@@ -135,7 +137,8 @@ const notebooks: { id: string; steps: TStep[] } = {
width: "100%",
padding: 12,
backgroundColor: colors.secondary.background,
borderRadius: 10
borderRadius: 10,
...getContainerBorder(colors.secondary.background)
}}
>
<View
@@ -257,7 +260,7 @@ const notebooks: { id: string; steps: TStep[] } = {
title: "Tasks",
type: "topic"
}}
onPress={() => { }}
onPress={() => {}}
/>
<PinItem
@@ -267,7 +270,7 @@ const notebooks: { id: string; steps: TStep[] } = {
title: "Work and office",
type: "notebook"
}}
onPress={() => { }}
onPress={() => {}}
/>
</View>
),
@@ -399,7 +402,7 @@ const Support = () => {
Linking.openURL("https://discord.gg/zQBK97EE22").catch(console.log);
}}
icon="discord"
type="grayBg"
type="secondary"
title="Join our community on Discord"
/>
@@ -413,7 +416,7 @@ const Support = () => {
Linking.openURL("https://t.me/notesnook").catch(console.log);
}}
icon="telegram"
type="grayBg"
type="secondary"
title="Join our Telegram group"
/>
<Button
@@ -423,7 +426,7 @@ const Support = () => {
width: "90%"
}}
icon="bug"
type="grayBg"
type="secondary"
title="Submit an issue from Settings"
/>
<Button
@@ -433,7 +436,7 @@ const Support = () => {
width: "90%"
}}
icon="mail"
type="grayBg"
type="secondary"
title="Email us at support@streetwriters.co"
/>
</View>

4
apps/mobile/app/screens/editor/index.tsx
View File

@@ -188,10 +188,10 @@ const ReadonlyButton = ({ editor }: { editor: useEditorType }) => {
return readonly && !keyboard.keyboardShown ? (
<IconButton
name="pencil-lock"
type="grayBg"
type="secondary"
onPress={onPress}
color={colors.primary.accent}
customStyle={{
style={{
position: "absolute",
bottom: 60,
width: 60,

2
apps/mobile/app/screens/editor/loading.js
View File

@@ -216,7 +216,7 @@ const EditorOverlay = ({ editorId = "", editor }) => {
</Paragraph>
<IconButton
size={20}
customStyle={{
style={{
width: 26,
height: 26
}}

12
apps/mobile/app/screens/notebook/index.tsx
View File

@@ -43,7 +43,7 @@ import Paragraph from "../../components/ui/typography/paragraph";
import { View } from "react-native";
import { SIZE } from "../../utils/size";
import { IconButton } from "../../components/ui/icon-button";
import { PressableButton } from "../../components/ui/pressable";
import { Pressable } from "../../components/ui/pressable";
import { resolveItems } from "@notesnook/common";
const NotebookScreen = ({ route, navigation }: NavigationProps<"Notebook">) => {
@@ -180,7 +180,7 @@ const NotebookScreen = ({ route, navigation }: NavigationProps<"Notebook">) => {
<IconButton
name="notebook-outline"
size={16}
customStyle={{ width: 20, height: 25 }}
style={{ width: 20, height: 25 }}
onPress={() => {
Navigation.push("Notebooks", {
canGoBack: true
@@ -189,14 +189,14 @@ const NotebookScreen = ({ route, navigation }: NavigationProps<"Notebook">) => {
/>
{breadcrumbs.map((item) => (
<PressableButton
<Pressable
onPress={async () => {
const notebook = await db.notebooks.notebook(item.id);
if (!notebook) return;
NotebookScreen.navigate(notebook, true);
}}
key={item.id}
customStyle={{
style={{
width: undefined,
flexDirection: "row",
paddingHorizontal: 0,
@@ -210,10 +210,10 @@ const NotebookScreen = ({ route, navigation }: NavigationProps<"Notebook">) => {
left={0}
right={0}
bottom={0}
customStyle={{ width: 20, height: 25 }}
style={{ width: 20, height: 25 }}
/>
<Paragraph size={SIZE.xs + 1}>{item.title}</Paragraph>
</PressableButton>
</Pressable>
))}
</View>
) : null}

4
apps/mobile/app/screens/search/search-bar.tsx
View File

@@ -67,8 +67,8 @@ export const SearchBar = ({
Navigation.goBack();
}}
color={colors.primary.paragraph}
type="gray"
customStyle={{
type="plain"
style={{
paddingLeft: 0,
marginLeft: -5,
marginRight: DDS.isLargeTablet() ? 10 : 7

16
apps/mobile/app/screens/settings/2fa.tsx
View File

@@ -35,7 +35,7 @@ import DialogHeader from "../../components/dialog/dialog-header";
import { Button } from "../../components/ui/button";
import { IconButton } from "../../components/ui/icon-button";
import Input from "../../components/ui/input";
import { PressableButton } from "../../components/ui/pressable";
import { Pressable } from "../../components/ui/pressable";
import Seperator from "../../components/ui/seperator";
import { SvgView } from "../../components/ui/svg";
import Heading from "../../components/ui/typography/heading";
@@ -111,12 +111,12 @@ export const MFAMethodsPickerStep = ({ recovery, onSuccess }: MFAStepProps) => {
/>
<Seperator />
{getMethods().map((item) => (
<PressableButton
<Pressable
key={item.title}
onPress={() => {
onSuccess && onSuccess(item);
}}
customStyle={{
style={{
paddingHorizontal: 12,
paddingVertical: 12,
marginTop: 0,
@@ -128,8 +128,8 @@ export const MFAMethodsPickerStep = ({ recovery, onSuccess }: MFAStepProps) => {
>
{item.icon && (
<IconButton
type="grayBg"
customStyle={{
type="secondary"
style={{
width: 50,
height: 50,
marginRight: 10
@@ -149,7 +149,7 @@ export const MFAMethodsPickerStep = ({ recovery, onSuccess }: MFAStepProps) => {
<Heading size={SIZE.md}>{item.title}</Heading>
<Paragraph size={SIZE.sm}>{item.body}</Paragraph>
</View>
</PressableButton>
</Pressable>
))}
</>
);
@@ -377,7 +377,7 @@ export const MFASetup = ({
<Button
title="Select a different 2FA method"
type="gray"
type="plain"
height={25}
onPress={() => {
setStep &&
@@ -617,7 +617,7 @@ const MFASuccess = ({ recovery }: MFAStepProps) => {
{!recovery ? (
<Button
title="Setup secondary 2FA method"
type="gray"
type="plain"
height={25}
onPress={() => {
MFASheet.present(true);

13
apps/mobile/app/screens/settings/app-lock.js
View File

@@ -22,7 +22,7 @@ import React from "react";
import { Platform, ScrollView, View } from "react-native";
import Animated from "react-native-reanimated";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";
import { PressableButton } from "../../components/ui/pressable";
import { Pressable } from "../../components/ui/pressable";
import Seperator from "../../components/ui/seperator";
import Heading from "../../components/ui/typography/heading";
import Paragraph from "../../components/ui/typography/paragraph";
@@ -114,9 +114,9 @@ const AppLock = () => {
}}
>
{modes.map((item) => (
<PressableButton
<Pressable
key={item.title}
type={appLockMode === item.value ? "grayBg" : "transparent"}
type={appLockMode === item.value ? "secondary" : "transparent"}
onPress={async () => {
if (
!(await BiometicService.isBiometryAvailable()) &&
@@ -154,7 +154,7 @@ const AppLock = () => {
SettingsService.set({ appLockMode: item.value });
}}
customStyle={{
style={{
justifyContent: "flex-start",
alignItems: "flex-start",
paddingHorizontal: 12,
@@ -167,9 +167,6 @@ const AppLock = () => {
? item.activeColor
: colors.secondary.background
}}
style={{
marginBottom: 10
}}
>
<Heading
color={
@@ -193,7 +190,7 @@ const AppLock = () => {
>
{item.desc}
</Paragraph>
</PressableButton>
</Pressable>
))}
</ScrollView>
</>

8
apps/mobile/app/screens/settings/appearance.js
View File

@@ -20,7 +20,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
import React from "react";
import { View } from "react-native";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";
import { PressableButton } from "../../components/ui/pressable";
import { Pressable } from "../../components/ui/pressable";
import { DDS } from "../../services/device-detection";
import PremiumService from "../../services/premium";
import SettingsService from "../../services/settings";
@@ -61,7 +61,7 @@ export const AccentColorPicker = () => {
"#FF1744",
"#B71C1C"
].map((item) => (
<PressableButton
<Pressable
key={item}
customColor={
colors.primary.accent === item
@@ -82,7 +82,7 @@ export const AccentColorPicker = () => {
});
});
}}
customStyle={{
style={{
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
@@ -100,7 +100,7 @@ export const AccentColorPicker = () => {
name="check"
/>
) : null}
</PressableButton>
</Pressable>
))}
<View style={{ width: 50 }} />
</View>

10
apps/mobile/app/screens/settings/debug.tsx
View File

@@ -241,7 +241,7 @@ export default function DebugLogs() {
<Paragraph>{currentLog.key}</Paragraph>
<IconButton
customStyle={{
style={{
width: 30,
height: 30,
marginHorizontal: 5
@@ -259,7 +259,7 @@ export default function DebugLogs() {
/>
<IconButton
customStyle={{
style={{
width: 30,
height: 30
}}
@@ -284,7 +284,7 @@ export default function DebugLogs() {
<IconButton
onPress={copyLogs}
size={20}
customStyle={{
style={{
width: 30,
height: 30,
marginRight: 5
@@ -294,7 +294,7 @@ export default function DebugLogs() {
/>
<IconButton
onPress={downloadLogs}
customStyle={{
style={{
width: 30,
height: 30,
marginRight: 5
@@ -306,7 +306,7 @@ export default function DebugLogs() {
<IconButton
onPress={clearLogs}
customStyle={{
style={{
width: 30,
height: 30,
marginRight: 5

4
apps/mobile/app/screens/settings/editor/configure-toolbar.tsx
View File

@@ -91,7 +91,7 @@ export const ConfigureToolbar = () => {
}
].map((item) => (
<Button
type={preset === item.id ? "accent" : "grayAccent"}
type={preset === item.id ? "accent" : "secondaryAccented"}
style={{
borderRadius: 100,
height: 35,
@@ -129,7 +129,7 @@ export const ConfigureToolbar = () => {
>
<Button
title="Create a group"
type="grayAccent"
type="secondaryAccented"
icon="plus"
style={{
width: "100%"

10
apps/mobile/app/screens/settings/editor/tool-sheet.tsx
View File

@@ -20,7 +20,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
import { ToolId } from "@notesnook/editor/dist/toolbar";
import React, { RefObject } from "react";
import { View } from "react-native";
import { PressableButton } from "../../../components/ui/pressable";
import { Pressable } from "../../../components/ui/pressable";
import { SvgView } from "../../../components/ui/svg";
import Paragraph from "../../../components/ui/typography/paragraph";
import { presentSheet } from "../../../services/event-manager";
@@ -53,9 +53,9 @@ export default function ToolSheet({
: null;
if (item === "none") return;
return (
<PressableButton
<Pressable
key={item}
type="grayBg"
type="secondary"
onPress={() => {
const _data = useDragState.getState().data.slice();
if (group.groupIndex !== undefined) {
@@ -67,7 +67,7 @@ export default function ToolSheet({
}
useDragState.getState().setData(_data);
}}
customStyle={{
style={{
marginBottom: 10,
width: "100%",
height: 50,
@@ -98,7 +98,7 @@ export default function ToolSheet({
{tool?.title}
</Paragraph>
</View>
</PressableButton>
</Pressable>
);
},
[

8
apps/mobile/app/screens/settings/licenses.tsx
View File

@@ -19,7 +19,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
import React from "react";
import { LICENSES } from "./license-data";
import { FlatList, Linking, Platform } from "react-native";
import { PressableButton } from "../../components/ui/pressable";
import { Pressable } from "../../components/ui/pressable";
import Heading from "../../components/ui/typography/heading";
import { SIZE } from "../../utils/size";
import { useThemeColors } from "@notesnook/theme";
@@ -41,9 +41,9 @@ export const Licenses = () => {
const renderItem = React.useCallback(
({ item }: { item: LicenseEntry }) => (
<PressableButton
<Pressable
key={item.name}
customStyle={{
style={{
alignItems: "flex-start",
justifyContent: "flex-start",
alignSelf: "flex-start",
@@ -61,7 +61,7 @@ export const Licenses = () => {
<Paragraph>
{item.licenseType} | {item.author?.split("<")[0]}
</Paragraph>
</PressableButton>
</Pressable>
),
[colors.secondary.background]
);

21
apps/mobile/app/screens/settings/picker/index.tsx
View File

@@ -21,7 +21,7 @@ import React, { useRef, useState } from "react";
import { TouchableHighlight, View } from "react-native";
import Menu, { MenuItem } from "react-native-reanimated-material-menu";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";
import { PressableButton } from "../../../components/ui/pressable";
import { Pressable } from "../../../components/ui/pressable";
import Paragraph from "../../../components/ui/typography/paragraph";
import PremiumService from "../../../services/premium";
import { useThemeColors } from "@notesnook/theme";
@@ -29,6 +29,7 @@ import { SIZE } from "../../../utils/size";
import { sleep } from "../../../utils/time";
import { verifyUser } from "../functions";
import { Dialog } from "../../../components/dialog";
import { getColorLinearShade } from "../../../utils/colors";
interface PickerOptions<T> {
getValue: () => T;
@@ -55,7 +56,7 @@ export function SettingsPicker<T>({
requiresVerification = () => false,
onVerify
}: PickerOptions<T>) {
const { colors } = useThemeColors("contextMenu");
const { colors, isDark } = useThemeColors("contextMenu");
const menuRef = useRef<any>();
const [width, setWidth] = useState(0);
const [currentValue, setCurrentValue] = useState(getValue());
@@ -99,19 +100,25 @@ export function SettingsPicker<T>({
backgroundColor: colors.primary.background,
width: width,
marginTop: 60,
overflow: "hidden"
overflow: "hidden",
borderWidth: 0.7,
borderColor: getColorLinearShade(
colors.primary.background,
0.07,
isDark
)
}}
onRequestClose={() => {
menuRef.current?.hide();
}}
anchor={
<PressableButton
<Pressable
onPress={async () => {
if (onVerify && !(await onVerify())) return;
menuRef.current?.show();
}}
type="grayBg"
customStyle={{
type="secondary"
style={{
flexDirection: "row",
alignItems: "center",
marginTop: 10,
@@ -122,7 +129,7 @@ export function SettingsPicker<T>({
>
<Paragraph>{formatValue(currentValue)}</Paragraph>
<Icon color={colors.primary.icon} name="menu-down" size={SIZE.md} />
</PressableButton>
</Pressable>
}
>
<Dialog context="local" />

8
apps/mobile/app/screens/settings/section-item.tsx
View File

@@ -29,7 +29,7 @@ import Icon from "react-native-vector-icons/MaterialCommunityIcons";
import ToggleSwitch from "toggle-switch-react-native";
import { IconButton } from "../../components/ui/icon-button";
import Input from "../../components/ui/input";
import { PressableButton } from "../../components/ui/pressable";
import { Pressable } from "../../components/ui/pressable";
import Seperator from "../../components/ui/seperator";
import Paragraph from "../../components/ui/typography/paragraph";
import SettingsService from "../../services/settings";
@@ -92,9 +92,9 @@ const _SectionItem = ({ item }: { item: SettingSection }) => {
};
return isHidden ? null : (
<PressableButton
<Pressable
disabled={item.type === "component"}
customStyle={{
style={{
width: "100%",
alignItems: "center",
padding: 12,
@@ -330,7 +330,7 @@ const _SectionItem = ({ item }: { item: SettingSection }) => {
{loading ? (
<ActivityIndicator size={SIZE.xxl} color={colors.primary.accent} />
) : null}
</PressableButton>
</Pressable>
);
};
export const SectionItem = React.memo(_SectionItem, () => true);

50
apps/mobile/app/screens/settings/settings-data.tsx
View File

@@ -70,6 +70,8 @@ import { useDragState } from "./editor/state";
import { verifyUser, verifyUserWithApplock } from "./functions";
import { SettingSection } from "./types";
import { getTimeLeft } from "./user-section";
import ImagePicker from "react-native-image-crop-picker";
type User = any;
export const settingsGroups: SettingSection[] = [
@@ -132,6 +134,54 @@ export const settingsGroups: SettingSection[] = [
icon: "account-cog",
description: "Manage account",
sections: [
{
id: "change-profile-picture",
name: "Change profile picture",
description: "Change your profile picture",
icon: "account-outline",
modifer: () => {
const theme =
useThemeStore.getState().colorScheme === "dark"
? useThemeStore.getState().darkTheme
: useThemeStore.getState().lightTheme;
ImagePicker.openPicker({
compressImageMaxWidth: 512,
compressImageMaxHeight: 512,
compressImageQuality: 0.8,
avoidEmptySpaceAroundImage: true,
cropping: true,
cropperCircleOverlay: true,
mediaType: "photo",
forceJpg: true,
includeBase64: true,
writeTempFile: false,
cropperToolbarColor: theme.scopes.base.primary.background,
cropperToolbarTitle: "Edit profile picture",
cropperActiveWidgetColor: theme.scopes.base.primary.accent,
cropperToolbarWidgetColor: theme.scopes.base.primary.icon
}).then((image) => {
console.log(image);
});
}
},
{
id: "change-name",
name: "Change name",
description: "Change your name",
modifer: () => {
presentDialog({
title: "Change name",
paragraph: "Change your name",
positiveText: "Save",
input: true,
inputPlaceholder: "Enter new name",
defaultValue: "Ammar Ahmed",
positivePress(value) {
console.log(value);
}
});
}
},
{
id: "recovery-key",
name: "Save data recovery key",

10
apps/mobile/app/screens/settings/sound-picker.tsx
View File

@@ -25,7 +25,7 @@ import NotificationSounds, {
} from "react-native-notification-sounds";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";
import { IconButton } from "../../components/ui/icon-button";
import { PressableButton } from "../../components/ui/pressable";
import { Pressable } from "../../components/ui/pressable";
import Paragraph from "../../components/ui/typography/paragraph";
import Notifications from "../../services/notifications";
import SettingsService from "../../services/settings";
@@ -49,8 +49,8 @@ const SoundItem = ({
const { colors } = useThemeColors();
const isPlaying = playingSoundId === item.soundID;
return (
<PressableButton
customStyle={{
<Pressable
style={{
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
@@ -96,7 +96,7 @@ const SoundItem = ({
{item.soundID === "defaultSound" ? null : (
<IconButton
type={isPlaying ? "grayAccent" : "gray"}
type={isPlaying ? "secondaryAccented" : "plain"}
size={22}
name={isPlaying ? "pause" : "play"}
color={isPlaying ? colors.primary.accent : colors.primary.icon}
@@ -114,7 +114,7 @@ const SoundItem = ({
}}
/>
)}
</PressableButton>
</Pressable>
);
};

2
apps/mobile/app/screens/settings/subscription.js
View File

@@ -142,7 +142,7 @@ export const Subscription = () => {
}}
fontSize={SIZE.sm}
height={30}
type="grayAccent"
type="secondaryAccented"
/>
) : null}
</View>

35
apps/mobile/app/screens/settings/theme-selector.tsx
View File

@@ -53,7 +53,8 @@ import { SIZE } from "../../utils/size";
import { getElevationStyle } from "../../utils/elevation";
import { MenuItemsList } from "../../utils/menu-items";
import { IconButton } from "../../components/ui/icon-button";
import { PressableButton } from "../../components/ui/pressable";
import { Pressable } from "../../components/ui/pressable";
import { getColorLinearShade } from "../../utils/colors";
const THEME_SERVER_URL = "https://themes-api.notesnook.com";
//@ts-ignore
@@ -260,8 +261,8 @@ function ThemeSelector() {
{darkTheme.id === item.id || lightTheme.id === item.id ? (
<IconButton
name="check"
type="gray"
customStyle={{
type="plain"
style={{
borderRadius: 100,
paddingHorizontal: 6,
alignSelf: "flex-end",
@@ -275,7 +276,7 @@ function ThemeSelector() {
<Button
title={item.colorScheme === "dark" ? "Dark" : "Light"}
type="grayAccent"
type="secondaryAccented"
height={25}
buttonType={{
color: item.colorScheme === "dark" ? "black" : "#f0f0f060",
@@ -284,7 +285,11 @@ function ThemeSelector() {
style={{
borderRadius: 100,
paddingHorizontal: 12,
alignSelf: "flex-end"
alignSelf: "flex-end",
borderColor:
item.colorScheme === "dark"
? getColorLinearShade("#000000", 0.1, true)
: getColorLinearShade("#f0f0f0", 0.1, true)
}}
fontSize={SIZE.xxs}
/>
@@ -361,7 +366,9 @@ function ThemeSelector() {
<Button
height={30}
style={{ borderRadius: 100, minWidth: 60 }}
type={colorScheme === "" || !colorScheme ? "accent" : "grayBg"}
type={
colorScheme === "" || !colorScheme ? "accent" : "secondary"
}
title="All"
fontSize={SIZE.xs}
onPress={() => {
@@ -371,7 +378,7 @@ function ThemeSelector() {
<Button
style={{ borderRadius: 100, minWidth: 60 }}
height={30}
type={colorScheme === "dark" ? "accent" : "grayBg"}
type={colorScheme === "dark" ? "accent" : "secondary"}
title="Dark"
fontSize={SIZE.xs}
onPress={() => {
@@ -382,7 +389,7 @@ function ThemeSelector() {
style={{ borderRadius: 100, minWidth: 60 }}
height={30}
fontSize={SIZE.xs}
type={colorScheme === "light" ? "accent" : "grayBg"}
type={colorScheme === "light" ? "accent" : "secondary"}
title="Light"
onPress={() => {
setColorScheme("light");
@@ -394,7 +401,7 @@ function ThemeSelector() {
title="Load from file"
style={{ borderRadius: 100, minWidth: 60 }}
height={30}
type={"grayAccent"}
type={"secondaryAccented"}
icon="folder"
fontSize={SIZE.xs}
onPress={() => {
@@ -741,10 +748,10 @@ const ThemeSetter = ({
</View>
{darkTheme.id === theme.id || lightTheme.id === theme.id ? (
<PressableButton
<Pressable
onPress={applyTheme}
type="grayAccent"
customStyle={{
type="secondaryAccented"
style={{
paddingVertical: 12
}}
>
@@ -754,7 +761,7 @@ const ThemeSetter = ({
: "Applied as light theme"}
</Heading>
<Paragraph size={SIZE.xs}>(Tap to apply again)</Paragraph>
</PressableButton>
</Pressable>
) : (
<Button
style={{
@@ -767,7 +774,7 @@ const ThemeSetter = ({
? "Set as dark theme"
: "Set as light theme"
}
type="grayAccent"
type="secondaryAccented"
/>
)}
</View>

183
apps/mobile/app/screens/settings/user-section.js
View File

@@ -19,16 +19,21 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
import dayjs from "dayjs";
import React from "react";
import { View } from "react-native";
import { Image, View } from "react-native";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";
import { TimeSince } from "../../components/ui/time-since";
import Heading from "../../components/ui/typography/heading";
import Paragraph from "../../components/ui/typography/paragraph";
import { useThemeColors } from "@notesnook/theme";
import { useUserStore } from "../../stores/use-user-store";
import { SyncStatus, useUserStore } from "../../stores/use-user-store";
import { SUBSCRIPTION_STATUS_STRINGS } from "../../utils/constants";
import { SIZE } from "../../utils/size";
import { SectionItem } from "./section-item";
import { useNetInfo } from "@react-native-community/netinfo";
import { IconButton } from "../../components/ui/icon-button";
const PROFILE_PIC_URL = `https://picsum.photos/id/177/367/267`;
export const getTimeLeft = (t2) => {
let daysRemaining = dayjs(t2).diff(dayjs(), "days");
return {
@@ -37,10 +42,41 @@ export const getTimeLeft = (t2) => {
};
};
const ProfilePicPlaceholder = () => {
const { colors } = useThemeColors();
return (
<View
style={{
alignItems: "center"
}}
>
<View
style={{
backgroundColor: colors.primary.shade,
borderRadius: 100,
width: 50,
height: 50,
alignItems: "center",
justifyContent: "center"
}}
>
<Icon
size={SIZE.xl}
color={colors.primary.accent}
name="account-outline"
/>
</View>
</View>
);
};
const SettingsUserSection = ({ item }) => {
const { colors } = useThemeColors();
const user = useUserStore((state) => state.user);
const lastSynced = useUserStore((state) => state.lastSynced);
const lastSyncStatus = useUserStore((state) => state.lastSyncStatus);
const { isInternetReachable } = useNetInfo();
const isOffline = !isInternetReachable;
return (
<>
@@ -49,86 +85,111 @@ const SettingsUserSection = ({ item }) => {
<View
style={{
paddingHorizontal: 12,
marginTop: 15
paddingTop: 50,
borderBottomWidth: 1,
paddingBottom: 20,
borderColor: colors.secondary.background
}}
>
<View
style={{
alignSelf: "center",
width: "100%",
paddingVertical: 12,
backgroundColor: colors.primary.background,
borderRadius: 5
flexDirection: "row",
justifyContent: "space-between",
width: "100%"
}}
>
{/* <ProfilePicPlaceholder /> */}
<View
style={{
justifyContent: "space-between",
flexDirection: "row",
paddingBottom: 4
flexDirection: "column",
alignItems: "center",
width: "100%"
}}
>
<View
style={{
flexDirection: "row",
width: "100%",
justifyContent: "space-between"
borderWidth: 2,
borderRadius: 100,
marginBottom: 10,
borderColor: colors.primary.accent
}}
>
<View
style={{
flexDirection: "row"
<Image
source={{
uri: PROFILE_PIC_URL
}}
style={{
width: 100,
height: 100,
borderRadius: 100,
backgroundColor: "red"
}}
/>
</View>
<View
style={{
alignItems: "center"
}}
>
<Heading color={colors.primary.accent} size={SIZE.sm}>
{SUBSCRIPTION_STATUS_STRINGS[
user.subscription?.type
]?.toUpperCase() || "Basic"}
</Heading>
<Paragraph color={colors.primary.heading} size={SIZE.lg}>
Ammar Ahmed
</Paragraph>
<Paragraph color={colors.primary.heading} size={SIZE.xs}>
{user?.email}
</Paragraph>
<Paragraph
style={{
flexWrap: "wrap"
}}
size={SIZE.xs}
color={colors.secondary.heading}
>
<View
style={{
alignItems: "center"
}}
>
<View
style={{
backgroundColor: colors.primary.shade,
borderRadius: 100,
width: 50,
height: 50,
alignItems: "center",
justifyContent: "center"
}}
>
<Icon
size={SIZE.xl}
color={colors.primary.accent}
name="account-outline"
/>
</View>
</View>
<View
style={{
marginLeft: 10,
flexGrow: 1
}}
>
<Heading color={colors.primary.accent} size={SIZE.xs}>
{SUBSCRIPTION_STATUS_STRINGS[
user.subscription?.type
]?.toUpperCase() || "Basic"}
</Heading>
<Paragraph color={colors.primary.heading} size={SIZE.sm}>
{user?.email}
</Paragraph>
<Paragraph color={colors.secondary.paragraph} size={SIZE.xs}>
Last synced{" "}
{!user ? (
"Not logged in"
) : lastSynced && lastSynced !== "Never" ? (
<>
{lastSyncStatus === SyncStatus.Failed
? "Sync failed"
: "Synced"}{" "}
<TimeSince
style={{ fontSize: SIZE.xs, color: colors.secondary.paragraph }}
style={{
fontSize: SIZE.xs,
color: colors.secondary.paragraph
}}
time={lastSynced}
/>
</Paragraph>
</View>
</View>
{isOffline ? " (offline)" : ""}
</>
) : (
"never"
)}{" "}
<Icon
name="checkbox-blank-circle"
size={11}
allowFontScaling
color={
!user || lastSyncStatus === SyncStatus.Failed
? colors.error.icon
: isOffline
? colors.static.orange
: colors.success.icon
}
/>
</Paragraph>
</View>
</View>
<IconButton name="pencil" />
</View>
</View>

2
apps/mobile/app/services/backup.js
View File

@@ -136,7 +136,7 @@ async function presentBackupCompleteSheet(backupFilePath) {
});
},
actionText: "Never ask again",
type: "grayBg"
type: "secondary"
}
]
});

19
apps/mobile/app/utils/colors.js
View File

@@ -29,6 +29,25 @@ export const ColorValues = {
gray: "#9E9E9E"
};
export function getContainerBorder(
color,
borderWidth = 0.8,
colorDepth = 0.05
) {
return {
borderWidth: borderWidth,
borderColor: getColorLinearShade(
color,
colorDepth,
useThemeStore.getState().colorScheme === "dark"
)
};
}
export function getColorLinearShade(color, alpha, isDark) {
return RGB_Linear_Shade(!isDark ? alpha * -1 : alpha, hexToRGBA(color));
}
export function updateStatusBarColor() {
StatusBar.setBarStyle(
useThemeStore.getState().colorScheme === "dark"

3
apps/mobile/native/package.json
View File

@@ -65,7 +65,8 @@
"react-native-zip-archive": "6.0.9",
"react-native-quick-sqlite": "^8.0.6",
"react-native-theme-switch-animation": "^0.6.0",
"@ammarahmed/react-native-background-fetch": "^4.2.2"
"@ammarahmed/react-native-background-fetch": "^4.2.2",
"react-native-image-crop-picker": "^0.40.2"
},
"devDependencies": {
"@babel/core": "^7.20.0",

16
apps/mobile/package-lock.json generated
View File

@@ -27313,6 +27313,7 @@
"react-native-gzip": "1.1.0",
"react-native-html-to-pdf-lite": "^0.9.1",
"react-native-iap": "12.11.0",
"react-native-image-crop-picker": "^0.40.2",
"react-native-image-picker": "4.1.2",
"react-native-in-app-review": "4.3.3",
"react-native-keychain": "4.0.5",
@@ -43768,6 +43769,14 @@
"react-native": ">=0.65.1"
}
},
"node_modules/react-native-image-crop-picker": {
"version": "0.40.2",
"resolved": "https://registry.npmjs.org/react-native-image-crop-picker/-/react-native-image-crop-picker-0.40.2.tgz",
"integrity": "sha512-u9iceozX8985vtZV5ozLMfNuCDjtm00GivExSxKwZmwv2wZYyv30VJkKhVJffVYsujvIzMfSCaWJPBsb5nSfZg==",
"peerDependencies": {
"react-native": ">=0.40.0"
}
},
"node_modules/react-native-image-pan-zoom": {
"version": "2.1.12",
"license": "ISC",
@@ -78874,6 +78883,7 @@
"react-native-gzip": "1.1.0",
"react-native-html-to-pdf-lite": "^0.9.1",
"react-native-iap": "12.11.0",
"react-native-image-crop-picker": "^0.40.2",
"react-native-image-picker": "4.1.2",
"react-native-in-app-review": "4.3.3",
"react-native-keychain": "4.0.5",
@@ -86878,6 +86888,12 @@
"@expo/config-plugins": "^6.0.1"
}
},
"react-native-image-crop-picker": {
"version": "0.40.2",
"resolved": "https://registry.npmjs.org/react-native-image-crop-picker/-/react-native-image-crop-picker-0.40.2.tgz",
"integrity": "sha512-u9iceozX8985vtZV5ozLMfNuCDjtm00GivExSxKwZmwv2wZYyv30VJkKhVJffVYsujvIzMfSCaWJPBsb5nSfZg==",
"requires": {}
},
"react-native-image-pan-zoom": {
"version": "2.1.12",
"requires": {}

4
apps/mobile/share/share.js
View File

@@ -651,7 +651,7 @@ const ShareView = () => {
onPress={() => {
useShareStore.getState().setAppendNote(null);
}}
type={!appendNote ? "transparent" : "gray"}
type={!appendNote ? "transparent" : "plain"}
title="New note"
style={{
paddingHorizontal: 12,
@@ -669,7 +669,7 @@ const ShareView = () => {
onPress={() => {
setSearchMode("appendNote");
}}
type={appendNote ? "transparent" : "gray"}
type={appendNote ? "transparent" : "plain"}
title={`Append to a note`}
style={{
paddingHorizontal: 12,