Design review fixes

[developit]

Fixes the style issues from #143 (except button colors, which relies on stuff not on the custom-range-inputs branch).

[mustafa-x]

I can't remember the staging URL, do you have one for me to take a look at?

[jakearchibald]

@mustafa-x it's https://deploy-preview-172--squoosh.netlify.com/

[mustafa-x]

A couple of points;

• The toggle button needs to alternate the icon (should be in the sketch file) and perhaps colour so it feels more like a switch
• we need a better preloader, because it isn't clear that the image is loading.
• I think the buttons would look better in the same black perhaps as the settings. Maybe we should dial down the blue for the divider as well.
• found a bug where if I kept changing the image file type before it was process it would flag this error;

- It would be nice for a way to hide all of the UI, maybe a shortcut key perhaps or button, in photoshop, pressing tab allows you to do this so all panels hide from view. - tried to download an image but flagged an error, would let me download afterwards though;

- here is the error message from console;

index.tsx:208 Error: RuntimeError: float unrepresentable in integer range
RuntimeError: float unrepresentable in integer range
at /wasm-function[398]:1480
at /wasm-function[368]:3781
at /wasm-function[186]:33
at /wasm-function[194]:3585
at /wasm-function[367]:320
at /wasm-function[365]:192
at /wasm-function[339]:119
at /wasm-function[340]:182
at /wasm-function[282]:20
at dynCall_viiiii_9 (eval at (820fb28865f383a11a55.worker.js:1), :4:12)
at /wasm-function[398]:1480
at /wasm-function[368]:3781
at /wasm-function[186]:33
at /wasm-function[194]:3585
at /wasm-function[367]:320
at /wasm-function[365]:192
at /wasm-function[339]:119
at /wasm-function[340]:182
at /wasm-function[282]:20
at dynCall_viiiii_9 (eval at (820fb28865f383a11a55.worker.js:1), :4:12)
at Object.deserialize (comlink.es6.js:33)
at u (comlink.es6.js:148)
at comlink.es6.js:53
t.source.i.encoderState.e.encoderState.updateImage.catch.e @ index.tsx:208
mozjpeg_enc.js:4 wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.
(anonymous) @ mozjpeg_enc.js:4
mozjpeg_enc.js:4 falling back to ArrayBuffer instantiation
(anonymous) @ mozjpeg_enc.js:4
mozjpeg_enc.js:4 wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.
(anonymous) @ mozjpeg_enc.js:4
mozjpeg_enc.js:4 falling back to ArrayBuffer instantiation
(anonymous) @ mozjpeg_enc.js:4
mozjpeg_enc.js:4 wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.
(anonymous) @ mozjpeg_enc.js:4
mozjpeg_enc.js:4 falling back to ArrayBuffer instantiation
(anonymous) @ mozjpeg_enc.js:4
imagequant.js:4 wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.
(anonymous) @ imagequant.js:4
imagequant.js:4 falling back to ArrayBuffer instantiation
(anonymous) @ imagequant.js:4
mozjpeg_enc.js:4 wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.
(anonymous) @ mozjpeg_enc.js:4
mozjpeg_enc.js:4 falling back to ArrayBuffer instantiation
(anonymous) @ mozjpeg_enc.js:4
imagequant.js:4 wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.
(anonymous) @ imagequant.js:4
imagequant.js:4 falling back to ArrayBuffer instantiation
(anonymous) @ imagequant.js:4
mozjpeg_enc.js:4 wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.
(anonymous) @ mozjpeg_enc.js:4
mozjpeg_enc.js:4 falling back to ArrayBuffer instantiation
(anonymous) @ mozjpeg_enc.js:4
imagequant.js:4 wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.
(anonymous) @ imagequant.js:4
imagequant.js:4 falling back to ArrayBuffer instantiation
(anonymous) @ imagequant.js:4
mozjpeg_enc.js:4 wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.
(anonymous) @ mozjpeg_enc.js:4
mozjpeg_enc.js:4 falling back to ArrayBuffer instantiation
(anonymous) @ mozjpeg_enc.js:4

[googlebot]

So there's good news and bad news.

👍 The good news is that everyone that needs to sign a CLA (the pull request submitter and all commit authors) have done so. Everything is all good there.

😕 The bad news is that it appears that one or more commits were authored or co-authored by someone other than the pull request submitter. We need to confirm that all authors are ok with their commits being contributed to this project. Please have them confirm that here in the pull request.

Note to project maintainer: This is a terminal state, meaning the cla/google commit status will not change from this state. It's up to you to confirm consent of all the commit author(s), set the cla label to yes (if enabled on your project), and then merge this pull request when appropriate.

[jakearchibald]

There are a few cross-browser issues here, but I'm going to merge this and do a full UI review.