Align Remix plugin UI styles with different Remix themes

[sweep-ai]

PR Feedback (click)

• 👍 Sweep Did Well
• 👎 Sweep Needs Improvement

Description

This PR aligns the UI styles of the Remix plugin with different Remix themes, such as light and dark. It introduces support for theme switching by using CSS variables and the prefers-color-scheme media feature. The modifications ensure that all UI components adapt to the selected theme, providing a consistent and visually appealing user experience.

Summary of Changes

• Added CSS variables for colors, backgrounds, and other theme-dependent properties in various UI components.
• Used the prefers-color-scheme media feature to switch between light and dark themes.
• Modified the BackgroundNotices, Card, CompiledContracts, DevnetAccountSelector, EnvCard, EnvironmentSelector, ExplorerSelector, JSONView, ManualAccount, NM, NewTestnetAccount, StateAction, Wallet, CairoVersion, Compilation, Deployment, Environment, Interaction, Plugin, and TransactionHistory components to use the CSS variables and adapt to the selected theme.

Please review and merge these changes to align the Remix plugin UI styles with different Remix themes.

Fixes #140.

---

🎉 Latest improvements to Sweep:

• Sweep can now passively improve your repository! Check out Rules to learn more.

---

💡 To get Sweep to edit this pull request, you can:

• Comment below, and Sweep can edit the entire PR
• Comment on a file, Sweep will only modify the commented file
• Edit the original issue to get Sweep to recreate the PR from scratch

[sweep-ai]

Sandbox Executions

• Check plugin/src/components/ui_components/Container/container.css ✓

Sandbox logs for

trunk init 1/3 ✓

⡿ Downloading Trunk 1.17.1...
⡿ Downloading Trunk 1.17.1...
⢿ Downloading Trunk 1.17.1...
⣻ Downloading Trunk 1.17.1...
⣽ Downloading Trunk 1.17.1...
⣾ Downloading Trunk 1.17.1...
⣷ Downloading Trunk 1.17.1...
✔ Downloading Trunk 1.17.1... done
⡿ Verifying Trunk sha256...
✔ Verifying Trunk sha256... done
⡿ Unpacking Trunk...
✔ Unpacking Trunk... done


✔ 22 linters were enabled (.trunk/trunk.yaml)
  actionlint 1.6.26 (6 github-workflow files)
  bandit 1.7.5 (1 python file)
  black 23.9.1 (1 python file)
  checkov 3.0.14 (2 docker, 6 json, 9 yaml files)
  clippy 1.65.0 (1 rust file)
  dotenv-linter 3.3.0 (1 dotenv file)
  git-diff-check (154 files)
  hadolint 2.12.0 (2 docker files) (created .hadolint.yaml)
  isort 5.12.0 (1 python file) (created .isort.cfg)
  markdownlint 0.37.0 (6 markdown files) (created .markdownlint.yaml)
  osv-scanner 1.4.2 (2 lockfile files)
  oxipng 9.0.0 (5 png files)
  prettier 3.0.3 (27 css, 1 html, 1 javascript, 6 json, 6 markdown, 1 prettier_supported_configs, 59 typescript, 8 yaml files)
  ruff 0.1.3 (1 python file) (created ruff.toml)
  rustfmt 1.65.0 (18 rust files) (created .rustfmt.toml)
  shellcheck 0.9.0 (6 shell files) (created .shellcheckrc)
  shfmt 3.6.0 (6 shell files)
  taplo 0.8.1 (2 toml files)
  terrascan 1.18.3 (2 docker files)
  trivy 0.46.1 (2 docker, 9 yaml files)
  trufflehog 3.62.0 (156 files)
  yamllint 1.32.0 (8 yaml files) (created .yamllint.yaml)
Next Steps
 1. Read documentation
    Our documentation can be found at https://docs.trunk.io
 2. Get help and give feedback
    Join the Trunk community at https://slack.trunk.io

trunk fmt plugin/src/components/ui_components/Container/container.css || exit 0 2/3 ✓

Checked 1 file
✔ No issues

trunk check --fix --print-failures plugin/src/components/ui_components/Container/container.css 3/3 ✓

Checked 1 file
✔ No issues

• Check plugin/src/components/ui_components/Dialog/dialog.css ✓

Sandbox logs for https://github.com/NethermindEth/starknet-remix-plugin/commit/9e502bffa66a6a6b9e0ba8eb52afe51de5b87965

trunk fmt plugin/src/components/ui_components/Dialog/dialog.css || exit 0 1/2 ✓

 ✔ Formatted plugin/src/components/ui_components/Dialog/dialog.css
Re-checking autofixed files...


Checked 1 file
✔ No issues

trunk check --fix --print-failures plugin/src/components/ui_components/Dialog/dialog.css 2/2 ✓

Checked 1 file
✔ No issues

• Check plugin/src/components/ui_components/Dropdown/dropdown.css ✓

