✨ feat: add user accent customization to the app

Stringsaeed · Feb 24, 2024 · fe8389d · fe8389d
1 parent 1065687
commit fe8389d
Show file tree

Hide file tree

Showing 13 changed files with 83 additions and 35 deletions.
diff --git 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
@@ -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 (
     <View
       justifyContent="center"
@@ -19,7 +22,7 @@ export default function AuthLayout({ children, heading }: AuthLayoutProps) {
       <LinearGradient
         flex={1}
         style={StyleSheet.absoluteFill}
-        colors={["$background", "$accent"]}
+        colors={["$background", `$${accent}`]}
         start={[0, 0.5]}
         end={[1.25, 0.5]}
       />

diff --git 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<BottomSheetProps> {
   title?: string;
+  subtitle?: string;
   children: React.ReactNode;
 }
 
 // component
 const BottomSheetComponent = (
-  { children, ...props }: Props,
+  { children, subtitle, title, ...props }: Props,
   ref: ForwardedRef<BottomSheetModal>
 ) => {
+  const { accent } = useUserAccent();
   const { bottom, top } = useSafeAreaInsets();
   const theme = useTheme();
 
@@ -51,13 +55,19 @@ const BottomSheetComponent = (
         <Stack
           bg="$background"
           p="$4"
-          shadowColor="$accent"
+          shadowColor={`$${accent}`}
           shadowOffset={{ height: -3, width: 0 }}
           shadowOpacity={0.2}
           shadowRadius={5}
           elevationAndroid={4}
           borderRadius={20}
         >
+          {!!title && (
+            <Stack mb="$4">
+              <SizableText size="$6">{title}</SizableText>
+              {!!subtitle && <Paragraph color="$gray9">{subtitle}</Paragraph>}
+            </Stack>
+          )}
           {children}
         </Stack>
       </BottomSheetView>

diff --git 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 (
     <View
-      borderBottomColor="$accent"
+      borderBottomColor={`$${accent}`}
       borderBottomWidth={StyleSheet.hairlineWidth}
       alignSelf="stretch"
     />

diff --git a/src/components/note-toolbox/index.tsx b/src/components/note-toolbox/index.tsx
@@ -5,17 +5,21 @@ 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";
 
 interface Props {
   onOpen?: () => void;
 }
 export default function NoteToolbox({ onOpen }: Props) {
+  const { accent } = useUserAccent();
   const ref = useRef<BottomSheetModal>(null);
   const rephraseWithAIFlag = useFeatureFlag("rephrase_with_ai");
-  rephraseWithAIFlag.enabled = true;
   const fixGrammarMutation = useFixGrammarMutation();
   const rephraseSentenceMutation = useRephraseSentenceMutation();
   const { setFieldValue, values } = useFormikContext<NoteFormValues>();
@@ -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 && (
         <BottomSheet ref={ref}>
-          <Button size="$6" onPress={handleFixGrammar} bg="$accent" elevate>
+          <Button
+            size="$6"
+            onPress={handleFixGrammar}
+            bg={`$${accent}`}
+            elevate
+          >
             <Button.Icon scaleIcon={1.5}>
               {fixGrammarMutation.isPending ? (
                 <Spinner color="$background" />
@@ -84,7 +93,7 @@ export default function NoteToolbox({ onOpen }: Props) {
           <Button
             size="$6"
             onPress={handleRephraseSentence}
-            bg="$accent"
+            bg={`$${accent}`}
             elevate
           >
             <Button.Icon scaleIcon={1.5}>

diff --git a/src/components/notes-list/note-list-item/index.tsx b/src/components/notes-list/note-list-item/index.tsx
@@ -12,6 +12,7 @@ import { Gesture } from "react-native-gesture-handler";
 import { ListItem, useTheme } from "tamagui";
 
 import { useNotesList } from "contexts";
+import { useUserAccent } from "hooks";
 import { Note } from "types";
 import { cipherTitle, getNoteTitle } from "utils";
 
@@ -31,6 +32,7 @@ export default function NoteListItemView({
   onPress,
   item,
 }: NoteListItemProps) {
+  const { accent } = useUserAccent();
   const { multiSelectMode, selectedNotes, onNoteSelect } = useNotesList();
   const theme = useTheme();
   const foregroundColor = theme.background.get();
@@ -84,7 +86,7 @@ export default function NoteListItemView({
   const listItemTitle = (
     <ListItem.Text
       fontWeight={item.title ? "500" : "normal"}
-      color={item.title ? "$accent" : "$gray7"}
+      color={item.title ? `$${accent}` : "$gray7"}
       fontSize="$5"
       numberOfLines={1}
     >
@@ -94,7 +96,7 @@ export default function NoteListItemView({
 
   const listItemIcon = multiSelectMode ? (
     selectedNotes.includes(item.id) ? (
-      <CheckCircle2 size={24} color="$accent" />
+      <CheckCircle2 size={24} color={`$${accent}`} />
     ) : (
       <Circle size={24} color="$gray6" />
     )

diff --git a/src/components/notes-list/note-list-multiselect-menu/index.tsx b/src/components/notes-list/note-list-multiselect-menu/index.tsx
@@ -7,7 +7,6 @@ import {
   CircleDotDashed,
 } from "@tamagui/lucide-icons";
 import React from "react";
-import { Alert } from "react-native";
 import Animated, {
   Easing,
   FadeIn,
@@ -26,24 +25,21 @@ import {
 } from "tamagui";
 
 import { useNotesList } from "contexts";
-import { useHapticCallback } from "hooks";
+import { useHapticCallback, useUserAccent } from "hooks";
 
 export default function NoteListMultiselectMenu() {
+  const { accent } = useUserAccent();
   const { bottom } = useSafeAreaInsets();
   const {
     toggleMultiSelectMode,
     multiSelectMode,
     selectedNotes,
     onNoteSelect,
+    archiveNote,
     deleteNote,
     notes,
   } = useNotesList();
 
-  // TODO: Implement this
-  const notImplementedFn = () => {
-    Alert.alert("Not implemented");
-  };
-
   const onTrash = useHapticCallback(
     () => {
       selectedNotes
@@ -61,6 +57,23 @@ export default function NoteListMultiselectMenu() {
     { feedbackType: "success" }
   );
 
+  const onArchive = useHapticCallback(
+    () => {
+      selectedNotes
+        .map((selectedNoteId) =>
+          notes.find((note) => note.id === selectedNoteId)
+        )
+        .filter((note) => note)
+        .forEach((note) => {
+          if (!note) {
+            return;
+          }
+          archiveNote?.(note.id);
+        });
+    },
+    { feedbackType: "success" }
+  );
+
   const onClose = useHapticCallback(
     () => {
       toggleMultiSelectMode?.();
@@ -85,7 +98,7 @@ export default function NoteListMultiselectMenu() {
       case noOfSelectedNotes === noOfNotes:
         return (
           <Animated.View entering={FadeIn} exiting={FadeOut}>
-            <CircleDot {...shared} color="$accent" />
+            <CircleDot {...shared} color={`$${accent}`} />
           </Animated.View>
         );
       default:
@@ -147,7 +160,7 @@ export default function NoteListMultiselectMenu() {
         <Spacer flex={1} />
         <XGroup>
           <XGroup.Item>
-            <Button onPress={notImplementedFn} icon={Archive} circular />
+            <Button onPress={onArchive} icon={Archive} circular />
           </XGroup.Item>
           <XGroup.Item>
             <Button onPress={onTrash} icon={Trash2} circular />

diff --git a/src/components/update-account-sheet/index.tsx b/src/components/update-account-sheet/index.tsx
@@ -7,6 +7,7 @@ import { z } from "zod";
 import BottomSheet from "components/bottom-sheet";
 import BottomSheetInput from "components/bottom-sheet-input";
 import FieldError from "components/field-error";
+import { useUserAccent } from "hooks";
 
 // import { Auth } from "services";
 
@@ -30,6 +31,7 @@ function UpdateAccountSheetComponent(
   { type }: Props,
   sheetRef?: ForwardedRef<BottomSheetModal>
 ) {
+  const { accent } = useUserAccent();
   const { handleSubmit, control } = useForm<UpdateAccountSchema>({
     defaultValues: { [type]: "" },
   });
@@ -95,7 +97,7 @@ function UpdateAccountSheetComponent(
           </>
         ) : null}
         <Form.Trigger asChild>
-          <Button bg="$accent">Update</Button>
+          <Button bg={`$${accent}`}>Update</Button>
         </Form.Trigger>
       </Form>
     </BottomSheet>

diff --git 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
@@ -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
@@ -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 (
     <AuthLayout>
@@ -40,7 +41,7 @@ export default function LoginScreen() {
       <Spacer />
       <Button
         width="100%"
-        bg="$accent"
+        bg={`$${accent}`}
         size="$5"
         color="$background"
         borderRadius="$12"

diff --git a/src/screens/User/Profile/ProfileScreen.tsx b/src/screens/User/Profile/ProfileScreen.tsx
@@ -48,16 +48,6 @@ export default function Profile() {
       <YGroup bordered>
         <ResetDatabaseListItem />
       </YGroup>
-      {/* <Button
-        width="100%"
-        bg="$accent"
-        size="$5"
-        color="$background"
-        borderRadius="$12"
-        onPress={() => signOutMutation.mutate()}
-      >
-        Sign out
-      </Button> */}
     </ScreenContainer>
   );
 }
diff --git 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";