Add configurable icon and theme colours (adjustable branding)

[spwoodcock]

Is your feature request related to a problem? Please describe.

• The FMTM logo in the header should be configurable.
• The theme colours should be configurable.

Describe the solution you'd like

• In the long run we definitely want to solve this in the hotosm/ui repo instead.
• But for now, as we haven't integrated the components there yet, we need to have the theme configurable specifically for FMTM.
• We can have our default branding file there, but then have an override file.
• This override shouldn't be committed as code, but instead should be configurable externally somehow. Options
  • Untracked file in the repo.
  • A config file that is fetched via web URL (e.g. config YAML or JSON).

[emi420]

I'm taking a look to the FMTM design system/styling.

For having adjustable branding, we could replace all color, typography and other styling values to make use of the HOTOSM UI CSS file:

https://github.com/hotosm/ui/blob/main/src/themes/hot.css

We don't need to have integrated components for doing this, we can do it by modifying the existing FMTM's code.

The logo could be also CSS, loading an SVG, for example:

.logo {
  border: 1px dashed grey;
  width: 300px;
  height: 180px;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/4/45/Humanitarian_OpenStreetMap_Team_logo.svg");
  background-repeat: no-repeat;
  background-size: cover;
}

[spwoodcock]

I'm taking a look to the FMTM design system/styling.

For having adjustable branding, we could replace all color, typography and other styling values to make use of the HOTOSM UI CSS file:

https://github.com/hotosm/ui/blob/main/src/themes/hot.css

We don't need to have integrated components for doing this, we can do it by modifying the existing FMTM's code.

The logo could be also CSS, loading an SVG, for example:

.logo {
  border: 1px dashed grey;
  width: 300px;
  height: 180px;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/4/45/Humanitarian_OpenStreetMap_Team_logo.svg");
  background-repeat: no-repeat;
  background-size: cover;
}

Sounds optimal for the HOT CSS 👍

Ideally the logo and colours can be configured without modifying code though, purely from user config of some sort.

This is part of the deliverable for us to look into with @DanielJDufour at some point, but always good to get a head start!

[emi420]

Maybe the CSS variables could be overridden from an user config page. For logo, typography or background images, those could be uploaded somewhere first.