Sandbox logs for https://github.com/NethermindEth/starknet-remix-plugin/commit/17ffff189a98bc8651f6b6d8f423e1a89149702c

trunk fmt plugin/src/components/ui_components/Dropdown/dropdown.css || exit 0 1/2 ✓

 ✔ Formatted plugin/src/components/ui_components/Dropdown/dropdown.css
Re-checking autofixed files...


Checked 1 file
✔ No issues

trunk check --fix --print-failures plugin/src/components/ui_components/Dropdown/dropdown.css 2/2 ✓

Checked 1 file
✔ No issues

• Check plugin/src/components/ui_components/Tabs/tabs.css ✓

Sandbox logs for https://github.com/NethermindEth/starknet-remix-plugin/commit/cab3876b2db6f8ef1eaa01234b077208b63da6f9

trunk fmt plugin/src/components/ui_components/Tabs/tabs.css || exit 0 1/2 ✓

 ✔ Formatted plugin/src/components/ui_components/Tabs/tabs.css
Re-checking autofixed files...


Checked 1 file
✔ No issues

trunk check --fix --print-failures plugin/src/components/ui_components/Tabs/tabs.css 2/2 ✓

Checked 1 file
✔ No issues

• Check plugin/src/components/ui_components/Tooltip/tooltip.css ✗

Sandbox logs for

trunk fmt plugin/src/components/ui_components/Tooltip/tooltip.css || exit 0 1/2 ✓

  FAILURES  
 prettier  plugin/src/components/ui_components/Tooltip/tooltip.css  .trunk/out/XalCN.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure

trunk check --fix --print-failures plugin/src/components/ui_components/Tooltip/tooltip.css 2/2 ❌ (`1`)

  FAILURES  
 prettier  plugin/src/components/ui_components/Tooltip/tooltip.css  .trunk/out/rrlVB.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 1 file
