Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update HTML files to use new design language styles #1102

Merged
merged 5 commits into from
Dec 10, 2020

Conversation

jgray7019
Copy link
Contributor

@jgray7019 jgray7019 commented Nov 5, 2020

Closes #1099

This PR updates all styles and HTML used in the html.erb files to adhere to the new design language that has shipped across the store admin.
Design Language Figma for reference.

Tophatting

  1. You will need to set up a test app using the shopify_app gem.
  2. Checkout this branch of the gem. Re-start your server in the repo for your test app.
  3. Run the local version of your app in any browser (bundle exec rails server) to view the install app page (new.html.erb). This page was not totally following Polaris styles before so I have updated the HTML and styles to better follow Polaris guidelines.

Screen Shot 2020-11-04 at 6 03 03 PM

  1. Using Safari, install your app on a development store to be redirected to the top_level_interaction.html.erb page.

Screen Shot 2020-11-04 at 6 29 08 PM

  1. Click Continue and you will see the request_storage_access.html.erb page.

Screen Shot 2020-11-04 at 6 29 52 PM

  1. Change you Safari version to 12.0.0 to see the enable_cookies.html.erb page. You can do this by clicking on Develop > User Agent > Other

Screen Shot 2020-11-05 at 11 18 59 AM

And then changing the version to `12.0.0`

Screen Shot 2020-11-05 at 11 19 17 AM

This should now show you the correct page:

Screen Shot 2020-11-04 at 6 30 28 PM

@jgray7019 jgray7019 requested a review from a team as a code owner November 5, 2020 16:21
Copy link
Contributor

@paulomarg paulomarg left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎩 ed, and from the code / app perspective it seems good to me!

In any case, I'm re-adding the team review if someone wants to take a closer look at the style itself, but as far as I can tell the app itself is working just fine.

@paulomarg paulomarg requested a review from a team November 6, 2020 16:07
Copy link
Contributor

@tiffanytse tiffanytse left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Im not sure how much of this is just auto generated and pulled in; or what you've written yourself. Just left a few comments. Looks good otherwise!

app/views/shopify_app/partials/_button_styles.html.erb Outdated Show resolved Hide resolved
app/views/shopify_app/partials/_button_styles.html.erb Outdated Show resolved Hide resolved
app/views/shopify_app/sessions/new.html.erb Show resolved Hide resolved
app/views/shopify_app/sessions/new.html.erb Outdated Show resolved Hide resolved
@jgray7019 jgray7019 merged commit a296e98 into master Dec 10, 2020
@jgray7019 jgray7019 deleted the design_language_update branch December 10, 2020 16:29
@jgray7019 jgray7019 mentioned this pull request Dec 10, 2020
4 tasks
@jgray7019 jgray7019 temporarily deployed to rubygems December 10, 2020 20:55 Inactive
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Update relevant HTML + CSS to new admin design language
3 participants