Remove css-in-js button styles from core

[dmijatovic]

Based on the feedback from users of haddock web app and the investigation performed in this issue it is been decided to remove css-in-js styles from core library. Instead, the specific classes are added which can be used for customization btn-catalog-node, btn-visual-node, btn-visual-panel.

It was not possible to completely remove @emotion dependency. There were build errors with the storybook components. I moved @emotion to devDependencies for now.

After removing styles from core lib, the (example) download app styles are extended. Additional (similar) work might be needed in the other apps (I have not checked it actually).

Example download app (with changed styles)

[netlify[bot]]

✅ Deploy Preview for i-vresse-workflow-builder ready!

Name	Link
🔨 Latest commit	41b32a2043c139d30ce61e1dd23746d1662c9793
🔍 Latest deploy log	https://app.netlify.com/sites/i-vresse-workflow-builder/deploys/65f2daff0bcbb10008705b07
😎 Deploy Preview	https://deploy-preview-139--i-vresse-workflow-builder.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[codecov-commenter]

Codecov Report

Attention: Patch coverage is 18.18182% with 45 lines in your changes are missing coverage. Please review.

Project coverage is 67.04%. Comparing base (7206c03) to head (41b32a2). Report is 1 commits behind head on main.

:exclamation: Your organization needs to install the Codecov GitHub app to enable full functionality.

Additional details and impacted files

[](https://app.codecov.io/gh/i-VRESSE/workflow-builder/pull/139?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=i-VRESSE) ```diff @@ Coverage Diff @@ ## main #139 +/- ## ========================================== + Coverage 66.74% 67.04% +0.29% ========================================== Files 57 57 Lines 4065 4017 -48 Branches 337 337 ========================================== - Hits 2713 2693 -20 + Misses 1348 1320 -28 Partials 4 4 ``` | [Flag](https://app.codecov.io/gh/i-VRESSE/workflow-builder/pull/139/flags?src=pr&el=flags&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=i-VRESSE) | Coverage Δ | | |---|---|---| | [core-unit](https://app.codecov.io/gh/i-VRESSE/workflow-builder/pull/139/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=i-VRESSE) | `64.12% <18.18%> (+0.33%)` | :arrow_up: | | [form-unit](https://app.codecov.io/gh/i-VRESSE/workflow-builder/pull/139/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=i-VRESSE) | `78.50% <ø> (ø)` | | Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=i-VRESSE#carryforward-flags-in-the-pull-request-comment) to find out more. | [Files](https://app.codecov.io/gh/i-VRESSE/workflow-builder/pull/139?dropdown=coverage&src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=i-VRESSE) | Coverage Δ | | |---|---|---| | [packages/core/src/constants.ts](https://app.codecov.io/gh/i-VRESSE/workflow-builder/pull/139?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=i-VRESSE#diff-cGFja2FnZXMvY29yZS9zcmMvY29uc3RhbnRzLnRz) | `100.00% <ø> (ø)` | | | [packages/core/src/Example.tsx](https://app.codecov.io/gh/i-VRESSE/workflow-builder/pull/139?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=i-VRESSE#diff-cGFja2FnZXMvY29yZS9zcmMvRXhhbXBsZS50c3g=) | `0.00% <0.00%> (ø)` | | | [packages/core/src/VisualNode.tsx](https://app.codecov.io/gh/i-VRESSE/workflow-builder/pull/139?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=i-VRESSE#diff-cGFja2FnZXMvY29yZS9zcmMvVmlzdWFsTm9kZS50c3g=) | `21.05% <66.66%> (-17.95%)` | :arrow_down: | | [packages/core/src/CatalogNode.tsx](https://app.codecov.io/gh/i-VRESSE/workflow-builder/pull/139?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=i-VRESSE#diff-cGFja2FnZXMvY29yZS9zcmMvQ2F0YWxvZ05vZGUudHN4) | `0.00% <0.00%> (ø)` | | | [packages/core/src/VisualPanel.tsx](https://app.codecov.io/gh/i-VRESSE/workflow-builder/pull/139?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=i-VRESSE#diff-cGFja2FnZXMvY29yZS9zcmMvVmlzdWFsUGFuZWwudHN4) | `66.07% <33.33%> (+5.00%)` | :arrow_up: | | [packages/core/src/WorkflowPanel.tsx](https://app.codecov.io/gh/i-VRESSE/workflow-builder/pull/139?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=i-VRESSE#diff-cGFja2FnZXMvY29yZS9zcmMvV29ya2Zsb3dQYW5lbC50c3g=) | `0.00% <0.00%> (ø)` | |

[dmijatovic]

The download button disappears under the page fold when the form gets expanded a lot. while before a scrollbar was shown around the form/catalog/workflow. In the hadock3 webapp the button row floats. Having the least amount of scrollbars is I think my preference, Not sure if the button row should be sticky or get pushed down. What do you think?

Maybe we can move the global parameters to be first item in the workflow list (without the option for move and delete) and then have three workflow buttons at the top: Upload, Download and Clear. For the "node" buttons (save, delete and cancel) we could implement some basic "auto save" approach and remove the buttons. Delete option is present in the list but we loose the cancel option in this case.