Skip to content

Implement Add and Icon components for Goal Manager #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
MayuriYatagiri wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Implement Add and Icon components for Goal Manager #21

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 27 additions & 18 deletions tasks/2_frontend/modify_goal_manager.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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) {
Expand Down Expand Up @@ -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`
Expand Down Expand Up @@ -82,4 +92,3 @@ export function GoalManager(props: Props) {
{/* ... */}
)
}
```