Custom branding of the Tasking Manager

[xamanu]

Currently the Tasking Manager comes in one main design, with some options in the configuration file. However Tasking Manager instances are commonly adjusted to fit a custom design (at least logo and colors). See the OSM Earth as an example.

This issue is to abstract some design components, in order to allow organisations to adjust the general look without forking the project.

[xamanu]

cc: @kriscarle

[xamanu]

This is ongoing work with the current design improvements with @hotosm/major hotosm/projects#17

[willemarcel]

@xamanu @ramyaragupathy @JorgeMartinezG I have defined our color palette on this file https://github.com/hotosm/tasking-manager/blob/feature/redesign/frontend/src/assets/styles/_variables.scss

Do you think for someone that wants to deploy a customized version of TM, changing the color values would be a good solution?

For example, if I want to replace the red by green, I would put a green tone code on the red variable.

I thought about defining some classes like primary-color, secondary-color... but I think it would be easier to develop and to customize if we continue using the color name. So everyone will now that they are replacing the red by x, the blue-dark by y, etc. What do you think?

[willemarcel]

To replace the logo, someone would just replace the main-logo.svg file in the assets folder: https://github.com/hotosm/tasking-manager/tree/feature/redesign/frontend/src/assets/img

[xamanu]

It would be nice to allow to modify the style and logo through environment variables in the tasking-manager.env. It think overriding the red seems a bit breaking the logic, despite that I'm aware that most CSS frameworks take the colour name approach.

[willemarcel]

@xamanu thanks for the opinion.

It's very complex to read an ENV var on a .scss file and also to import an image file in React from a ENV var.

As to be compiled, all the files need to be in the assets folder, I think the best solution would be to have a script that read the taskingmanager.env and replace the images in the assets folder by the custom ones and also replace the colors in the _variables.scss file. That script should run before the build command. So we eliminate the need for manual editing files. Does it sound good?

[willemarcel]

Editing https://github.com/hotosm/tasking-manager/blob/develop/frontend/src/config/index.js you can set the backend api, organization name, social networks links. We want to concentrate some other options on the config files, that way organizations can customize TM without editing many files.

[xamanu]

To not forget. Found some hard coded parts, that we want to get into variables.

[xamanu]

It needs somebody who sets up an instance that should have a complete different branding and documents how to do it. While doing this, several things that are not configurable or that aren't looking good will be noticed and we can address them.

[thadk]

Because these meta tags need to be statically available before the page is downloaded, I think we'd have to write them using our web hosting (Flask), write these files with a simple build script (1 value per site), or pre-generate them using a tool like GatsbyJS based on the tasking-manager.env file and serve them as static resources (1 value per project potentially possible).

I tried to see if Slack and WhatsApp will parse the Javascript/React to look at these meta tags, but they do not.

[xamanu]

@uwaiszaki Thanks for jumping on this. Can you please try to generate a custom branded TM and share your experience and let us know what worked well and what doesn't? It would be good to document the steps for others who want to have a custom appearance.

[xamanu]

Lets document how to customize Tasking Manager and on the way we might be able to address one or another improvement:

• Configuration file for title, slogan, etc.
• Principal colour(s)
• Frontpage content
• Footer

[zlavergne]

@bopercival-hot let me know if this is still of interest. I've recently done some of this work for the MapWithAI TM. I can clean it up a bit and make a PR or at least share what I encountered if it's helpful.

[bopercival-hot]

thanks @zlavergne! We would be really interetsed to see this come in as a PR. We now have KLL on board for PR support and reviews, so now is a great time to get it in as we are going back into mainteance mode! 👍

[ramyaragupathy]

@Aadesh-Baral @HelNershingThapa - we should check for the customisation options with https://github.com/facebook/OSM-HOT-Tasking-Manager