refactor: add colors and icons object

purrseus · purrseus · commit 7c8db9828937 · 2024-12-22T21:01:55.000+07:00
diff --git a/src/assets/icons/code.png b/src/assets/icons/code.png
diff --git a/src/assets/icons/delete.png b/src/assets/icons/delete.png
diff --git a/src/assets/icons/hide.png b/src/assets/icons/hide.png
diff --git a/src/assets/icons/move.png b/src/assets/icons/move.png
diff --git a/src/assets/icons/record.png b/src/assets/icons/record.png
diff --git a/src/colors.ts b/src/colors.ts
@@ -0,0 +1,8 @@
+const colors = Object.freeze({
+  black: '#000000',
+  red: '#ef4444',
+  gray: '#888888',
+  lightGray: '#AAAAAA',
+});
+
+export default colors;
diff --git a/src/icons.ts b/src/icons.ts
@@ -0,0 +1,9 @@
+const icons = Object.freeze({
+  code: require('./assets/icons/code.png'),
+  delete: require('./assets/icons/delete.png'),
+  hide: require('./assets/icons/hide.png'),
+  move: require('./assets/icons/move.png'),
+  record: require('./assets/icons/record.png'),
+});
+
+export default icons;
diff --git a/src/ui/Xenon.tsx b/src/ui/Xenon.tsx
@@ -5,6 +5,7 @@ import MainContext, { type MainContextValue } from '../contexts/MainContext';
 import { useConsoleInterceptor, useNetworkInterceptor } from '../hooks';
 import { DebuggerPanel, type DebuggerPosition, type DebuggerVisibility } from '../types';
 import { Bubble, ConsolePanel, DebuggerHeader, DetailsViewer, NetworkPanel } from './components';
