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

Refactor/modal #646

Closed
wants to merge 20 commits into from
Closed

Refactor/modal #646

wants to merge 20 commits into from

Conversation

escapedcat
Copy link
Collaborator

@escapedcat escapedcat commented Jul 30, 2023

Fixes #413

First draft

Only took care of the receive modal for now to test this.
Happy for any feedback.

Screenshots

image image image

Open points

  • modal needs to be checked for all screen-sizes
  • light-mode looks weird, but it kinda looks weird on master too
  • buttons could be optimized in general i.e.
    • go with 3 versions: primary, secondary, default
    • they all work in light- and dark-mode
    • should handle different states (i.e. disabled) and icons (i.e. spinner)
    • should be done in another PR
  • switch tab-component to headlessui as well (new PR)

tailwind.config.js Outdated Show resolved Hide resolved
@escapedcat
Copy link
Collaborator Author

Will try to bring this to a presentable state first ;)

@escapedcat
Copy link
Collaborator Author

@cstenglein still just a draft, but could be applied to "all" modals. No rush, any feedback welcome.

Copy link
Collaborator

@cstenglein cstenglein left a comment

Choose a reason for hiding this comment

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

Thank you for the work on this :) 👍


return createPortal(
Copy link
Collaborator

Choose a reason for hiding this comment

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

the transition doesn't really work with a portal. need to google how to make it work

src/layouts/Modal.tsx Outdated Show resolved Hide resolved
src/layouts/Modal.tsx Outdated Show resolved Hide resolved
src/layouts/Modal.tsx Outdated Show resolved Hide resolved
src/layouts/ModalDialog.tsx Outdated Show resolved Hide resolved
src/layouts/Modal.tsx Show resolved Hide resolved
src/layouts/Modal.tsx Show resolved Hide resolved
escapedcat and others added 11 commits August 13, 2023 07:39
Co-authored-by: Christoph Stenglein <9399034+cstenglein@users.noreply.github.com>
Co-authored-by: Christoph Stenglein <9399034+cstenglein@users.noreply.github.com>
Co-authored-by: Christoph Stenglein <9399034+cstenglein@users.noreply.github.com>
Co-authored-by: Christoph Stenglein <9399034+cstenglein@users.noreply.github.com>
@escapedcat
Copy link
Collaborator Author

Will rework this. Not happy with it. Should be simpler.

@escapedcat
Copy link
Collaborator Author

Learned some things. Will tackle this again after the UI has been updated or during the update.

@escapedcat escapedcat closed this Feb 20, 2024
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.

ModalDialog: show header on top
2 participants