start mutating view for theme module

apps/remix-ide/src/app/tabs/theme-module.js

@@ -2,6 +2,10 @@ import { Plugin } from '@remixproject/engine'
 import { EventEmitter } from 'events'
 import QueryParams from '../../lib/query-params'
 import * as packageJson from '../../../../../package.json'
+import { RemixUiThemeModule } from '@remix-ui/theme-module'
+import ReactDOM from 'react-dom'
+// eslint-disable-next-line no-use-before-define
+import React from 'react'
 import yo from 'yo-yo'
 const _paq = window._paq = window._paq || []
 
@@ -33,6 +37,8 @@ export class ThemeModule extends Plugin {
     this._deps = {
       config: registry.get('config').api
     }
+    this.element = document.createElement('div')
+    this.element.setAttribute('id', 'themeModuleSection')
     this.themes = themes.reduce((acc, theme) => {
       theme.url = window.location.origin + window.location.pathname + theme.url
       return { ...acc, [theme.name]: theme }
@@ -45,6 +51,23 @@ export class ThemeModule extends Plugin {
     this.forced = !!queryTheme
   }
 
+  onActivation () {
+    this.renderComponent()
+  }
+
+  render () {
+    return this.element
+  }
+
+  renderComponent () {
+    ReactDOM.render(
+      <RemixUiThemeModule
+        themeModule={this}
+      />,
+      this.element
+    )
+  }
+
   /** Return the active theme */
   currentTheme () {
     return this.themes[this.active]

libs/remix-ui/settings/src/lib/remix-ui-settings.tsx

@@ -7,6 +7,8 @@ import './remix-ui-settings.css'
 import { ethereumVM, generateContractMetadat, personal, textWrapEventAction, useMatomoAnalytics, saveTokenToast, removeTokenToast } from './settingsAction'
 import { initialState, toastInitialState, toastReducer, settingReducer } from './settingsReducer'
 import { Toaster } from '@remix-ui/toaster'// eslint-disable-line
+import { RemixUiThemeModule } from '@remix-ui/theme-module'
+import { ThemeModule } from 'libs/remix-ui/theme-module/types/theme-module'
 
 /* eslint-disable-next-line */
 export interface RemixUiSettingsProps {
@@ -14,6 +16,7 @@ export interface RemixUiSettingsProps {
   editor: any,
    _deps: any,
    useMatomoAnalytics: boolean
+   themeModule: ThemeModule
 }
 
 export const RemixUiSettings = (props: RemixUiSettingsProps) => {
@@ -155,6 +158,7 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
     </div>
   )
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const themes = () => {
     const themes = props._deps.themeModule.getThemes()
     if (themes) {
@@ -173,14 +177,15 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
       {state.message ? <Toaster message= {state.message}/> : null}
       {generalConfig()}
       {gistToken()}
-      <div className="border-top">
+      {/* <div className="border-top">
         <div className="card-body pt-3 pb-2">
-          <h6 className="card-title">Themes</h6>
+          <h6 className="card-title">Themes Module</h6>
           <div className="card-text themes-container">
             {themes()}
           </div>
         </div>
-      </div>
+      </div> */}
+      <RemixUiThemeModule themeModule={props._deps.themeModule} />
     </div>
   )
 }

libs/remix-ui/theme-module/src/lib/remix-ui-theme-module.tsx

@@ -1,14 +1,35 @@
+import { ThemeModule } from '../../types/theme-module';
 import './remix-ui-theme-module.module.css';
 
 /* eslint-disable-next-line */
-export interface RemixUiThemeModuleProps {}
+export interface RemixUiThemeModuleProps {
+  themeModule: ThemeModule
+}
 
-export function RemixUiThemeModule(props: RemixUiThemeModuleProps) {
+export function RemixUiThemeModule({ themeModule }: RemixUiThemeModuleProps) {
+  const themes = () => {
+    const themes = themeModule.getThemes()
+    if (themes) {
+      return themes.map((aTheme, index) => (
+        <div className="radio custom-control custom-radio mb-1 form-check" key={index}>
+          <input type="radio" onChange={event => { themeModule.switchTheme(aTheme.name) }} className="align-middle custom-control-input" name='theme' id={aTheme.name} data-id={`settingsTabTheme${aTheme.name}`} checked = {themeModule.active === aTheme.name }/>
+          <label className="form-check-label custom-control-label" data-id={`settingsTabThemeLabel${aTheme.name}`} htmlFor={aTheme.name}>{aTheme.name} ({aTheme.quality})</label>
+        </div>
+      )
+      )
+    }
+    return
+  }
   return (
-    <div>
-      <h1>Welcome to remix-ui-theme-module!</h1>
-    </div>
-  );
+    <div className="border-top">
+        <div className="card-body pt-3 pb-2">
+          <h6 className="card-title">Themes Module</h6>
+          <div className="card-text themes-container">
+            <h1>Welcome to remix-ui-theme-module!</h1>
+          </div>
+        </div>
+      </div>
+  )
 }
 
 export default RemixUiThemeModule;

libs/remix-ui/theme-module/types/theme-module.d.ts

@@ -0,0 +1,42 @@
+import { Plugin } from "@remixproject/engine/lib/abstract";
+import { EventEmitter } from "events";
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export class ThemeModule extends Plugin<any, any> {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    constructor(registry: any);
+    events: EventEmitter;
+    _deps: {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        config: any;
+    };
+    element: HTMLDivElement;
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    themes: {};
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    active: any;
+    forced: boolean;
+    render(): HTMLDivElement;
+    renderComponent(): void;
+    /** Return the active theme */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    currentTheme(): any;
+    /** Returns all themes as an array */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    getThemes(): any[];
+    /**
+     * Init the theme
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    initTheme(callback: any): void;
+    /**
+     * Change the current theme
+     * @param {string} [themeName] - The name of the theme
+     */
+    switchTheme(themeName?: string): void;
+    /**
+     * fixes the invertion for images since this should be adjusted when we switch between dark/light qualified themes
+     * @param {element} [image] - the dom element which invert should be fixed to increase visibility
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    fixInvert(image?: any): void;
+}