matiru

  1import { StyleSheet, Dimensions, StatusBar } from "react-native";
  2
  3const { width, height } = Dimensions.get("window");
  4
  5export const colors = {
  6  darkGreen: "#184B2C",
  7  midGreen: "#8FBF6F",
  8  cream: "#F3F7EE",
  9  lightGreen: "#DCEFCF",
 10  accent: "#BEE7A9",
 11  danger: "#C04A4A",
 12  gray: "#444",
 13};
 14
 15export default StyleSheet.create({
 16  container: {
 17    flex: 1,
 18    backgroundColor: colors.cream,
 19    padding: 16,
 20    paddingTop: StatusBar.currentHeight || 0,
 21  },
 22  bg: {
 23    flex: 1,
 24    width,
 25    height,
 26    resizeMode: "cover",
 27  },
 28  overlay: {
 29    flexGrow: 1,
 30    padding: 20,
 31    backgroundColor: "rgba(0,0,0,0.5)",
 32  },
 33  topContent: {
 34    alignItems: "center",
 35    flex: 1,
 36    justifyContent: "center",
 37  },
 38  bottomContent: {
 39    alignItems: "center",
 40    marginBottom: 10,
 41  },
 42  welcome: {
 43    color: "white",
 44    fontSize: 30,
 45    fontWeight: "bold",
 46    marginBottom: 10,
 47    textAlign: "center",
 48  },
 49  subtitle: {
 50    color: colors.accent,
 51    fontSize: 20,
 52    marginBottom: 20,
 53    textAlign: "center",
 54  },
 55  brand: {
 56    color: colors.accent,
 57    fontSize: 40,
 58    fontWeight: "bold",
 59    textAlign: "center",
 60  },
 61  title: {
 62    fontSize: 24,
 63    fontWeight: "bold",
 64    color: colors.darkGreen,
 65    marginBottom: 16,
 66    textAlign: "center",
 67  },
 68  bigButton: {
 69    flexDirection: "row",
 70    alignItems: "center",
 71    backgroundColor: colors.darkGreen,
 72    paddingVertical: 18,
 73    paddingHorizontal: 24,
 74    borderRadius: 16,
 75    marginVertical: 10,
 76    width: "85%",
 77    justifyContent: "center",
 78    shadowColor: "#000",
 79    shadowOpacity: 0.2,
 80    shadowOffset: { width: 0, height: 3 },
 81    shadowRadius: 5,
 82    elevation: 4,
 83  },
 84  bigButtonText: {
 85    color: "white",
 86    fontSize: 20,
 87    fontWeight: "600",
 88    marginLeft: 10,
 89  },
 90  actionGrid: {
 91    flexDirection: "row",
 92    flexWrap: "wrap",
 93    justifyContent: "center",
 94    marginTop: 10,
 95  },
 96  actionButton: {
 97    flexDirection: "row",
 98    alignItems: "center",
 99    backgroundColor: colors.midGreen,
100    paddingVertical: 16,
101    paddingHorizontal: 20,
102    margin: 8,
103    borderRadius: 12,
104    flexBasis: "40%", // 2 per row
105    justifyContent: "center",
106    shadowColor: "#000",
107    shadowOpacity: 0.15,
108    shadowOffset: { width: 0, height: 2 },
109    shadowRadius: 3,
110    elevation: 2,
111  },
112  actionText: {
113    color: "white",
114    fontSize: 16,
115    fontWeight: "500",
116    marginLeft: 6,
117    textAlign: "center",
118  },
119  input: {
120    borderWidth: 1,
121    borderColor: colors.darkGreen,
122    borderRadius: 10,
123    padding: 12,
124    marginVertical: 6,
125    backgroundColor: "white",
126    fontSize: 16,
127  },
128  primaryButton: {
129    backgroundColor: colors.darkGreen,
130    paddingVertical: 16,
131    borderRadius: 14,
132    alignItems: "center",
133    marginVertical: 12,
134    shadowColor: "#000",
135    shadowOpacity: 0.2,
136    shadowOffset: { width: 0, height: 2 },
137    shadowRadius: 4,
138    elevation: 3,
139  },
140  buttonText: {
141    color: "white",
142    fontSize: 18,
143    fontWeight: "600",
144  },
145  secondaryButton: {
146    backgroundColor: colors.lightGreen,
147    borderWidth: 1,
148    borderColor: colors.midGreen,
149    paddingVertical: 12,
150    paddingHorizontal: 20,
151    borderRadius: 12,
152    alignItems: "center",
153    justifyContent: "center",
154    marginTop: 10,
155  },
156  secondaryButtonText: {
157    color: colors.midGreen,
158    fontWeight: "600",
159    fontSize: 16,
160  },
161});