From 9c6b771f8003fdbd9ace97216a24e00bf055cf00 Mon Sep 17 00:00:00 2001 From: Mayuri Yatagiri Date: Fri, 3 Jul 2026 00:24:02 +0530 Subject: [PATCH] Implement Add and Icon components for Goal Manager Added components for adding and displaying icons in the Goal Manager. --- tasks/2_frontend/modify_goal_manager.md | 45 +++++++++++++++---------- 1 file changed, 27 insertions(+), 18 deletions(-) diff --git a/tasks/2_frontend/modify_goal_manager.md b/tasks/2_frontend/modify_goal_manager.md index 81ce7cc..373a388 100644 --- a/tasks/2_frontend/modify_goal_manager.md +++ b/tasks/2_frontend/modify_goal_manager.md @@ -1,11 +1,25 @@ -# Modify The Goal Manager So Users Can Add And Change Icons - -- [ ] Add an `Add icon` component that: - - [ ] Is only visible when there is no icon - - [ ] Uses `TransparentButton` component - - [ ] Opens the emoji picker component - -```ts +commbank-program/tasks/2_frontend +/modify_goal_manager.md +matt-ramotar +matt-ramotar +Goal manager +372df18 + · +4 years ago +commbank-program/tasks/2_frontend +/modify_goal_manager.md + +Preview + +Code + +Blame +85 lines (66 loc) · 1.91 KB +Modify The Goal Manager So Users Can Add And Change Icons + Add an Add icon component that: + Is only visible when there is no icon + Uses TransparentButton component + Opens the emoji picker component // GoalManager.tsx export function GoalManager(props: Props) { @@ -35,15 +49,11 @@ export function GoalManager(props: Props) { {/* ... */} ) } -``` - -- [ ] Add an `Icon` component that: - - [ ] Is only visible when there is an icon - - [ ] Uses `TransparentButton` component - - [ ] Displays the icon with `font-size: 5.5rem;` - - [ ] Opens the emoji picker component - -```ts + Add an Icon component that: + Is only visible when there is an icon + Uses TransparentButton component + Displays the icon with font-size: 5.5rem; + Opens the emoji picker component // GoalIcon.tsx const Icon = styled.h1` @@ -82,4 +92,3 @@ export function GoalManager(props: Props) { {/* ... */} ) } -```