Add Color Options to Rotating Circle

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
   },
 };

src/screens/exercise-screen/breathing-animation.tsx

@@ -2,8 +2,8 @@ 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";
 import { times } from "@breathly/utils/times";
 
@@ -12,10 +12,10 @@ const MOUNT_ANIMATION_DURATION = 300;
 
 interface Props {
   animationValue: Animated.Value;
-  color?: string;
+  color: string;
 }
 
-export const BreathingAnimation: FC<Props> = ({ animationValue, color = colors.pastel.orange }) => {
+export const BreathingAnimation: FC<Props> = ({ animationValue, color }) => {
   const { colorScheme } = useColorScheme();
   const mountAnimationValue = useRef(new Animated.Value(0)).current;
   const innerOpacity = animationValue.interpolate({

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<ExerciseRunningFragmentProps> = ({
   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<ExerciseRunningFragmentProps> = ({
       <Timer limit={timeLimit} onLimitReached={handleTimeLimitReached} />
       {currentStep && (
         <View className="flex-1 items-center justify-center">
-          <BreathingAnimation animationValue={exerciseAnimVal} />
+          <BreathingAnimation animationValue={exerciseAnimVal} color={color} />
           <StepDescription label={currentStep.label} animationValue={textAnimVal} />
           <AnimatedDots
             numberOfDots={3}

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 rotatingCircleColorEnabled = useSettingsStore((state) => state.rotatingCircleColorEnabled);
+  const setRotatingCircleColorEnabled = useSettingsStore(
+    (state) => state.setRotatingCircleColorEnabled
+  );
+  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 +115,29 @@ export const SettingsRootScreen: FC<
                 onValueChange={setTheme}
               />
             )}
+            <SettingsUI.SwitchItem
+              label="Custom rotating circle color"
+              secondaryLabel="Change rotating circle color"
+              iconName="ios-color-filter"
+              iconBackgroundColor="#f2cddc"
+              value={rotatingCircleColorEnabled}
+              onValueChange={setRotatingCircleColorEnabled}
+            />
+            {rotatingCircleColorEnabled && (
+              <SettingsUI.PickerItem
+                label="Rotating circle color"
+                iconName="ios-color-palette-outline"
+                iconBackgroundColor="#03a5fc"
+                options={[
+                  { value: "blue-light", label: "Light blue" },
+                  { value: "lilac", label: "Lilac" },
+                  { value: "pink", label: "Pink" },
+                  { value: "blue-dark", label: "Dark blue" },
+                ]}
+                value={rotatingCircleColor}
+                onValueChange={setRotatingCircleColor}
+              />
+            )}
           </SettingsUI.Section>
           <SettingsUI.Section label="Haptics">
             <SettingsUI.SwitchItem

src/stores/settings.ts

@@ -24,6 +24,12 @@ interface SettingsStore {
   setTheme: (theme: "dark" | "light") => unknown;
   vibrationEnabled: boolean;
   setVibrationEnabled: (vibrationEnabled: boolean) => unknown;
+  rotatingCircleColorEnabled: boolean;
+  setRotatingCircleColorEnabled: (rotatingCircleColorEnabled: boolean) => unknown;
+  rotatingCircleColor: "blue-light" | "lilac" | "pink" | "blue-dark";
+  setRotatingCircleColor: (
+    rotatingCircleColor: "blue-light" | "lilac" | "pink" | "blue-dark"
+  ) => unknown;
 }
 
 export const useSettingsStore = create<SettingsStore>()(
@@ -57,6 +63,11 @@ export const useSettingsStore = create<SettingsStore>()(
         setTheme: (theme) => set({ theme }),
         vibrationEnabled: true,
         setVibrationEnabled: (vibrationEnabled) => set({ vibrationEnabled }),
+        rotatingCircleColorEnabled: false,
+        setRotatingCircleColorEnabled: (rotatingCircleColorEnabled) =>
+          set({ rotatingCircleColorEnabled }),
+        rotatingCircleColor: "blue-light",
+        setRotatingCircleColor: (rotatingCircleColor) => set({ rotatingCircleColor }),
       }),
       {
         name: "settings-storage",