+import colors from '../colors';
 
 interface XenonComponentMethods {
   show(): void;
@@ -127,7 +128,7 @@ const styles = StyleSheet.create({
     top: undefined,
     bottom: undefined,
     zIndex: 9999,
-    backgroundColor: '#AAAAAA',
+    backgroundColor: colors.lightGray,
   },
   bubbleBackdrop: {
     flex: 1,
diff --git a/src/ui/components/bubble/Bubble.tsx b/src/ui/components/bubble/Bubble.tsx
@@ -7,6 +7,8 @@ import {
   type PanResponderGestureState,
 } from 'react-native';
 import { MainContext } from '../../../contexts';
+import icons from '../../../icons';
+import colors from '../../../colors';
 
 interface BubbleProps {
   bubbleSize: number;
@@ -73,7 +75,7 @@ export default function Bubble({ bubbleSize, pan }: BubbleProps) {
       ]}
     >
       <Image
-        source={require('../../../assets/code.png')}
+        source={icons.code}
         style={{
           width: bubbleSize * 0.75,
           height: bubbleSize * 0.75,
@@ -85,7 +87,7 @@ export default function Bubble({ bubbleSize, pan }: BubbleProps) {
 
 const styles = StyleSheet.create({
   bubble: {
-    backgroundColor: '#AAAAAA',
+    backgroundColor: colors.lightGray,
     position: 'absolute',
     justifyContent: 'center',
     alignItems: 'center',
diff --git a/src/ui/components/details/LogMessageDetails.tsx b/src/ui/components/details/LogMessageDetails.tsx
@@ -1,6 +1,7 @@
 import { ScrollView, StyleSheet, Text } from 'react-native';
 import type { LogMessage } from '../../../types';
 import { formatLogMessage } from '../../../utils';
+import colors from '../../../colors';
 
 interface LogMessageDetailsProps {
   item: LogMessage;
@@ -21,6 +22,6 @@ const styles = StyleSheet.create({
   },
   divider: {
     height: 1,
-    backgroundColor: '#888888',
+    backgroundColor: colors.gray,
   },
 });
diff --git a/src/ui/components/details/NetworkRequestDetails.tsx b/src/ui/components/details/NetworkRequestDetails.tsx
@@ -16,6 +16,7 @@ import {
 } from '../../../utils';
 import NetworkDetailsHeader from '../headers/NetworkRequestDetailsHeader';
 import NetworkRequestDetailsItem from '../items/NetworkRequestDetailsItem';
+import colors from '../../../colors';
 
 interface NetworkRequestDetailsProps {
   item: HttpRequest | WebSocketRequest;
@@ -133,15 +134,15 @@ const styles = StyleSheet.create({
   },
   divider: {
     height: 1,
-    backgroundColor: '#888888',
+    backgroundColor: colors.gray,
   },
   text: {
     fontSize: 14,
-    color: '#000000',
+    color: colors.black,
   },
   label: {
     fontSize: 14,
     fontWeight: 'bold',
-    color: '#000000',
+    color: colors.black,
   },
 });
diff --git a/src/ui/components/headers/DebuggerHeader.tsx b/src/ui/components/headers/DebuggerHeader.tsx
@@ -3,6 +3,8 @@ import { ScrollView, StyleSheet, View } from 'react-native';
 import { MainContext } from '../../../contexts';
 import { DebuggerPanel } from '../../../types';
 import DebuggerHeaderItem from '../items/DebuggerHeaderItem';
+import icons from '../../../icons';
+import colors from '../../../colors';
 
 export default function DebuggerHeader() {
   const {
@@ -49,12 +51,9 @@ export default function DebuggerHeader() {
       contentContainerStyle={styles.contentContainer}
       showsHorizontalScrollIndicator={false}
     >
-      <DebuggerHeaderItem onPress={hideDebugger} content={require('../../../assets/hide.png')} />
+      <DebuggerHeaderItem onPress={hideDebugger} content={icons.hide} />
 
-      <DebuggerHeaderItem
-        onPress={toggleDebuggerPosition}
-        content={require('../../../assets/move.png')}
-      />
+      <DebuggerHeaderItem onPress={toggleDebuggerPosition} content={icons.move} />
 
       <DebuggerHeaderItem
         isLabel
@@ -66,12 +65,12 @@ export default function DebuggerHeader() {
       <DebuggerHeaderItem
         onPress={toggleNetworkInterception}
         isActive={networkInterceptor.isInterceptorEnabled}
-        content={require('../../../assets/record.png')}
+        content={icons.record}
       />
 
       <DebuggerHeaderItem
         onPress={networkInterceptor.clearAllNetworkRequests}
-        content={require('../../../assets/delete.png')}
+        content={icons.delete}
       />
 
       <View style={styles.divider} />
@@ -86,13 +85,10 @@ export default function DebuggerHeader() {
       <DebuggerHeaderItem
         onPress={toggleLogInterception}
         isActive={logInterceptor.isInterceptorEnabled}
-        content={require('../../../assets/record.png')}
+        content={icons.record}
       />
 
-      <DebuggerHeaderItem
-        onPress={logInterceptor.clearAllLogMessages}
-        content={require('../../../assets/delete.png')}
-      />
+      <DebuggerHeaderItem onPress={logInterceptor.clearAllLogMessages} content={icons.delete} />
     </ScrollView>
   );
 }
@@ -107,6 +103,6 @@ const styles = StyleSheet.create({
   },
   divider: {
     width: 1,
-    backgroundColor: '#888888',
+    backgroundColor: colors.gray,
   },
 });
diff --git a/src/ui/components/headers/NetworkPanelHeader.tsx b/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 (
@@ -41,7 +42,7 @@ const styles = StyleSheet.create({
     flex: 1,
     flexDirection: 'row',
     alignItems: 'center',
-    backgroundColor: '#888888',
+    backgroundColor: colors.gray,
     borderRadius: 4,
   },
   headerNameColumn: {
@@ -59,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,
   },
 });
diff --git a/src/ui/components/items/ConsolePanelItem.tsx b/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,
   },
 });
diff --git a/src/ui/components/items/DebuggerHeaderItem.tsx b/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;
@@ -42,7 +43,7 @@ const styles = StyleSheet.create({
     paddingVertical: 4,
     paddingHorizontal: 8,
     borderRadius: 4,
-    backgroundColor: '#888888',
+    backgroundColor: colors.gray,
     borderWidth: 1,
     borderColor: 'transparent',
   },
@@ -52,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,
diff --git a/src/ui/components/items/NetworkPanelItem.tsx b/src/ui/components/items/NetworkPanelItem.tsx
@@ -7,6 +7,7 @@ import {
   formatRequestMethod,
   formatRequestStatusCode,
 } from '../../../utils';
+import colors from '../../../colors';
 
 interface NetworkPanelItemProps {
   method?: HttpRequest['method'];
@@ -84,7 +85,7 @@ const styles = StyleSheet.create({
     paddingRight: 0,
   },
   text: {
-    color: '#000000',
+    color: colors.black,
     fontSize: 14,
   },
 });
diff --git a/src/ui/components/items/NetworkRequestDetailsHeaderItem.tsx b/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,
   },
 });
diff --git a/src/ui/components/items/NetworkRequestDetailsItem.tsx b/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,
   },
 });
diff --git a/src/ui/components/panels/ConsolePanel.tsx b/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,
   },
 });
diff --git a/src/ui/components/panels/NetworkPanel.tsx b/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,
   },
 });
