Update styling and accessibility, refine product and shopping list functionalities

src/components/PrimaryButton.js

@@ -2,7 +2,7 @@ import { Pressable, StyleSheet, Text } from 'react-native';
 
 import { colors } from '../utils/constants';
 
-export default function PrimaryButton({ label, onPress, disabled = false }) {
+export default function PrimaryButton({ label, onPress, disabled = false, tone = 'default' }) {
   return (
     <Pressable
       accessibilityRole="button"
@@ -10,11 +10,12 @@ export default function PrimaryButton({ label, onPress, disabled = false }) {
       onPress={onPress}
       style={({ pressed }) => [
         styles.button,
+        tone === 'light' ? styles.lightButton : null,
         pressed ? styles.buttonPressed : null,
         disabled ? styles.disabled : null
       ]}
     >
-      <Text style={[styles.label, disabled ? styles.disabledLabel : null]}>{label}</Text>
+      <Text style={[styles.label, tone === 'light' ? styles.lightLabel : null, disabled ? styles.disabledLabel : null]}>{label}</Text>
     </Pressable>
   );
 }
@@ -23,17 +24,25 @@ const styles = StyleSheet.create({
   button: {
     alignItems: 'center',
     backgroundColor: colors.primary,
-    borderRadius: 8,
+    borderRadius: 14,
+    justifyContent: 'center',
+    minHeight: 50,
     paddingHorizontal: 20,
     paddingVertical: 14
   },
   buttonPressed: {
     opacity: 0.82
   },
+  lightButton: {
+    backgroundColor: colors.surface
+  },
   label: {
     color: colors.surface,
     fontSize: 16,
-    fontWeight: '700'
+    fontWeight: '800'
+  },
+  lightLabel: {
+    color: colors.primaryDark
   },
   disabled: {
     backgroundColor: colors.border