feat: update some styling config

[tsyirvo]

Summary by CodeRabbit

• Refactor
  • Updated icon styling system across components for improved consistency
  • Enhanced layout component styling approach for better maintainability

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

This pull request systematically renames the color prop to fill across the icon component system, including the base Icon component, all SVG icon implementations, and their consumers throughout the codebase. Additionally, the layout component is refactored to use StyleSheet.create() for styling.

Changes

Cohort / File(s)	Summary
Icon System Props Rename (color → fill) src/shared/icons/Icon.tsx, src/shared/icons/components/{Apps.tsx, Envelope.tsx, Home.tsx, Key.tsx, LeftArrow.tsx, User.tsx}	Base Icon component and all SVG icon implementations updated to use fill prop instead of color. IconProps interface, component parameters, and JSX bindings all changed accordingly. Default color value of #0C0D0F preserved.
Icon Consumers Update src/shared/components/navigation/components/{HeaderLeft.tsx, TabBarIcon.tsx}, src/shared/uiKit/button/components/InnerIcon.tsx, src/shared/uiKit/input/Input.tsx	All consumer components updated to pass fill prop to Icon components instead of color. No logic changes; pure prop name updates.
Layout Styling Refactor src/app/_layout.tsx	Converts inline styles object to use StyleSheet.create() from react-native-unistyles. No behavioral changes to layout or control flow.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title check	❓ Inconclusive	The title 'update some styling config' is vague and does not clearly describe the actual changes, which involve renaming icon color props from 'color' to 'fill' across multiple components and adding StyleSheet usage.	Use a more specific title that describes the main change, such as 'refactor: rename icon color prop from color to fill' or 'refactor: standardize icon styling with fill prop'.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom Pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (3)

src/shared/uiKit/input/Input.tsx (1)

65-65: LGTM! Icon prop successfully migrated to fill.

The prop change aligns with the broader API migration from color to fill across icon components.

Consider renaming the prop leftOrnamentIconColor (line 22) to leftOrnamentIconFill for consistency with the new API terminology. This would improve code readability and maintain naming consistency across the codebase.

🔎 Optional refactor for naming consistency

-  leftOrnamentIconColor?: string;
+  leftOrnamentIconFill?: string;

And update the destructuring:

   leftOrnamentIcon,
-  leftOrnamentIconColor,
+  leftOrnamentIconFill,
   testID = 'Input',

And the usage:

         <Icon
           name={leftOrnamentIcon}
-          fill={leftOrnamentIconColor}
+          fill={leftOrnamentIconFill}
           width={DEFAULT_ICON_SIZE}

src/shared/uiKit/button/components/InnerIcon.tsx (1)

33-33: LGTM! Icon prop successfully migrated to fill.

The prop change correctly aligns with the API migration across icon components.

The utility function getTextColor (line 7) could be renamed to getFillColor or getIconColor for consistency with the new fill terminology. This is a minor naming improvement that would enhance code clarity, though the current implementation functions correctly.

src/shared/icons/components/LeftArrow.tsx (1)

5-5: Consider centralizing the default fill color.

The default fill color '#0C0D0F' is hardcoded across multiple icon components (User, LeftArrow, and likely others mentioned in the AI summary). Consider extracting this to a shared constant for easier maintenance and consistency.

Example centralized constant approach

Create a constants file (e.g., src/shared/icons/constants.ts):

export const DEFAULT_ICON_FILL = '#0C0D0F';

Then import and use it in icon components:

