From 2ae0789bea40f1c250fdfd029cbe0fa7ae6db969 Mon Sep 17 00:00:00 2001 From: mljoshi Date: Sat, 24 Feb 2024 12:25:25 -0800 Subject: [PATCH 1/9] Add custom colors to breathing shape\ --- src/design/colors.ts | 6 +++- .../exercise-screen/breathing-animation.tsx | 6 +++- .../settings-screen/settings-screen.tsx | 29 +++++++++++++++++++ src/stores/settings.ts | 11 +++++++ 4 files changed, 50 insertions(+), 2 deletions(-) diff --git a/src/design/colors.ts b/src/design/colors.ts index 0ed7e11..15e4320 100644 --- a/src/design/colors.ts +++ b/src/design/colors.ts @@ -14,10 +14,14 @@ export const colors = { "blue-400": tailwindColors.blue[400], // Android settings tint "blue-500": tailwindColors.blue[500], // iOS settings tint pastel: { - orange: "#F2CAAD", // Home screen planet + orange: "#F2CAAD", // Home screen planet, breathing animation shape default gray: "#E1E3DC", // Home screen planet green: "#ECE9B7", // Home screen planet "orange-light": "#F1E0D9", // Home screen button "gray-light": "#E7E9E6", // Home screen button + "blue-light": "#ADD8E6", // Breathing animation shape blue + lilac: "#D8B9FF", // Breathing animation shape lilac + pink: "#FFB6C1", // Breathing animation shape pink + "blue-dark": "#0054DB", // Breathing animation shape dark blue }, }; diff --git a/src/screens/exercise-screen/breathing-animation.tsx b/src/screens/exercise-screen/breathing-animation.tsx index 68df8ce..545be21 100644 --- a/src/screens/exercise-screen/breathing-animation.tsx +++ b/src/screens/exercise-screen/breathing-animation.tsx @@ -4,6 +4,7 @@ import React, { FC, useEffect, useRef } from "react"; import { Animated, View } from "react-native"; import { colors } from "@breathly/design/colors"; import { shortestDeviceDimension } from "@breathly/design/metrics"; +import { useSettingsStore } from "@breathly/stores/settings"; import { animate } from "@breathly/utils/animate"; import { times } from "@breathly/utils/times"; @@ -15,8 +16,11 @@ interface Props { color?: string; } -export const BreathingAnimation: FC = ({ animationValue, color = colors.pastel.orange }) => { +export const BreathingAnimation: FC = ({ animationValue, color }) => { const { colorScheme } = useColorScheme(); + const { customBreathingShapeColor } = useSettingsStore(); + const { breathingShapeColor } = useSettingsStore(); + color = customBreathingShapeColor ? colors.pastel[breathingShapeColor] : colors.pastel.orange; const mountAnimationValue = useRef(new Animated.Value(0)).current; const innerOpacity = animationValue.interpolate({ inputRange: [0, 0.1, 1], diff --git a/src/screens/settings-screen/settings-screen.tsx b/src/screens/settings-screen/settings-screen.tsx index 035306a..c6ba43d 100644 --- a/src/screens/settings-screen/settings-screen.tsx +++ b/src/screens/settings-screen/settings-screen.tsx @@ -39,6 +39,12 @@ export const SettingsRootScreen: FC< const setTheme = useSettingsStore((state) => state.setTheme); const vibrationEnabled = useSettingsStore((state) => state.vibrationEnabled); const setVibrationEnabled = useSettingsStore((state) => state.setVibrationEnabled); + const customBreathingShapeColor = useSettingsStore((state) => state.customBreathingShapeColor); + const setCustomBreathingShapeColor = useSettingsStore( + (state) => state.setCustomBreathingShapeColor + ); + const breathingShapeColor = useSettingsStore((state) => state.breathingShapeColor); + const setBreathingShapeColor = useSettingsStore((state) => state.setBreathingShapeColor); React.useEffect(() => { // Use `setOptions` to update the button that we previously specified @@ -109,6 +115,29 @@ export const SettingsRootScreen: FC< onValueChange={setTheme} /> )} + + {customBreathingShapeColor && ( + + )} unknown; vibrationEnabled: boolean; setVibrationEnabled: (vibrationEnabled: boolean) => unknown; + customBreathingShapeColor: boolean; + setCustomBreathingShapeColor: (darkerCircle: boolean) => unknown; + breathingShapeColor: "blue-light" | "lilac" | "pink" | "blue-dark"; + setBreathingShapeColor: ( + breathingShapeColor: "blue-light" | "lilac" | "pink" | "blue-dark" + ) => unknown; } export const useSettingsStore = create()( @@ -57,6 +63,11 @@ export const useSettingsStore = create()( setTheme: (theme) => set({ theme }), vibrationEnabled: true, setVibrationEnabled: (vibrationEnabled) => set({ vibrationEnabled }), + customBreathingShapeColor: false, + setCustomBreathingShapeColor: (customBreathingShapeColor) => + set({ customBreathingShapeColor }), + breathingShapeColor: "blue-light", + setBreathingShapeColor: (breathingShapeColor) => set({ breathingShapeColor }), }), { name: "settings-storage", From 56c5ac213943a9da93ea2b619d516bbe4506bda7 Mon Sep 17 00:00:00 2001 From: mljoshi Date: Sat, 24 Feb 2024 12:35:24 -0800 Subject: [PATCH 2/9] Add custom colors to rotating circle --- src/design/colors.ts | 10 +++---- .../exercise-screen/breathing-animation.tsx | 6 ++--- .../settings-screen/settings-screen.tsx | 26 +++++++++---------- src/stores/settings.ts | 20 +++++++------- 4 files changed, 31 insertions(+), 31 deletions(-) diff --git a/src/design/colors.ts b/src/design/colors.ts index 15e4320..0f00887 100644 --- a/src/design/colors.ts +++ b/src/design/colors.ts @@ -14,14 +14,14 @@ export const colors = { "blue-400": tailwindColors.blue[400], // Android settings tint "blue-500": tailwindColors.blue[500], // iOS settings tint pastel: { - orange: "#F2CAAD", // Home screen planet, breathing animation shape default + orange: "#F2CAAD", // Home screen planet, rotating circle default gray: "#E1E3DC", // Home screen planet green: "#ECE9B7", // Home screen planet "orange-light": "#F1E0D9", // Home screen button "gray-light": "#E7E9E6", // Home screen button - "blue-light": "#ADD8E6", // Breathing animation shape blue - lilac: "#D8B9FF", // Breathing animation shape lilac - pink: "#FFB6C1", // Breathing animation shape pink - "blue-dark": "#0054DB", // Breathing animation shape dark blue + "blue-light": "#ADD8E6", // Rotating circle blue + lilac: "#D8B9FF", // Rotating circle lilac + pink: "#FFB6C1", // Rotating circle pink + "blue-dark": "#0054DB", // Rotating circle dark blue }, }; diff --git a/src/screens/exercise-screen/breathing-animation.tsx b/src/screens/exercise-screen/breathing-animation.tsx index 545be21..333c8e7 100644 --- a/src/screens/exercise-screen/breathing-animation.tsx +++ b/src/screens/exercise-screen/breathing-animation.tsx @@ -18,9 +18,9 @@ interface Props { export const BreathingAnimation: FC = ({ animationValue, color }) => { const { colorScheme } = useColorScheme(); - const { customBreathingShapeColor } = useSettingsStore(); - const { breathingShapeColor } = useSettingsStore(); - color = customBreathingShapeColor ? colors.pastel[breathingShapeColor] : colors.pastel.orange; + const { customRotatingCircleColor } = useSettingsStore(); + const { rotatingCircleColor } = useSettingsStore(); + color = customRotatingCircleColor ? colors.pastel[rotatingCircleColor] : colors.pastel.orange; const mountAnimationValue = useRef(new Animated.Value(0)).current; const innerOpacity = animationValue.interpolate({ inputRange: [0, 0.1, 1], diff --git a/src/screens/settings-screen/settings-screen.tsx b/src/screens/settings-screen/settings-screen.tsx index c6ba43d..444bd0e 100644 --- a/src/screens/settings-screen/settings-screen.tsx +++ b/src/screens/settings-screen/settings-screen.tsx @@ -39,12 +39,12 @@ export const SettingsRootScreen: FC< const setTheme = useSettingsStore((state) => state.setTheme); const vibrationEnabled = useSettingsStore((state) => state.vibrationEnabled); const setVibrationEnabled = useSettingsStore((state) => state.setVibrationEnabled); - const customBreathingShapeColor = useSettingsStore((state) => state.customBreathingShapeColor); - const setCustomBreathingShapeColor = useSettingsStore( - (state) => state.setCustomBreathingShapeColor + const customRotatingCircleColor = useSettingsStore((state) => state.customRotatingCircleColor); + const setCustomRotatingCircleColor = useSettingsStore( + (state) => state.setCustomRotatingCircleColor ); - const breathingShapeColor = useSettingsStore((state) => state.breathingShapeColor); - const setBreathingShapeColor = useSettingsStore((state) => state.setBreathingShapeColor); + const rotatingCircleColor = useSettingsStore((state) => state.rotatingCircleColor); + const setRotatingCircleColor = useSettingsStore((state) => state.setRotatingCircleColor); React.useEffect(() => { // Use `setOptions` to update the button that we previously specified @@ -116,16 +116,16 @@ export const SettingsRootScreen: FC< /> )} - {customBreathingShapeColor && ( + {customRotatingCircleColor && ( )} diff --git a/src/stores/settings.ts b/src/stores/settings.ts index f559e5c..87d6bbf 100644 --- a/src/stores/settings.ts +++ b/src/stores/settings.ts @@ -24,11 +24,11 @@ interface SettingsStore { setTheme: (theme: "dark" | "light") => unknown; vibrationEnabled: boolean; setVibrationEnabled: (vibrationEnabled: boolean) => unknown; - customBreathingShapeColor: boolean; - setCustomBreathingShapeColor: (darkerCircle: boolean) => unknown; - breathingShapeColor: "blue-light" | "lilac" | "pink" | "blue-dark"; - setBreathingShapeColor: ( - breathingShapeColor: "blue-light" | "lilac" | "pink" | "blue-dark" + customRotatingCircleColor: boolean; + setCustomRotatingCircleColor: (customRotatingCircleColor: boolean) => unknown; + rotatingCircleColor: "blue-light" | "lilac" | "pink" | "blue-dark"; + setRotatingCircleColor: ( + rotatingCircleColor: "blue-light" | "lilac" | "pink" | "blue-dark" ) => unknown; } @@ -63,11 +63,11 @@ export const useSettingsStore = create()( setTheme: (theme) => set({ theme }), vibrationEnabled: true, setVibrationEnabled: (vibrationEnabled) => set({ vibrationEnabled }), - customBreathingShapeColor: false, - setCustomBreathingShapeColor: (customBreathingShapeColor) => - set({ customBreathingShapeColor }), - breathingShapeColor: "blue-light", - setBreathingShapeColor: (breathingShapeColor) => set({ breathingShapeColor }), + customRotatingCircleColor: false, + setCustomRotatingCircleColor: (customRotatingCircleColor) => + set({ customRotatingCircleColor }), + rotatingCircleColor: "blue-light", + setRotatingCircleColor: (rotatingCircleColor) => set({ rotatingCircleColor }), }), { name: "settings-storage", From da2011488fb8d83f9721385595e5f4ecbffb1ed0 Mon Sep 17 00:00:00 2001 From: Alvaro-DLC Date: Sun, 25 Feb 2024 14:37:08 -0800 Subject: [PATCH 3/9] Add preview to custom rotating circle color in settings Co-Authored-By: alszzy <99118533+alszzy@users.noreply.github.com> --- .../settings-screen/settings-screen.tsx | 47 +++++++++++++------ 1 file changed, 33 insertions(+), 14 deletions(-) diff --git a/src/screens/settings-screen/settings-screen.tsx b/src/screens/settings-screen/settings-screen.tsx index 444bd0e..b9abe85 100644 --- a/src/screens/settings-screen/settings-screen.tsx +++ b/src/screens/settings-screen/settings-screen.tsx @@ -1,9 +1,18 @@ import { NativeStackScreenProps } from "@react-navigation/native-stack"; import ms from "ms"; import React, { FC } from "react"; -import { Animated, ScrollView, LayoutAnimation, Button, Platform } from "react-native"; +import { + Animated, + ScrollView, + LayoutAnimation, + Button, + Platform, + View, + StyleSheet, +} from "react-native"; import { patternPresets } from "@breathly/assets/pattern-presets"; import { SettingsStackParamList } from "@breathly/core/navigator"; +import { colors } from "@breathly/design/colors"; import { SettingsUI } from "@breathly/screens/settings-screen/settings-ui"; import { useSelectedPatternSteps, @@ -124,19 +133,29 @@ export const SettingsRootScreen: FC< onValueChange={setCustomRotatingCircleColor} /> {customRotatingCircleColor && ( - + + + + )} From 5167d8471567c129ba035cfb65e9a0addbfc29cc Mon Sep 17 00:00:00 2001 From: mljoshi Date: Sun, 25 Feb 2024 15:09:52 -0800 Subject: [PATCH 4/9] Added option to change rotating circle color Added light blue, lilac, pink, and dark blue color options for the rotating circle in settings Added preview for the currently selected color option in settings Co-Authored-By: Alvaro De La Cruz <129230298+alvaro-dlc@users.noreply.github.com> Co-Authored-By: alszzy <99118533+alszzy@users.noreply.github.com> --- src/design/colors.ts | 6 ++- .../exercise-screen/breathing-animation.tsx | 6 ++- .../settings-screen/settings-screen.tsx | 50 ++++++++++++++++++- src/stores/settings.ts | 11 ++++ 4 files changed, 70 insertions(+), 3 deletions(-) diff --git a/src/design/colors.ts b/src/design/colors.ts index 0ed7e11..0f00887 100644 --- a/src/design/colors.ts +++ b/src/design/colors.ts @@ -14,10 +14,14 @@ export const colors = { "blue-400": tailwindColors.blue[400], // Android settings tint "blue-500": tailwindColors.blue[500], // iOS settings tint pastel: { - orange: "#F2CAAD", // Home screen planet + orange: "#F2CAAD", // Home screen planet, rotating circle default gray: "#E1E3DC", // Home screen planet green: "#ECE9B7", // Home screen planet "orange-light": "#F1E0D9", // Home screen button "gray-light": "#E7E9E6", // Home screen button + "blue-light": "#ADD8E6", // Rotating circle blue + lilac: "#D8B9FF", // Rotating circle lilac + pink: "#FFB6C1", // Rotating circle pink + "blue-dark": "#0054DB", // Rotating circle dark blue }, }; diff --git a/src/screens/exercise-screen/breathing-animation.tsx b/src/screens/exercise-screen/breathing-animation.tsx index 68df8ce..333c8e7 100644 --- a/src/screens/exercise-screen/breathing-animation.tsx +++ b/src/screens/exercise-screen/breathing-animation.tsx @@ -4,6 +4,7 @@ import React, { FC, useEffect, useRef } from "react"; import { Animated, View } from "react-native"; import { colors } from "@breathly/design/colors"; import { shortestDeviceDimension } from "@breathly/design/metrics"; +import { useSettingsStore } from "@breathly/stores/settings"; import { animate } from "@breathly/utils/animate"; import { times } from "@breathly/utils/times"; @@ -15,8 +16,11 @@ interface Props { color?: string; } -export const BreathingAnimation: FC = ({ animationValue, color = colors.pastel.orange }) => { +export const BreathingAnimation: FC = ({ animationValue, color }) => { const { colorScheme } = useColorScheme(); + const { customRotatingCircleColor } = useSettingsStore(); + const { rotatingCircleColor } = useSettingsStore(); + color = customRotatingCircleColor ? colors.pastel[rotatingCircleColor] : colors.pastel.orange; const mountAnimationValue = useRef(new Animated.Value(0)).current; const innerOpacity = animationValue.interpolate({ inputRange: [0, 0.1, 1], diff --git a/src/screens/settings-screen/settings-screen.tsx b/src/screens/settings-screen/settings-screen.tsx index 035306a..b9abe85 100644 --- a/src/screens/settings-screen/settings-screen.tsx +++ b/src/screens/settings-screen/settings-screen.tsx @@ -1,9 +1,18 @@ import { NativeStackScreenProps } from "@react-navigation/native-stack"; import ms from "ms"; import React, { FC } from "react"; -import { Animated, ScrollView, LayoutAnimation, Button, Platform } from "react-native"; +import { + Animated, + ScrollView, + LayoutAnimation, + Button, + Platform, + View, + StyleSheet, +} from "react-native"; import { patternPresets } from "@breathly/assets/pattern-presets"; import { SettingsStackParamList } from "@breathly/core/navigator"; +import { colors } from "@breathly/design/colors"; import { SettingsUI } from "@breathly/screens/settings-screen/settings-ui"; import { useSelectedPatternSteps, @@ -39,6 +48,12 @@ export const SettingsRootScreen: FC< const setTheme = useSettingsStore((state) => state.setTheme); const vibrationEnabled = useSettingsStore((state) => state.vibrationEnabled); const setVibrationEnabled = useSettingsStore((state) => state.setVibrationEnabled); + const customRotatingCircleColor = useSettingsStore((state) => state.customRotatingCircleColor); + const setCustomRotatingCircleColor = useSettingsStore( + (state) => state.setCustomRotatingCircleColor + ); + const rotatingCircleColor = useSettingsStore((state) => state.rotatingCircleColor); + const setRotatingCircleColor = useSettingsStore((state) => state.setRotatingCircleColor); React.useEffect(() => { // Use `setOptions` to update the button that we previously specified @@ -109,6 +124,39 @@ export const SettingsRootScreen: FC< onValueChange={setTheme} /> )} + + {customRotatingCircleColor && ( + + + + + )} unknown; vibrationEnabled: boolean; setVibrationEnabled: (vibrationEnabled: boolean) => unknown; + customRotatingCircleColor: boolean; + setCustomRotatingCircleColor: (customRotatingCircleColor: boolean) => unknown; + rotatingCircleColor: "blue-light" | "lilac" | "pink" | "blue-dark"; + setRotatingCircleColor: ( + rotatingCircleColor: "blue-light" | "lilac" | "pink" | "blue-dark" + ) => unknown; } export const useSettingsStore = create()( @@ -57,6 +63,11 @@ export const useSettingsStore = create()( setTheme: (theme) => set({ theme }), vibrationEnabled: true, setVibrationEnabled: (vibrationEnabled) => set({ vibrationEnabled }), + customRotatingCircleColor: false, + setCustomRotatingCircleColor: (customRotatingCircleColor) => + set({ customRotatingCircleColor }), + rotatingCircleColor: "blue-light", + setRotatingCircleColor: (rotatingCircleColor) => set({ rotatingCircleColor }), }), { name: "settings-storage", From 2b16030c646704b841f583d8e1b1c2bfba100e26 Mon Sep 17 00:00:00 2001 From: mljoshi Date: Sun, 3 Mar 2024 11:54:27 -0800 Subject: [PATCH 5/9] Move circle color logic, rename circle color variable for consistency --- src/screens/exercise-screen/breathing-animation.tsx | 6 +----- src/screens/exercise-screen/exercise-screen.tsx | 8 +++++++- src/screens/settings-screen/settings-screen.tsx | 12 ++++++------ src/stores/settings.ts | 10 +++++----- 4 files changed, 19 insertions(+), 17 deletions(-) diff --git a/src/screens/exercise-screen/breathing-animation.tsx b/src/screens/exercise-screen/breathing-animation.tsx index 333c8e7..9817a24 100644 --- a/src/screens/exercise-screen/breathing-animation.tsx +++ b/src/screens/exercise-screen/breathing-animation.tsx @@ -2,7 +2,6 @@ import setColor from "color"; import { useColorScheme } from "nativewind"; import React, { FC, useEffect, useRef } from "react"; import { Animated, View } from "react-native"; -import { colors } from "@breathly/design/colors"; import { shortestDeviceDimension } from "@breathly/design/metrics"; import { useSettingsStore } from "@breathly/stores/settings"; import { animate } from "@breathly/utils/animate"; @@ -13,14 +12,11 @@ const MOUNT_ANIMATION_DURATION = 300; interface Props { animationValue: Animated.Value; - color?: string; + color: string; } export const BreathingAnimation: FC = ({ animationValue, color }) => { const { colorScheme } = useColorScheme(); - const { customRotatingCircleColor } = useSettingsStore(); - const { rotatingCircleColor } = useSettingsStore(); - color = customRotatingCircleColor ? colors.pastel[rotatingCircleColor] : colors.pastel.orange; const mountAnimationValue = useRef(new Animated.Value(0)).current; const innerOpacity = animationValue.interpolate({ inputRange: [0, 0.1, 1], diff --git a/src/screens/exercise-screen/exercise-screen.tsx b/src/screens/exercise-screen/exercise-screen.tsx index 5d2c744..6a2db4a 100644 --- a/src/screens/exercise-screen/exercise-screen.tsx +++ b/src/screens/exercise-screen/exercise-screen.tsx @@ -7,6 +7,7 @@ import { Animated, View } from "react-native"; import { useSafeAreaInsets } from "react-native-safe-area-context"; import { Pressable } from "@breathly/common/pressable"; import { RootStackParamList } from "@breathly/core/navigator"; +import { colors } from "@breathly/design/colors"; import { widestDeviceDimension } from "@breathly/design/metrics"; import { AnimatedDots } from "@breathly/screens/exercise-screen/animated-dots"; import { StepDescription } from "@breathly/screens/exercise-screen/step-description"; @@ -103,6 +104,11 @@ const ExerciseRunningFragment: FC = ({ const selectedPatternSteps = useSelectedPatternSteps(); const [unmountContentAnimVal] = useState(new Animated.Value(1)); const stepsMetadata = buildStepsMetadata(selectedPatternSteps); + const { rotatingCircleColorEnabled } = useSettingsStore(); + const { rotatingCircleColor } = useSettingsStore(); + const color = rotatingCircleColorEnabled + ? colors.pastel[rotatingCircleColor] + : colors.pastel.orange; const { currentStep, exerciseAnimVal, textAnimVal } = useExerciseLoop(stepsMetadata); @@ -140,7 +146,7 @@ const ExerciseRunningFragment: FC = ({ {currentStep && ( - + state.setTheme); const vibrationEnabled = useSettingsStore((state) => state.vibrationEnabled); const setVibrationEnabled = useSettingsStore((state) => state.setVibrationEnabled); - const customRotatingCircleColor = useSettingsStore((state) => state.customRotatingCircleColor); - const setCustomRotatingCircleColor = useSettingsStore( - (state) => state.setCustomRotatingCircleColor + const rotatingCircleColorEnabled = useSettingsStore((state) => state.rotatingCircleColorEnabled); + const setrotatingCircleColorEnabled = useSettingsStore( + (state) => state.setrotatingCircleColorEnabled ); const rotatingCircleColor = useSettingsStore((state) => state.rotatingCircleColor); const setRotatingCircleColor = useSettingsStore((state) => state.setRotatingCircleColor); @@ -129,10 +129,10 @@ export const SettingsRootScreen: FC< secondaryLabel="Change rotating circle color" iconName="ios-moon" iconBackgroundColor="#a5b4fc" - value={customRotatingCircleColor} - onValueChange={setCustomRotatingCircleColor} + value={rotatingCircleColorEnabled} + onValueChange={setrotatingCircleColorEnabled} /> - {customRotatingCircleColor && ( + {rotatingCircleColorEnabled && ( unknown; vibrationEnabled: boolean; setVibrationEnabled: (vibrationEnabled: boolean) => unknown; - customRotatingCircleColor: boolean; - setCustomRotatingCircleColor: (customRotatingCircleColor: boolean) => unknown; + rotatingCircleColorEnabled: boolean; + setrotatingCircleColorEnabled: (rotatingCircleColorEnabled: boolean) => unknown; rotatingCircleColor: "blue-light" | "lilac" | "pink" | "blue-dark"; setRotatingCircleColor: ( rotatingCircleColor: "blue-light" | "lilac" | "pink" | "blue-dark" @@ -63,9 +63,9 @@ export const useSettingsStore = create()( setTheme: (theme) => set({ theme }), vibrationEnabled: true, setVibrationEnabled: (vibrationEnabled) => set({ vibrationEnabled }), - customRotatingCircleColor: false, - setCustomRotatingCircleColor: (customRotatingCircleColor) => - set({ customRotatingCircleColor }), + rotatingCircleColorEnabled: false, + setrotatingCircleColorEnabled: (rotatingCircleColorEnabled) => + set({ rotatingCircleColorEnabled }), rotatingCircleColor: "blue-light", setRotatingCircleColor: (rotatingCircleColor) => set({ rotatingCircleColor }), }), From 262e1c6c5d1b213f89cabd1807e0adf5d0e8b3bb Mon Sep 17 00:00:00 2001 From: mljoshi Date: Sun, 3 Mar 2024 12:00:14 -0800 Subject: [PATCH 6/9] Rename circle color variables for consistency --- src/screens/settings-screen/settings-screen.tsx | 6 +++--- src/stores/settings.ts | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/screens/settings-screen/settings-screen.tsx b/src/screens/settings-screen/settings-screen.tsx index ccb618d..4c070c5 100644 --- a/src/screens/settings-screen/settings-screen.tsx +++ b/src/screens/settings-screen/settings-screen.tsx @@ -49,8 +49,8 @@ export const SettingsRootScreen: FC< const vibrationEnabled = useSettingsStore((state) => state.vibrationEnabled); const setVibrationEnabled = useSettingsStore((state) => state.setVibrationEnabled); const rotatingCircleColorEnabled = useSettingsStore((state) => state.rotatingCircleColorEnabled); - const setrotatingCircleColorEnabled = useSettingsStore( - (state) => state.setrotatingCircleColorEnabled + const setRotatingCircleColorEnabled = useSettingsStore( + (state) => state.setRotatingCircleColorEnabled ); const rotatingCircleColor = useSettingsStore((state) => state.rotatingCircleColor); const setRotatingCircleColor = useSettingsStore((state) => state.setRotatingCircleColor); @@ -130,7 +130,7 @@ export const SettingsRootScreen: FC< iconName="ios-moon" iconBackgroundColor="#a5b4fc" value={rotatingCircleColorEnabled} - onValueChange={setrotatingCircleColorEnabled} + onValueChange={setRotatingCircleColorEnabled} /> {rotatingCircleColorEnabled && ( diff --git a/src/stores/settings.ts b/src/stores/settings.ts index 1ee8fb6..9997d27 100644 --- a/src/stores/settings.ts +++ b/src/stores/settings.ts @@ -25,7 +25,7 @@ interface SettingsStore { vibrationEnabled: boolean; setVibrationEnabled: (vibrationEnabled: boolean) => unknown; rotatingCircleColorEnabled: boolean; - setrotatingCircleColorEnabled: (rotatingCircleColorEnabled: boolean) => unknown; + setRotatingCircleColorEnabled: (rotatingCircleColorEnabled: boolean) => unknown; rotatingCircleColor: "blue-light" | "lilac" | "pink" | "blue-dark"; setRotatingCircleColor: ( rotatingCircleColor: "blue-light" | "lilac" | "pink" | "blue-dark" @@ -64,7 +64,7 @@ export const useSettingsStore = create()( vibrationEnabled: true, setVibrationEnabled: (vibrationEnabled) => set({ vibrationEnabled }), rotatingCircleColorEnabled: false, - setrotatingCircleColorEnabled: (rotatingCircleColorEnabled) => + setRotatingCircleColorEnabled: (rotatingCircleColorEnabled) => set({ rotatingCircleColorEnabled }), rotatingCircleColor: "blue-light", setRotatingCircleColor: (rotatingCircleColor) => set({ rotatingCircleColor }), From fba67f2f957f27f2c5ebb6bdd53e4a1be7231bc1 Mon Sep 17 00:00:00 2001 From: mljoshi Date: Fri, 15 Mar 2024 19:41:17 -0700 Subject: [PATCH 7/9] Remove circle color preview for consistency --- .../settings-screen/settings-screen.tsx | 47 ++++++------------- 1 file changed, 14 insertions(+), 33 deletions(-) diff --git a/src/screens/settings-screen/settings-screen.tsx b/src/screens/settings-screen/settings-screen.tsx index 4c070c5..701492b 100644 --- a/src/screens/settings-screen/settings-screen.tsx +++ b/src/screens/settings-screen/settings-screen.tsx @@ -1,18 +1,9 @@ import { NativeStackScreenProps } from "@react-navigation/native-stack"; import ms from "ms"; import React, { FC } from "react"; -import { - Animated, - ScrollView, - LayoutAnimation, - Button, - Platform, - View, - StyleSheet, -} from "react-native"; +import { Animated, ScrollView, LayoutAnimation, Button, Platform } from "react-native"; import { patternPresets } from "@breathly/assets/pattern-presets"; import { SettingsStackParamList } from "@breathly/core/navigator"; -import { colors } from "@breathly/design/colors"; import { SettingsUI } from "@breathly/screens/settings-screen/settings-ui"; import { useSelectedPatternSteps, @@ -133,29 +124,19 @@ export const SettingsRootScreen: FC< onValueChange={setRotatingCircleColorEnabled} /> {rotatingCircleColorEnabled && ( - - - - + )} From a56aa76ee5adc2b98f9e36d1f0a1ee4ef8b57758 Mon Sep 17 00:00:00 2001 From: mljoshi Date: Sat, 16 Mar 2024 00:18:14 -0700 Subject: [PATCH 8/9] Change iOS icons for rotating circle changes --- src/screens/settings-screen/settings-screen.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/screens/settings-screen/settings-screen.tsx b/src/screens/settings-screen/settings-screen.tsx index 701492b..02261cf 100644 --- a/src/screens/settings-screen/settings-screen.tsx +++ b/src/screens/settings-screen/settings-screen.tsx @@ -118,21 +118,21 @@ export const SettingsRootScreen: FC< {rotatingCircleColorEnabled && ( Date: Sat, 16 Mar 2024 00:22:37 -0700 Subject: [PATCH 9/9] Change capitalization in rotating circle settings --- src/screens/settings-screen/settings-screen.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/screens/settings-screen/settings-screen.tsx b/src/screens/settings-screen/settings-screen.tsx index 02261cf..7591877 100644 --- a/src/screens/settings-screen/settings-screen.tsx +++ b/src/screens/settings-screen/settings-screen.tsx @@ -129,10 +129,10 @@ export const SettingsRootScreen: FC< iconName="ios-color-palette-outline" iconBackgroundColor="#03a5fc" options={[ - { value: "blue-light", label: "Light Blue" }, + { value: "blue-light", label: "Light blue" }, { value: "lilac", label: "Lilac" }, { value: "pink", label: "Pink" }, - { value: "blue-dark", label: "Dark Blue" }, + { value: "blue-dark", label: "Dark blue" }, ]} value={rotatingCircleColor} onValueChange={setRotatingCircleColor}