search

madeleine-patience / Considerate-Cat-Version-2-With-Next

Considerate Cat Version 2
https://conisderate-cat-version-2.vercel.app
2 stars 0 forks source link

Fixes #32 storybook display issue tarot dialog #37

Closed arthvadrr closed 2 months ago

arthvadrr commented 2 months ago

Pull Request Summary Fixes #32

A good use case for grid! ...err...MUI grid!

Description: This update addresses the TarotDialog sizing issues observed in Storybook. The following changes have been implemented:

  1. Dialog layout:

    • The Dialog now uses MUI's 12-col-grid system. Allows for easy sizing based on query built ins (xs, sm, md, lg, xl, etc). This is now working so we have a nice mobile view (sm, md) for the Dialog and a simpler layout using more of MUI's styles instead of ours.
    • Images will fit the content without overflowing the container, so no more giant cats hogging all of your view, silly cats.
    • The Dialog on the site and on Storybook should now be consistent and render similarly across all browsers.
    • There is a minHeight used in the grid. This allows the textual content to be vertically centered by giving it's container a static minimum height. The drawback to this is some extra spacing may exist at the bottom of each Dialog.

  2. Some additional style changes:

    • I mostly addressed the layout issues but made a couple updates to some colors, text sizes, and other styles. We can continue improving the design in another PR.
    • Added two new colors that contrast to WCAG standards with light pink and green (7.7:1, AAA enhanced). These can be accessed using palette.greens.contrastLightAAA and palette.pinks.contrastLightAAA.
vercel[bot] commented 2 months ago

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

Name Status Preview Comments Updated (UTC)
conisderate-cat-version-2 ✅ Ready (Inspect) Visit Preview 💬 Add feedback Sep 6, 2024 3:50pm
considerate-cat-version-2-with-next ✅ Ready (Inspect) Visit Preview 💬 Add feedback Sep 6, 2024 3:50pm