Change 368211 had a related patch set uploaded (by Dbrant; owner: Dbrant):
[apps/android/wikipedia@master] Update styling of Reference bottom sheet.

https://gerrit.wikimedia.org/r/368211

Change 368211 merged by jenkins-bot:
[apps/android/wikipedia@master] Update styling of Reference bottom sheet.

https://gerrit.wikimedia.org/r/368211

Looks good @Dbrant, with just a couple of color tweaks:

Light:

• Title and non-link text is #222 (Base10)
• divider is #000000 @opacity 0.12

Dark:

• 'Reference' title text in #c8ccd1 (Base70)
• non-link text in reference is #F8F9FA (Base90)
• divider is #FFFFFF @opacity 0.20

@RHo I wonder if we can use this as an opportunity to start capturing "standardizations" in our color schemes. Specifically:

• Can the "non-link" text color become the standard primary text color for all bottom sheets? (e.g. link preview? wiktionary? add to reading list?) Indeed, can it be the primary text color everywhere in the app (except the actual page content), such as feed card contents, list item titles, etc?
• Can the "title" color become the the standard title color for all bottom sheets? (again, link preview; wiktionary; add to reading list? And can it be the color for feed card titles, too?)
• Can the divider color be used for all dividers in the app? (e.g. list item separator, link preview, page description...)

yes for sure, the different component colors are now detailed in T172984

@Dbrant are you hanging onto this task intentionally or can I pick it up for the remaining tweaks?

Change 377783 had a related patch set uploaded (by Mholloway; owner: Mholloway):
[apps/android/wikipedia@master] Hygiene: update reference dialog colors

https://gerrit.wikimedia.org/r/377783

Hey @RHo, one note on the colors specified above:

The way this works under the hood with the color consolidation we're aiming for is to designate the various views with attributes like "textColorPrimary" or "textColorTertiary" that take on different values depending on the theme applied. textColorPrimary is defined as @base10 in the light theme and @base90 in dark theme. textColorTertiary is defined as @base30 in the light theme and @base70 in dark theme. So this works fine for the dialog body text; it's textColorPrimary.

The problem is with having the title be @base10 in the light theme and @base70 in the dark theme; this would mean we'd need to define a one-off attribute just for this particular view; doable but rather undesirable. Can we just use either textColorPrimary or textColorTertiary, or is it important that we use @base10 and @base70 specifically here?

Hi @Mholloway – that checks out, I've updated the 'Reference' title on dark mode to be @base90 in the Zeplin

Hi @Mholloway - just found a small visual bug in the reference pane whereby there is a 'gap' in the top and bottom of long references. Can it be fixed as part of this ticket?

Steps to repro above bug:

1. Go to an article containing a long reference (eg. Barack Obama article, citation no. 35)
2. Tap on the citation number in that article to open the citation pane
3. Scroll down to the end of the citation which will extend the citation pane to full screen and note the text scrolled inside the pane

In T171469#3608144, @RHo wrote:

Hi @Mholloway - just found a small visual bug in the reference pane whereby there is a 'gap' in the top and bottom of long references. Can it be fixed as part of this ticket?

Sure, we can pull that in.

OK, so I took a look at the reference gap, and here's the scoop:

The "gap" is actually just view padding, which is trivially easy to change or remove. But I'm guessing we don't actually want to remove the body top and bottom padding unconditionally, or we'll end up with this for short references (the typical case):

I'm guessing what we actually want is something like a 16dp padding on the body TextView, for which the top and bottom padding animate down to 0dp as the user scrolls down (if the reference text is long enough to be scrollable). That's a bit more involved, and probably a big enough chunk of work to merit its own Phab ticket.

Change 377783 merged by jenkins-bot:
[apps/android/wikipedia@master] Design tweak: update reference dialog colors

https://gerrit.wikimedia.org/r/377783

Moving to "needs design" pending feedback from @RHo on the margins issue

hi @Mholloway - besides the 16dp top padding, can we also set a minimum height for the citation text pane? Something like this:

I think that would work, with the caveat that a hard-coded minHeight might not correctly handle a situation where the user has adjusted the text size to something very large.

Ah that is a good point for future dynamic text work - we do not currently have the text size changed on the citation pane:

Since Nougat the text size can also be changed through the device's accessibility settings, and this applies to the text in both the WebView and the native components.

I tested this and it looks fine with the largest text size, though.

Change 378751 had a related patch set uploaded (by Mholloway; owner: Mholloway):
[apps/android/wikipedia@master] Design tweak: Update size and padding of reference dialog components

https://gerrit.wikimedia.org/r/378751

SGTM

Change 378751 merged by jenkins-bot:
[apps/android/wikipedia@master] Design tweak: Update size and padding of reference dialog components

https://gerrit.wikimedia.org/r/378751

LGTM

Tested on Nexus (6.0.1), Wikipedia v2.6.203-alpha-2017-10-12