Align Remix plugin UI styles with different Remix themes (eg. light vs dark) #140

stranger80 · 2023-10-05T14:44:40Z

Checklist

The text was updated successfully, but these errors were encountered:

sweep-ai · 2023-10-31T22:12:35Z

Here's the PR! #187.

⚡ Sweep Basic Tier: I'm using GPT-4. You have 5 GPT-4 tickets left for the month and 3 for the day.

For more GPT-4 tickets, visit our payment portal. For a one week free trial, try Sweep Pro (unlimited GPT-4 tickets).

Actions (click)

↻ Restart Sweep

Install Sweep Configs: Pull Request

Step 1: 🔎 Searching

I found the following snippets in your repository. I will now analyze these snippets and come up with a plan.

Some code snippets I looked at (click to expand). If some file is missing from here, you can mention the path in the ticket description.

starknet-remix-plugin/README.md

Lines 1 to 164 in 62db8aa

    
           # Starknet Remix Plugin 
        
           [![Static Badge](https://img.shields.io/badge/Try_it_out!-2f6df2)](https://remix.ethereum.org/#activate=Starknet) 
        
           [![Pull Requests welcome](https://img.shields.io/badge/PRs-welcome-ff69b4.svg?style=flat-square)](https://github.com/NethermindEth/Starknet-remix-plugin/issues) 
        
           [![Discord](https://img.shields.io/discord/629004402170134531?label=Discord)](https://discord.com/invite/PaCMRFdvWT) 
        
           [![Static Badge](https://img.shields.io/badge/Telegram-2AABEE)](https://t.me/StarknetRemixPlugin) 
        
           Welcome to the **Starknet Remix Plugin** repository! 🎉  
        
           This powerful tool seamlessly integrates with the Remix IDE, enabling developers to effortlessly deploy and interact with Starknet contracts! Whether you're a Cairo and Starknet wizard 🧙‍♂️ or taking your very first steps, this plugin supercharges your journey by providing an effortless way to deploy and interact with Starknet contracts. Happy coding! 🚀 
        
           <details>  
        
           <summary>Table of Contents</summary> 
        
           - [Starknet Remix Plugin](#Starknet-remix-plugin) 
        
             - [For Users](#for-users) 
        
               - [Getting Started](#getting-started) 
        
                 - Installation 
        
                 - Usage 
        
                 - Feedback 
        
             - [For Developers](#for-developers) 
        
               - [Installation](#installation) 
        
                 - [API](#api) 
        
                 - [Plugin](#plugin) 
        
               - [Running the Development Environment](#running-the-development-environment) 
        
                 - [Connecting the Plugin](#connecting-the-plugin) 
        
             - [Support and Contributions](#support-and-contributions) 
        
           </details> 
        
           ## For users 
        
           If you're looking to utilize the capabilities of Starknet contracts within the Remix IDE, you've come to the right place. This section provides you with a straightforward guide to get started. 
        
           ### Getting Started 
        
           1. **Installation**: Get excited, folks, no complicated installations needed here! If you're a user, all you have to do is head over to the Remix IDE and locate the Starknet Remix Plugin in the plugins section. Want to make it even simpler? Click right through to Remix using [this direct link](https://remix.ethereum.org/#activate=Starknet) and you're good to go! 🎉 
        
           2. **Usage**: Once the plugin is activated, you'll find a user-friendly interface that allows you to deploy and interact with Starknet contracts. Follow the on-screen prompts and tooltips for an effortlessly smooth experience! 
        
           3. **Feedback**: Your feedback is invaluable to us 🌟! If you encounter any issues or have game-changing suggestions, don't hesitate to reach out through our [Discord](https://discord.com/invite/PaCMRFdvWT) or our [Community Forum](https://community.nethermind.io/). Let's make something awesome together! 🤝 
        
           ### Troubleshooting 
        
           Most issues with Starknet plugin or Remix itself are caused by connectivity problems (also resulting from restricted networks, web-proxies blocking certain content, etc.) or browser plugin interference.  
        
           - A user should first attempt to disable any browser components & addons which may impact the connectivity or Javascript execution.  
        
           - Some networks may restrict connectivity to certain sites or domains. Using a VPN connection may resolve problems observed on restricted networks. 
        
           More specific potential error causes are also described in detail below.  
        
           <details> 
        
           <summary><strong>1. Problems when searching plugins in Remix UI</strong></summary>   
        
           <br/> 
        
           Searching for online plugins in Remix IDE may return blank or otherwise incorrect content, such as on screenshot below: 
        
           ![Plugin search not working](docs/images/plugin-search-error.png) 
        
           Ensure that the following URL is accessible from a web browser, and that a JSON metadata code is returned -   
        
           https://raw.githubusercontent.com/ethereum/remix-plugins-directory/master/build/metadata.json : 
        
           ![Correct plugin metadata](docs/images/plugin-metadata-connectivity.png) 
        
           </details> 
        
           <details> 
        
           <summary><strong>2. Problems when launching Starknet plugin in Remix UI</strong></summary>  
        
           <br/>   
        
           Starknet plugin launch issues may be caused by connectivity errors or plugin components being unavailable. This can be tested from web browser, as indicated below: 
        
           - https://cairo-remix-test.nethermind.io should respond with blank page (advanced: viewing page source will reveal a React component entry HTML markup) - no errors should be reported by the browser 
        
           - https://cairo-compile-remix-test.nethermind.io/health should respond with `OK` 
        
           - https://starknet-devnet-dev.nethermind.io/predeployed_accounts should respond with JSON text describing predeployed Starknet accounts 
        
           </details> 
        
           <details> 
        
           <summary><strong>3. `localStorage` access errors</strong></summary>   
        
           <br/> 
        
           The following error indicates that the browser is blocking access to `localStorage` element of the webpage: 
        
           ![localStorage access error](docs/images/plugin-localStorage-error.png) 
        
           Possible causes: 
        
              - Chrome is launched in incognito mode 
        
              - Chrome setting "Block third-party cookies" is activated (see [chrome://settings/cookies](chrome://settings/cookies)): 
        
           ![Chrome cookies settings](docs/images/plugin-chrome-cookies-settings.png) 
        
           Note: even with "Block third-party cookies" activate, exceptions can be added to a whitelist - the whitelist must include: 
        
                - https://remix.ethereum.org 
        
                - https://cairo-remix-test.nethermind.io 
        
              - ...also see this [link](https://stackoverflow.com/questions/30481516/iframe-in-chrome-error-failed-to-read-localstorage-from-window-access-deni) for potential hints. 
        
           </details> 
        
           ## For Developers 
        
           ### Installation 
        
           #### API 
        
           Our API is built with [Rocket](https://rocket.rs/), a web framework for Rust. So, you'll need to get Rust and Cargo on your machine to get started. 🛠️ 
        
           The easiest way to install Rust and Cargo is by using [rustup](https://rustup.rs/). It's the [recommended tool](https://www.rust-lang.org/tools/install) for managing Rust versions and associated tools for your project. 
        
           Then: 
        
           ```bash 
        
           cd api; 
        
           git submodule update --init; 
        
           cargo build; 
        
           ``` 
        
           #### Plugin 
        
           The plugin it self is a React project, you'll need to install [pnpm](https://pnpm.io/installation#using-npm). 
        
           ```bash 
        
           cd plugin; 
        
           pnpm install; 
        
           ``` 
        
           #### Running the development environment 
        
           You need to be running both the server and the plugin in order to have a working environment. 
        
           For your dev environment: 
        
           ```bash 
        
           cd plugin; 
        
           pnpm run start; 
        
           ``` 
        
           For an optimized build (will not listen to changes): 
        
           ``` 
        
           pnpm run deploy; 
        
           pnpm run serve; 
        
           ``` 
        
           ```bash 
        
           cd api; 
        
           cargo run; 
        
           ``` 
        
           or alternatively, you can run the server in watch mode (with `cargo watch`): 
        
           ```bash 
        
           cargo install cargo-watch; 
        
           cargo watch -x run; 
        
           ``` 
        
           For devnet interactions, you'll need to use [Starknet Devnet](https://github.com/Shard-Labs/Starknet-devnet). 
        
           ##### Connecting the plugin 
        
           In [Remix](http://remix-alpha.ethereum.org/), go to the `Plugin Manager` at the bottom of the left panel, and click on `Connect to a Local Plugin`. 
        
           Then, chose a name for the plugin, and in the `URL` field, enter `http://localhost:3000`, the `Type of Connection` should `iframe` and the `Location in remix` `Side Panel` and click on `Ok`, see the image below. 
        
           ![Plugin Manager](./docs/images/plugin-import.png) 
        
           You should be all set to see the magic happen! Activate the plugin and it should now be visible and ready to be hacked with! 🚀 
        
           ## Support and Contributions 
        
           Feel free to contribute! Spotted any [issues](https://github.com/NethermindEth/Starknet-remix-plugin/issues)? Head on over to our [good first issues](https://github.com/NethermindEth/Starknet-remix-plugin/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) or read through our [Contribution Guidelines](/docs/CONTRIBUTING.md) to get started. 📝 
        
           Jump into our [Discord channel](https://discord.com/invite/PaCMRFdvWT) and join our thriving [community](https://community.nethermind.io/)! Connect with other users, share insights, and get all your questions answered. Our community is always eager to help newcomers! 🤝 
        
           We're thrilled for you to experience the Starknet Remix Plugin, and we can't wait to see the inventive ways you'll engage with Starknet contracts! Happy coding! 💡

starknet-remix-plugin/README.md

Lines 125 to 164 in 62db8aa

    
           pnpm run start; 
        
           ``` 
        
           For an optimized build (will not listen to changes): 
        
           ``` 
        
           pnpm run deploy; 
        
           pnpm run serve; 
        
           ``` 
        
           ```bash 
        
           cd api; 
        
           cargo run; 
        
           ``` 
        
           or alternatively, you can run the server in watch mode (with `cargo watch`): 
        
           ```bash 
        
           cargo install cargo-watch; 
        
           cargo watch -x run; 
        
           ``` 
        
           For devnet interactions, you'll need to use [Starknet Devnet](https://github.com/Shard-Labs/Starknet-devnet). 
        
           ##### Connecting the plugin 
        
           In [Remix](http://remix-alpha.ethereum.org/), go to the `Plugin Manager` at the bottom of the left panel, and click on `Connect to a Local Plugin`. 
        
           Then, chose a name for the plugin, and in the `URL` field, enter `http://localhost:3000`, the `Type of Connection` should `iframe` and the `Location in remix` `Side Panel` and click on `Ok`, see the image below. 
        
           ![Plugin Manager](./docs/images/plugin-import.png) 
        
           You should be all set to see the magic happen! Activate the plugin and it should now be visible and ready to be hacked with! 🚀 
        
           ## Support and Contributions 
        
           Feel free to contribute! Spotted any [issues](https://github.com/NethermindEth/Starknet-remix-plugin/issues)? Head on over to our [good first issues](https://github.com/NethermindEth/Starknet-remix-plugin/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) or read through our [Contribution Guidelines](/docs/CONTRIBUTING.md) to get started. 📝 
        
           Jump into our [Discord channel](https://discord.com/invite/PaCMRFdvWT) and join our thriving [community](https://community.nethermind.io/)! Connect with other users, share insights, and get all your questions answered. Our community is always eager to help newcomers! 🤝 
        
           We're thrilled for you to experience the Starknet Remix Plugin, and we can't wait to see the inventive ways you'll engage with Starknet contracts! Happy coding! 💡

starknet-remix-plugin/run.sh

Lines 1 to 16 in 62db8aa

	git clone [email protected]:NethermindEth/starknet-remix-plugin.git

	cd starknet-remix-plugin/plugin

	pnpm install

	screen -S starknet-remix-frontend -d -m pnpm run deploy

	cd ../api

	git submodule update --init;
	cargo build;

	screen -S rust-backend -d -m cargo run

	source ../../starknet-venv/bin/activate

starknet-remix-plugin/plugin/package.json

Lines 1 to 55 in 62db8aa

    
           { 
        
             "name": "starknet-remix-plugin", 
        
             "version": "0.1.0", 
        
             "private": true, 
        
             "dependencies": { 
        
               "@radix-ui/react-accordion": "^1.1.2", 
        
               "@radix-ui/react-dialog": "^1.0.4", 
        
               "@radix-ui/react-dropdown-menu": "^2.0.5", 
        
               "@radix-ui/react-tabs": "^1.0.4", 
        
               "@radix-ui/react-tooltip": "^1.0.6", 
        
               "@remixproject/engine": "^0.3.38", 
        
               "@remixproject/plugin": "^0.3.38", 
        
               "@remixproject/plugin-webview": "^0.3.38", 
        
               "@testing-library/jest-dom": "^5.16.5", 
        
               "@testing-library/react": "^13.4.0", 
        
               "@testing-library/user-event": "^13.5.0", 
        
               "axios": "^1.4.0", 
        
               "bn.js": "^5.2.1", 
        
               "copy-to-clipboard": "^3.3.3", 
        
               "ethers": "^5.7.2", 
        
               "form-data": "^4.0.0", 
        
               "formik": "^2.4.2", 
        
               "get-starknet": "^3.0.1", 
        
               "jotai": "^2.2.2", 
        
               "nanoid": "^4.0.2", 
        
               "react": "^18.2.0", 
        
               "react-dom": "^18.2.0", 
        
               "react-icons": "^4.10.1", 
        
               "starknet": "5.14.1", 
        
               "vite-plugin-svgr": "^4.0.0", 
        
               "web-vitals": "^2.1.4", 
        
               "yup": "^1.2.0" 
        
             }, 
        
             "devDependencies": { 
        
               "@babel/eslint-parser": "^7.22.9", 
        
               "@types/bn.js": "^5.1.1", 
        
               "@types/jest": "^27.5.2", 
        
               "@types/node": "^16.18.38", 
        
               "@types/react": "^18.2.15", 
        
               "@types/react-dom": "^18.2.7", 
        
               "@typescript-eslint/eslint-plugin": "^5.62.0", 
        
               "@vitejs/plugin-react": "^4.1.0", 
        
               "assemblyscript": "^0.27.5", 
        
               "eslint": "^8.45.0", 
        
               "eslint-config-standard-with-typescript": "^35.0.0", 
        
               "eslint-plugin-import": "^2.27.5", 
        
               "eslint-plugin-jsx-a11y": "^6.7.1", 
        
               "eslint-plugin-n": "^15.7.0", 
        
               "eslint-plugin-promise": "^6.1.1", 
        
               "eslint-plugin-react": "^7.32.2", 
        
               "typescript": "^4.9.5", 
        
               "vite": "^4.4.9", 
        
               "vite-plugin-checker": "^0.6.2" 
        
             }, 
        
             "scripts": {

starknet-remix-plugin/plugin/src/components/BackgroundNotices/index.tsx

Lines 1 to 31 in 62db8aa

    
           import { nanoid } from 'nanoid' 
        
           import React from 'react' 
        
           const Notices = [ 
        
             'The starknet Remix Plugin is in Alpha', 
        
             'Cairo contracts and Scarb workspaces are compiled on a server hosted by Nethermind', 
        
             'Declaration of contracts with some wallets will be supported when they update to the latest starknet.js version' 
        
           ] 
        
           const BackgroundNotices: React.FC = () => { 
        
             return ( 
        
               <div> 
        
                 <p className="text-center">Notices</p> 
        
                 { 
        
                   <ul className="list-group"> 
        
                     {Notices.map((notice, index) => { 
        
                       return ( 
        
                         <li key={nanoid()} className="list-group-item d-flex justify-content-left align-items-center disabled"> 
        
                           <span className="badge badge-primary badge-pill mr-2"> 
        
                             {index + 1} 
        
                           </span> 
        
                           {notice} 
        
                         </li> 
        
                       ) 
        
                     })} 
        
                   </ul> 
        
                 } 
        
               </div> 
        
             ) 
        
           }

Step 2: ⌨️ Coding

Modify plugin/src/components/ui_components/Container/container.css ✓ 7fdacc2

Modify plugin/src/components/ui_components/Container/container.css with contents:
• Add CSS variables for colors, backgrounds, and other theme-dependent properties. Define two sets of these variables, one for the light theme and one for the dark theme. Use the `prefers-color-scheme` media feature to switch between these sets based on the user's preferred color scheme.

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

Modify plugin/src/components/ui_components/Dialog/dialog.css ✓ 6176653

Modify plugin/src/components/ui_components/Dialog/dialog.css with contents:
• Similar to the previous step, add CSS variables for theme-dependent properties in the dialog component. Use the `prefers-color-scheme` media feature to switch between light and dark themes.

Check plugin/src/components/ui_components/Dialog/dialog.css ✓ 9e502bf

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

Modify plugin/src/components/ui_components/Dropdown/dropdown.css ✓ 29d8207

Modify plugin/src/components/ui_components/Dropdown/dropdown.css with contents:
• Add CSS variables for theme-dependent properties in the dropdown component. Use the `prefers-color-scheme` media feature to switch between light and dark themes.

Check plugin/src/components/ui_components/Dropdown/dropdown.css ✓ 17ffff1

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

Modify plugin/src/components/ui_components/Tabs/tabs.css ✓ af65a7f

Modify plugin/src/components/ui_components/Tabs/tabs.css with contents:
• Add CSS variables for theme-dependent properties in the tabs component. Use the `prefers-color-scheme` media feature to switch between light and dark themes.

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

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

Modify plugin/src/components/ui_components/Tooltip/tooltip.css ✓ 6fb491c

Modify plugin/src/components/ui_components/Tooltip/tooltip.css with contents:
• Add CSS variables for theme-dependent properties in the tooltip component. Use the `prefers-color-scheme` media feature to switch between light and dark themes.

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)

Modify plugin/src/components/ui_components/Tooltip/tooltip.css ✓ 8c2be6c

Modify plugin/src/components/ui_components/Tooltip/tooltip.css with contents: Remove the "+" characters at the start of each line of the new CSS rules. These rules are intended to define color variables for light and dark modes, but the "+" characters are not valid CSS syntax and are causing the CSS parser to fail. The rules should start with the ":" character, followed by the "root" keyword, and then the CSS properties and values inside curly braces. This is the correct syntax for defining CSS variables in the root scope.

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

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

Modify plugin/src/components/BackgroundNotices/index.tsx ✓ c1f26bd

Modify plugin/src/components/BackgroundNotices/index.tsx with contents:
• Modify the `BackgroundNotices` component to use the CSS variables defined for theme-dependent properties. Ensure that the component adapts to the selected theme.

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

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

Modify plugin/src/components/Card/index.tsx ✓ 73d5317

Modify plugin/src/components/Card/index.tsx with contents:
• Modify the `Card` component to use the CSS variables defined for theme-dependent properties. Ensure that the component adapts to the selected theme.

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

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

Modify plugin/src/components/CompiledContracts/index.tsx ✓ e2ef749

Modify plugin/src/components/CompiledContracts/index.tsx with contents:
• Modify the `CompiledContracts` component to use the CSS variables defined for theme-dependent properties. Ensure that the component adapts to the selected theme.

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

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

Modify plugin/src/components/DevnetAccountSelector/index.tsx ✓ c61464b

Modify plugin/src/components/DevnetAccountSelector/index.tsx with contents:
• Modify the `DevnetAccountSelector` component to use the CSS variables defined for theme-dependent properties. Ensure that the component adapts to the selected theme.

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

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

Modify plugin/src/components/EnvCard/index.tsx ▶

Modify plugin/src/components/EnvCard/index.tsx with contents:
• Modify the `EnvCard` component to use the CSS variables defined for theme-dependent properties. Ensure that the component adapts to the selected theme.

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

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

Modify plugin/src/components/EnvironmentSelector/index.tsx ▶

Modify plugin/src/components/EnvironmentSelector/index.tsx with contents:
• Modify the `EnvironmentSelector` component to use the CSS variables defined for theme-dependent properties. Ensure that the component adapts to the selected theme.

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

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

Modify plugin/src/components/ExplorerSelector/index.tsx ▶

Modify plugin/src/components/ExplorerSelector/index.tsx with contents:
• Modify the `ExplorerSelector` component to use the CSS variables defined for theme-dependent properties. Ensure that the component adapts to the selected theme.

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

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

Modify plugin/src/components/JSONView/index.tsx ▶

Modify plugin/src/components/JSONView/index.tsx with contents:
• Modify the `JSONView` component to use the CSS variables defined for theme-dependent properties. Ensure that the component adapts to the selected theme.

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

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

Modify plugin/src/components/ManualAccount/index.tsx ▶

Modify plugin/src/components/ManualAccount/index.tsx with contents:
• Modify the `ManualAccount` component to use the CSS variables defined for theme-dependent properties. Ensure that the component adapts to the selected theme.

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

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

Modify plugin/src/components/NM/index.tsx ▶

Modify plugin/src/components/NM/index.tsx with contents:
• Modify the `NM` component to use the CSS variables defined for theme-dependent properties. Ensure that the component adapts to the selected theme.

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

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

Modify plugin/src/components/NewTestnetAccount/index.tsx ▶

Modify plugin/src/components/NewTestnetAccount/index.tsx with contents:
• Modify the `NewTestnetAccount` component to use the CSS variables defined for theme-dependent properties. Ensure that the component adapts to the selected theme.

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

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

Modify plugin/src/components/StateAction/index.tsx ▶

Modify plugin/src/components/StateAction/index.tsx with contents:
• Modify the `StateAction` component to use the CSS variables defined for theme-dependent properties. Ensure that the component adapts to the selected theme.

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

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

Modify plugin/src/components/Wallet/index.tsx ▶

Modify plugin/src/components/Wallet/index.tsx with contents:
• Modify the `Wallet` component to use the CSS variables defined for theme-dependent properties. Ensure that the component adapts to the selected theme.

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

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

Modify plugin/src/features/CairoVersion/index.tsx ▶

Modify plugin/src/features/CairoVersion/index.tsx with contents:
• Modify the `CairoVersion` feature to use the CSS variables defined for theme-dependent properties. Ensure that the feature adapts to the selected theme.

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

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

Modify plugin/src/features/Compilation/index.tsx ▶

Modify plugin/src/features/Compilation/index.tsx with contents:
• Modify the `Compilation` feature to use the CSS variables defined for theme-dependent properties. Ensure that the feature adapts to the selected theme.

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

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

Modify plugin/src/features/Deployment/index.tsx ▶

Modify plugin/src/features/Deployment/index.tsx with contents:
• Modify the `Deployment` feature to use the CSS variables defined for theme-dependent properties. Ensure that the feature adapts to the selected theme.

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

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

Modify plugin/src/features/Environment/index.tsx ▶

Modify plugin/src/features/Environment/index.tsx with contents:
• Modify the `Environment` feature to use the CSS variables defined for theme-dependent properties. Ensure that the feature adapts to the selected theme.

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

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

Modify plugin/src/features/Interaction/index.tsx ▶

Modify plugin/src/features/Interaction/index.tsx with contents:
• Modify the `Interaction` feature to use the CSS variables defined for theme-dependent properties. Ensure that the feature adapts to the selected theme.

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

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

Modify plugin/src/features/Plugin/index.tsx ▶

Modify plugin/src/features/Plugin/index.tsx with contents:
• Modify the `Plugin` feature to use the CSS variables defined for theme-dependent properties. Ensure that the feature adapts to the selected theme.

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

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

Modify plugin/src/features/TransactionHistory/index.tsx ▶

Modify plugin/src/features/TransactionHistory/index.tsx with contents:
• Modify the `TransactionHistory` feature to use the CSS variables defined for theme-dependent properties. Ensure that the feature adapts to the selected theme.

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

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

Step 3: 🔁 Code Review

I have finished reviewing the code for completeness. I did not find errors for sweep/align-ui-styles-with-themes.

🎉 Latest improvements to Sweep:

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

💡 To recreate the pull request edit the issue title or description. To tweak the pull request, leave a comment on the pull request.
^{Join Our Discord}

stranger80 added this to [Nubia] Starknet Remix Plugin Oct 5, 2023

stranger80 converted this from a draft issue Oct 5, 2023

stranger80 moved this from Backlog to To Do in [Nubia] Starknet Remix Plugin Oct 11, 2023

stranger80 moved this from To Do to Backlog in [Nubia] Starknet Remix Plugin Oct 11, 2023

stranger80 added this to the v0.3.0 milestone Oct 23, 2023

JorikSchellekens added the sweep label Oct 31, 2023

sweep-ai bot mentioned this issue Oct 31, 2023

Align Remix plugin UI styles with different Remix themes #187

Closed

2 tasks

rjnrohit closed this as completed Dec 14, 2023

github-project-automation bot moved this from Backlog to Done in [Nubia] Starknet Remix Plugin Dec 14, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Align Remix plugin UI styles with different Remix themes (eg. light vs dark) #140

Align Remix plugin UI styles with different Remix themes (eg. light vs dark) #140

stranger80 commented Oct 5, 2023 •

edited by sweep-ai bot

Loading

sweep-ai bot commented Oct 31, 2023 •

edited

Loading

Align Remix plugin UI styles with different Remix themes (eg. light vs dark) #140

Align Remix plugin UI styles with different Remix themes (eg. light vs dark) #140

Comments

stranger80 commented Oct 5, 2023 • edited by sweep-ai bot Loading

sweep-ai bot commented Oct 31, 2023 • edited Loading

Here's the PR! #187.

Actions (click)

Step 1: 🔎 Searching

Step 2: ⌨️ Coding

Step 3: 🔁 Code Review

🎉 Latest improvements to Sweep:

stranger80 commented Oct 5, 2023 •

edited by sweep-ai bot

Loading

sweep-ai bot commented Oct 31, 2023 •

edited

Loading