Mobile friendly swap widget using Material UI's 'theme.spacing()'

[secretshardul]

The current code uses hardcoded CSS dimensions which break responsiveness on mobile. They have been replaced by theme.spacing() for adaptive resizing.

Screenshots

Mobile

Desktop

[secretshardul]

Travis linting error has been resolved.

[armaniferrante]

Awesome.

The new theme styling makes the component noticeably more cramped in the web ui. Is there a way to make these changes map more closely to the current component styling? For example, make it a little wider, taller, etc.

[secretshardul]

Awesome.

The new theme styling makes the component noticeably more cramped in the web ui. Is there a way to make these changes map more closely to the current component styling? For example, make it a little wider, taller, etc.

Took some creative liberty haha, so the design deviated a bit. Here's what I plan:

1. Taller: Add vertical padding
2. Wider: Add horizontal padding, increase width of swapTokenSelectorContainer.

I like the larger token icons, but should I revert that as well?

[armaniferrante]

Awesome. The new theme styling makes the component noticeably more cramped in the web ui. Is there a way to make these changes map more closely to the current component styling? For example, make it a little wider, taller, etc.

Took some creative liberty haha, so the design deviated a bit. Here's what I plan:

1. Taller: Add vertical padding
2. Wider: Add horizontal padding, increase width of swapTokenSelectorContainer.

I like the larger token icons, but should I revert that as well?

I don't hate the new styling. Just want to make sure that if we change it, we do it with intention. Let's keep the styling the same for now, address the mobile responsiveness here, and we can consider changing sizes in a subsequent PR.

[secretshardul]

Updated

Awesome. The new theme styling makes the component noticeably more cramped in the web ui. Is there a way to make these changes map more closely to the current component styling? For example, make it a little wider, taller, etc.

Took some creative liberty haha, so the design deviated a bit. Here's what I plan:

1. Taller: Add vertical padding
2. Wider: Add horizontal padding, increase width of swapTokenSelectorContainer.

I like the larger token icons, but should I revert that as well?

I don't hate the new styling. Just want to make sure that if we change it, we do it with intention. Let's keep the styling the same for now, address the mobile responsiveness here, and we can consider changing sizes in a subsequent PR.

Updated to reflect original styling.

The original example code was not in the exact centre. This has been resolved, so you may notice a rightwards shift. Here's what happens when width is increased in the old version.

https://github.com/project-serum/swap-ui/blob/1886a484cba208a64f6d30e43b17e6b7c8a73af4/example/src/App.tsx#L93

Fixed it in the same commit for it was breaking responsiveness on mobile screens.

[armaniferrante]

Rebased on master.

[armaniferrante]

The changes didn't quite restore the original UI dimensions. So I went ahead and used your original spacing parameters.