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

style: adjust grid behavior and update collection page styles #5226

Merged
merged 34 commits into from
Nov 16, 2022

Conversation

callil
Copy link
Collaborator

@callil callil commented Nov 15, 2022

Changes grid behavior to prevent reflowing of items. This reduces layout thrash when filter or bag is opened/closed. Added more breakpoints for the css-grid behavior as a result. Also refined the animation speed and timing for grid reflow and for scale effect on cards.

Other things to note:

  • font weights updated to reflect design intent
  • backgroundInteractive color in light theme on NFTs updated to reflect design intent
  • Drop shadows refined on cards, banner and collection profile image
  • Small spacing, and font weight tweaks to match design intent.
  • Updated sweep component with a gradient border to match design intent
  • Added small "details" button styling to make card CTA more clear
  • Updated card styles to use a psuedo element for selected outline states (tested across browsers).

Tested in light and dark mode and on mobile.

@vercel
Copy link

vercel bot commented Nov 15, 2022

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated
interface ✅ Ready (Inspect) Visit Preview Nov 16, 2022 at 8:55PM (UTC)

src/nft/components/collection/ActivitySwitcher.css.ts Outdated Show resolved Hide resolved
src/nft/components/collection/Card.css.ts Outdated Show resolved Hide resolved
src/nft/components/collection/CollectionNfts.css.ts Outdated Show resolved Hide resolved
src/nft/components/collection/CollectionNfts.tsx Outdated Show resolved Hide resolved
src/nft/components/collection/Sweep.tsx Outdated Show resolved Hide resolved
src/nft/pages/collection/index.tsx Show resolved Hide resolved
src/nft/components/collection/Card.tsx Outdated Show resolved Hide resolved
src/nft/components/collection/Card.css.ts Show resolved Hide resolved
src/nft/components/collection/Card.css.ts Show resolved Hide resolved
Copy link
Contributor

@cbachmeier cbachmeier left a comment

Choose a reason for hiding this comment

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

LGTM

@callil callil merged commit b30679c into main Nov 16, 2022
@callil callil deleted the adjust-grid-behavior branch November 16, 2022 21:11
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.

3 participants