react-native-xenon 0.2.0 → 0.2.1

package/src/ui/components/headers/NetworkPanelHeader.tsx

@@ -1,4 +1,5 @@
 import { StyleSheet, Text, View } from 'react-native';
+import colors from '../../../colors';
 
 export default function NetworkPanelHeader() {
   return (
@@ -11,7 +12,7 @@ export default function NetworkPanelHeader() {
 
       <View style={styles.divider} />
 
-      <View style={[styles.headerColumn, styles.headerMainColumn]}>
+      <View style={[styles.headerColumn, styles.headerNameColumn]}>
         <Text numberOfLines={1} style={styles.itemText}>
           Name
         </Text>
@@ -19,7 +20,7 @@ export default function NetworkPanelHeader() {
 
       <View style={styles.divider} />
 
-      <View style={styles.headerColumn}>
+      <View style={[styles.headerColumn, styles.headerDurationColumn]}>
         <Text numberOfLines={1} style={styles.itemText}>
           Duration
         </Text>
@@ -41,12 +42,14 @@ const styles = StyleSheet.create({
     flex: 1,
     flexDirection: 'row',
     alignItems: 'center',
-    backgroundColor: '#888888',
+    backgroundColor: colors.gray,
     borderRadius: 4,
   },
-  headerMainColumn: {
-    flex: 5.5,
-    flexShrink: 1,
+  headerNameColumn: {
+    flex: 5,
+  },
+  headerDurationColumn: {
+    flex: 2,
   },
   headerColumn: {
     flex: 1.5,
@@ -57,10 +60,10 @@ const styles = StyleSheet.create({
   divider: {
     height: 16,
     width: 1,
-    backgroundColor: '#888888',
+    backgroundColor: colors.gray,
   },
   itemText: {
     fontSize: 14,
-    color: '#000000',
+    color: colors.black,
   },
 });

package/src/ui/components/items/ConsolePanelItem.tsx

@@ -1,6 +1,7 @@
 import { StyleSheet, Text, TouchableOpacity } from 'react-native';
 import type { LogMessage } from '../../../types';
 import { formatLogMessage } from '../../../utils';
+import colors from '../../../colors';
 
 interface ConsolePanelItemProps extends LogMessage {
   onPress: () => void;
@@ -22,7 +23,7 @@ const styles = StyleSheet.create({
     padding: 8,
   },
   text: {
-    color: '#000000',
+    color: colors.black,
     fontSize: 14,
   },
 });

package/src/ui/components/items/DebuggerHeaderItem.tsx

@@ -1,4 +1,5 @@
 import { Image, StyleSheet, Text, TouchableOpacity, type ImageRequireSource } from 'react-native';
+import colors from '../../../colors';
 
 interface DebuggerHeaderItemProps {
   content?: ImageRequireSource | string;
@@ -7,26 +8,31 @@ interface DebuggerHeaderItemProps {
   onPress: () => void;
 }
 
-export default function DebuggerHeaderItem(props: DebuggerHeaderItemProps) {
+export default function DebuggerHeaderItem({
+  content,
+  isLabel,
+  isActive,
+  onPress,
+}: DebuggerHeaderItemProps) {
   return (
     <TouchableOpacity
-      onPress={props.onPress}
+      onPress={onPress}
       activeOpacity={0.8}
       style={[
         styles.container,
-        props.isLabel
-          ? props.isActive
+        isLabel
+          ? isActive
             ? styles.activeLabelContainer
             : styles.labelContainer
-          : props.isActive
+          : isActive
             ? styles.activeContainer
             : undefined,
       ]}
     >
-      {typeof props.content === 'string' ? (
-        <Text style={styles.title}>{props.content}</Text>
+      {typeof content === 'string' ? (
+        <Text style={styles.title}>{content}</Text>
       ) : (
-        <Image source={props.content} style={styles.icon} />
+        <Image source={content} style={styles.icon} />
       )}
     </TouchableOpacity>
   );
@@ -37,7 +43,7 @@ const styles = StyleSheet.create({
     paddingVertical: 4,
     paddingHorizontal: 8,
     borderRadius: 4,
-    backgroundColor: '#888888',
+    backgroundColor: colors.gray,
     borderWidth: 1,
     borderColor: 'transparent',
   },
@@ -47,16 +53,16 @@ const styles = StyleSheet.create({
   activeLabelContainer: {
     backgroundColor: 'transparent',
     borderWidth: 1,
-    borderColor: '#000000',
+    borderColor: colors.black,
   },
   activeContainer: {
-    backgroundColor: '#ef4444',
+    backgroundColor: colors.red,
   },
   title: {
     fontSize: 14,
     lineHeight: 17,
     fontWeight: '500',
-    color: '#000000',
+    color: colors.black,
   },
   icon: {
     width: 17,

package/src/ui/components/items/NetworkPanelItem.tsx

@@ -7,6 +7,7 @@ import {
   formatRequestMethod,
   formatRequestStatusCode,
 } from '../../../utils';
+import colors from '../../../colors';
 
 interface NetworkPanelItemProps {
   method?: HttpRequest['method'];
@@ -45,13 +46,13 @@ export default function NetworkPanelItem({
         </Text>
       </View>
 
-      <View style={[styles.column, styles.mainColumn]}>
+      <View style={[styles.column, styles.nameColumn]}>
         <Text numberOfLines={1} style={styles.text}>
           {requestName}
         </Text>
       </View>
 
-      <View style={styles.column}>
+      <View style={[styles.column, styles.durationColumn]}>
         <Text numberOfLines={1} style={styles.text}>
           {formatRequestDuration(duration)}
         </Text>
@@ -71,9 +72,11 @@ const styles = StyleSheet.create({
     flex: 1,
     flexDirection: 'row',
   },
-  mainColumn: {
-    flex: 5.5,
-    flexShrink: 1,
+  nameColumn: {
+    flex: 5,
+  },
+  durationColumn: {
+    flex: 2,
   },
   column: {
     flex: 1.5,
@@ -82,7 +85,7 @@ const styles = StyleSheet.create({
     paddingRight: 0,
   },
   text: {
-    color: '#000000',
+    color: colors.black,
     fontSize: 14,
   },
 });

package/src/ui/components/items/NetworkRequestDetailsHeaderItem.tsx

@@ -1,5 +1,6 @@
 import { StyleSheet, Text, TouchableOpacity } from 'react-native';
 import type { NetworkTab } from '../../../types';
+import colors from '../../../colors';
 
 interface NetworkRequestDetailsHeaderItemProps {
   visible: boolean;
@@ -43,10 +44,10 @@ const styles = StyleSheet.create({
   activeItem: {
     backgroundColor: 'transparent',
     borderWidth: 1,
-    borderColor: '#000000',
+    borderColor: colors.black,
   },
   itemText: {
     fontSize: 14,
-    color: '#000000',
+    color: colors.black,
   },
 });

package/src/ui/components/items/NetworkRequestDetailsItem.tsx

@@ -1,4 +1,5 @@
 import { StyleSheet, Text } from 'react-native';
+import colors from '../../../colors';
 
 interface NetworkRequestDetailsItemProps {
   label?: string;
@@ -33,11 +34,11 @@ export default function NetworkRequestDetailsItem({
 const styles = StyleSheet.create({
   text: {
     fontSize: 14,
-    color: '#000000',
+    color: colors.black,
   },
   label: {
     fontSize: 14,
     fontWeight: 'bold',
-    color: '#000000',
+    color: colors.black,
   },
 });

package/src/ui/components/panels/ConsolePanel.tsx

@@ -4,6 +4,7 @@ import { MainContext } from '../../../contexts';
 import { useScrollToBottom } from '../../../hooks';
 import type { LogMessage } from '../../../types';
 import ConsolePanelItem from '../items/ConsolePanelItem';
+import colors from '../../../colors';
 
 const Separator = () => <View style={styles.divider} />;
 
@@ -50,6 +51,6 @@ const styles = StyleSheet.create({
   },
   divider: {
     height: 1,
-    backgroundColor: '#888888',
+    backgroundColor: colors.gray,
   },
 });

package/src/ui/components/panels/NetworkPanel.tsx

@@ -5,6 +5,7 @@ import { useScrollToBottom } from '../../../hooks';
 import { NetworkType, type HttpRequest, type ID, type WebSocketRequest } from '../../../types';
 import NetworkPanelHeader from '../headers/NetworkPanelHeader';
 import NetworkPanelItem from '../items/NetworkPanelItem';
+import colors from '../../../colors';
 
 const Separator = () => <View style={styles.divider} />;
 
@@ -60,6 +61,6 @@ const styles = StyleSheet.create({
   },
   divider: {
     height: 1,
-    backgroundColor: '#888888',
+    backgroundColor: colors.gray,
   },
 });