Change fonts, colours & other styling

[AnaBelgun]

Change the size, fonts, colours and other styling items, as per below:

• [x] Search box:

  • Word “Search”: Increase font size to 16px.
  • When typing into textbox: Increase font size to 16px and change font colour to “black” (from green)

• [x] Add data button:

  • Word “Add data”: Increase font size to 16px.
  • Button background colour: Change to Green HEX #BCC94E

• [x] Textbox:

  • Background colour: Grey (lighter contrast) = HEX #7E7E7E
  • Font size = 15px

• [x] Left navigation panel:

  • Background colour: Grey (darker) = HEX #4D4D4D

• [x] Map button/scale:

  • Background colour: Grey (lighter contrast) = HEX #7E7E7E, hover background colour: Green HEX #BCC94E
  • Font size = 13px

• [x] Add data pop-up - Data catalogue tab

  • [x] Font colours and background colours TBA by the BOM team (@azzerger)
  • [x] Update all textbox url links font colour and add text decoration underline page a:visited { color: #BB5430; text-decoration: underline;} .page a { color: #632D1A; text-decoration: underline;}

• [x] Feature info panel

  • [x] Download data format: Font colour of the data download format "CSV" and "JSON" hard to read against background. Update font colour = HEX #632D1A, Hover over = HEX #BB5430

  • [x] Overall font colours and background colours TBA by the BOM team (@azzerger)

• [x] Feedback panel

  • [x] Change colour to match the other NEII colours;
  • [x] Overall font colour and background colours TBA by the BOM team (@azzerger)

[ChantelleDoan]

CD Test Result:

1. Search Box:
   • [x] The font size of "Search" looks smaller than the font of "Add data" text. Increase font size to be as per "Add data".
2. Add data pop-up - Data catalogue tab:
   • [x] URL links: Some url links fonts are still displayed as green. Eg at "GetCapabilities URL" and "Service Contact"
3. Feature info panel:
   • [x] Still to change font on hover over = HEX #BB5430
4. Landing Page navigation bar
   • [x] Update font colour of "Data Sets [x]" to #FFFFFF

[ChantelleDoan]

• [x] Feature Information Popup
  1. Update heading background colour of “Feature Information” and “Site Heading” to #7e7e7e
  2. Update all heading colour to #4D4D4D.
  3. Update all row shading background colour to #EDECEC.
  4. Update table background colour to #FFFFFF. Update table text colour to #4D4D4D. Update all textbox url links font colour and add text decoration underline page a:visited { color: #BB5430; text-decoration: underline;} .page a { color: #632D1A; text-decoration: underline;}
  5. Widen table width of "site Observation Capabilities" to be the same as the ''Site Details'' table.

• [x] Data Catalogue Popup
  1. Update all heading background colour to #7E7E7E. On tab that is active, bold the tab heading and update heading text colour to #FFFFFF.
  2. Update text colour to #4D4D4D. Update background colour to #4D4D4D
  3. Update background colour to #EDECEC. Update all heading and layer to #632DIA. Update active layer to be #BB5430.

• [x] Feedback Popup
  1. Update heading Feedback background colour to #7E7E7E
  2. Update font colour to #4D4D4D.
  3. Update colours of button to be consistent with the "Add Data" button.

[RacingTadpole]

@ChantelleDoan - can I just confirm what you want with the Feature Info Panel? Are you asking for it to have a white background, apart from the very top header line (1 on your diagram)? Ie. the white background would go behind 2 on your diagram too, and any other non-table elements?

[ChantelleDoan]

Hi @RacingTadpole, that's correct, white background for everything apart the top header including whitebackground behind #2.

[RacingTadpole]

OK, I've tried to implement all of the above. Here are some screenshots - how do these look? :-)

[ChantelleDoan]

Thanks @RacingTadpole. The updates look great.

Here are my feedback:

1. Feature Information: Update the label text colours to #4D4D4D

2. Data Catalogue Pop-up: Update menu panel background colour to white

3. Data Catalogue Pop-up: Update the icon to close page from "Done" icon to "X" icon as per the Feature information and feedback pop-up.

4. Add Data -> My Data screen -> Adding your own data -> Update the font colour of links "Add Local Data" and "Add Wev Data" from green to #632D1A

5. Disclaimer text on the map: Update the size of the text slightly. Currently very small and not readable.

[RacingTadpole]

@ChantelleDoan - I suggested a change to TerriaJS https://github.com/TerriaJS/terriajs/pull/2280#issuecomment-268403470 to make it easier to replace the "Done" button with an "✕", but people have raised some valid concerns about the change (specifically it would make internationalisation harder down the track). Also, you'll see at that link that @philipgrimmett from the UX team has pointed out the choice of "Done" was based on user testing:

The wording was defined in response to usability testing, where users appeared to stall after turning on a dataset (It wasn't clear to them how they should proceed). We wanted to frame 'adding data' as a task to be completed, not the default state.

Would you be OK with sticking with "Done", at least for now?

[ChantelleDoan]

Thanks for your response @philipgrimmett. My focus was more to ensure consistency as currently the close window button uses a mixture of the "Done" icon and the "X" icon . Is it possible then to replace all the "X" icon with the "Done" icon?

Seasons greetiongs and have a safe holiday.