[UI] As a user, I can choose the color of a product in the product details screen

[minhnimble]

Why

The users will be able to see the Color Selection section below the About section in the Product Details screen if the product can support to choose its colors.

Acceptance Criteria

• Reuse the vertical container table view UI layout from this task [UI] As a user, I can add the viewing product to my cart in the product details screen #41.
• Reuse the table view header UI layout from this task [UI] As a user, I can see the about information of a product in the product details screen #42.
• Update the section title label on the table view header with text: Color.
• Create a table view item for this section that contains: a vertical collection view of color options as shown in the design below.
• Set the vertical collection view's attribute to support 2 items per row.
• Create a collection view item for the vertical collection view that contains: a circular color indicator view and a color name label as shown in the below design.
• Add a round-corner border to each collection view item.

Resources

• Figma design: Product Details screen

• UI screenshot: