UI/UX for User Story: Data Detection Toggle

[ryuntalan]

Description

Here is the UI/UX for toggling on and off the data detection feature.

Images

Light Mode - Off

Colors used for the toggle:

• Data detection text: rgb(0,0,0, .54)
• Toggle circle: #EEEEEE
• Toggle background: #424242
• Toggle off text: #FFFFFF

Light Mode - On

Colors used for the toggle:

• Data detection text: #1976D2
• Toggle circle: #EEEEEE
• Toggle background: #1976D2
• Toggle on text: #FFFFFF

Dark Mode - Off

Colors used for the toggle:

• Data detection text: #FFFFFF
• Toggle circle: #BDBDBD
• Toggle background: #FFFFFF
• Toggle off text: #000000

Dark Mode - On

Colors used for the toggle:

• Data detection text: #FFFFFF
• Toggle circle: #BDBDBD
• Toggle background: #1976D2
• Toggle on text: #FFFFFF

SVG Icons

Data Type SVG Icons used in the gif
data type icons.zip

Related Issues

Related Issues: #171

Questions

Let me know if there are any questions!

Interactive Prototype

Prototype Link