From 1eacf5efc36e00353a5bb6065f2175335ef5353b Mon Sep 17 00:00:00 2001
From: tsyirvo <gabriel.hofman.00@gmail.com>
Date: Wed, 7 Jan 2026 08:33:16 +0100
Subject: [PATCH] feat: update some styling config

---
 src/app/_layout.tsx                                   |  5 +++--
 .../components/navigation/components/HeaderLeft.tsx   |  2 +-
 .../components/navigation/components/TabBarIcon.tsx   |  2 +-
 src/shared/icons/Icon.tsx                             | 11 +++--------
 src/shared/icons/components/Apps.tsx                  |  4 ++--
 src/shared/icons/components/Envelope.tsx              |  4 ++--
 src/shared/icons/components/Home.tsx                  |  4 ++--
 src/shared/icons/components/Key.tsx                   |  4 ++--
 src/shared/icons/components/LeftArrow.tsx             |  4 ++--
 src/shared/icons/components/User.tsx                  |  4 ++--
 src/shared/uiKit/button/components/InnerIcon.tsx      |  2 +-
 src/shared/uiKit/input/Input.tsx                      |  2 +-
 12 files changed, 22 insertions(+), 26 deletions(-)

diff --git a/src/app/_layout.tsx b/src/app/_layout.tsx
index 396a8d94..85814d8a 100644
--- a/src/app/_layout.tsx
+++ b/src/app/_layout.tsx
@@ -13,6 +13,7 @@ import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { KeyboardProvider } from 'react-native-keyboard-controller';
 import { StackAnimationTypes } from 'react-native-screens';
 import Toast from 'react-native-toast-message';
+import { StyleSheet } from 'react-native-unistyles';
 
 import { config } from '$domain/constants';
 import { AuthContextProvider } from '$domain/contexts';
@@ -122,11 +123,11 @@ const screenOptions = {
   animation: 'fade' as StackAnimationTypes,
 };
 
-const styles = {
+const styles = StyleSheet.create({
   wrapper: {
     flex: 1,
   },
-};
+});
 
 const RootLayoutWithSentry = Sentry.wrap(RootLayout);
 
diff --git a/src/shared/components/navigation/components/HeaderLeft.tsx b/src/shared/components/navigation/components/HeaderLeft.tsx
index 9ae66441..a17431af 100644
--- a/src/shared/components/navigation/components/HeaderLeft.tsx
+++ b/src/shared/components/navigation/components/HeaderLeft.tsx
@@ -16,7 +16,7 @@ export const HeaderLeft = () => {
         name="LeftArrow"
         width={DEFAULT_ICON_SIZE}
         height={DEFAULT_ICON_SIZE}
-        color={theme.colors.content_primary}
+        fill={theme.colors.content_primary}
       />
     </Pressable>
   );
