Spoke: Feature Request: Frameworks for Orgs to easily add their own theming and branding to Spoke

[ibrand]

Problem
Orgs currently can't white label Spoke without significant contractor interventions. It would be awesome for orgs to be able to more easily change the colors and theming on their Spoke instance.

Solution
A 'short version' of theming could be to consolidate the colors/values into content-related names (instead of colors) into:
src/styles/theme.js -- and then maybe use an environment variable to make it directory loadable from a different name (similar to our import pattern for integrations)

That said, there are other ways it could be done. It'd be nice to make it as integration friendly as possible!

[arena]

It seems like there are just a handful of styles and variables that could be organized and then controlled from an admin panel --- I'd be game to design one if somebody is going to be developing this.

• background colors
• font colors
  ..I think there is no place to add a logo atm (except maybe the favicon)

[DinahSanders]

It'd be great if that admin panel also included a "map legend" style display of what colors (if any) the system uses to indicate things.
A super-fancy version might use that example display to preview the effect of admin-added color styling, just to prevent visually disastrous choices. :D

[arena]

Here is a prototype of a color picker on the Settings screen that Admin's see
Note: the mockup uses bitmap screenshots which can be slow to load in Figma
The idea would be to do a first increment of this feature that lets admins change the primary color from their settings panel. In later increments we could add the ability to link to a logo file and pick a theme of colors, etc. For now, here's a preview of what it will be like to change the primary color:
https://www.figma.com/proto/PXVGzPnbizV5QyiD37FTOs/Spoke-Customization?node-id=165%3A2&viewport=-3404%2C872%2C0.18336185812950134&scaling=min-zoom

in case you can't get the prototype to load there is a static mockup as of May 6 ...check the prototype for the most recent design.

[arena]

Here is the array for the default color swatches

000, #022746, #1F4A7C, #0D5FA4, #8BCEEB, #B8E4D0, #1EBEBD, #71B080, #FEDE3A, #FEDE3A, #E41588, #A02466, #A31F32, #443A8B, #254292

[arena]

Here is the react color picker https://casesandberg.github.io/react-color/

[arena]

shown with the texter dashboard on a phone

[AliAkinK]

Agreed with the above -- ability to change UI colors and logo would resolve this issue.

[arena]

I've started a design document here:
https://coda.io/d/Spoke_d_iHr90PoqJ/Admin-UI-Customization_su3op#_lucaT

[schuyler1d]

I think if we are aiming for Arena's theming-picker vision maybe we should phase this work in these steps:

1. change all explicit theme.colors.green, theme.colors.white and explicit white etc to use theme.colors.buttonPrimaryBg etc across the app
2. Maybe make a style-endpoint for org which basically just gets org.features.style with a bunch of values -- see how many places can load those values and if there are any that can't (I think everything gets organization where the style needs to be seen, but maybe catalog which ones would need more work (e.g. login is probably for later work)
3. Make the styling interface in Settings.jsx (and likely needing to make a mutation at the same time to accept the save)
4. Add the logo as an option on the TexterTodoList page and Admin header.

[schuyler1d]

Just a comment on Arena's design above -- I really like the display and structure and think the implied changes would happen real-time as you changed the colors so you could see what it looked like is awesome.

My one note is that we should have an explicit "Save" button so bad or half-picked choices won't accidentally mess up an active campaign

[arena]

Excellent notes and details thought through. The one nuance I would add is that if we’re going to do auto update and also require an explicit save that we would want to have a catch so that if they leave the settings panel without saving we check with them to see if they want to save or not

[alliejones]

I've been talking with Ilona at hacknight about taking this on as a first larger project, and I started drafting an RFC based on the template, but I have some questions first since I'm not super familiar with Spoke yet!

• I'm not totally sure what "a style-endpoint for org which basically just gets org.features.style" means--I see fields like texterUIConfig.options in the organization table, would the style settings be a similar JSON blob?
• Is there a recommended way to make the overridden color variables accessible to components? It looks like the current color vars are hard-coded and directly imported into the files that use them, so it seems like the default colors would have to be merged with custom colors (if they exist) somewhere within the component tree, since the custom theme would be retrieved via graphql?
• Would adding a custom logo also require supporting image uploads? Or would it just be providing a URL to an image hosted elsewhere?

[hiemanshu]

• I'm not totally sure what "a style-endpoint for org which basically just gets org.features.style" means--I see fields like texterUIConfig.options in the organization table, would the style settings be a similar JSON blob?

I'd say so! It would be a simple JSON blob with overriding certain standard values.

• Is there a recommended way to make the overridden color variables accessible to components? It looks like the current color vars are hard-coded and directly imported into the files that use them, so it seems like the default colors would have to be merged with custom colors (if they exist) somewhere within the component tree, since the custom theme would be retrieved via graphql?

There is a file that is used in a lot of places to get the standard colors here https://github.com/MoveOnOrg/Spoke/blob/main/src/styles/theme.js

That file could be the one that handles all of these settings. It could be change to read the orgs colors and use that as an override if possible, and for components to read this file for that info. Don't have to send over any values over graphql if the colors can set via javascript easily.

[arena]

I was just looking at this and realized that the linked figma file was not was I was expecting --- I think I accidentally broke the prototype by putting all the frames in a frame (fixed)
https://www.figma.com/proto/PXVGzPnbizV5QyiD37FTOs/Spoke-Customization?node-id=193%3A347&viewport=-1707%2C460%2C0.10294495522975922&scaling=min-zoom
(also, it's got a hidden link to toggle between mockups because I didn't put in the effort to make a clickthrough of changing from one theme to another color by color and then saving. So, click on the user initial in the top right to toggle through mock-ups)