YEC 2022 Takeover for Android Stable

For reference here is the Fenix MR from last year's: fenix!140 (merged)

Last I heard, YEC is scheduled to go live the week of October 17, but there's on stable scheduled near that time frame. So, we will add the functionality and gate it behind a date check.

@nicob @duncan We need assets please!

changed milestone to %Sponsor 131 - Phase 5 - Ongoing Maintenance

added Android UX labels

assigned to @dan

changed the description

added Task label

@dan and here's the figma link @duncan sent me last week https://www.figma.com/file/B2ON9c7tewUb7FDjtUS5FZ/Process%3A-YEC-'22-Creative?node-id=140%3A72

added Next Q3 labels

marked this issue as related to tor-browser-build#40608 (closed)

YEC comittee wants this turned on from October 13th 2022 to January 1st 2023

Hi @dan! Here's assets for android:

Mockup here

Left-to-right example (Arabic):

You can see and inspect the files here: Figma

I combined the background and foreground image into one because I thought it might make more sense for android, but let me know if you'd prefer them separate like in desktop:

• yec-bg-combined-android-2x
• yec-bg-combined-android-3x

Left to right languages image:

• ltr-yec-combined-android-3x
• ltr-yec-combined-android-2x

Fonts:

• Space Mono
• Space Grotesk

Colors:

• Page background: #0E0625
• Donate button: #C0FF00
• "Powered by privacy:": #C0FF00
• "Resistance": #FF8AFF
• "Change": #C0FF00
• "Freedom": #FF8AFF
• "Your donation will be matched...": #FAF5DF

Spacing/alignment:

• Background image should be centered
• Background image and text over image (resistance, change, freedom) is set on a -2.25 vertical skew

Let me know if you have any feedback or anything else from me. Thanks! :)

@dan you might be able to copy a lot of what I'm doing for desktop torbutton!92 (diffs)

The main difference is you probably want to use something like this styling instead:

.yec-grid {
  grid-template: "heading1 heading1" min-content
                 "image heading-group" min-content
                 "button button" min-content
                 "donate-text donate-text" min-content
                 / auto auto;
}

.yec-background-image {
  grid-area: 2 / 1 / 3 / 3;
}

.yec-donate-button {
  justify-self: stretch;
}

hey @dan jsyk I made some small adjustments to line height and spacing on all android screens in the figma file

• removed all padding from "Powered by Privacy" text box
• changed line height of "Powered by Privacy" to 110%
• changed line height of "Resistance Freedom Change" to 100%
• changed line height of "Donate Now" to 140% so that vertical padding is 10px = 42px button height
• changed margin/gap between "Resistance Freedom Change" from -2.5 to 1

changed milestone to %Year End Campaign 2022

This is where we are at at end of day today.

• still today is find the background color setting and have it also switch on the timegate for YEC22
• retest all the elements don't show, then do show on the time gate
• confirm the time gate (currently assumed for oct 10 ish
• rebase to 102

let me know if you have comments about the 3 lines of text floating on the image. as it is now, the center on this narrow phone had them well over lapping with the megaphone so they have "60 dp" of padding on the Start side of the text. hoping that'll still look good at other resolutions

Hey this is a huge improvement from where it was earlier in the day yesterday!! It's looking great, awesome job @dan :)

Regarding the text, it would be great to get a tad more spacing between the megaphone and 'resistance change freedom' copy if possible.

Also is there any way for us to test how this might work on different sized screens than the device you have?

thanks!

So there is no relation between the image background (with megaphone) and the text. the image just takes up the whole width and the text is centered, and then I've already padded it right some. I can pad it right a bit more to get the desired effect on my phone but I have some worry how it'll stretch on wider screens (edit: And in other languages).

As for testing, I'm a bit stuck. I have another phone but it won't run my local builds yet, and this doesn't render in android studio. I can pass out the apk if you want to try it yourself if you have a different phone?

Just getting the background done up now

hmm yeah that makes me a bit nervous about how it might respond on different screen sizes do we have any sort of protocol for android testing on screen sizes @richard? maybe we can ask a few people who have androids if they'd be willing to test and share screengrabs?

yes I'll send a mail out once @dan has testbuilds :)

oh awesome @richard thanks :)

Maybe we can prod someone on IRC who has an android tablet to test too.

https://share.riseup.net/#1Ll7RdV2iwoaKmloxrhg8A

• added a bit more padding as asked
• got the background sorted

Now rebasing to 102

hey @dan, I realized the bg image assets I shared were already rotated, but for better compatability with LTR I'm imagining it will be better practice to use a non-rotated asset so you can set the rotation depending on the language. However I also know this android build hasn't been straightforward so let me know if it's easier to keep the rotation and just do a separate asset completely for LTR. In the meantime I'm uploading new files for the background image asset and updating in the description as well. Sorry about that!

• yec-bg-mobile-2x
• yec-bg-mobile-3x

@dan I forgot that for android we combined the background and foreground image anyways so you can ignore my last comment unless it ends up making more sense for your build. If not I think you'll need separate images completely for LTR languages:

• ltr-yec-combined-android-3x
• ltr-yec-combined-android-2x

removed Q3 label

added Q4 label

added Doing label and removed Next label

removed Doing label

Merged as fenix!140 (merged).

closed

mentioned in issue #42074 (closed)