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

@@ -74,6 +74,7 @@ body {
 }
 *::-webkit-scrollbar {
   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

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

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

@@ -91,6 +91,7 @@ body {
 }
 *::-webkit-scrollbar {
   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

tsconfig.paths.json

@@ -103,6 +103,15 @@
             "@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"
             ],