diff --git a/src/shared/components/navigation/components/TabBarIcon.tsx b/src/shared/components/navigation/components/TabBarIcon.tsx
index 4b29fabe..f7757744 100644
--- a/src/shared/components/navigation/components/TabBarIcon.tsx
+++ b/src/shared/components/navigation/components/TabBarIcon.tsx
@@ -22,7 +22,7 @@ export const TabBarIcon = ({
       name={iconName}
       width={DEFAULT_ICON_SIZE}
       height={DEFAULT_ICON_SIZE}
-      color={
+      fill={
         isFocused ? theme.colors.core_primary : theme.colors.content_secondary
       }
       testID={testID}
diff --git a/src/shared/icons/Icon.tsx b/src/shared/icons/Icon.tsx
index cb6d66ba..fe5060e7 100644
--- a/src/shared/icons/Icon.tsx
+++ b/src/shared/icons/Icon.tsx
@@ -4,7 +4,7 @@ type Name = keyof typeof AllIcons;
 
 interface IconProps {
   name: Name;
-  color?: string;
+  fill?: string;
   width?: number;
   height?: number;
   testID?: string;
@@ -12,7 +12,7 @@ interface IconProps {
 
 export const Icon = ({
   name,
-  color,
+  fill,
   width,
   height,
   testID = 'Icon',
@@ -20,11 +20,6 @@ export const Icon = ({
   const IconComponent = AllIcons[name];
 
   return (
-    <IconComponent
-      color={color}
-      width={width}
-      height={height}
-      testID={testID}
-    />
+    <IconComponent fill={fill} width={width} height={height} testID={testID} />
   );
 };
diff --git a/src/shared/icons/components/Apps.tsx b/src/shared/icons/components/Apps.tsx
index 6298c170..b618b7b1 100644
--- a/src/shared/icons/components/Apps.tsx
+++ b/src/shared/icons/components/Apps.tsx
@@ -2,12 +2,12 @@ import type { SvgProps } from 'react-native-svg';
 import Svg, { Path } from 'react-native-svg';
 
 /* eslint-disable react/jsx-props-no-spreading */
-const Apps = ({ color = '#0C0D0F', ...props }: SvgProps) => {
+const Apps = ({ fill = '#0C0D0F', ...props }: SvgProps) => {
   return (
     <Svg viewBox="0 0 24 24" {...props}>
       <Path
         d="M7 0H4a4 4 0 0 0-4 4v3a4 4 0 0 0 4 4h3a4 4 0 0 0 4-4V4a4 4 0 0 0-4-4Zm2 7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2ZM20 0h-3a4 4 0 0 0-4 4v3a4 4 0 0 0 4 4h3a4 4 0 0 0 4-4V4a4 4 0 0 0-4-4Zm2 7a2 2 0 0 1-2 2h-3a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2ZM7 13H4a4 4 0 0 0-4 4v3a4 4 0 0 0 4 4h3a4 4 0 0 0 4-4v-3a4 4 0 0 0-4-4Zm2 7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2ZM20 13h-3a4 4 0 0 0-4 4v3a4 4 0 0 0 4 4h3a4 4 0 0 0 4-4v-3a4 4 0 0 0-4-4Zm2 7a2 2 0 0 1-2 2h-3a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2Z"
-        fill={color}
+        fill={fill}
       />
     </Svg>
   );
diff --git a/src/shared/icons/components/Envelope.tsx b/src/shared/icons/components/Envelope.tsx
index 0051d12d..ed606b27 100644
--- a/src/shared/icons/components/Envelope.tsx
+++ b/src/shared/icons/components/Envelope.tsx
@@ -2,12 +2,12 @@ import type { SvgProps } from 'react-native-svg';
 import Svg, { Path } from 'react-native-svg';
 
 /* eslint-disable react/jsx-props-no-spreading */
-const Envelope = ({ color = '#0C0D0F', ...props }: SvgProps) => {
+const Envelope = ({ fill = '#0C0D0F', ...props }: SvgProps) => {
   return (
     <Svg viewBox="0 0 24 24" {...props}>
       <Path
         d="M19 1H5a5.006 5.006 0 0 0-5 5v12a5.006 5.006 0 0 0 5 5h14a5.006 5.006 0 0 0 5-5V6a5.006 5.006 0 0 0-5-5ZM5 3h14a3 3 0 0 1 2.78 1.887l-7.658 7.659a3.007 3.007 0 0 1-4.244 0L2.22 4.887A3 3 0 0 1 5 3Zm14 18H5a3 3 0 0 1-3-3V7.5l6.464 6.46a5.007 5.007 0 0 0 7.072 0L22 7.5V18a3 3 0 0 1-3 3Z"
-        fill={color}
+        fill={fill}
       />
     </Svg>
   );
diff --git a/src/shared/icons/components/Home.tsx b/src/shared/icons/components/Home.tsx
index 30c77af1..8c50933d 100644
--- a/src/shared/icons/components/Home.tsx
+++ b/src/shared/icons/components/Home.tsx
@@ -2,12 +2,12 @@ import type { SvgProps } from 'react-native-svg';
 import Svg, { Path } from 'react-native-svg';
 
 /* eslint-disable react/jsx-props-no-spreading */
-const Home = ({ color = '#0C0D0F', ...props }: SvgProps) => {
+const Home = ({ fill = '#0C0D0F', ...props }: SvgProps) => {
   return (
     <Svg viewBox="0 0 24 24" {...props}>
       <Path
         d="m23.121 9.069-7.585-7.586a5.008 5.008 0 0 0-7.072 0L.879 9.069A2.978 2.978 0 0 0 0 11.19v9.817a3 3 0 0 0 3 3h18a3 3 0 0 0 3-3V11.19a2.978 2.978 0 0 0-.879-2.121ZM15 22.007H9v-3.934a3 3 0 0 1 6 0Zm7-1a1 1 0 0 1-1 1h-4v-3.934a5 5 0 0 0-10 0v3.934H3a1 1 0 0 1-1-1V11.19a1.008 1.008 0 0 1 .293-.707L9.878 2.9a3.008 3.008 0 0 1 4.244 0l7.585 7.586a1.008 1.008 0 0 1 .293.704Z"
-        fill={color}
+        fill={fill}
       />
     </Svg>
   );
diff --git a/src/shared/icons/components/Key.tsx b/src/shared/icons/components/Key.tsx
index d1e0f225..a16186cc 100644
--- a/src/shared/icons/components/Key.tsx
+++ b/src/shared/icons/components/Key.tsx
@@ -2,12 +2,12 @@ import type { SvgProps } from 'react-native-svg';
 import Svg, { Path } from 'react-native-svg';
 
 /* eslint-disable react/jsx-props-no-spreading */
-const Key = ({ color = '#0C0D0F', ...props }: SvgProps) => {
+const Key = ({ fill = '#0C0D0F', ...props }: SvgProps) => {
   return (
     <Svg data-name="Layer 1" viewBox="0 0 24 24" {...props}>
       <Path
         d="M7.505 24A7.5 7.5 0 0 1 5.469 9.283a7.368 7.368 0 0 1 3.881-.048l7.908-7.906A4.5 4.5 0 0 1 20.464 0 3.539 3.539 0 0 1 24 3.536a4.508 4.508 0 0 1-1.328 3.207L22 7.415A2.014 2.014 0 0 1 20.586 8H19v1a2 2 0 0 1-2 2h-1v1.586A1.986 1.986 0 0 1 15.414 14l-.65.65a7.334 7.334 0 0 1-.047 3.88 7.529 7.529 0 0 1-6.428 5.429 7.654 7.654 0 0 1-.784.041Zm0-13a5.5 5.5 0 1 0 5.289 6.99 5.4 5.4 0 0 0-.1-3.3 1 1 0 0 1 .238-1.035L14 12.586V11a2 2 0 0 1 2-2h1V8a2 2 0 0 1 2-2h1.586l.672-.672A2.519 2.519 0 0 0 22 3.536 1.537 1.537 0 0 0 20.465 2a2.52 2.52 0 0 0-1.793.743l-8.331 8.33a1 1 0 0 1-1.036.237A5.462 5.462 0 0 0 7.5 11ZM5 18a1 1 0 1 0 1-1 1 1 0 0 0-1 1Z"
-        fill={color}
+        fill={fill}
       />
     </Svg>
   );
diff --git a/src/shared/icons/components/LeftArrow.tsx b/src/shared/icons/components/LeftArrow.tsx
index 8871b915..85291b55 100644
--- a/src/shared/icons/components/LeftArrow.tsx
+++ b/src/shared/icons/components/LeftArrow.tsx
@@ -2,12 +2,12 @@ import type { SvgProps } from 'react-native-svg';
 import Svg, { Path } from 'react-native-svg';
 
 /* eslint-disable react/jsx-props-no-spreading */
-const LeftArrow = ({ color = '#0C0D0F', ...props }: SvgProps) => {
+const LeftArrow = ({ fill = '#0C0D0F', ...props }: SvgProps) => {
   return (
     <Svg viewBox="0 0 24 24" {...props}>
       <Path
         d="M17.17 24a1 1 0 0 1-.71-.29l-8.17-8.17a5 5 0 0 1 0-7.08L16.46.29a1 1 0 1 1 1.42 1.42L9.71 9.88a3 3 0 0 0 0 4.24l8.17 8.17a1 1 0 0 1 0 1.42 1 1 0 0 1-.71.29Z"
-        fill={color}
+        fill={fill}
       />
     </Svg>
   );
diff --git a/src/shared/icons/components/User.tsx b/src/shared/icons/components/User.tsx
index c155cb4e..44fc05ff 100644
--- a/src/shared/icons/components/User.tsx
+++ b/src/shared/icons/components/User.tsx
@@ -2,12 +2,12 @@ import type { SvgProps } from 'react-native-svg';
 import Svg, { Path } from 'react-native-svg';
 
 /* eslint-disable react/jsx-props-no-spreading */
-const User = ({ color = '#0C0D0F', ...props }: SvgProps) => {
+const User = ({ fill = '#0C0D0F', ...props }: SvgProps) => {
   return (
     <Svg viewBox="0 0 24 24" {...props}>
       <Path
         d="M12 12a6 6 0 1 0-6-6 6.006 6.006 0 0 0 6 6Zm0-10a4 4 0 1 1-4 4 4 4 0 0 1 4-4ZM12 14a9.01 9.01 0 0 0-9 9 1 1 0 0 0 2 0 7 7 0 0 1 14 0 1 1 0 0 0 2 0 9.01 9.01 0 0 0-9-9Z"
-        fill={color}
+        fill={fill}
       />
     </Svg>
   );
diff --git a/src/shared/uiKit/button/components/InnerIcon.tsx b/src/shared/uiKit/button/components/InnerIcon.tsx
index f1beef28..78c24655 100644
--- a/src/shared/uiKit/button/components/InnerIcon.tsx
+++ b/src/shared/uiKit/button/components/InnerIcon.tsx
@@ -30,7 +30,7 @@ export const InnerIcon = ({
       name={iconName}
       height={iconSize}
       width={iconSize}
-      color={theme.colors[getTextColor(parentVariant)]}
+      fill={theme.colors[getTextColor(parentVariant)]}
       testID={testID}
     />
   );
diff --git a/src/shared/uiKit/input/Input.tsx b/src/shared/uiKit/input/Input.tsx
index dde267bc..4993e98f 100644
--- a/src/shared/uiKit/input/Input.tsx
+++ b/src/shared/uiKit/input/Input.tsx
@@ -62,7 +62,7 @@ export const Input = ({
           <View style={styles.iconContainer}>
             <Icon
               name={leftOrnamentIcon}
-              color={leftOrnamentIconColor}
+              fill={leftOrnamentIconColor}
               width={DEFAULT_ICON_SIZE}
               height={DEFAULT_ICON_SIZE}
             />