manage group

src/screens/GroupCreation.tsx

@@ -16,6 +16,7 @@ import { CustomInput } from "../components/common/Custom";
 import CustomButton from "../components/CustomButton";
 import { Calendar } from "react-native-calendars";
 import { Ionicons } from "@react-native-vector-icons/ionicons";
+import colors from "../components/colors";
 
 const calendarTheme = {
   backgroundColor: '#ffffff',
@@ -133,7 +134,7 @@ export default function GroupCreationForm() {
             {presetAmounts.map((amount) => (<TouchableOpacity key={amount} onPress={() => handlePresetAmount(amount)} style={[styles.presetButton, form.contributionAmount === amount.toString() && styles.presetSelected]}><Text style={[styles.presetButtonText, form.contributionAmount === amount.toString() && styles.presetSelectedText]}>{amount}</Text></TouchableOpacity>))}
         </View>
         <View style={styles.amountContainer}>
-            <Slider style={styles.slider} minimumValue={0} maximumValue={50000} step={100} value={parseInt(form.contributionAmount, 10) || 0} onValueChange={handleAmountChange} minimumTrackTintColor="#83f5cc" maximumTrackTintColor="#ddd" thumbTintColor="#62b59a" />
+            <Slider style={styles.slider} minimumValue={0} maximumValue={50000} step={100} value={parseInt(form.contributionAmount, 10) || 0} onValueChange={handleAmountChange} minimumTrackTintColor={colors.pastelGreen} maximumTrackTintColor="#ddd" thumbTintColor="#62b59a" />
             <View style={styles.amountInput}><CustomInput label="" placeholder="Amount" value={form.contributionAmount} onChangeText={(val) => handleChange("contributionAmount", val)} keyboardType="numeric" icon="cash" /></View>
         </View>
         
@@ -164,19 +165,19 @@ export default function GroupCreationForm() {
 
 const styles = StyleSheet.create({
   container: { flexGrow: 1, padding: 20, backgroundColor: "#f5f6fa" },
-  titleContainer: { backgroundColor: "#83f5cc", paddingHorizontal: 18, paddingVertical: 2, borderRadius: 15, alignSelf: "flex-start", marginBottom: 30 },
+  titleContainer: {  paddingVertical: 2, borderRadius: 15, alignSelf: "flex-start", marginBottom: 30 },
   title: { fontSize: 22, fontWeight: "bold", color: "#333" },
   label: { fontSize: 14, fontWeight: "600", marginBottom: 10, color: "#444" },
   toggleContainer: { flexDirection: "row", gap: 10, marginBottom: 15 },
   toggleButton: { flex: 1, paddingVertical: 12, borderWidth: 1, borderColor: "#ddd", borderRadius: 12, alignItems: "center", backgroundColor: "#fff" },
-  selectedButton: { backgroundColor: "#83f5cc", borderColor: "#62b59a" },
+  selectedButton: { backgroundColor: colors.pastelGreen, borderColor: "#62b59a" },
   toggleButtonText: { color: "#444", fontWeight: "600" },
   selectedButtonText: { color: "#333" },
   participantsRow: { flexDirection: "row", justifyContent: "space-between", alignItems: 'flex-start', marginBottom: 10 },
   participantInput: { flex: 0.48 },
   presetContainer: { flexDirection: 'row', justifyContent: 'flex-start', gap: 10, marginBottom: 10 },
   presetButton: { paddingVertical: 8, paddingHorizontal: 15, backgroundColor: '#ddd', borderRadius: 20 },
-  presetSelected: { backgroundColor: '#83f5cc' },
+  presetSelected: { backgroundColor: colors.pastelGreen, },
   presetButtonText: { color: '#555', fontWeight: '600' },
   presetSelectedText: { color: '#333' },
   amountContainer: { flexDirection: 'row', alignItems: 'center', marginBottom: 15, },
@@ -184,7 +185,7 @@ const styles = StyleSheet.create({
   amountInput: { width: 120, marginLeft: 10 },
   cycleTypeContainer: { flexDirection: 'row', flexWrap: 'wrap', gap: 10, marginBottom: 20 },
   cycleTypeButton: { paddingVertical: 10, paddingHorizontal: 15, backgroundColor: '#fff', borderWidth: 1, borderColor: '#ddd', borderRadius: 20, elevation: 1 },
-  cycleTypeSelected: { backgroundColor: '#83f5cc', borderColor: '#62b59a' },
+  cycleTypeSelected: { backgroundColor: colors.pastelGreen, borderColor: '#62b59a' },
   cycleTypeButtonText: { color: '#444', fontWeight: '600', textTransform: 'capitalize' },
   cycleTypeSelectedText: { color: '#333' },
   datePickerButton: { flexDirection: 'row', alignItems: 'center', backgroundColor: '#fff', borderWidth: 1, borderColor: '#ddd', borderRadius: 12, paddingVertical: 15, paddingHorizontal: 15, marginBottom: 5, },