chore: some cleanup

apps/common-app/src/App.tsx

@@ -12,6 +12,8 @@ import { layout, colors } from './styles';
 
 const Stack = createStackNavigator();
 
+// Our slider component uses the text prop to display shared value
+// We need it whitelisted in order to have it "animated".
 Animated.addWhitelistedNativeProps({ text: true });
 
 const HomeScreen: FC = () => {
@@ -50,7 +52,7 @@ const App: FC = () => {
             headerStyle: {
               backgroundColor: colors.main,
             },
-            headerTintColor: '#fff',
+            headerTintColor: colors.white,
           }}
         >
           <Stack.Screen

apps/common-app/src/components/Select.tsx

@@ -4,8 +4,8 @@ import { Icon } from '@swmansion/icons';
 import { ScrollView } from 'react-native-gesture-handler';
 import { Modal, View, Text, Pressable, StyleSheet } from 'react-native';
 
-import { colors } from '../styles';
 import withSeparators from '../utils/withSeparators';
+import { colors } from '../styles';
 import Spacer from './Spacer';
 
 interface SelectProps<T extends string> {
@@ -78,7 +78,7 @@ export default Select;
 const styles = StyleSheet.create({
   selectBox: {
     borderWidth: 1,
-    borderColor: '#999',
+    borderColor: colors.border,
     borderRadius: 8,
     flexDirection: 'row',
     alignItems: 'center',
@@ -91,7 +91,7 @@ const styles = StyleSheet.create({
     paddingVertical: 12,
   },
   modalBg: {
-    backgroundColor: '#00000040',
+    backgroundColor: colors.modalBackdrop,
     position: 'absolute',
     top: 0,
     left: 0,
@@ -103,7 +103,7 @@ const styles = StyleSheet.create({
   },
   modalContainer: {
     flex: 2,
-    backgroundColor: '#222',
+    backgroundColor: colors.background,
     borderTopLeftRadius: 20,
     borderTopRightRadius: 20,
     padding: 24,
@@ -114,7 +114,7 @@ const styles = StyleSheet.create({
   },
   separator: {
     height: 1,
-    backgroundColor: '#333',
+    backgroundColor: colors.separator,
     marginHorizontal: 12,
     marginVertical: 6,
   },

apps/common-app/src/examples/DrumMachine/Grid.tsx

@@ -2,8 +2,9 @@ import React, { memo } from 'react';
 import { StyleSheet } from 'react-native';
 import { Line, Circle, Paint, vec } from '@shopify/react-native-skia';
 
-import { getAngle, getPointCX, getPointCY } from './utils';
+import { colors } from '../../styles';
 import { numBeats, cPoint, maxSize, buttonRadius } from './constants';
+import { getAngle, getPointCX, getPointCY } from './utils';
 import type { Instrument } from './types';
 import instruments from './instruments';
 
@@ -21,7 +22,7 @@ const Grid: React.FC = () => {
         p1={vec(cPoint.x, cPoint.y)}
         p2={vec(x, y)}
         strokeWidth={StyleSheet.hairlineWidth}
-        color="#999"
+        color={colors.border}
       />
     );
   };
@@ -51,8 +52,8 @@ const Grid: React.FC = () => {
         r={instrument.radius}
       >
         <Paint
-          color="#999"
           style="stroke"
+          color={colors.border}
           strokeWidth={StyleSheet.hairlineWidth}
         />
       </Circle>

apps/common-app/src/examples/DrumMachine/useGestures.ts

@@ -14,15 +14,18 @@ import { useMemo } from 'react';
 
 interface GestureParams {
   canvasRect: XYWHRect;
+  touchRadius?: number;
   onPatternChange: (pattern: number, stepIdx: number) => void;
 }
 
 const initialHovers = Array(Instruments.length * numBeats).fill(false);
 
-const touchRadius = buttonRadius * 2;
-
 export default function useGestures(params: GestureParams) {
-  const { canvasRect, onPatternChange } = params;
+  const {
+    canvasRect,
+    onPatternChange,
+    touchRadius = buttonRadius * 2,
+  } = params;
   const hovers = useSharedValue(initialHovers);
 
   const touchés = useMemo(() => {

apps/common-app/src/styles.ts

@@ -12,10 +12,12 @@ export const layout = {
 
 export const colors = {
   white: '#ffffff',
-  border: '#999',
   main: '#38ACDD',
   black: '#000000',
   gray: '#d7d7d7',
 
   background: '#222222',
+  separator: '#333333',
+  modalBackdrop: '#00000040',
+  border: '#999999',
 } as const;