FIX:Improve the empty state experience to align with the new design.

[GabrielTozatti]

Description

Update the empty state to the new design, ensuring visual alignment with the updated layout and an improved user experience.

Summary

• In the empty state, colors were updated to match the new Figma layout, a more appropriate icon was added, and spacing adjustments were made.
• In notifications, only an icon adjustment was made.

Screenshots

Empty State:

Notifications:

• Video example : Link

Checklist

• I reviewed my PR code before submitting
• I ensured that the implementation is working correctly and did not impact other parts of the app
• I implemented error handling for all actions/requests and verified how they will be displayed in the UI (or there was no error handling needed).
• I mentioned the PR link in the task

[guimroque]

🟡 IMPORTANT: Missing semicolon

Problem:
Inconsistent with other export statements in the file which all end with semicolons.

Suggestion:

export * from './empty-icon';

[GabrielTozatti]

Ajusted on: Link

[guimroque]

🟡 IMPORTANT: Hardcoded color values

Problem:
Using hardcoded color values ('gray.200', 'gray.400') instead of semantic theme tokens may cause inconsistency with the design system.

Suggestion:
Use semantic color tokens from the theme:

color="textPrimary" // or appropriate semantic token

[GabrielTozatti]

I had to use it like this to keep it in line with the layout.

[guimroque]

🔵 SUGGESTION: Consider extracting gap value

Problem:
The gap value changed from 6 to 1, which is a significant visual change that might benefit from being configurable.

Suggestion:
Consider making gap configurable through props or use a theme token:

gap={gap ?? 1}

[GabrielTozatti]

The gap is already in agreement

[guimroque]

Code Review - Summary

What was done

Updated the empty state components to align with new design specifications:

• Modified the main EmptyState component with new spacing, colors, and added an EmptyIcon
• Created a new EmptyIcon component using bako-ui's createIcon utility
• Updated the notifications empty state to use the new EmptyIcon instead of EmptyBoxOutline

Positive Points

• Clean implementation following the project's component structure
• Proper use of bako-ui components and patterns
• Good separation of concerns with the new icon component
• Consistent naming conventions (PascalCase for components)
• Proper export pattern in the icons index file

Issues Found

• Missing semicolon in export statement (style consistency)
• No TypeScript interface for EmptyStateProps extension
• Hardcoded color values instead of using theme tokens

Total comments: 3 (0 critical, 2 important, 1 suggestion)

[aws-amplify-us-east-1]

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-796.db1b4e2lqk8yl.amplifyapp.com