UserIQ Theme Editor

This is a UX and UI refresh I did of the Create Theme editor in the UserIQ app. Before pushing this redesign, our app's Create Theme editor allowed our users to set styles for all our in-app engagement types within a theme using a confusing scrolling tab bar to access the WYSIWYG controls for the different engagement types. It also had an easy-to-miss toggle at the bottom of the inputs where users could access a custom CSS console, changing the view of the left panel when they toggled it. To make the controls in this editor clearer, I moved the navigation for the different engagement types into a fixed tab bar at the top, consistent with the ones we were using in other places in the app. I also removed the custom CSS toggle at the bottom of the left panel and added in a radio group at the top of the panel that users could click on to switch between the WYSIWYG and custom CSS console views. I also grouped the different input fields in the WYSIWYG view into accordions based on the parts of the engagement type that our users wanted to edit so that they could collapse the input fields they were finished working on for a more focused experience.