fix: update imports to use Colors utility and adjust formatting in various components

Author: codeAbinash

.vscode/settings.json

@@ -46,7 +46,11 @@
     "ListFooterComponentClassName",
     "ListHeaderComponentClassName"
   ],
-  "tailwindCSS.classFunctions": ["useResolveClassNames"]
+  "tailwindCSS.classFunctions": ["useResolveClassNames"],
+  "editor.defaultFormatter": "biomejs.biome",
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  }
   // "editor.codeActionsOnSave": {
   //   "source.organizeImports": "always"
   // }

src/screens/Messages/Messages.tsx

@@ -13,7 +13,7 @@ const WS_URL = 'wss://harkirat.codeabinash.workers.dev/ws'
 
 export default function Messages({ navigation }: NavProp) {
   const [messages, setMessages] = useState<Message[]>(demoMessages)
-  const [input, setInput] = useState('')
+  const [input, setInput]   = useState('')
   const [connected, setConnected] = useState(false)
   const ws = useRef<WebSocket | null>(null)
   const flatListRef = useRef<FlatList>(null)

src/screens/Settings/UiAndComponents.tsx

@@ -26,7 +26,6 @@ import { Colors } from '@utils/colors'
 import type { NavProp } from '@utils/types'
 import React, { useEffect, useState } from 'react'
 import { Text, View } from 'react-native'
-import colors from 'tailwindcss/colors'
 
 export default function UiAndComponents({ navigation }: NavProp) {
   const [toggle1, setToggle1] = useState(true)
@@ -139,19 +138,19 @@ export default function UiAndComponents({ navigation }: NavProp) {
           <SettGroup title='Your favorite Programming Language'>
             <SettOption
               title='TypeScript'
-              Icon={<Typescript01Icon color={colors.blue[500]} size={35} />}
+              Icon={<Typescript01Icon color={Colors.blue[500]} size={35} />}
               onPress={() => setOption1('TypeScript')}
               Right={<Check checked={option1 === 'TypeScript'} />}
             />
             <SettOption
               title='JavaScript'
-              Icon={<JavaScriptIcon color={colors.yellow[500]} size={35} />}
+              Icon={<JavaScriptIcon color={Colors.yellow[500]} size={35} />}
               onPress={() => setOption1('JavaScript')}
               Right={<Check className='text-amber-500' checked={option1 === 'JavaScript'} />}
             />
             <SettOption
               title='C++'
-              Icon={<CpuIcon color={colors.blue[500]} size={35} />}
+              Icon={<CpuIcon color={Colors.blue[500]} size={35} />}
               onPress={() => setOption1('C++')}
               Right={<Check className='text-blue-500' checked={option1 === 'C++'} />}
             />

src/screens/index.tsx

@@ -1,15 +1,14 @@
 import { PaddingBottom } from '@components/SafePadding'
-import { HugeIconProps } from '@hugeicons/constants'
 import Home01Icon from '@hugeicons/Home01Icon'
 import Saturn01Icon from '@hugeicons/Saturn01Icon'
 import TestTube01Icon from '@hugeicons/TestTube01Icon'
 import Wallet02Icon from '@hugeicons/Wallet02Icon'
-import { createBottomTabNavigator, type BottomTabBarProps } from '@react-navigation/bottom-tabs'
+import { HugeIconProps } from '@hugeicons/constants'
+import { type BottomTabBarProps, createBottomTabNavigator } from '@react-navigation/bottom-tabs'
 import { Colors } from '@utils/colors'
 import { SemiBold } from '@utils/fonts'
 import React, { type ReactNode } from 'react'
-import { TouchableOpacity, View, useColorScheme, type ColorSchemeName } from 'react-native'
-import colors from 'tailwindcss/colors'
+import { type ColorSchemeName, TouchableOpacity, View, useColorScheme } from 'react-native'
 import HomeScreen from './Home/HomeScreen'
 import TyrItOut from './Try/TyrItOut'
 import ComingSoon from './UnderConstruction'
@@ -91,7 +90,7 @@ export function getFocusedColor(theme: ColorSchemeName) {
 }
 
 export function getColor(theme: ColorSchemeName) {
-  return theme === 'dark' ? colors.zinc[400] : colors.zinc[600]
+  return theme === 'dark' ? Colors.zinc[400] : Colors.zinc[600]
 }
 
 const screens = [