refactor: changed theme color and refecatored metronome play pause sy…

…stem
software-mansion-labs · Sep 25, 2024 · 8e9d533 · 8e9d533
1 parent e37a822
commit 8e9d533
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 22 deletions.
diff --git a/apps/common-app/src/App.tsx b/apps/common-app/src/App.tsx
@@ -40,7 +40,7 @@ const App: FC = () => {
       <Stack.Navigator
         screenOptions={{
           headerStyle: {
-            backgroundColor: colors.darkblue,
+            backgroundColor: colors.main,
           },
           headerTintColor: colors.white,
         }}

diff --git a/apps/common-app/src/components/Slider.tsx b/apps/common-app/src/components/Slider.tsx
@@ -106,7 +106,7 @@ const styles = StyleSheet.create({
   sliderTrack: {
     width: SLIDER_WIDTH,
     height: HANDLE_SIZE + 10,
-    backgroundColor: colors.darkblue,
+    backgroundColor: colors.main,
     borderRadius: 25,
     justifyContent: 'center',
     padding: layout.spacing,

diff --git a/apps/common-app/src/examples/Metronome/Metronome.tsx b/apps/common-app/src/examples/Metronome/Metronome.tsx
@@ -29,18 +29,7 @@ const Metronome: FC = () => {
   const nextNoteTimeRef = useRef(0.0);
   const currentBeatRef = useRef(0);
 
-  const handlePlayPause = () => {
-    if (isPlaying) {
-      setIsPlaying(false);
-
-      if (intervalRef.current) {
-        clearInterval(intervalRef.current);
-        intervalRef.current = null;
-      }
-
-      return;
-    }
-
+  const handlePlay = () => {
     if (!audioContextRef.current) {
       audioContextRef.current = new AudioContext();
     }
@@ -51,6 +40,35 @@ const Metronome: FC = () => {
     intervalRef.current = setInterval(scheduler, SCHEDULE_INTERVAL_MS);
   };
 
+  const handlePause = () => {
+    setIsPlaying(false);
+
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+  };
+
+  const handlePlayPause = () => {
+    if (isPlaying) {
+      handlePause();
+
+      return;
+    }
+
+    handlePlay();
+  };
+
+  const handleBpmChange = (newBpm: number) => {
+    setBpm(newBpm);
+    handlePause();
+  };
+
+  const handleBeatsPerBarChange = (newBeatsPerBar: number) => {
+    setBeatsPerBar(newBeatsPerBar);
+    handlePause();
+  };
+
   const scheduler = () => {
     if (!audioContextRef.current) {
       return;
@@ -116,22 +134,22 @@ const Metronome: FC = () => {
   return (
     <Container centered>
       <Button
-        color={colors.darkblue}
+        color={colors.main}
         onPress={handlePlayPause}
         title={isPlaying ? 'Pause' : 'Play'}
       />
       <Text>BPM: {bpm}</Text>
       <Slider
         value={bpm}
-        onValueChange={setBpm}
+        onValueChange={handleBpmChange}
         minimumValue={30}
         maximumValue={240}
         step={1}
       />
       <Text>Beats per bar: {beatsPerBar}</Text>
       <Slider
         value={beatsPerBar}
-        onValueChange={setBeatsPerBar}
+        onValueChange={handleBeatsPerBarChange}
         minimumValue={1}
         maximumValue={8}
         step={1}

diff --git a/apps/common-app/src/examples/Oscillator/Oscillator.tsx b/apps/common-app/src/examples/Oscillator/Oscillator.tsx
@@ -117,7 +117,7 @@ const Oscillator: FC = () => {
   return (
     <Container centered>
       <Button
-        color={colors.darkblue}
+        color={colors.main}
         title={isPlaying ? 'Pause' : 'Play'}
         onPress={handlePlayPause}
       />
@@ -187,11 +187,11 @@ const styles = StyleSheet.create({
     padding: layout.spacing,
     marginHorizontal: 5,
     borderWidth: 1,
-    borderColor: colors.darkblue,
+    borderColor: colors.main,
     borderRadius: layout.radius,
   },
   activeOscillatorButton: {
-    backgroundColor: colors.darkblue,
+    backgroundColor: colors.main,
   },
   oscillatorButtonText: {
     color: colors.black,

diff --git a/apps/common-app/src/styles.ts b/apps/common-app/src/styles.ts
@@ -12,8 +12,7 @@ export const layout = {
 
 export const colors = {
   white: '#ffffff',
-  darkblue: '#001a72',
-  blue: '#007AFF',
+  main: '#428ce7',
   border: 'rgba(0,0,0,0.1)',
   black: '#000000',
 };