adrienne / added responsive view for step wrapper and refactored modal wrappers

[adrienne-deriv]

Changes:

Please provide a summary of the change.

We have proposed a new change to the modal structure:

• Refactored WalletModal to be a modal wrapper. A modal wrapper is just a skeleton/template that only contains styling for a certain modal template. For instance, some modals have header and footer like MT5AccountTypeModal and JurisdictionModal, while some modals only have a close icon and no header/footer, such as CreatePasswordModal or success modal. Modal wrappers like ModalStepWrapper are templates which have header/footer included, while ModalWrapper is just a plain modal with a close icon.
• The component structure for a modal is proposed to be as the following:

const DeezModal = (props) => {
   ...
   return (
       <Wrapper ...>
            ...modal contents
       </Wrapper>
   )
}

where <Wrapper> can be a wrapper like ModalStepWrapper and ModalWrapper! The important thing to note is that wrappers should not control the behaviour of the modal, only styling of reusable templates.

• Added full-screen responsive wrapper for ModalStepWrapper

Screenshots:

Please provide some screenshots of the change.

[vercel]

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

Name	Status	Preview	Updated (UTC)
deriv-app	✅ Ready (Inspect)	Visit Preview	Oct 2, 2023 7:26am

[github-actions]

A production App ID was automatically generated for this PR. (log)

• PR: adrienne / added responsive view for step wrapper and refactored modal wrappers #10411
• URLs:
  • w/ App ID + Server: https://deriv-app-git-fork-adrienne-deriv-wide-mobile-wrapper.binary.sx?qa_server=red.binaryws.com&app_id=32134
  • Original: https://deriv-app-git-fork-adrienne-deriv-wide-mobile-wrapper.binary.sx
• App ID: 32134

Click here to copy & paste above information.

- **PR**: [https://github.com/binary-com/deriv-app/pull/10411](https://github.com/binary-com/deriv-app/pull/10411)
- **URLs**:
    - **w/ App ID + Server**: https://deriv-app-git-fork-adrienne-deriv-wide-mobile-wrapper.binary.sx?qa_server=red.binaryws.com&app_id=32134
    - **Original**: https://deriv-app-git-fork-adrienne-deriv-wide-mobile-wrapper.binary.sx
- **App ID**: `32134`

[github-actions]

🚨 Lighthouse report for the changes in this PR:

Category	Score
🔺 Performance	21
🟧 Accessibility	75
🟧 Best practices	83
🟧 SEO	85
🟢 PWA	90

Lighthouse ran with https://deriv-app-git-fork-adrienne-deriv-wide-mobile-wrapper.binary.sx/

[sonarqubecloud]

SonarCloud Quality Gate failed.   

1 Bug
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
10.5% Duplication

Catch issues before they fail your Quality Gate with our IDE extension SonarLint

[coveralls]

coverage: 11.24%. remained the same when pulling 05a5d08 on adrienne-deriv:wide-mobile-wrapper into ce6d645 on binary-com:master.