refactor: extract modal styles into a separate file and update Embedded component styles

Author: lposen

example/src/components/Embedded/Embedded.styles.ts

@@ -7,9 +7,13 @@ import {
   container,
   hr,
   input,
+  modalButton,
+  modalButtons,
+  modalContent,
+  modalOverlay,
   subtitle,
   title,
-  utilityColors,
+  utilityColors
 } from '../../constants';
 
 const styles = StyleSheet.create({
@@ -39,33 +43,10 @@ const styles = StyleSheet.create({
     marginBottom: 12,
     padding: 10,
   },
-  modalButton: {
-    flex: 1,
-  },
-  modalButtons: {
-    flexDirection: 'row',
-    gap: 12,
-    justifyContent: 'flex-end',
-  },
-  modalContent: {
-    backgroundColor: colors.backgroundPrimary,
-    borderRadius: 12,
-    maxHeight: '80%',
-    padding: 16,
-  },
-  // eslint-disable-next-line react-native/no-color-literals
-  modalOverlay: {
-    backgroundColor: 'rgba(0,0,0,0.5)',
-    flex: 1,
-    justifyContent: 'center',
-    padding: 20,
-  },
-  modalTitle: {
-    fontSize: 18,
-    fontWeight: '600',
-    marginBottom: 12,
-    textAlign: 'center',
-  },
+  modalButton,
+  modalButtons: modalButtons,
+  modalContent,
+  modalOverlay,
   subtitle: { ...subtitle, textAlign: 'center' },
   text: { textAlign: 'center' },
   textInput: input,

example/src/components/Embedded/Embedded.tsx

@@ -204,7 +204,6 @@ export const Embedded = () => {
       >
         <View style={styles.modalOverlay}>
           <View style={styles.modalContent}>
-            <Text style={styles.modalTitle}>View config (JSON)</Text>
             {configError ? (
               <Text style={styles.configError}>{configError}</Text>
             ) : null}

example/src/constants/styles/index.ts

@@ -2,5 +2,6 @@ export * from './colors';
 export * from './containers';
 export * from './formElements';
 export * from './miscElements';
+export * from './modal';
 export * from './shadows';
 export * from './typography';

example/src/constants/styles/modal.ts

@@ -0,0 +1,43 @@
+import type { TextStyle, ViewStyle } from "react-native";
+import { colors } from "./colors";
+
+export const modalTitle: TextStyle = {
+  fontSize: 18,
+  fontWeight: '600',
+  marginBottom: 12,
+  textAlign: 'center',
+};
+
+export const modalOverlay: ViewStyle = {
+  backgroundColor: 'rgba(0,0,0,0.5)',
+  flex: 1,
+  justifyContent: 'center',
+  padding: 20,
+};
+
+export const modalContent: ViewStyle = {
+  backgroundColor: colors.backgroundPrimary,
+  borderRadius: 12,
+  maxHeight: '80%',
+  padding: 16,
+};
+
+export const modalButtons: ViewStyle = {
+  flexDirection: 'row',
+  gap: 12,
+  justifyContent: 'flex-end',
+};
+
+export const modalButton: ViewStyle = {
+  flex: 1,
+};
+
+export const modalButtonText: TextStyle = {
+  color: colors.brandCyan,
+  fontSize: 14,
+  fontWeight: '600',
+};
+
+export const modalButtonTextSelected: TextStyle = {
+  color: colors.backgroundPrimary,
+};