search

codeforbtv / cvoeo-app

The "Money on My Mind" app helps CVOEO's Reach-Up clients stay on track with their personal finance coaching.
Apache License 2.0
11 stars 4 forks source link

Re-style the login screen #31

Closed kmeyersvt closed 5 years ago

kmeyersvt commented 5 years ago

Once issue #30 is complete. Insert the new image into top of the login page.

DoD: the new image is on the Login page

kmeyersvt commented 5 years ago

@siuanm are you creating two separate images - one for the login page and one for the header of the main page?

siuanm commented 5 years ago

Hi Katrina-

I was not planning two separate images.

My understanding is that we need to have the CVOEO logo on the landing page with the MoMM logo. Will have to figure out the best way to do that, as it could look really busy and garish. (Kinda bummed it needs to be there from an aesthetic perspective, but understand why it does!)

I was not planning to create an image for the top app bar on the dashboard. But, I could look into it. So far, I have been adhering pretty strictly to material design standards for the whole dashboard, hoping that makes it easier to build and be cross platform. So, I was just incorporating the material design system regular top app bar component for that page. I think if the app gets more functionality down the road, this will also be good for adding a hamburger or other navigation options, without having to do much redesign. I could play around with color and typography for that component if you think its a bit lackluster? Let me know what you think.

Siuan

Siuan McGahan

www.siuan.com +1 407 308 1209

On Sun, Dec 9, 2018 at 8:26 PM kmeyersvt notifications@github.com wrote:

@siuanm https://github.com/siuanm are you creating two separate images

  • one for the login page and one for the header of the main page?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/codeforbtv/cvoeo-app/issues/31#issuecomment-445613172, or mute the thread https://github.com/notifications/unsubscribe-auth/AlD4aY1zvBrb5Q3wBG_HFuLhoiUHznX4ks5u3bhJgaJpZM4ZKdho .

siuanm commented 5 years ago

@kmeyersvt @doub1ejack There are two images in the CVOEO team drive images folder- 1. CVOEO logo and 2. Financial Futures Program graphic. Do I need to incorporate both on the landing page (please, please, please say 'no') or can I just get away with the CVOEO logo?

kmeyersvt commented 5 years ago

I was thinking we needed branding on the top bar? but if they have to log in each time, then maybe the login page is enough? What is standard, I would think we'd want CVOEO and a small pig in the top near where the Hamburger menu would go?

I'll find out from Kate, I'll send her this.

siuanm commented 5 years ago

Here is the documentation on the material design guidelines I have been using for the app bar: https://material.io/design/components/app-bars-top.html# So far I haven't included any icons for further navigation (like hamburger, overflow, search,, etc) but I can see them being needed if we add any more functionality, even a profile to manage, etc...

I put some toolbar ideas on usabilityhub for you to take a look at: https://app.usabilityhub.com/do/222e6694300f/95c8 The blue one is the material design standard. The others are easy on my end, but I don't have to write the code. So someone from the development end would need to chime in on that.

kmeyersvt commented 5 years ago

Please stop development on anything with the pig logo, Kate has given me a different one :( :(

doub1ejack commented 5 years ago

@siuanm Which "header image" should be added to the login screen. Is this the same "MoMM" graphic that @jbpayne has added to the top of the Dashboard? Would you like it in the same place?

image

siuanm commented 5 years ago

@doub1ejack login screen looks like this android 6 15 there are two images and they are both (hopefully) on the team drive

jbpayne commented 5 years ago

Is there a larger version of that graphic available?

On Fri, Jan 11, 2019 at 2:25 PM Siuan M notifications@github.com wrote:

@doub1ejack https://github.com/doub1ejack login screen looks like this [image: android 6 15] https://user-images.githubusercontent.com/38860905/51055045-ad720600-15ac-11e9-9760-8881b372ffc9.png there are two images and they are both (hopefully) on the team drive

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/codeforbtv/cvoeo-app/issues/31#issuecomment-453629506, or mute the thread https://github.com/notifications/unsubscribe-auth/ApRpDXvP03A4VvHImY01A41YBUp6XIlfks5vCOUvgaJpZM4ZKdho .

doub1ejack commented 5 years ago

@jbpayne This image (LandingPageImage.jpg) is in the team drive. Is it too small?

I also see MoneyBrain.jpg in the cvoeo folder and some versions of the Financial Futures logo in the drive. You could style those accordingly, or ask Siuan for a larger version of LandingPageImage.jpg

doub1ejack commented 5 years ago

Ok, so currently this issue is all about restyling the login screen to go from it's current appearance to Siuan's newer version:

old new

Resources needed should be on the Team Drive, including

jbpayne commented 5 years ago

Yeah, the money brain image is definitely the limiting factor, so hopefully Kate can get us a larger version. If not, that's ok. Siuan did a great job with what she had available!

On Sat, Jan 12, 2019 at 10:58 AM Micah Mutrux notifications@github.com wrote:

@jbpayne https://github.com/jbpayne This image (LandingPageImage.jpg) is in the team drive. Is it too small?

https://camo.githubusercontent.com/6e82168a8d0b27e916ad4c539cfb4af1c1beab06/68747470733a2f2f6c68342e676f6f676c6575736572636f6e74656e742e636f6d2f5f336f3939612d31356b7a6455704b50696b7135394f6a3636427a6a6d69774c4c526a504b4a59306f38527146547948316e7175563266365f766470336f504563734d73594547414371684f43413d77313433392d68373636

I also see MoneyBrain.jpg in the cvoeo folder https://drive.google.com/drive/u/2/search?q=type:image%20parent:1KdC_iNceHcSPv8EPmJReyZeforcQULnO and some versions of the Financial Futures logo in the drive. You could style those accordingly, or ask Siuan for a larger version of LandingPageImage.jpg

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/codeforbtv/cvoeo-app/issues/31#issuecomment-453758459, or mute the thread https://github.com/notifications/unsubscribe-auth/ApRpDa-Nz_GSIASBwZPlkg4XcLtTmaPoks5vCgYVgaJpZM4ZKdho .

kmeyersvt commented 5 years ago

Is there a resolution issue? Kate got it off the internet, so she won't have a higher resolution version. (It was copyright free).

siuanm commented 5 years ago

The image we got from Kate is extremely low res. I just found another version of it on someone else's website that is higher resolution. I will modify it to match our design and we can see if it works. Will get that to you asap.

siuanm commented 5 years ago

hires-money-brain I put a copy of this on drive in design materials/assets. This is much higher resolution than the original image. The background color is slightly different than the original image, so everywhere that was #04A0C6 should now be #01a0c7. I will update the color palette info.

kmeyersvt commented 5 years ago

Nice, thank you!

On Sat, Jan 12, 2019, 2:40 PM Siuan M <notifications@github.com wrote:

[image: hires-money-brain] https://user-images.githubusercontent.com/38860905/51077649-89c7c200-1677-11e9-8a8e-293fa20c63a3.png I put a copy of this on drive in design materials/assets. This is much higher resolution than the original image. The background color is slightly different than the original image, so everywhere that was #04A0C6 should now be #01a0c7. I will update the color palette info.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/codeforbtv/cvoeo-app/issues/31#issuecomment-453775486, or mute the thread https://github.com/notifications/unsubscribe-auth/AjXfnvfsTSu94gsrQgPH2M0S_QoFMtq5ks5vCjo9gaJpZM4ZKdho .

jbpayne commented 5 years ago

See https://github.com/codeforbtv/cvoeo-app/pull/52