First attempt at applying style from Invision to auth page

[cheerfulstoic]

Hello!

I thought I would take a stab at this issue as I thought some style might be a good place to start without understanding too much about the app.

This isn't finished yet, but I wanted to submit something early as a place for discussion and to make sure that I'm not going down any wrong paths.

I focused on making the log in page look like the InVision mockup. That is dialed in well, but now all pages have a background making them harder to read. I can tackle that if everything looks good here (I probably wouldn't try to style the entire app, but get it to a point where it's usable and which isn't too far from the spirit of the other mock-ups).

Notes:

• This doesn't address the flash messages (I can take care of that if desired. I don't see that address in the mockups, but I can at least make it not ugly / hard to read)
• I might be stepping on existing style, please let me know if I am (I'm going to make comments on specific lines)
• Along the same lines, have you thought about some sort of framework for standardizing things like buttons (it doesn't need Bootstrap, just something basic so that there isn't a lot of wheel re-inventing). It seemed like there were some classes for a framework on the auth page, but I wasn't sure if that was just leftover from templates from phoenix or something.

[cheerfulstoic]

This is the sort of thing it would be nice not to have to re-do

[cheerfulstoic]

Don't know you're position on using px/em/rem/whatever. Happy to stick to conventions

[bglusman]

Awesome! This looks good to me at a glance, Thia may have more opinion, they did wireframes and most.of styling, I'm on mobile and can't at them apparently but maybe you can @kalzumeus or whatever the spelling is 😃

[bglusman]

Oh and we tentatively decided to use semantic-ui but didn't apply that decision yet, if that works for you run with it! And thanks so much for starting this!

[cheerfulstoic]

Here's a screenshot for a preview (you can see the poorly styled flash message in the upper left):

I ❤️ Semantic UI, so I'd be happy to start using that / set it up as needed.

[bglusman]

Looks great! Want to do that in this PR or shall I merge and make that a follow-up?

[bglusman]

Also just FYI I merged in one of @fcapovilla 's PR's just now I forgot was open since December helping to scope admin stuff... right now we have no design or content for a basic landing page to host at www.openpantry.io (though the subdomains are live, such as flatbush.openpantry.io) and there's a ticket somewhere around that if you're interested in tackling that... I can try and help with some content but I'm also open to all takers on design/content, basically imagining some description of the project and scope, and maybe a couple of links/call-to-action things around finding a participating pantry and/or signing up as a new pantry to use the software... both also imply new content not yet designed but hopefully not too hard to imagine. @komizutama may have some thoughts on those (They're the one I meant to ping above when I was on mobile, so Thia, have a look at this but looks good to me)

[cheerfulstoic]

I'd like to clean up a couple of things so I don't leave the app in a bad state, but then yeah, it would be great to merge this. I definitely don't want to create long running branches ;)

I can certainly try to attack design/styling stuff, though I don't feel like I know enough about the project yet to create content about the project, scope, and links. I'd be happy to take existing text any drop it in somewhere, though ;)

[komizutama]

Hey @cheerfulstoic This all looks good! I'm going to go ahead and merge. Thank you! I'll chat with you on code corps about divying up tasks.. maybe do it on a per page basis? I'd like to get this at least in reasonable shape asap so that Masbia can begin using it and we can have live user testing.

[cheerfulstoic]

Thanks! I think I'm just about at a place where I have some changes using Semantic UI to get the whole site to a not unreasonable state. I got the main language selection page and the food selection page styled pretty well, so I'll make a PR for that shortly

[bglusman]

Hah I thought we decided to wait for the fixes to not effect restkf site etc but whatever we'll figure it out 🙃

[bglusman]

But you guys are in charge of don't end, just be careful not to conflict/duplicate work I guess!

[bglusman]

*front end

[komizutama]

@cheerfulstoic Are you on Code Corps yet?
Could we plan a time soon to chat and work up a plan so we don't step on each other's toes. I'd like to get back to coding and want to put together a revised product roadmap.
I could just focus on that do like Product management/design stuff and then let you be primary front end dev if you like.
Cheers

[bglusman]

He is on code corps, the other Brian 😉

[bglusman]

@cheerfulstoic oh actually for now we're OK dropping all language selection stuff FYI as translation is a beast of a problem for all the foods, hoping to use openfoodfacts eventually but for now it's not that useful...

[cheerfulstoic]

@komizutama I'm on Code Corps. I'm not completely sure how it works yet so just let me know what you'd like me to do. I should clarify that front-end stuff isn't my strong suit. I tend to be more back-end, but I have plenty of experience with the front-end and I'm happy to help with it.

@bglusman Sure, it'd be easy enough to remove the page.

What should we do about this PR? With the switch to Semantic UI some things might be broken and I still don't feel like I have a good enough understanding of the app. I can continue to dig around, but it would be good to have a second set of eyes. And/Or, it might be useful to have an understanding of what things are working and what state they are in so that I know what to expect.

[bglusman]

Yeah I think that PR fails some tests in the test suite, hopefully you can run it locally? perhaps I can pull down the branch tomorrow and run also to help if needed.