ipfs-shipyard / ipfs-share-files

Share files via IPFS
https://share.ipfs.io
MIT License
145 stars 29 forks source link

feat: add modal explainers #104

Closed terichadbourne closed 3 years ago

terichadbourne commented 3 years ago

Closes #82

Awaiting text edits to modals and some styling updates.

terichadbourne commented 3 years ago

@jessicaschilling They work!!!! 🎉 image image

As you can see, the styling for the links needs a smidge more tweaking... it wouldn't let me get away with using actual anchor tags instead of buttons so currently these are buttons with the existing anchor tag styling applied, which will need a couple more tweaks in this case. Sounded like you were okay doing CSS edits, so figured it was best to push as is, but let me know if you'd like help with that.

To edit content, find the blocks that look like this: image The title prop will pull into an H2 automatically but can be removed if you don't want it. contentLabel is required and will turn itself into an aria tag. Where I have the 2 paragraphs you can insert any valid HTML code, with styling you want, which will pull itself in as children.

To edit the size/shape of the modal itself, across all instances, go to modal/Modal.js and edit this section: image You can also change styling for the Close button within this component. We may want an X instead of a button-looking button, for example. Let me know if you'd like me to address that myself.

The modal was created using react-modal so you can reference documentation at http://reactcommunity.org/react-modal/ for styling and such if needed.

terichadbourne commented 3 years ago

Awesome job with the styling, @jessicaschilling! Should we also make it so the arrow doesn't turn into a hand when you hover over those links?

jessicaschilling commented 3 years ago

@terichadbourne it's on the list, just was triaging for demo.

jessicaschilling commented 3 years ago

@terichadbourne or @rafaelramalho19 -- would either of you be able to implement the following?