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

Enhance/Changing plans landing raster img to svg #6023

Merged
merged 5 commits into from
Jan 2, 2017

Conversation

jeffgolenski
Copy link
Member

Fixes: #5947

We've switched all the images on the apps landing page, and need to follow through with that on the plans page. svg designed + added to match apps landing page. a11y added to svg and tested on mobile.

Before:
screen shot 2016-12-15 at 11 46 36 am

After:
screen shot 2016-12-30 at 1 55 45 pm

Plans landing: adding inline SVG to replace png
Plans landing: Proper a11y added to new svg, and resizing
Plans Landing: adjusting svg sizing for smaller breakpoints
Plans Landing: resetting the code used for testing
@jeffgolenski jeffgolenski added [Focus] Accessibility Improving usability for all users (a11y) Admin Page React-powered dashboard under the Jetpack menu [Status] Design Polish [Status] Needs Review This PR is ready for review. labels Dec 30, 2016
@jeffgolenski jeffgolenski added this to the 4.5 milestone Dec 30, 2016
@jeffgolenski jeffgolenski self-assigned this Dec 30, 2016
@dereksmart
Copy link
Member

dereksmart commented Jan 2, 2017

Icon looks good except it's throwing a couple console warnings about the svg atts:

screen shot 2017-01-02 at 1 54 37 pm

@jeffgolenski
Copy link
Member Author

@dereksmart Those are both valid atts. https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes

You think that has something to do with the react syntax though?

@dereksmart
Copy link
Member

You think that has something to do with the react syntax though?

Yep, In React, all DOM properties and attributes (including event handlers) should be camelCased. #

Mind updating it?

Plans landing svg: adding camelCase to some svg attrs. stroke-width >
strokeWidth && fill-opacity > fillOpacity
@jeffgolenski
Copy link
Member Author

@dereksmart sure thing derek. Good catch. inlined SVG code is kind of a pain in react. Let me know if you notice anything else!

@dereksmart
Copy link
Member

Thanks Jeff, LGTM

@dereksmart dereksmart added [Status] Ready to Merge Go ahead, you can push that green button! and removed [Status] Needs Review This PR is ready for review. labels Jan 2, 2017
@jeffgolenski jeffgolenski removed the request for review from eliorivero January 2, 2017 22:07
@jeffgolenski jeffgolenski merged commit 35786b5 into master Jan 2, 2017
@jeffgolenski jeffgolenski deleted the enhance/plans-landing-svg branch January 2, 2017 22:08
@jeherve
Copy link
Member

jeherve commented Jan 9, 2017

@dereksmart This should probably be cherry-picked to branch-4.5.

jeherve added a commit that referenced this pull request Jan 9, 2017
dereksmart pushed a commit that referenced this pull request Jan 17, 2017
CHangelog: add #5457

Changelog: add #5487

Changelog: add #5708

Changelog: add #5879

Changelog: add #5932

Changelog: add #5963

Changelog: add #5968

Changelog: add #5996

Changelog: add #5998

Changelog: add #5999

Changelog: add #6012

Changelog: add #6013

Changelog: add #6014

Changelog: add #6015

Changelog: add #6023

Changelog: add #6024

Changelog: add #6030

Changelog: add #5465

CHangelog: add #6063

Changelog: add #6025

Changelog: add #5974

Changelog: add #6059

Changelog: add #6046

Changelog: add #5418

Changelog: move things around and add missing information.

Changelog: add #5565

Changelog: add #6087

Changelog: add #6095
dereksmart pushed a commit that referenced this pull request Jan 17, 2017
Changelog: add #5867

Changelog: add #5874

Changelog: add #5905

Changelog: add #5906

Changelog: add #5931

Changelog: add #5933

Changelog: add #5934

Bring over 4.4.2 changelog from branch-4.4

@see 18012a3

Changelog: add #5976, #5978, #5983

Changelog: add #5917

Changelog: add #5832

Changelog: add 4.4.2 release post link.

CHangelog: add #5457

Changelog: add #5487

Changelog: add #5708

Changelog: add #5879

Changelog: add #5932

Changelog: add #5963

Changelog: add #5968

Changelog: add #5996

Changelog: add #5998

Changelog: add #5999

Changelog: add #6012

Changelog: add #6013

Changelog: add #6014

Changelog: add #6015

Changelog: add #6023

Changelog: add #6024

Changelog: add #6030

Changelog: add #5465

CHangelog: add #6063

Changelog: add #6025

Changelog: add #5974

Changelog: add #6059

Changelog: add #6046

Changelog: add #5418

Changelog: move things around and add missing information.

Changelog: add #5565

Changelog: add #6087

Changelog: add #6095

Readme: add @tyxla to the list of contributors.

Improved changelog for your readability and enjoyment

updated the release date

finalizing the changelog with a few more edits
@kraftbj kraftbj removed the [Status] Ready to Merge Go ahead, you can push that green button! label Oct 13, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Admin Page React-powered dashboard under the Jetpack menu [Focus] Accessibility Improving usability for all users (a11y)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Admin: Raster IMG on free plan header needs to be an SVG
4 participants