This repository has been archived by the owner on Jan 20, 2025. It is now read-only.
[WIP] UI rinse #365
Closed
[WIP] UI rinse #365
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…and make them friendlier (rounder).
* show `MdCheck` along `CartIndicator` success message * more concise microcopy for `CartIndicator` along the way
* use `fontSizes` * increase container gutters for desktop, analog to what we do for the `Contributor` drawer/panel * increase whitespace for `Costs`, increase margin in between it and `Total` * calmer `Costs` — no `colors.brand`, only emphasize `FREE` * render `numberEntry` cart item count at `20px` when cart is `closed`, make it cover less of the cart icon * deemphasize cart icon when cart is empty (grey), emphasize it when items are added (accent) * deemphasize `CartToggle` state when cart is `open` * add a new component `<Small>` to deemphasize the `USD` price prefix * "items in cart" -> "Items in cart" * add `colors.border` and use it * remove `border-bottom` for `CartListItem` — less visual clutter * emphasize `CartListItem` `Name`, deemphasize `Meta`, fix a couple `line-height`s
…and actually use it (more).
* define `max-width` * increase whitespace (`minHeight`) * use `minHeight` in `PageContent`
- UI rinse pt. II - less magic numbers, more constants (from `styles.js`) styles.js - reduce number of `colors`, `gradients` - add `shadows`, `transitions`, `zIndices` - add units to the `spacing` scale package.json - remove unused react-onclickoutside, react-router-dom - bump gatsby-plugin-image, gatsby-source-shopify - bump react, react-dom - bump husky, lint-staged, prettier, stylelint, stylelint-config-standard, stylelint-order, stylelint-processor-styled-components 404 page - adjust link to Gatsby homepage from gatsbyjs.org to gatsbyjs.com OpenBar.js - refactor to get rid of a bunch of magic numbers – `writing-mode` FTW (https://caniuse.com/css-writing-mode) .eslintrc.json - remove flowtype plugin and config - add jsx-a11y plugin … will include more details in the PR description ✌️
have role="img", and have an accessible description.
|
Closing this – won't get back to this in the near future, and don't want to put anyone through reviewing this, either. Will leave the branch around FWIW. ✌️ |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Still a bit to do, but mostly there 😉 … sneak preview:
TL;DR
WIP overview
UI things
CarticonButlerillustration, replace theButler handwith an arrow iconSad cartillustration in favor of just the messageFutura PTasheadlinefont, switch toInter, add serifs andmonospacesprinklesButlerhead, as well as add it to theUpdating carttoast-webkit-scrollbarstylesmax-width, make the links calmer, addminHeightconstant to increase whitespace (accounted for in thePageContentlayout via the new constant)radiuskey nomenclature with other scales and make them friendlier (rounder)visuallyHiddenstyle utility (and use it to hide the colons afterSubtotal,Shippingetc. in the cartGatsbyStorelogo (analog to monogram size on gatsbyjs.com; theGatsby Storeword mark is controlled individually and still needs some adjustment to match dotcom)Components and pages
component styles
styles.js)styles.jscolors,gradientsshadows,transitions,zIndices,fontSizes,lineHeights,gradients,transitions, and use themspacingscale404 page
OpenBar.js
writing-modeFTW (https://caniuse.com/css-writing-mode)Dependencies, ESLint, Gatsby plugin config
package.jsonreact-onclickoutside,react-router-domgatsby-plugin-image,gatsby-source-shopifyreact,react-domreact-iconsto v4emotionpackages to v11 and removebabel-plugin-react-iconshusky,lint-staged,prettier,stylelint,stylelint-config-standard,stylelint-order,stylelint-processor-styled-componentsgatsby-config.jsapiKeyfrom thegatsby-source-shopifyplugin options.eslintrc.json
… (WIP)