revamp of plugin ui

[harmeet-builder]

Following changes are done to plugin UI

1. Added checklist of steps before and after import to builder
2. Description of plugin and Builder
3. Tabs to separate import and export
4. Minor UI changes

Screenshots

[gitguardian[bot]]

⚠️ GitGuardian has uncovered 1 secret following the scan of your pull request.

Please consider investigating the findings and remediating the incidents. Failure to do so may lead to compromising the associated services or software components.

🔎 Detected hardcoded secret in your pull request

| GitGuardian id | Secret | Commit | Filename | | | -------------- | ------------------------- | ---------------- | --------------- | -------------------- | | [-](https://dashboard.gitguardian.com/incidents/secrets) | Generic High Entropy Secret | 54a116c93b8acddfedad47fe79972b577305bb4e | plugin/ui.tsx | [View secret](https://github.com/BuilderIO/figma-html/commit/54a116c93b8acddfedad47fe79972b577305bb4e#diff-fa45a9fb8fff70e9c8dac66e2cd41635L670) |

🛠 Guidelines to remediate hardcoded secrets

1. Understand the implications of revoking this secret by investigating where it is used in your code. 2. Replace and store your secret safely. [Learn here](https://blog.gitguardian.com/secrets-api-management?utm_source=product&utm_medium=GitHub_checks&utm_campaign=check_run_comment) the best practices. 3. Revoke and [rotate this secret](https://docs.gitguardian.com/secrets-detection/detectors/generics/generic_high_entropy_secret#revoke-the-secret?utm_source=product&utm_medium=GitHub_checks&utm_campaign=check_run_comment). 4. If possible, [rewrite git history](https://blog.gitguardian.com/rewriting-git-history-cheatsheet?utm_source=product&utm_medium=GitHub_checks&utm_campaign=check_run_comment). Rewriting git history is not a trivial act. You might completely break other contributing developers' workflow and you risk accidentally deleting legitimate data. To avoid such incidents in the future consider - following these [best practices](https://blog.gitguardian.com/secrets-api-management/?utm_source=product&utm_medium=GitHub_checks&utm_campaign=check_run_comment) for managing and storing secrets including API keys and other credentials - install [secret detection on pre-commit](https://docs.gitguardian.com/internal-repositories-monitoring/integrations/git_hooks/pre_commit?utm_source=product&utm_medium=GitHub_checks&utm_campaign=check_run_comment) to catch secret before it leaves your machine and ease remediation.

---

<sup>🦉 GitGuardian detects secrets in your source code to help developers and security teams secure the modern development process. You are seeing this because you or someone else with access to this repository has authorized GitGuardian to scan your pull request.

Our GitHub checks need improvements? Share your feedbacks!</sup>

[steve8708]

one other piece of feedback - this is a lot of text and the warning is pretty intense. maybe we should only show the warning text after you click "get code"? feels like we want from too friendly (no heads up) to too scary (wall of text and big bold "WARNING!") and feels like there is a happy middleground somewhere

[steve8708]

open to other ideas to strike this balance. but the warning may be better as a "while you wait, be aware that this is not magic ..."

[samijaber]

one other piece of feedback - this is a lot of text and the warning is pretty intense. maybe we should only show the warning text after you click "get code"? feels like we want from too friendly (no heads up) to too scary (wall of text and big bold "WARNING!") and feels like there is a happy middleground somewhere

@steve8708 the warning can also appear on the Visual Editor side of things, in a popup modal on-load. That would defer it and keep this plugin un-cluttered

[harmeet-builder]

@steve8708, @samijaber. Removed the word Warning and simplified the text. Also created task of pop-up modal on load in builder editor