diff --git a/src/app/_layout.tsx b/src/app/_layout.tsx index f1d7e62..b769668 100644 --- a/src/app/_layout.tsx +++ b/src/app/_layout.tsx @@ -37,6 +37,7 @@ export default function AppContainer() { colors: { ...baseTheme.colors, background: selectiveTheme.background.val, + primary: selectiveTheme.accent.val, text: selectiveTheme.color.val, }, }; diff --git a/src/components/auth-layout/index.web.tsx b/src/components/auth-layout/index.web.tsx index 4c2b483..36b4de7 100644 --- a/src/components/auth-layout/index.web.tsx +++ b/src/components/auth-layout/index.web.tsx @@ -4,9 +4,12 @@ import React from "react"; import { StyleSheet } from "react-native"; import { Card, Heading, View } from "tamagui"; +import { useUserAccent } from "hooks"; + import { AuthLayoutProps } from "./types"; export default function AuthLayout({ children, heading }: AuthLayoutProps) { + const { accent } = useUserAccent(); return ( diff --git a/src/components/bottom-sheet/index.tsx b/src/components/bottom-sheet/index.tsx index 31ac163..a73acef 100644 --- a/src/components/bottom-sheet/index.tsx +++ b/src/components/bottom-sheet/index.tsx @@ -6,21 +6,25 @@ import { } from "@gorhom/bottom-sheet"; import React, { ForwardedRef, useCallback } from "react"; import { useSafeAreaInsets } from "react-native-safe-area-context"; -import { Stack, useTheme } from "tamagui"; +import { Paragraph, SizableText, Stack, useTheme } from "tamagui"; + +import { useUserAccent } from "hooks"; import BlurBackdrop from "./blur-backdrop"; import styles from "./styles"; interface Props extends Partial { title?: string; + subtitle?: string; children: React.ReactNode; } // component const BottomSheetComponent = ( - { children, ...props }: Props, + { children, subtitle, title, ...props }: Props, ref: ForwardedRef ) => { + const { accent } = useUserAccent(); const { bottom, top } = useSafeAreaInsets(); const theme = useTheme(); @@ -51,13 +55,19 @@ const BottomSheetComponent = ( + {!!title && ( + + {title} + {!!subtitle && {subtitle}} + + )} {children} diff --git a/src/components/divider/index.tsx b/src/components/divider/index.tsx index 3291f5c..274d950 100644 --- a/src/components/divider/index.tsx +++ b/src/components/divider/index.tsx @@ -2,10 +2,13 @@ import React from "react"; import { StyleSheet } from "react-native"; import { View } from "tamagui"; +import { useUserAccent } from "hooks"; + export default function Divider() { + const { accent } = useUserAccent(); return ( diff --git a/src/components/note-toolbox/index.tsx b/src/components/note-toolbox/index.tsx index 2d086fa..63206a2 100644 --- a/src/components/note-toolbox/index.tsx +++ b/src/components/note-toolbox/index.tsx @@ -5,7 +5,11 @@ import React, { ComponentProps, Fragment, useRef } from "react"; import { Button, Spacer, Spinner } from "tamagui"; import BottomSheet from "components/bottom-sheet"; -import { useFixGrammarMutation, useRephraseSentenceMutation } from "hooks"; +import { + useFixGrammarMutation, + useRephraseSentenceMutation, + useUserAccent, +} from "hooks"; import { NoteFormValues } from "hooks/use-note-form"; import { useFeatureFlag } from "services"; @@ -13,9 +17,9 @@ interface Props { onOpen?: () => void; } export default function NoteToolbox({ onOpen }: Props) { + const { accent } = useUserAccent(); const ref = useRef(null); const rephraseWithAIFlag = useFeatureFlag("rephrase_with_ai"); - rephraseWithAIFlag.enabled = true; const fixGrammarMutation = useFixGrammarMutation(); const rephraseSentenceMutation = useRephraseSentenceMutation(); const { setFieldValue, values } = useFormikContext(); @@ -50,7 +54,7 @@ export default function NoteToolbox({ onOpen }: Props) { bottom={60} right={20} borderRadius="$12" - bg="$accent" + bg={`$${accent}`} scaleIcon={2} icon={ (({ color, size }: { color: string; size: number }) => @@ -68,7 +72,12 @@ export default function NoteToolbox({ onOpen }: Props) { /> {!!rephraseWithAIFlag.enabled && ( - + diff --git a/src/hooks/index.ts b/src/hooks/index.ts index aaf1370..a1867ee 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -20,3 +20,4 @@ export { default as useSearchableNotes } from "./use-searchable-notes"; export { default as useIsLocalAuthenticationEligible } from "./use-is-local-authentication-eligible"; export { default as useObserveNotes } from "./use-observe-notes"; export { default as useLoginForm } from "./use-login-form"; +export { default as useUserAccent } from "./use-user-accent"; diff --git a/src/hooks/use-user-accent/index.ts b/src/hooks/use-user-accent/index.ts index ee72823..f1d5500 100644 --- a/src/hooks/use-user-accent/index.ts +++ b/src/hooks/use-user-accent/index.ts @@ -1,12 +1,13 @@ import { useMMKVString } from "react-native-mmkv"; import { storage } from "services"; +import { UserAccentValue } from "types"; /** * @internal */ export default function useUserAccent() { - const [userAccent = "pink", setUserAccent] = useMMKVString( + const [userAccent = "pink10", setUserAccent] = useMMKVString( "user.accent", storage ); @@ -18,5 +19,8 @@ export default function useUserAccent() { return { accent: userAccent, onChange, + } as { + accent: UserAccentValue; + onChange: (value: UserAccentValue) => void; }; } diff --git a/src/screens/Authentication/Login/LoginScreen.tsx b/src/screens/Authentication/Login/LoginScreen.tsx index 9ec4ae1..5247a01 100644 --- a/src/screens/Authentication/Login/LoginScreen.tsx +++ b/src/screens/Authentication/Login/LoginScreen.tsx @@ -4,11 +4,12 @@ import { useTranslation } from "react-i18next"; import { Heading, Text, Button, View, Input } from "tamagui"; import { Spacer, AuthLayout } from "components"; -import { useLoginForm } from "hooks"; +import { useLoginForm, useUserAccent } from "hooks"; export default function LoginScreen() { const { t } = useTranslation("auth"); const { isSubmitDisabled, onSubmit, control } = useLoginForm(); + const { accent } = useUserAccent(); return ( @@ -40,7 +41,7 @@ export default function LoginScreen() { */} ); } diff --git a/src/types/theme.ts b/src/types/theme.ts index f1d7106..3651e34 100644 --- a/src/types/theme.ts +++ b/src/types/theme.ts @@ -1 +1,10 @@ export type UserThemeValue = "light" | "dark" | "system"; +export type UserAccentValue = + | "blue10" + | "gray10" + | "green10" + | "orange10" + | "pink10" + | "purple10" + | "red10" + | "yellow10";