{"action":"created","issue":{"url":"https://api.github.com/repos/dhis2/maps-app/issues/27","repository_url":"https://api.github.com/repos/dhis2/maps-app","labels_url":"https://api.github.com/repos/dhis2/maps-app/issues/27/labels{/name}","comments_url":"https://api.github.com/repos/dhis2/maps-app/issues/27/comments","events_url":"https://api.github.com/repos/dhis2/maps-app/issues/27/events","html_url":"https://github.com/dhis2/maps-app/pull/27","id":364455308,"node_id":"MDExOlB1bGxSZXF1ZXN0MjE4NjM2MTcw","number":27,"title":"Use the new DHIS2 color palette in an MUI theme","user":{"login":"amcgee","id":947888,"node_id":"MDQ6VXNlcjk0Nzg4OA==","avatar_url":"https://avatars3.githubusercontent.com/u/947888?v=4","gravatar_id":"","url":"https://api.github.com/users/amcgee","html_url":"https://github.com/amcgee","followers_url":"https://api.github.com/users/amcgee/followers","following_url":"https://api.github.com/users/amcgee/following{/other_user}","gists_url":"https://api.github.com/users/amcgee/gists{/gist_id}","starred_url":"https://api.github.com/users/amcgee/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/amcgee/subscriptions","organizations_url":"https://api.github.com/users/amcgee/orgs","repos_url":"https://api.github.com/users/amcgee/repos","events_url":"https://api.github.com/users/amcgee/events{/privacy}","received_events_url":"https://api.github.com/users/amcgee/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":4,"created_at":"2018-09-27T12:37:53Z","updated_at":"2018-09-28T08:41:30Z","closed_at":null,"author_association":"CONTRIBUTOR","pull_request":{"url":"https://api.github.com/repos/dhis2/maps-app/pulls/27","html_url":"https://github.com/dhis2/maps-app/pull/27","diff_url":"https://github.com/dhis2/maps-app/pull/27.diff","patch_url":"https://github.com/dhis2/maps-app/pull/27.patch"},"body":"This PR accomplishes a few things, chief among them being :\r\n\r\n**Implement an MUI Theme which exposes the [DHIS2 color palette](https://projects.invisionapp.com/share/A7LT4TJYETS#/screens/302550228_Color) created by @joeDHIS.**\r\n\r\nI made educated guesses based on standard UX patterns and some inferences from Joe's various mockups to assign palette colors to MUI-aware theme elements (see [`dhis2.theme.js`](https://github.com/dhis2/maps-app/pull/27/files#diff-3dfed8de7ec7d5127b461aad380d38db)).  Future work will be to implement intelligent base components (buttons, text fields, etc.) to use the theme to match our desired look and feel.\r\n\r\n**Known issue** Unfortunately, we're actually using TWO versions of material UI currently - this change addresses Material UI v3 which we use in maps-app, but the included components from d2-ui (notably the file menu) have not yet been updated from an older Material UI version and so they aren't affected by this change.  This also means that until d2-ui is updated we need to include TWO different copies of `<MuiThemeProvider>` in `App.js`.  Hopefully we can upgrade d2-ui to utilize the new MUI and standardize on this theme.\r\n\r\nThe net UI changes are relatively small and mostly involve subtle color tweaks with some rewiring under the hood.  Additional updates I made in going through the various places throughout the code where :\r\n\r\n1) Set up MUI defaults to match colors from the palette (see [`dhis2.theme.js`](https://github.com/dhis2/maps-app/pull/27/files#diff-3dfed8de7ec7d5127b461aad380d38db))\r\n2) Remove hardcoded color values from the maps app wherever possible.  There are certainly some remaining\r\n3) Update the \r\n4) Update the shadows and dividers in the header and sidebar to match, as closely as possible, [this sample](https://projects.invisionapp.com/share/E2O15NQMDCX#/screens/322019629_Empty_State) without changing too much about the maps app design layout (I.e. no new logo, secondary menu bar is not white)\r\n5) Change the \"selected\" highlight color in basemap selector, Org Unit panel, and Event->style panel to be the `accentSecondaryLight` color (blue-green-ish #48A999).  See screenshots below.\r\n6) Update the styling of the Event Layer filter elements to be a little cleaner and match the new colors.  Still needs more design work (see screenshot below).\r\n7) _minor_ Center the text under basemap images\r\n8) _minor_ Remove `ItemSelect.css`, moving styles into `ItemSelect.js`\r\n\r\n**5 - BASEMAP SELECTION BEFORE (2.30)**\r\n\r\n![screen shot 2018-09-27 at 2 18 11 pm](https://user-images.githubusercontent.com/947888/46145389-4bd99600-c260-11e8-8045-b51ad8148945.png)\r\n\r\n**5 - BASEMAP SELECTION AFTER** - note also the subtle update to opacity slider color which automagically matches the Primary Accent we defined in the theme.\r\n\r\n![screen shot 2018-09-27 at 2 18 21 pm](https://user-images.githubusercontent.com/947888/46145392-4e3bf000-c260-11e8-8532-052e6f26119b.png)\r\n\r\n**6 - FILTER ROW BEFORE (2.30)**\r\n\r\n![screen shot 2018-09-27 at 11 55 25 am](https://user-images.githubusercontent.com/947888/46145555-c86c7480-c260-11e8-827a-d840167c8c8c.png)\r\n\r\n**6 - FILTER ROW AFTER**\r\n\r\n![screen shot 2018-09-27 at 11 55 20 am](https://user-images.githubusercontent.com/947888/46145546-c3a7c080-c260-11e8-8296-fd56e0c21eee.png)\r\n\r\n**Overall UI 2.30 (Old Material UI version)**\r\n\r\n![screen shot 2018-09-27 at 2 25 03 pm](https://user-images.githubusercontent.com/947888/46145747-682a0280-c261-11e8-843d-9ee7ca2cebee.png)\r\n\r\n**Starting UI Dev (Material UI 3)**\r\n\r\n![screen shot 2018-09-27 at 2 24 40 pm](https://user-images.githubusercontent.com/947888/46145761-6eb87a00-c261-11e8-9cc2-4d70146521a1.png)\r\n\r\n**Starting UI After change** - Note the subtle background color changes and slightly-updated header bar\r\n\r\n![screen shot 2018-09-27 at 2 25 11 pm](https://user-images.githubusercontent.com/947888/46145798-87c12b00-c261-11e8-845c-1073adadb203.png)\r\n"},"comment":{"url":"https://api.github.com/repos/dhis2/maps-app/issues/comments/425365794","html_url":"https://github.com/dhis2/maps-app/pull/27#issuecomment-425365794","issue_url":"https://api.github.com/repos/dhis2/maps-app/issues/27","id":425365794,"node_id":"MDEyOklzc3VlQ29tbWVudDQyNTM2NTc5NA==","user":{"login":"amcgee","id":947888,"node_id":"MDQ6VXNlcjk0Nzg4OA==","avatar_url":"https://avatars3.githubusercontent.com/u/947888?v=4","gravatar_id":"","url":"https://api.github.com/users/amcgee","html_url":"https://github.com/amcgee","followers_url":"https://api.github.com/users/amcgee/followers","following_url":"https://api.github.com/users/amcgee/following{/other_user}","gists_url":"https://api.github.com/users/amcgee/gists{/gist_id}","starred_url":"https://api.github.com/users/amcgee/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/amcgee/subscriptions","organizations_url":"https://api.github.com/users/amcgee/orgs","repos_url":"https://api.github.com/users/amcgee/repos","events_url":"https://api.github.com/users/amcgee/events{/privacy}","received_events_url":"https://api.github.com/users/amcgee/received_events","type":"User","site_admin":false},"created_at":"2018-09-28T08:41:30Z","updated_at":"2018-09-28T08:41:30Z","author_association":"CONTRIBUTOR","body":"Thanks @joeDHIS, I really like these changes and will take a stab at them shortly!\r\n\r\nMy goal generally is to remove app-level customization wherever possible so we settle on a standard, modular set of components which will automatically pick up the theme.  A few questions for what to include in that theme:\r\n\r\n1) Should dividers (like the ones in the header bar and above the layer card toolbar) be `1px solid $grey-light`?  I am currently using `#202020 15%` for all dividers which I grabbed [here](https://projects.invisionapp.com/share/A7LT4TJYETS#/screens/306822640).\r\n\r\n2) Is #FCFCFC a standard background color we should store in the theme palette?  If so what should we call it?  In what situations should it be used?  I'm using `$snow` (`#F4F6F8` which is very similar to `#FCFCFC`) as the default background, `$white` as the standard background for first-level UI elements, and `$blue-grey` for menus (though that's probably going away).\r\n\r\n3) Where do you envision `$blue-grey` being used if not as the background for menus?  Currently that's the only place I have it in the Mui theme, and we're replacing that with white.\r\n\r\n4) What colors would you recommend for primary, secondary, and disabled text?  Currently I'm using `$grey-black`, `$grey`, and `$grey-light` respectively, but I agree that `$grey` and lighter don't contrast enough in some cases.  We could do `$black`, `$grey-black`, `$grey` but I don't know that `$black` and `$grey-black` are far enough apart for that and in web dev I think off-black tends to provides better text readability.\r\n\r\n5. In the basemap card I'm using the standard divider color `#202020 15%` for the border of non-selected images.  Should this be $grey-light as it appears in your image?\r\n"}}
{"actor":{"display_login":"amcgee"}}