Merge pull request #17 from purrseus/develop

Develop

Author: purrseus

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/assets/icons/delete.png

@@ -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/theme/colors.ts

@@ -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/Xenon.tsx

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

src/ui/components/details/LogMessageDetails.tsx

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

src/ui/components/details/NetworkRequestDetails.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/headers/DebuggerHeader.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/headers/NetworkPanelHeader.tsx

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