Switching themes for Gawati Portal UI

[kohsah]

Currently the gawati portal has a AIF theme, and the CSS included is fixed. i.e. we need to change that set of css files to customize the look and feel.

We need to restructure the css for the portal so as to be customize the UI by just switching a theme configuration. e.g. the current theme can be "default" which loads the current set of css, and switching themes loads a different set of css.

[Arunadevi]

The following are a few options of how the CSS theming can be done:

1. CSS custom properties

   .dashboard {
   background: blue;
   background: var(--bg-color);
   }

   Have multiple CSS files with different definitions for --bg-color

2. react-themeable - https://www.npmjs.com/package/react-themeable#css-modules. - Configurable from UI, have to import all themes.
3. Move to LESS to be able to use functions. Configurable from UI. The first option might be sufficient as we don't require the switching be initiated from the user interface.

[kohsah]

@Arunadevi

Option 3. i would think is the worst, since it means migrating css to another syntax.

Option 2. is slightly better but needs more work to be dynamic.

Option 1. seems adequate for what we want.

[kohsah]

@Arunadevi

For option 1 - if you see the section on Browser compatibility we have a problem because IE is not supported, and some mobile browsers are not supported either. So either we need a fallback option for these browsers or we don't use custom css properties.

How about we just extract the css classes for the main UI aspects into a theme css which is loaded last and can be used to override the default styles. ?

[Arunadevi]

We could do that at the cost of dismantling the component stylessheets. Or we could use a polyfill?

[kohsah]

Merged changes here: https://github.com/gawati/gawati-portal-ui/commit/8a2f46d5728ca0770b360854ab844e6933860b16

Currently alternate themes can be configured in var.css by customizing the provided xml properties. This will be enhanced to be loadable from its own distinct folder, and via a package.json configuration.

[kohsah]

We need to make these themes into a folder structure, for e.g. --

/themes/default the standard theme /themes/ke kenya theme /themes/test test theme

something like that.

and then we need to build a "ke" theme, which follows this color scheme : (kenyalaw.org) obviously the logo needs to be customizable

[kohsah]

Add a section in gawati-docs, after "Building code from github" called "Customizing Gawati" and a subsection called "Theming Gawati"

https://github.com/gawati/gawati-docs/blob/master/docs/source/development/dev-env.rst

In that section document how the theming of gawati (what you need to know to do it) and how it can be done (with screenshots) and what aspects can be modified.

[kohsah]

Opening this issue again:

In build/production mode these css values are not included in mainXXXX.css

this is because webpack has no way of knowing these files are being used as the references to them are dynamic.

we probably need to include these files in public and reference them from there.

to simulate the problem :

set homepage in package.json:

  "homepage": "http://localhost/portal",

Change index.js:

ReactDOM.render(
    <BrowserRouter basename="/portal">
        <App />
    </BrowserRouter>,
    document.getElementById('root')
);
registerServiceWorker();

Then run npm run build

Add the following to httpd.conf

Alias /portal "c:/path-to/gawati-portal-ui/build"
<Directory "c:/path-to/gawati-portal-ui/build"> 
    DirectoryIndex "index.html"
    Require all granted
    AllowOverride All
    #Order allow,deny
    #Allow from all
</Directory>

Alias /locales "D:/develop/github/gawati/gawati-portal-ui/build/locales"
<Directory "D:/develop/github/gawati/gawati-portal-ui/build/locales">   
    Require all granted
    AllowOverride All
    #Order allow,deny
    #Allow from all
</Directory>

now restart apache and browse to http://localhost/portal

To move the themes into public, see :

https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#using-the-public-folder

[kohsah]

See attached patch ... which has the general idea for the fix ..

helmet_include_theme_from_public.txt

Not checking for production or dev mode there ... so that needs to be added the call should be there only if its in production. for it to work in dev mode you leave the previous call in componentDidMount() in App.js:

componentDidMount() {
    const path = '/css/themes/' + process.env.REACT_APP_THEME + '/vars.css';
    import(`${path}`); 

you will need to do the import only in development mode ...so a check is needed in componentDidMount() secondly there using import() is better than require() as its async ... that way it should work both in dev and production mode ...

[Arunadevi]

Updated public-themes branch. The references to the imports in production mode has been corrected. The build task needs to be modified to copy the src/themes folder into build/static/css. gawati-docs may also need an update if the build modification will not work on Windows.

[kohsah]

@Arunadevi see this commit :

https://github.com/gawati/gawati-portal-ui/commit/eeeb27a81bae99689b9ed11fa91bc4d5fdf83c7f#diff-e400e75384e3e34714f9baaeb25f9622

I changed the path to the logo to be a non-relative to current folder, and made it relative to the parent folder.

However, this was reversed in this commit --

https://github.com/gawati/gawati-portal-ui/commit/f85010fd8fbbffc4d1a848a3a914647df5fcf3d7#diff-e400e75384e3e34714f9baaeb25f9622

in production mode the logo does not load if it is locally relative (since vars.css is setting a property, the logo is not looked for relative to it.)

with the earlier change i had made it works out of the box in both development and production modes.

Was there a particular reason you had reveresed the path change ?

[Arunadevi]

I can't even guess! Sorry, could have happened during a commit reset! I did run into a conflict nightmare trying to fix the same issues on multiple branches sometime back.

[kohsah]

Closing this for now. Opening a separate issue for css props issue in IE 11