+import { DEFAULT_ICON_FILL } from '../constants';
+
-const LeftArrow = ({ fill = '#0C0D0F', ...props }: SvgProps) => {
+const LeftArrow = ({ fill = DEFAULT_ICON_FILL, ...props }: SvgProps) => {

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 5255b16 and 1eacf5e.

📒 Files selected for processing (12)

• src/app/_layout.tsx
• src/shared/components/navigation/components/HeaderLeft.tsx
• src/shared/components/navigation/components/TabBarIcon.tsx
• src/shared/icons/Icon.tsx
• src/shared/icons/components/Apps.tsx
• src/shared/icons/components/Envelope.tsx
• src/shared/icons/components/Home.tsx
• src/shared/icons/components/Key.tsx
• src/shared/icons/components/LeftArrow.tsx
• src/shared/icons/components/User.tsx
• src/shared/uiKit/button/components/InnerIcon.tsx
• src/shared/uiKit/input/Input.tsx

🧰 Additional context used

🧬 Code graph analysis (7)

src/shared/icons/components/Envelope.tsx (1)

src/shared/icons/components/index.ts (1)

• Envelope (2-2)

src/shared/icons/components/User.tsx (1)

src/shared/icons/components/index.ts (1)

• User (6-6)

src/shared/icons/components/Home.tsx (1)

src/shared/icons/components/index.ts (1)

• Home (3-3)

src/shared/icons/components/Apps.tsx (1)

src/shared/icons/components/index.ts (1)

• Apps (1-1)

src/shared/icons/components/Key.tsx (1)

src/shared/icons/components/index.ts (1)

• Key (4-4)

src/shared/uiKit/button/components/InnerIcon.tsx (1)

src/shared/uiKit/button/utils/buttonStyling.utils.ts (1)

• getTextColor (16-28)

src/shared/icons/components/LeftArrow.tsx (1)

src/shared/icons/components/index.ts (1)

• LeftArrow (5-5)

🔇 Additional comments (10)

src/shared/components/navigation/components/HeaderLeft.tsx (1)

19-19: LGTM! Icon prop successfully migrated to fill.

The change correctly updates the Icon component to use the new fill prop, maintaining the same color value from the theme.

src/shared/components/navigation/components/TabBarIcon.tsx (1)

25-27: LGTM! Icon prop successfully migrated to fill.

The change correctly updates the Icon component to use the new fill prop while preserving the conditional color logic based on focus state.

src/app/_layout.tsx (1)

16-16: LGTM! Excellent refactor to use StyleSheet.create().

This change follows React Native best practices by wrapping the styles object in StyleSheet.create(). This provides:

• Style validation at creation time
• Performance optimization through style object caching
• Better integration with the react-native-unistyles theming system

Also applies to: 126-130

src/shared/icons/components/Envelope.tsx (1)

5-5: LGTM! Semantic improvement with fill prop.

The rename from color to fill is semantically appropriate since SVG elements use the fill attribute natively. The implementation correctly updates both the parameter destructuring and the Path element binding.

Also applies to: 10-10

src/shared/icons/components/Key.tsx (1)

5-5: LGTM! Consistent with the icon API refactor.

The prop rename is implemented correctly and aligns with the systematic fill prop adoption across the icon component suite.

Also applies to: 10-10

src/shared/icons/components/Apps.tsx (1)

5-5: LGTM! Consistent prop rename implementation.

The changes correctly implement the fill prop pattern matching the other icon components in this PR.

Also applies to: 10-10

src/shared/icons/components/Home.tsx (1)

5-5: LGTM! Completes the consistent refactor.

The prop rename is implemented correctly, completing the systematic transition to fill across the icon component suite.

Also applies to: 10-10

src/shared/icons/Icon.tsx (1)

7-7: All Icon consumers have been updated to use fill prop.

Verified all 4 Icon component usages in the codebase:

• src/shared/uiKit/input/Input.tsx: Using fill={leftOrnamentIconColor}
• src/shared/uiKit/button/components/InnerIcon.tsx: Using fill={theme.colors[...]}
• src/shared/components/navigation/components/TabBarIcon.tsx: Using fill={isFocused ? ... : ...}
• src/shared/components/navigation/components/HeaderLeft.tsx: Using fill={theme.colors.content_primary}

No legacy color prop usage remains. The breaking API change is complete and properly implemented.

src/shared/icons/components/LeftArrow.tsx (1)

5-10: LGTM! Consistent prop rename from color to fill.

The implementation correctly renames the prop from color to fill, aligning with SVG semantics and the broader PR changes. The parameter destructuring and Path element binding are both properly updated. Verification confirms that all consumers, including HeaderLeft.tsx, have been updated to use the fill prop.

src/shared/icons/components/User.tsx (1)

5-10: LGTM! Semantic improvement with prop rename from color to fill.

The rename from color to fill is semantically more accurate for SVG elements, as fill is the standard SVG attribute name. The implementation correctly updates the parameter destructuring and the Path element binding. All consumers have been properly updated—the Icon component forwards the fill prop correctly, and TabBarIcon uses it as expected with dynamic theming support across all icon components.