fix: Added UI-Fix: On Store profile view page , add relevant icons with labels #1023
Conversation
…ainst the data like Add a dollar sign ($) icon next to monetary values (e.g. pricing, min-order amount
WalkthroughThe changes add conditional icon rendering logic to the Changes
Sequence Diagram(s)sequenceDiagram
participant UI as InfoItem Component
participant Check as Label Check
participant FA as FontAwesome Library
UI->>Check: Evaluate "label" prop
alt Label is "Delivery Time" or "Min Order"
Check->>FA: Request faClock icon
else Label is "Service Charges"
Check->>FA: Request faDollarSign icon
else
Note over UI: No icon selected
end
FA-->>UI: Return the appropriate icon
UI-->>Render: Display icon alongside value (or "N/A")
✨ Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for polite-fairy-234917 canceled.
|
✅ Deploy Preview for cheery-zabaione-34f12e ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
enatega-multivendor-admin/lib/ui/screen-components/protected/restaurant/profile/restaurant/main/index.tsx (1)
12-29: LGTM! Icon rendering logic works as intended.The implementation successfully adds icons to specific labels while maintaining the original functionality.
Consider using a mapping object for better maintainability.
The current if-else logic could be simplified using an object mapping.
Consider this refactor:
const InfoItem: React.FC<IInfoItemProps> = ({ label, value }) => { - // Conditionally render icons based on label - let icon = null; - if (label === 'Delivery Time' || label === 'Min Order') { - icon = <FontAwesomeIcon icon={faClock} className="mr-1" />; - } else if (label === 'Service Charges') { - icon = <FontAwesomeIcon icon={faDollarSign} className="mr-1" />; - } + const LABEL_ICONS = { + 'Delivery Time': faClock, + 'Min Order': faClock, + 'Service Charges': faDollarSign + }; + const icon = LABEL_ICONS[label] ? ( + <FontAwesomeIcon icon={LABEL_ICONS[label]} className="mr-1" /> + ) : null;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
enatega-multivendor-admin/lib/ui/screen-components/protected/restaurant/profile/restaurant/main/index.tsx(1 hunks)
🔇 Additional comments (2)
enatega-multivendor-admin/lib/ui/screen-components/protected/restaurant/profile/restaurant/main/index.tsx (2)
1-11: LGTM! Import statements are properly organized.The new FontAwesome imports are correctly added and all imports are being used in the code.
83-95: Verify icon visibility in the UI.The implementation looks correct, but please ensure that:
- The icons are properly aligned with the text
- The icons are visible against the background
- The icons maintain proper spacing in different viewport sizes
Added relevant Icons infront of labels on Store profile view page in admin dashboard to resolve readability issues and hence solving [/issues/1021]
Screenshot of fixed is below: