Develop

README.md

@@ -43,8 +43,6 @@ yarn add react-native-safe-area-context react-native-screens
 
 `react-native-screens` package requires one additional configuration step to properly work on Android devices. Edit `MainActivity.kt` file which is located under `android/app/src/main/java/<your package name>/`.
 
-Add the highlighted code to the body of `MainActivity` class:
-
 ```diff
 + import android.os.Bundle
 // ...
@@ -105,7 +103,7 @@ Xenon.hide();
 ```
 
 > [!WARNING]
-> `<Xenon.Component />` is enabled by default in all environments, **including production**. This could expose sensitive debugging tools to end users, creating potential security risks.
+> `<Xenon.Component />` is enabled by default in all environments, **including production**. This could expose sensitive tools to end users, creating potential security risks.
 > To avoid this, make sure to conditionally render the component only in non-production environments. For example:
 >
 > ```tsx

src/theme/colors.ts

@@ -1,9 +1,9 @@
 const colors = Object.freeze({
-  black: '#000000',
-  red: '#ef4444',
-  green: '#22c55e',
-  gray: '#888888',
-  lightGray: '#AAAAAA',
+  black: '#0a0a0a',
+  red: '#ff6467',
+  green: '#05df72',
+  gray: '#a1a1a1',
+  lightGray: '#e5e5e5',
 });
 
 export default colors;

src/ui/Xenon.tsx

@@ -32,10 +32,13 @@ namespace Xenon {
     container: {
       flex: 1,
       ...StyleSheet.absoluteFillObject,
+      pointerEvents: 'box-none',
       top: undefined,
       bottom: undefined,
-      zIndex: 9999,
+      ...(Platform.OS === 'android' ? { zIndex: 9999 } : {}),
       backgroundColor: colors.lightGray,
+      borderBottomColor: colors.gray,
+      borderBottomWidth: StyleSheet.hairlineWidth,
     },
     safeArea: {
       flex: 1,

src/ui/components/details/LogMessageDetails.tsx

@@ -21,7 +21,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 8,
   },
   divider: {
-    height: 1,
+    height: StyleSheet.hairlineWidth,
     backgroundColor: colors.gray,
   },
 });

src/ui/components/details/NetworkRequestDetails.tsx

@@ -157,7 +157,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 8,
   },
   divider: {
-    height: 1,
+    height: StyleSheet.hairlineWidth,
     backgroundColor: colors.gray,
   },
   text: {

src/ui/components/headers/DebuggerHeader.tsx

@@ -240,13 +240,17 @@ export default function DebuggerHeader() {
 const styles = StyleSheet.create({
   container: {
     flexGrow: 0,
+    borderTopColor: colors.gray,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: colors.gray,
+    borderBottomWidth: StyleSheet.hairlineWidth,
   },
   contentContainer: {
     padding: 8,
     columnGap: 8,
   },
   divider: {
-    width: 1,
+    width: StyleSheet.hairlineWidth,
     backgroundColor: colors.gray,
   },
 });

src/ui/components/items/DebuggerHeaderItem.tsx

@@ -61,12 +61,13 @@ const styles = StyleSheet.create({
   },
   title: {
     fontSize: 14,
-    lineHeight: 17,
-    fontWeight: '500',
+    lineHeight: 18,
+    fontWeight: '600',
     color: colors.black,
   },
   icon: {
-    width: 17,
-    height: 17,
+    width: 18,
+    height: 18,
+    tintColor: colors.black,
   },
 });

src/ui/components/panels/ConsolePanel.tsx

@@ -51,7 +51,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 8,
   },
   divider: {
-    height: 1,
+    height: StyleSheet.hairlineWidth,
     backgroundColor: colors.gray,
   },
 });

src/ui/components/panels/NetworkPanel.tsx

@@ -9,7 +9,6 @@ import {
   type ID,
   type WebSocketRequest,
 } from '../../../types';
-import NetworkPanelHeader from '../headers/NetworkPanelHeader';
 import NetworkPanelItem from '../items/NetworkPanelItem';
 
 const Separator = () => <View style={styles.divider} />;
@@ -46,17 +45,14 @@ export default function NetworkPanel() {
   );
 
   return (
-    <>
-      <NetworkPanelHeader />
-      <FlatList
-        inverted
-        data={data}
-        renderItem={renderItem}
-        keyExtractor={([key]) => key}
-        ItemSeparatorComponent={Separator}
-        style={styles.container}
-      />
-    </>
+    <FlatList
+      inverted
+      data={data}
+      renderItem={renderItem}
+      keyExtractor={([key]) => key}
+      ItemSeparatorComponent={Separator}
+      style={styles.container}
+    />
   );
 }
 
@@ -66,7 +62,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 8,
   },
   divider: {
-    height: 1,
+    height: StyleSheet.hairlineWidth,
     backgroundColor: colors.gray,
   },
 });