feat: update color scheme and improve UI component styles

purrseus · Feb 23, 2025 · 9ed5c18 · 9ed5c18
1 parent 71a1a07
commit 9ed5c18
Show file tree

Hide file tree

Showing 10 changed files with 29 additions and 95 deletions.
diff --git a/src/assets/icons/delete.png b/src/assets/icons/delete.png
diff --git a/src/theme/colors.ts b/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;
diff --git a/src/ui/Xenon.tsx b/src/ui/Xenon.tsx
@@ -36,6 +36,8 @@ namespace Xenon {
       bottom: undefined,
       zIndex: 9999,
       backgroundColor: colors.lightGray,
+      borderBottomColor: colors.gray,
+      borderBottomWidth: StyleSheet.hairlineWidth,
     },
     safeArea: {
       flex: 1,

diff --git a/src/ui/components/details/LogMessageDetails.tsx b/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,
   },
 });
diff --git a/src/ui/components/details/NetworkRequestDetails.tsx b/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: {

diff --git a/src/ui/components/headers/DebuggerHeader.tsx b/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,
   },
 });
diff --git a/src/ui/components/headers/NetworkPanelHeader.tsx b/src/ui/components/headers/NetworkPanelHeader.tsx
diff --git a/src/ui/components/items/DebuggerHeaderItem.tsx b/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,
   },
 });
diff --git a/src/ui/components/panels/ConsolePanel.tsx b/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,
   },
 });
diff --git a/src/ui/components/panels/NetworkPanel.tsx b/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,
   },
 });