hackforla / hackforla/tdm-calculator
Redesign "Copy and Edit" modals
- Dominant language
- JavaScript
- Stars
- 68
- Forks
- 47
- Avg merge
- 3d 9h
- Merged PRs (30d)
- 25
Description
### Dependency
- #2332
- We need to decide whether or not the "Copy & Edit" and "Duplicate" functions need to be separate. Using the word "duplicate" in the content of these modals could be beneficial, but not if it's going to cause confusion with the Duplicate function.
### Overview
We need to redesign the three "Copy and Edit" modals to increase clarity to the user and so that they match our style guide.
### Details
Per #1795, there are two workflows that allow a user to copy a snapshot into a draft and subsequently edit that draft.
1. The snapshot's author makes a copy.
2. The recipient of the shared snapshot makes a copy.
The steps for each workflow can be found in the Instructions section below.
In each of the workflows, two modals appear.
Modals if author copies


Modals if recipient copies


Please redesign the modals so that they match TDM style guidelines and help the user to complete their intended task.
### Instructions
See [this comment from 1795](https://github.com/hackforla/tdm-calculator/issues/1795#issuecomment-2726144004) for a video of these workflows.
**The snapshot's author makes a copy**
1. Log into the TDM Dev site.
2. Find or create a snapshot.
3. Navigate to Page 5 of the snapshot.
4. Click the "Copy and Edit Snapshot" button.
5. In the modal that appears, click "Create a Copy".
6. Click "Edit Project Copy".
**The recipient of the shared snapshot makes a copy**
1. Make sure to have two TDM accounts accessible.
2. Log into the TDM Dev site with the first account.
3. Find or create a snapshot.
4. Go to the snapshot's kebab menu on the My Projects page.
5. Click "Share Snapshot".
6. In the Share Snapshot modal that appears, enter the email address associated with the second TDM account.
7. Press the Enter key.
8. Click "Next".
9. In the "Copy link" section, click "Copy to Clipboard".
10. Paste the URL somewhere temporarily.
12. Log out of the first TDM account.
13. Log into the TDM Dev site using the second account.
14. Copy the URL from Step 11 into the browser address bar.
15. Press the Enter key.
16. Click the "Copy and Edit Snapshot" button.
17. In the modal that appears, click "Create a Copy".
18. Click "Edit Project Copy".
### Action Items
- [x] Create a slide for this issue on the [Staging Deck](https://docs.google.com/presentation/d/1crZ3IxqA4hAu3qzD7ns93Ieuqjwh6wyEtuX_46cP-fg).
- [x] Add a new page to the Design section of the Figma file and include this issue's number, title, and assignee in the title.
- [x] Use the Figma page to design mockups of potential solutions for this issue.
- [x] Review with the design team. Update if needed based on feedback.
- [ ] Review with the product, development, and research teams. Update if needed based on feedback.
- [ ] Get Stakeholder sign-off via the stakeholder meeting slide deck.
- [ ] Update the Figma design system.
- [ ] Create a development handoff issue.
- [ ] Move this issue's Figma page to the Development section and include the development issue's number in the title.
- [ ] Include the development issue at the bottom of this design issue's description.
- [ ] Reassign any previous assignees to this issue.
- [ ] Close this issue.
### Resources
- GitHub | Original design issue: #1723
- GitHub | Original development issue: #1795
- Figma: [Original design workflow](https://www.figma.com/design/nD9QK56Mzq7xNSaSUoeGx0/TDM-Calculator?node-id=523-2&t=RjSteInLF7g6c89o-1)
- TDM Dev site: [My Projects page](https://tdm-dev.azurewebsites.net/projects)
#### Slides
- [Staging Deck](https://docs.google.com/presentation/d/1crZ3IxqA4hAu3qzD7ns93Ieuqjwh6wyEtuX_46cP-fg)
- [Staging Deck, slide 2233](https://docs.google.com/presentation/d/1crZ3IxqA4hAu3qzD7ns93Ieuqjwh6wyEtuX_46cP-fg/edit#slide=id.g343d4b49883_0_22)
- Release Deck
- [YYYY-MM-DD Release Deck, slide 2233]
Contributor guide
Research direction
Start with the existing Copy and Edit workflows on the TDM Dev site, the original design workflow in Figma, and the video linked from issue #1795. Review the three modals against the TDM style guidelines and the dependency in #2332. Done means approved Figma designs, updated design-system references, stakeholder sign-off, and a development handoff issue.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- design, frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100