src/components/ModalEnroll/styles.ts - develop - GEOSHEV/Event-app

src/components/ModalEnroll/styles.ts
126 строк2 KB
Gosha
feat: enrollement child on lesson
19 май 2026, 20:28
19 май 2026, 20:282621df4
import { StyleSheet } from "react-native";

const COLORS = {
  background: "#F9EDD9",
  brown: "#7F4A30",
  brownLight: "#C1836C",
  peach: "#FBD197",
  white: "#FEFEFE",
  text: "#070706",
  textSecondary: "#C8BDB5",
  border: "#E5E5E5",
  error: "#F5665A",
};

export const styles = StyleSheet.create({
  background: {
    backgroundColor: COLORS.background,
  },
  handle: {
    backgroundColor: COLORS.textSecondary,
  },
  sheet: {
    paddingHorizontal: 20,
    paddingBottom: 36,
    paddingTop: 8,
  },

  title: {
    fontSize: 20,
    fontWeight: "700",
    color: COLORS.brown,
    marginBottom: 4,
  },
  subtitle: {
    fontSize: 14,
    color: COLORS.textSecondary,
    marginBottom: 20,
  },

  loader: {
    marginVertical: 24,
  },

  emptyText: {
    fontSize: 14,
    color: COLORS.textSecondary,
    textAlign: "center",
    marginVertical: 24,
  },

  childList: {
    gap: 10,
    marginBottom: 20,
  },
  childRow: {
    flexDirection: "row",
    alignItems: "center",
    gap: 12,
    backgroundColor: COLORS.white,
    borderRadius: 14,
    padding: 12,
    borderWidth: 1.5,
    borderColor: COLORS.border,
  },
  childRowActive: {
    borderColor: COLORS.brown,
    backgroundColor: "#FEF5EC",
  },

  childAvatar: {
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: COLORS.peach,
    alignItems: "center",
    justifyContent: "center",
  },
  childAvatarActive: {
    backgroundColor: COLORS.brownLight,
  },
  childAvatarText: {
    fontSize: 16,
    fontWeight: "700",
    color: COLORS.brown,
  },

  childName: {
    flex: 1,
    fontSize: 15,
    fontWeight: "600",
    color: COLORS.text,
  },
  childNameActive: {
    color: COLORS.brown,
  },

  checkCircle: {
    width: 22,
    height: 22,
    borderRadius: 11,
    borderWidth: 1.5,
    borderColor: COLORS.border,
    alignItems: "center",
    justifyContent: "center",
  },
  checkCircleActive: {
    backgroundColor: COLORS.brown,
    borderColor: COLORS.brown,
  },
  checkMark: {
    fontSize: 12,
    color: COLORS.white,
    fontWeight: "700",
  },

  errorText: {
    fontSize: 13,
    color: COLORS.error,
    textAlign: "center",
    marginBottom: 12,
  },

  buttons: {
    gap: 10,
  },
});