Enlarging Picture in Gallery

Modal is good, especially when you want to enlarge or pop something up but just focus on that task only.

Keep that in mind, I have used modal to display a bigger version of picture.

Therefore I have to refactor the Modal for reusable purposes. Before, my modal is used only for form, so I added the form content into it directly. Besides, to display modal, we must have a wrapper component, which contains both modal component itself and an “anchor” component which trigger the modal and has a role of “reference” for the modal. It was a button component.

After redesign, my CustomModal can contain both of those, and the type of “anchor” component and content component now might be vary.

After that, I have another wrapper component to perform a specific modification for each type of Modal (the CustomModal is a general one, contains UI code in general and can be reused). The structures may be below:

CustomModal(props) {

<AnchorComponent/>

<Modal>{props.children}</Modal>

}

-code

PictureModal(){ //UI and function codes

<CustomModal>

<ContentModal/>

</CustomModal>

}

-code

The only thing which I still to figure out is that, I can not reuse my breakpoints for screen media from vanilla-extract but Material-UI default breakpoints. I am sure will come back to fix it as if we change the breakpoints in the future, we might need to worry about 1 place.