✖ No issues, 1 failure
# .trunk/out/rrlVB.yaml
trunk_cli_version: 1.17.1
title: prettier exited with exit_code=2
report:
  - prettier exited with exit_code=2
  - linter:
      command: |
        /root/.cache/trunk/tools/prettier/3.0.3-f40a31f1cf22ae011727ab1e40e55171/node_modules/.bin/prettier -w plugin/src/components/ui_components/Tooltip/tooltip.css
      stdin_path: (none)
      run_from: /tmp/trunk-0/ztg1wt/AofVNl
      timeout: 10m
      rerun: (cd /tmp/trunk-0/ztg1wt/AofVNl; env -i PATH=/root/.cache/trunk/tools/prettier/3.0.3-f40a31f1cf22ae011727ab1e40e55171/node_modules/.bin:/root/.cache/trunk/tools/node/18.12.1-00ae74f39ac4de3ff3c7e3686016ebf3/bin:/root/.cache/trunk/tools/node/18.12.1-00ae74f39ac4de3ff3c7e3686016ebf3:/root/.nvm/versions/node/v18.17.0/bin/:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin HOME=/root NODE_PATH=/root/.cache/trunk/tools/prettier/3.0.3-f40a31f1cf22ae011727ab1e40e55171/node_modules /root/.cache/trunk/tools/prettier/3.0.3-f40a31f1cf22ae011727ab1e40e55171/node_modules/.bin/prettier -w plugin/src/components/ui_components/Tooltip/tooltip.css)
      affects_cache:
        []
      direct_configs:
        []
      exit_status: exited
      exit_code: 2
      stdout: (none)
      stderr: |
        [error] plugin/src/components/ui_components/Tooltip/tooltip.css: SyntaxError: CssSyntaxError: Unknown word (100:4)
        [error]    98 | }
        [error]    99 | +:root {
        [error] > 100 | +  --light-background: #ffffff;
        [error]       |    ^
        [error]   101 | +  --dark-background: #000000;
        [error]   102 | +  --light-text: #000000;
        [error]   103 | +  --dark-text: #ffffff;
    parser: |
      (none)

• Check plugin/src/components/ui_components/Tooltip/tooltip.css ✓

Sandbox logs for https://github.com/NethermindEth/starknet-remix-plugin/commit/22880519f3a5f170285b205cc3ad0e3941b86c1e

trunk fmt plugin/src/components/ui_components/Tooltip/tooltip.css || exit 0 1/2 ✓

 ✔ Formatted plugin/src/components/ui_components/Tooltip/tooltip.css
Re-checking autofixed files...


Checked 1 file
✔ No issues

trunk check --fix --print-failures plugin/src/components/ui_components/Tooltip/tooltip.css 2/2 ✓

Checked 1 file
✔ No issues

• Check plugin/src/components/ui_components/Tooltip/tooltip.css ✓

Sandbox logs for

trunk fmt plugin/src/components/ui_components/Tooltip/tooltip.css || exit 0 1/2 ✓

Checked 1 file
✔ No issues

trunk check --fix --print-failures plugin/src/components/ui_components/Tooltip/tooltip.css 2/2 ✓

Checked 1 file
✔ No issues

• Check plugin/src/components/BackgroundNotices/index.tsx ✓

Sandbox logs for https://github.com/NethermindEth/starknet-remix-plugin/commit/f5b9209aa4b39241db809c1ad907694004b54a7d

trunk fmt plugin/src/components/BackgroundNotices/index.tsx || exit 0 1/2 ✓

 ✔ Formatted plugin/src/components/BackgroundNotices/index.tsx
Re-checking autofixed files...


Checked 1 file
✔ No issues

trunk check --fix --print-failures plugin/src/components/BackgroundNotices/index.tsx 2/2 ✓

Checked 1 file
✔ No issues

• Check plugin/src/components/Card/index.tsx ✓

Sandbox logs for https://github.com/NethermindEth/starknet-remix-plugin/commit/cd899f83725b4d3cec8ba3636f483e4f2f3983e3

trunk fmt plugin/src/components/Card/index.tsx || exit 0 1/2 ✓

 ✔ Formatted plugin/src/components/Card/index.tsx
Re-checking autofixed files...


Checked 1 file
✔ No issues

trunk check --fix --print-failures plugin/src/components/Card/index.tsx 2/2 ✓

Checked 1 file
✔ No issues

• Check plugin/src/components/CompiledContracts/index.tsx ✓

Sandbox logs for https://github.com/NethermindEth/starknet-remix-plugin/commit/e3a027812815de8d87353b59b130c363c6b61a3f

trunk fmt plugin/src/components/CompiledContracts/index.tsx || exit 0 1/2 ✓

 ✔ Formatted plugin/src/components/CompiledContracts/index.tsx
Re-checking autofixed files...


Checked 1 file
✔ No issues

trunk check --fix --print-failures plugin/src/components/CompiledContracts/index.tsx 2/2 ✓

Checked 1 file
✔ No issues

• Check plugin/src/components/DevnetAccountSelector/index.tsx ⋯

Run plugin/src/components/DevnetAccountSelector/index.tsx through the sandbox.

• Check plugin/src/components/EnvCard/index.tsx ▶

Run plugin/src/components/EnvCard/index.tsx through the sandbox.

• Check plugin/src/components/EnvironmentSelector/index.tsx ▶

Run plugin/src/components/EnvironmentSelector/index.tsx through the sandbox.

• Check plugin/src/components/ExplorerSelector/index.tsx ▶

Run plugin/src/components/ExplorerSelector/index.tsx through the sandbox.

• Check plugin/src/components/JSONView/index.tsx ▶

Run plugin/src/components/JSONView/index.tsx through the sandbox.

• Check plugin/src/components/ManualAccount/index.tsx ▶

Run plugin/src/components/ManualAccount/index.tsx through the sandbox.

• Check plugin/src/components/NM/index.tsx ▶

Run plugin/src/components/NM/index.tsx through the sandbox.

• Check plugin/src/components/NewTestnetAccount/index.tsx ▶

Run plugin/src/components/NewTestnetAccount/index.tsx through the sandbox.

• Check plugin/src/components/StateAction/index.tsx ▶

Run plugin/src/components/StateAction/index.tsx through the sandbox.

• Check plugin/src/components/Wallet/index.tsx ▶

Run plugin/src/components/Wallet/index.tsx through the sandbox.

• Check plugin/src/features/CairoVersion/index.tsx ▶

Run plugin/src/features/CairoVersion/index.tsx through the sandbox.

• Check plugin/src/features/Compilation/index.tsx ▶

Run plugin/src/features/Compilation/index.tsx through the sandbox.

• Check plugin/src/features/Deployment/index.tsx ▶

Run plugin/src/features/Deployment/index.tsx through the sandbox.

• Check plugin/src/features/Environment/index.tsx ▶

Run plugin/src/features/Environment/index.tsx through the sandbox.

• Check plugin/src/features/Interaction/index.tsx ▶

Run plugin/src/features/Interaction/index.tsx through the sandbox.

• Check plugin/src/features/Plugin/index.tsx ▶

Run plugin/src/features/Plugin/index.tsx through the sandbox.

• Check plugin/src/features/TransactionHistory/index.tsx ▶

Run plugin/src/features/TransactionHistory/index.tsx through the sandbox.

[sweep-ai]

Apply Sweep Rules to your PR?

• Apply: Leftover TODOs in the code should be handled.
• Apply: All new business logic should have corresponding unit tests in the tests/ directory.
• Apply: Any clearly inefficient or repeated code should be optimized or refactored.

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
starknet-remix-plugin	❌ Failed (Inspect)			Oct 31, 2023 11:20pm

[JorikSchellekens]

You redefine the variables in many places. Please define the dark and light variables in one place and import them where needed. Create a reasonably named new file for this.

[sweep-ai]

🚀 Wrote Changes

Done.