Grid View:

- themes are improved
- added Remix Guide Plugin
- added Grid view components

apps/remix-ide/src/app.js

@@ -42,6 +42,7 @@ import { CodeFormat } from './app/plugins/code-format'
 import { SolidityUmlGen } from './app/plugins/solidity-umlgen'
 import { CompilationDetailsPlugin } from './app/plugins/compile-details'
 import { VyperCompilationDetailsPlugin } from './app/plugins/vyper-compilation-details'
+import { RemixGuidePlugin } from './app/plugins/remixGuide'
 import { ContractFlattener } from './app/plugins/contractFlattener'
 import { TemplatesPlugin } from './app/plugins/remix-templates'
 import { fsPlugin } from './app/plugins/electron/fsPlugin'
@@ -222,6 +223,10 @@ class AppComponent {
     // ----------------- Compilation Details ----------------------------
     const compilationDetails = new CompilationDetailsPlugin(appManager)
     const vyperCompilationDetails = new VyperCompilationDetailsPlugin(appManager)
+
+    // ----------------- Remix Guide ----------------------------
+    const remixGuide = new RemixGuidePlugin(appManager)
+
     // ----------------- ContractFlattener ----------------------------
     const contractFlattener = new ContractFlattener()
 
@@ -340,6 +345,7 @@ class AppComponent {
       solidityumlgen,
       compilationDetails,
       vyperCompilationDetails,
+      remixGuide,
       contractFlattener,
       solidityScript,
       templates,

apps/remix-ide/src/assets/css/themes/bootstrap-cerulean.min.css

@@ -66,6 +66,19 @@ body {
     text-align:left;
     background-color:#fff
 }
+
+*::-webkit-scrollbar {
+  width:  8px;
+  height: 6px;
+  background-color: var(--body-bg);
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: var(--secondary);
+  opacity: 0.3;
+  border-radius: 30px;
+}
+
 [tabindex="-1"]:focus:not(:focus-visible) {
     outline:0!important
 }

apps/remix-ide/src/assets/css/themes/bootstrap-cyborg.min.css

@@ -67,6 +67,19 @@ body {
     text-align:left;
     background-color:#060606
 }
+
+*::-webkit-scrollbar {
+  width:  8px;
+  height: 6px;
+  background-color: var(--body-bg);
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: var(--secondary);
+  opacity: 0.3;
+  border-radius: 30px;
+}
+
 [tabindex="-1"]:focus:not(:focus-visible) {
     outline:0!important
 }
@@ -5635,7 +5648,7 @@ a.bg-light:focus,a.bg-light:hover,button.bg-light:focus,button.bg-light:hover {
     background-color:#090909!important
 }
 .bg-dark {
-    background-color:#adafae!important
+    background-color:#2f3130!important
 }
 a.bg-dark:focus,a.bg-dark:hover,button.bg-dark:focus,button.bg-dark:hover {
     background-color:#939695!important

apps/remix-ide/src/assets/css/themes/bootstrap-flatly.min.css

@@ -65,6 +65,19 @@ body {
 	text-align:left;
 	background-color:#fff
 }
+
+*::-webkit-scrollbar {
+  width:  8px;
+  height: 6px;
+  background-color: var(--body-bg);
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: var(--secondary);
+  opacity: 0.3;
+  border-radius: 30px;
+}
+
 [tabindex="-1"]:focus:not(:focus-visible) {
 	outline:0!important
 }

apps/remix-ide/src/assets/css/themes/bootstrap-spacelab.min.css

@@ -69,6 +69,19 @@ body {
     text-align:left;
     background-color:#fff
 }
+
+*::-webkit-scrollbar {
+  width:  8px;
+  height: 6px;
+  background-color: var(--body-bg);
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: var(--secondary);
+  opacity: 0.3;
+  border-radius: 30px;
+}
+
 [tabindex="-1"]:focus:not(:focus-visible) {
     outline:0!important
 }

apps/remix-ide/src/assets/css/themes/remix-black_undtds.css

@@ -73,7 +73,8 @@ body {
   background-color: var(--body-bg);
 }
 *::-webkit-scrollbar {
-  width: 8px;
+  width:  8px;
+  height: 6px;
 }
 *::-webkit-scrollbar-thumb {
   background-color: #37373b;

apps/remix-ide/src/assets/css/themes/remix-candy_ikhg4m.css

@@ -14,7 +14,7 @@
   --gray: #6c757d;
   --gray-dark: #343a40;
   --primary: #fc58a3;
-  --secondary: #e2f5f2;
+  --secondary: #c7e3de;
   --success: #24b882;
   --info: #00bbff;
   --warning: #fabe33;
@@ -76,6 +76,18 @@ body {
   background-color: var(--body-bg);
 }
 
+*::-webkit-scrollbar {
+  width:  8px;
+  height: 6px;
+  background-color: var(--body-bg);
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: var(--secondary);
+  opacity: 0.3;
+  border-radius: 30px;
+}
+
 [tabindex="-1"]:focus {
   outline: 0 !important;
 }

apps/remix-ide/src/assets/css/themes/remix-dark_tvx1s2.css

@@ -73,7 +73,8 @@ body {
   background-color: var(--body-bg);
 }
 *::-webkit-scrollbar {
-  width: 8px;
+  width:  8px;
+  height: 6px;
 }
 *::-webkit-scrollbar-thumb {
   background-color: #41455b;

apps/remix-ide/src/assets/css/themes/remix-hacker_owl.css

@@ -90,7 +90,8 @@ body {
   background-color: var(--body-bg);
 }
 *::-webkit-scrollbar {
-  width: 8px;
+  width:  8px;
+  height: 6px;
 }
 *::-webkit-scrollbar-thumb {
   background-color: #41455b;

apps/remix-ide/src/assets/css/themes/remix-light_powaqg.css

@@ -76,6 +76,18 @@ body {
   background-color: var(--body-bg);
 }
 
+*::-webkit-scrollbar {
+  width:  8px;
+  height: 6px;
+  background-color: var(--body-bg);
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: var(--secondary);
+  opacity: 0.3;
+  border-radius: 30px;
+}
+
 [tabindex="-1"]:focus {
   outline: 0 !important;
 }

apps/remix-ide/src/assets/css/themes/remix-midcentury_hrzph3.css

@@ -76,6 +76,18 @@ body {
   background-color: var(--body-bg);
 }
 
+*::-webkit-scrollbar {
+  width:  8px;
+  height: 6px;
+  background-color: var(--body-bg);
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: var(--secondary);
+  opacity: 0.3;
+  border-radius: 30px;
+}
+
 [tabindex="-1"]:focus {
   outline: 0 !important;
 }

apps/remix-ide/src/assets/css/themes/remix-unicorn.css

@@ -76,6 +76,18 @@ body {
   background-color: var(--body-bg);
 }
 
+*::-webkit-scrollbar {
+  width:  8px;
+  height: 6px;
+  background-color: var(--body-bg);
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: var(--secondary);
+  opacity: 0.3;
+  border-radius: 30px;
+}
+
 [tabindex="-1"]:focus {
   outline: 0 !important;
 }

apps/remix-ide/src/assets/css/themes/remix-violet.css

@@ -76,6 +76,18 @@ body {
   background-color: var(--body-bg);
 }
 
+*::-webkit-scrollbar {
+  width:  8px;
+  height: 6px;
+  background-color: var(--body-bg);
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: var(--secondary);
+  opacity: 0.3;
+  border-radius: 30px;
+}
+
 [tabindex="-1"]:focus {
   outline: 0 !important;
 }

apps/remix-ide/src/remixAppManager.js

@@ -127,7 +127,8 @@ export function isNative(name) {
     'doc-viewer',
     'circuit-compiler',
     'compilationDetails',
-    'vyperCompilationDetails'
+    'vyperCompilationDetails',
+    'remixGuide',
   ]
   return nativePlugins.includes(name) || requiredModules.includes(name)
 }

libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx

@@ -13,8 +13,6 @@ import { appPlatformTypes, platformContext } from '@remix-ui/app'
 import { HomeTabFileElectron } from './components/homeTabFileElectron'
 import { LanguageOptions } from './components/homeTablangOptions'
 
-
-
 declare global {
   interface Window {
     _paq: any

libs/remix-ui/static-analyser/src/staticanalyser.d.ts

@@ -2,7 +2,7 @@ import { CompilationResult, SourceWithTarget } from '@remixproject/plugin-api'
 
 import { ViewPlugin } from '@remixproject/engine-web';
 import { EventEmitter } from 'events';
-import {Registry} from '@remix-project/remix-lib';
+import { Registry } from '@remix-project/remix-lib';
 export declare class AnalysisTab extends ViewPlugin {
   event: EventManager;
   events: EventEmitter;

tsconfig.paths.json

@@ -2,166 +2,175 @@
     "compilerOptions": {
         "paths": {
             "@remix-project/core-plugin": [
-                "libs/remix-core-plugin/src/index.ts"
+              "libs/remix-core-plugin/src/index.ts"
             ],
             "@remix-project/remix-analyzer": [
-                "libs/remix-analyzer/src/index.ts"
+              "libs/remix-analyzer/src/index.ts"
             ],
             "@remix-project/remix-astwalker": [
-                "libs/remix-astwalker/src/index.ts"
+              "libs/remix-astwalker/src/index.ts"
             ],
             "@remix-project/remix-debug": [
-                "libs/remix-debug/src/index.ts"
+              "libs/remix-debug/src/index.ts"
             ],
             "@remix-project/remix-lib": [
-                "libs/remix-lib/src/index.ts"
+              "libs/remix-lib/src/index.ts"
             ],
             "@remix-project/remix-niks": [
-                "libs/remix-niks/src/index.ts"
+              "libs/remix-niks/src/index.ts"
             ],
             "@remix-project/remix-node": [
-                "libs/remix-node/src/index.ts"
+              "libs/remix-node/src/index.ts"
             ],
             "@remix-project/remix-simulator": [
-                "libs/remix-simulator/src/index.ts"
+              "libs/remix-simulator/src/index.ts"
             ],
             "@remix-project/remix-solidity": [
-                "libs/remix-solidity/src/index"
+              "libs/remix-solidity/src/index"
             ],
             "@remix-project/remix-tests": [
-                "libs/remix-tests/src/index.ts"
+              "libs/remix-tests/src/index.ts"
             ],
             "@remix-project/remix-url-resolver": [
-                "libs/remix-url-resolver/src/index.ts"
+              "libs/remix-url-resolver/src/index.ts"
             ],
             "@remix-project/remix-ws-templates": [
-                "libs/remix-ws-templates/src/index.ts"
+              "libs/remix-ws-templates/src/index.ts"
             ],
             "@remix-project/remixd": [
-                "libs/remixd/index.ts"
+              "libs/remixd/index.ts"
             ],
             "@remix-ui/app": [
-                "libs/remix-ui/app/src/index.ts"
+              "libs/remix-ui/app/src/index.ts"
             ],
             "@remix-ui/checkbox": [
-                "libs/remix-ui/checkbox/src/index.ts"
+              "libs/remix-ui/checkbox/src/index.ts"
             ],
             "@remix-ui/clipboard": [
-                "libs/remix-ui/clipboard/src/index.ts"
+              "libs/remix-ui/clipboard/src/index.ts"
             ],
             "@remix-ui/debugger-ui": [
-                "libs/remix-ui/debugger-ui/src/index.ts"
+              "libs/remix-ui/debugger-ui/src/index.ts"
             ],
             "@remix-ui/drag-n-drop": [
-                "libs/remix-ui/drag-n-drop/src/index.ts"
+              "libs/remix-ui/drag-n-drop/src/index.ts"
             ],
             "@remix-ui/editor": [
-                "libs/remix-ui/editor/src/index.ts"
+              "libs/remix-ui/editor/src/index.ts"
             ],
             "@remix-ui/file-decorators": [
-                "libs/remix-ui/file-decorators/src/index.ts"
+              "libs/remix-ui/file-decorators/src/index.ts"
             ],
             "@remix-ui/file-explorer": [
-                "libs/remix-ui/file-explorer/src/index.ts"
+              "libs/remix-ui/file-explorer/src/index.ts"
             ],
             "@remix-ui/helper": [
-                "libs/remix-ui/helper/src/index.ts"
+              "libs/remix-ui/helper/src/index.ts"
             ],
             "@remix-ui/home-tab": [
-                "libs/remix-ui/home-tab/src/index.ts"
+              "libs/remix-ui/home-tab/src/index.ts"
             ],
             "@remix-ui/modal-dialog": [
-                "libs/remix-ui/modal-dialog/src/index.ts"
+              "libs/remix-ui/modal-dialog/src/index.ts"
             ],
             "@remix-ui/panel": [
-                "libs/remix-ui/panel/src/index.ts"
+              "libs/remix-ui/panel/src/index.ts"
             ],
             "@remix-ui/permission-handler": [
-                "libs/remix-ui/permission-handler/src/index.ts"
+              "libs/remix-ui/permission-handler/src/index.ts"
             ],
             "@remix-ui/plugin-manager": [
-                "libs/remix-ui/plugin-manager/src/index.ts"
+              "libs/remix-ui/plugin-manager/src/index.ts"
             ],
             "@remix-ui/publish-to-storage": [
-                "libs/remix-ui/publish-to-storage/src/index.ts"
+              "libs/remix-ui/publish-to-storage/src/index.ts"
             ],
             "@remix-ui/renderer": [
-                "libs/remix-ui/renderer/src/index.ts"
+              "libs/remix-ui/renderer/src/index.ts"
             ],
             "@remix-ui/run-tab": [
-                "libs/remix-ui/run-tab/src/index.ts"
+              "libs/remix-ui/run-tab/src/index.ts"
             ],
             "@remix-ui/search": [
-                "libs/remix-ui/search/src/index.ts"
+              "libs/remix-ui/search/src/index.ts"
             ],
             "@remix-ui/settings": [
-                "libs/remix-ui/settings/src/index.ts"
+              "libs/remix-ui/settings/src/index.ts"
             ],
             "@remix-ui/solidity-compile-details": [
-                "libs/remix-ui/solidity-compile-details/src/index.ts"
+              "libs/remix-ui/solidity-compile-details/src/index.ts"
             ],
             "@remix-ui/vyper-compile-details": [
               "libs/remix-ui/vyper-compile-details/src/index.ts"
-          ],
+            ],
+            "@remix-ui/remix-ui-grid-view": [
+              "libs/remix-ui/grid-view/src/index.ts"
+            ],
+            "@remix-ui/remix-ui-grid-section": [
+              "libs/remix-ui/grid-view/src/index.ts"
+            ],
+            "@remix-ui/remix-ui-grid-cell": [
+              "libs/remix-ui/grid-view/src/index.ts"
+            ],
             "@remix-ui/solidity-compiler": [
-                "libs/remix-ui/solidity-compiler/src/index.ts"
+              "libs/remix-ui/solidity-compiler/src/index.ts"
             ],
             "@remix-ui/solidity-unit-testing": [
-                "libs/remix-ui/solidity-unit-testing/src/index.ts"
+              "libs/remix-ui/solidity-unit-testing/src/index.ts"
             ],
             "@remix-ui/static-analyser": [
-                "libs/remix-ui/static-analyser/src/index.ts"
+              "libs/remix-ui/static-analyser/src/index.ts"
             ],
             "@remix-ui/tabs": [
-                "libs/remix-ui/tabs/src/index.ts"
+              "libs/remix-ui/tabs/src/index.ts"
             ],
             "@remix-ui/terminal": [
-                "libs/remix-ui/terminal/src/index.ts"
+              "libs/remix-ui/terminal/src/index.ts"
             ],
             "@remix-ui/theme-module": [
-                "libs/remix-ui/theme-module/src/index.ts"
+              "libs/remix-ui/theme-module/src/index.ts"
             ],
             "@remix-ui/toaster": [
-                "libs/remix-ui/toaster/src/index.ts"
+              "libs/remix-ui/toaster/src/index.ts"
             ],
             "@remix-ui/tooltip-popup": [
-                "libs/remix-ui/tooltip-popup/src/index.ts"
+              "libs/remix-ui/tooltip-popup/src/index.ts"
             ],
             "@remix-ui/tree-view": [
-                "libs/remix-ui/tree-view/src/index.ts"
+              "libs/remix-ui/tree-view/src/index.ts"
             ],
             "@remix-ui/utils": [
-                "libs/remix-ui/utils/src/index.ts"
+              "libs/remix-ui/utils/src/index.ts"
             ],
             "@remix-ui/vertical-icons-panel": [
-                "libs/remix-ui/vertical-icons-panel/src/index.ts"
+              "libs/remix-ui/vertical-icons-panel/src/index.ts"
             ],
             "@remix-ui/workspace": [
-                "libs/remix-ui/workspace/src/index.ts"
+              "libs/remix-ui/workspace/src/index.ts"
             ],
             "@remixproject/debugger-plugin": [
-                "apps/debugger/src/index.ts"
+              "apps/debugger/src/index.ts"
             ],
             "@remixproject/solidity-compiler-plugin": [
-                "apps/solidity-compiler/src/index.ts"
+              "apps/solidity-compiler/src/index.ts"
             ],
             "remix-node": [
-                "libs/remix-node/src/index.ts"
+              "libs/remix-node/src/index.ts"
             ],
             "@remix-ui/locale-module": [
-                "libs/remix-ui/locale-module/src/index.ts"
+              "libs/remix-ui/locale-module/src/index.ts"
             ],
             "@remix-ui/solidity-uml-gen": [
-                "libs/remix-ui/solidity-uml-gen/src/index.ts"
+              "libs/remix-ui/solidity-uml-gen/src/index.ts"
             ],
             "@remix-project/ghaction-helper": [
-                "libs/ghaction-helper/src/index.ts"
+              "libs/ghaction-helper/src/index.ts"
             ],
             "@remixproject/walletconnect-plugin": [
-                "apps/walletconnect/src/index.ts"
+              "apps/walletconnect/src/index.ts"
             ],
             "@remix-ui/xterm": [
-                "libs/remix-ui/xterm/src/index.ts"
+              "libs/remix-ui/xterm/src/index.ts"
             ],
 
         }