Design UI for mock outfit component

[rak3rman]

Description

Design the UI for the mock outfit component using a graphic design tool or something like Figma, whatever the designer prefers. This UI mockup will be translated into an actual component on the frontend.

Ideally, this component will be simple and powerful enough such that the user does not have to open a modal or other popup to edit outfit and item details. Each button/text field should have a distinct and arguable purpose. The use of the component should also be easy to pick up for new users. Make this component exceptional as the heart of Shafa will focus on this component. See the existing frontend for initial mockups (/outfits page?).

What follows is a sample outfit returned from the backend. See the implementation for more details. Feel free to argue for the use of new data fields (like last worn data, how many times the outfit has been worn in the last 30 days, 1 year, etc).

{
        "id": "t2551h68mt3sni0r6aa9jj43",
        "rating": 1,
        "wearDate": "2024-02-19",
        "authorUsername": "rak3rman",
        "itemsToOutfits": [
            {
                "itemType": "layer",
                "item": {
                    "id": "ao7sp0zbubohd65vy3z1isal",
                    "name": "Red/Gray Striped Auburn Swimming Hoodie",
                    "brand": null,
                    "photoUrl": null,
                    "type": "layer",
                    "rating": 1,
                    "createdAt": "2024-02-21T22:48:07.966Z",
                    "authorUsername": "rak3rman"
                }
            },
            {
                "itemType": "top",
                "item": {
                    "id": "syom8x38bggqyvelnlcf7i68",
                    "name": "Red Hatch Power of the Press T-shirt",
                    "brand": null,
                    "photoUrl": null,
                    "type": "top",
                    "rating": 0,
                    "createdAt": "2024-02-21T22:48:08.293Z",
                    "authorUsername": "rak3rman"
                }
            },
            ...
        ]
},

Acceptance Criteria

Generated by Zenhub AI

• [ ] Scenario: Design UI for mock outfit component
  • Given the designer prefers a graphic design tool or something like Figma
  • When the designer creates the UI mockup for the mock outfit component
  • Then the component should be simple, powerful, and easy to use for new users
  • And the component should have distinct and arguable purposes for each button/text field
  • And the use of the component should be easy to pick up for new users
  • And the component should be exceptional as the heart of Shafa will focus on this component
  • And the designer should consider adding new data fields like last worn data, how many times the outfit has been worn in the last 30 days, and 1 year