Merge branch 'master' into qdn-metadata

# Conflicts:
#	qortal-ui-plugins/plugins/core/qdn/publish/publish.src.js

package.json

@@ -1,6 +1,6 @@
 {
   "name": "qortal-ui",
-  "version": "1.7.4",
+  "version": "1.8.0",
   "description": "Qortal Project - decentralize the world - Data storage, communications, web hosting, decentralized trading, complete infrastructure for the future blockchain-based Internet",
   "keywords": [
     "QORT",

qortal-ui-core/config/default.styles.config.js

@@ -34,15 +34,6 @@ const styles = {
             '#2196f3',
             '#d81b60'
         ]
-    },
-    // Will make theme be calculated from config.styles.themes[config.user.theme]... or make theme the base..so it becomes theme = {...config.styles.theme, ...config.styles.themes[config.user.theme]}
-    themes: {
-        light: {
-            // ...
-        },
-        dark: {
-            // ...
-        }
     }
 }
 

qortal-ui-core/config/default.user.config.js

@@ -6,7 +6,6 @@ const user = {
         pingInterval: 10 * 1000, // (10 secs)
     },
     language: 'english', // default...english
-    theme: 'light',
     server: {
         writeHosts: {
             enabled: true,

qortal-ui-core/font/switch-theme.css

@@ -19,6 +19,17 @@ html {
   --menuactive: #ebebeb;
   --mainmenutext:#080808;
   --mainmenutexthover:#080808;
+  --switchbackground: #666666;
+  --switchborder: #333333;
+  --sidetopbar:  #ffffff;
+  --nav-selected-color: #dddddd;
+  --nav-selected-color-text: #333333;
+  --nav-color-active: #d1d1d1;
+  --nav-color-hover: #eeeeee;
+  --nav-text-color: #080808;
+  --nav-icon-color: #080808;
+  --nav-border-color: #eeeeee;
+  --nav-border-selected-color: #03a9f4;
 }
 
 html[theme="dark"] {
@@ -42,4 +53,15 @@ html[theme="dark"] {
   --menuactive: #008fd5;
   --mainmenutext:#008fd5;
   --mainmenutexthover:#0f1a2e;
+  --switchbackground: #eeeeee;
+  --switchborder: #03a9f4;
+  --sidetopbar:  #070d19;
+  --nav-selected-color: #0f1a2e;
+  --nav-selected-color-text: #76c8f5;
+  --nav-color-active: #d1d1d1;
+  --nav-color-hover: #444444;
+  --nav-text-color: #008fd5;
+  --nav-icon-color: #008fd5;
+  --nav-border-color: #0b305e;
+  --nav-border-selected-color: #76c8f5;
 }

qortal-ui-core/package.json

@@ -59,18 +59,19 @@
     "@rollup/plugin-node-resolve": "^13.1.3",
     "@rollup/plugin-replace": "^4.0.0",
     "@vaadin/grid": "^23.0.1",
+	"@vaadin/icons": "^23.0.1",
     "@vaadin/password-field": "^23.0.1",
     "asmcrypto.js": "^2.3.2",
     "bcryptjs": "^2.4.3",
     "epml": "^0.3.3",
     "file-saver": "^2.0.5",
     "lit": "^2.2.0",
-    "postcss": "^8.4.7",
+    "postcss": "^8.4.8",
     "pwa-helpers": "^0.9.1",
     "random-sentence-generator": "^0.0.8",
     "redux": "^4.1.2",
     "redux-thunk": "^2.4.1",
-    "rollup": "^2.68.0",
+    "rollup": "^2.70.0",
     "rollup-plugin-node-globals": "^1.4.0",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-progress": "^1.1.2",

qortal-ui-core/src/components/app-info.js

@@ -54,7 +54,7 @@ class AppInfo extends connect(store)(LitElement) {
                     flex: 0 0 100px;
                     padding:12px;
                     border-top: 1px solid var(--border);
-                    background: var(--white);
+                    background: var(--sidetopbar);
                 }
                 .info {
                     margin: 0;

qortal-ui-core/src/components/app-view.js

@@ -38,7 +38,7 @@ class AppView extends connect(store)(LitElement) {
 
                 app-drawer {
                     box-shadow: var(--shadow-2);
-                    background: var(--white);
+                    background: var(--sidetopbar);
                 }
 
                 app-header {
@@ -46,7 +46,7 @@ class AppView extends connect(store)(LitElement) {
                 }
 
                 app-toolbar {
-                    background: var(--white);
+                    background: var(--sidetopbar);
                     color: var(--black);
                     border-top: var(--border);
                 }
@@ -55,7 +55,7 @@ class AppView extends connect(store)(LitElement) {
                     height: 100vh;
                     display: flex;
                     flex-direction: column;
-                    background: var(--white);
+                    background: var(--sidetopbar);
                 }
 
                 .sideBarMenu{
@@ -75,7 +75,7 @@ class AppView extends connect(store)(LitElement) {
                 #sideBar::-webkit-scrollbar-thumb {
                      background-color: #333;
                      border-radius: 6px;
-                    border: 3px solid #333;
+                     border: 3px solid #333;
                 }
             `
         ]

qortal-ui-core/src/components/login-view/create-account-section.js

@@ -423,6 +423,14 @@ class CreateAccountSection extends connect(store)(LitElement) {
                             <p style="margin:0;">
                                 This file is the <strong>ONLY</strong> way to access your account on a system that doesn't have it saved to the app/browser. <strong>BE SURE TO BACKUP THIS FILE IN MULTIPLE PLACES.</strong> The file is encrypted very securely and decrypted with your local password you created in the previous step. You can save it anywhere securely, but be sure to do that in multiple locations.
                             </p>
+                            <div id="download-area">
+                                <div style="line-height:40px;">
+                                    <span style="padding-top:6px; margin-right: 10px;">Download Wallet BackUp File</span>
+                                    <slot id="trigger" name="inputTrigger" @click=${() => this.downloadBackup(this._wallet)} style="dispay: inline;">
+                                        <mwc-button><mwc-icon>cloud_download</mwc-icon>&nbsp; Save</mwc-button>
+                                    </slot>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </iron-pages>

qortal-ui-core/src/components/qort-theme-toggle.js

@@ -47,8 +47,9 @@ class QortThemeToggle extends LitElement {
         height: 16px;
         top: 50%;
         transform: translateY(-50%);
+        background-color: var(--switchbackground);
+        border: 2px solid var(--switchborder);
         border-radius: 1rem;
-        background-color: var(--graylight);
         transition: all .4s ease;
       }
 
@@ -58,8 +59,8 @@ class QortThemeToggle extends LitElement {
         display: inline-block;
         position: absolute;
         top: 50%;
-        background: var(--graylight);
+        background: var(--switchbackground);
-        border: 2px solid var(--gray);
+        border: 2px solid var(--switchborder);
         border-radius: 50%;
         transition: transform 300ms ease;
       }
@@ -70,7 +71,7 @@ class QortThemeToggle extends LitElement {
 
       input:checked ~ .icon,
       :host([theme="dark"]) .icon {
-        transform: translate(calc(100% - 18px), -50%);
+        transform: translate(calc(100% - 12px), -50%);
       }
 
       .moon {
@@ -131,4 +132,4 @@ class QortThemeToggle extends LitElement {
   }
 }
 
-window.customElements.define('qort-theme-toggle', QortThemeToggle);
+window.customElements.define('qort-theme-toggle', QortThemeToggle);

qortal-ui-core/src/components/show-plugin.js

@@ -42,7 +42,7 @@ class ShowPlugin extends connect(store)(LitElement) {
             
             iframe#showPluginFrame {
                 width:100%;
-                height:calc(var(--window-height) - 68px);
+                height:calc(var(--window-height) - 64px);
                 border:0;
                 padding:0;
                 margin:0;

qortal-ui-core/src/components/sidenav-menu.js

@@ -1,259 +1,130 @@
 import { LitElement, html, css } from 'lit'
 import { connect } from 'pwa-helpers'
 import { store } from '../store.js'
+import { doLogout } from '../redux/app/actions/login'
 
 import '@material/mwc-icon'
 import '@polymer/paper-ripple'
-import { doLogout } from '../redux/app/actions/login'
+import '@vaadin/icon'
+import '@vaadin/icons'
+
+import '../functional-components/side-menu.js'
+import '../functional-components/side-menu-item.js'
 
 class SidenavMenu extends connect(store)(LitElement) {
-  static get properties() {
+    static get properties() {
-    return {
+        return {
-      config: { type: Object },
+            config: { type: Object },
-      urls: { type: Object }
+            urls: { type: Object }
+        }
     }
-  }
 
-  static get styles() {
+    static get styles() {
-    return [
+        return [
-      css`
+            css`
-        .mcd-menu {
+                * {
-          list-style: none;
+                    --item-selected-color: var(--nav-selected-color);
-          padding: 0px 0px;
+                    --item-selected-color-text: var(--nav-selected-color-text);
-          background:  var(--white);
+                    --item-color-active: var(--nav-color-active);
-          border-radius: 2px;
+                    --item-color-hover: var(--nav-color-hover);
-          width: 100%;
+                    --item-text-color: var(--nav-text-color);
-          outline: none;
+                    --item-icon-color: var(--nav-icon-color);
-        }
+                    --item-border-color: var(--nav-border-color);
+                    --item-border-selected-color: var(--nav-border-selected-color);
+                }
 
-        .mcd-menu li {
+                .s-menu {
-          position: relative;
+                    list-style: none;
-          line-height: 48px;
+                    padding: 0px 0px;
-          outline: none;
+                    background:  var(--sidetopbar);
-          padding: 2px;
+                    border-radius: 2px;
-          list-style: none;
+                    width: 100%;
-        }
+                    border-top: 1px solid var(--border);
+                    outline: none;
+                }
+            `
+        ]
+    }
 
-        .mcd-menu li a {
+    constructor() {
-          display: block;
+        super()
-          text-decoration: none;
+        this.urls = []
-          padding-left: 20px;
+    }
-          color: var(--mainmenutext);
-          text-align: left;
-          height: 48px;
-          position: relative;
-          border-bottom: 1px solid var(--border);
-          outline: none;
-        }
 
-        .mcd-menu li a mwc-icon {  
+    render() {
-          float: left;
+        return html`
-          margin: 0 10px 0 0;
+            <div class="s-menu">
-          padding-top: 12px;
+                <side-menu>
-          padding-right: 9px;
+                    <side-menu-item label="MINTING DETAILS" href="/app/minting">
-        }
+                        <vaadin-icon icon="vaadin:info-circle" slot="icon"></vaadin-icon>
-
+                    </side-menu-item>
-        .mcd-menu li a span {
+                    <side-menu-item label="WALLETS" href="/app/wallet" selected>
-          display: block;
+                        <vaadin-icon icon="vaadin:wallet" slot="icon"></vaadin-icon>
-          text-transform: uppercase;
+                    </side-menu-item>
-          outline: none;
+                    <side-menu-item label="SEND COIN" href="/app/send-coin">
-        }
+                        <vaadin-icon icon="vaadin:coin-piles" slot="icon"></vaadin-icon>
-
+                    </side-menu-item>
-        .mcd-menu li a small {
+                    <side-menu-item label="TRADE PORTAL" href="/app/trade-portal">
-          display: block;
+                        <vaadin-icon icon="vaadin:bullets" slot="icon"></vaadin-icon>
-          font-size: 10px;
+                    </side-menu-item>
-          outline: none;
+                    <side-menu-item label="REWARD SHARE" href="/app/reward-share">
-        }
+                        <vaadin-icon icon="vaadin:share-square" slot="icon"></vaadin-icon>
-
+                    </side-menu-item>
-        .mcd-menu li:hover > a mwc-icon {
+                    <side-menu-item label="NAME REGISTRATION" href="/app/name-registration">
-            opacity: 1;
+                        <vaadin-icon icon="vaadin:user-check" slot="icon"></vaadin-icon>
-        }
+                    </side-menu-item>
-
+                    <side-menu-item label="WEBSITES" href="/app/websites">
-        .mcd-menu li:hover a span {
+                        <vaadin-icon icon="vaadin:desktop" slot="icon"></vaadin-icon>
-            opacity: 1;
+                    </side-menu-item>
-            outline: none;
+                    <side-menu-item label="DATA MANAGEMENT" href="/app/data-management">
-        }
+                        <vaadin-icon icon="vaadin:database" slot="icon"></vaadin-icon>
-
+                    </side-menu-item>
-        .mcd-menu li:hover > a {
+                    <side-menu-item label="Q-CHAT" href="/app/q-chat">
-            background: var(--menuhover);
+                        <vaadin-icon icon="vaadin:chat" slot="icon"></vaadin-icon>
-            color: var(--mainmenutexthover);
+                    </side-menu-item>
-        }
+                    <side-menu-item label="GROUP MANAGEMENT" href="/app/group-management">
-
+                        <vaadin-icon icon="vaadin:group" slot="icon"></vaadin-icon>
-        .mcd-menu li a.active {
+                    </side-menu-item>
-          position: relative;
+                    <side-menu-item label="PUZZLES" href="/app/puzzles">
-          color: #515151;
+                        <vaadin-icon icon="vaadin:puzzle-piece" slot="icon"></vaadin-icon>
-          background-color: var(--menuactive);
+                    </side-menu-item>
-          outline: none;
+                    ${this.renderNodeManagement()}
-        }
+                    <side-menu-item label="LOGOUT" href="javascript:void(0)" @click=${ e => this.logout(e)}>
-
+                        <vaadin-icon icon="vaadin:sign-out" slot="icon"></vaadin-icon>
-        .mcd-menu li a.active:before {
+                    </side-menu-item>
-          content: "";
+                </side-menu>
-          position: absolute;
-          top: 42%;
-          left: 0;
-          border-left: 5px solid #515151;
-          border-top: 5px solid transparent;
-          border-bottom: 5px solid transparent;
-          outline: none;
-        }
-
-        .mcd-menu li a.active:after {
-          content: "";
-          position: absolute;
-          top: 42%;
-          right: 0;
-          border-right: 5px solid #515151;
-          border-top: 5px solid transparent;
-          border-bottom: 5px solid transparent;
-          outline: none;
-        }
-
-        .mcd-menu li ul,
-        .mcd-menu li ul li ul {
-          position: absolute;
-          height: auto;
-          min-width: 240px;
-          padding: 0;
-          margin: 0;
-          background: #FFF;
-          opacity: 0;
-          visibility: hidden;
-          transition: all 300ms linear;
-          -o-transition: all 300ms linear;
-          -ms-transition: all 300ms linear;
-          -moz-transition: all 300ms linear;
-          -webkit-transition: all 300ms linear;
-          z-index: 999999999;
-          left:280px;
-          top: 0px;
-          border-left: 4px solid #515151;
-          outline: none;
-        }
-
-        .mcd-menu li ul:before {
-          content: "";
-          position: absolute;
-          top: 25px;
-          left: -9px;
-          border-right: 5px solid #515151;
-          border-bottom: 5px solid transparent;
-          border-top: 5px solid transparent;
-          outline: none;
-        }
-
-        .mcd-menu li:hover > ul,
-        .mcd-menu li ul li:hover > ul {
-          display: block;
-          opacity: 1;
-          visibility: visible;
-          left:260px;
-          outline: none;
-        }
-
-        .mcd-menu li ul li a {
-          text-align: left;
-          border: 0;
-          border-bottom: 1px solid var(--border);
-          height: auto;
-          outline: none;
-        }
-
-        .mcd-menu li ul li a mwc-icon {
-          display: inline-block;
-          margin: 0 10px 0 0;
-        }
-
-        .mcd-menu li ul li ul {
-          left: 230px;
-          top: 0;
-          border: 0;
-          border-left: 4px solid #515151;
-          outline: none;
-        }
-
-        .mcd-menu li ul li ul:before {
-          content: "";
-          position: absolute;
-          top: 15px;
-          left: -9px;
-          border-right: 5px solid #515151;
-          border-bottom: 5px solid transparent;
-          border-top: 5px solid transparent;
-          outline: none;
-        }
-
-        .mcd-menu li ul li:hover > ul {
-          top: 0px;
-          left: 200px;
-          outline: none;
-        }
-      `
-    ]
-  }
-
-  constructor() {
-    super()
-    this.urls = []
-  }
-
-  render() {
-    return html`
-            <div>
-                <ul class="mcd-menu">
-                    ${this.urls.map(myPlugin => myPlugin.menus.length === 0 ? html`
-                        <li>
-                            <paper-ripple></paper-ripple>
-                            <a href="/app/${myPlugin.url}">
-                                <mwc-icon>${myPlugin.icon}</mwc-icon>
-                                <span>${myPlugin.title}</span>
-                            </a>
-                        </li>
-                    ` : html`
-                        <li>
-                            <paper-ripple></paper-ripple>
-                            <a href="/app/${myPlugin.url}">
-                                <mwc-icon>${myPlugin.icon}</mwc-icon>
-                                <span>${myPlugin.title}</span>
-                            </a>
-                            
-                            <ul>
-                                ${myPlugin.menus.map(myMenu => html`
-                                    <li>
-                                        <paper-ripple></paper-ripple>
-                                        <a href="/app/${myMenu.url}">
-                                            <mwc-icon>${myMenu.icon}</mwc-icon>
-                                            <span>${myMenu.title}</span>
-                                        </a>
-                                    </li>
-                                `)}
-                            </ul>
-                        </li>
-                    `)}
-                  <li @click=${ e => this.logout(e)}>
-                    <a href="javascript:void(0)">
-                      <mwc-icon>exit_to_app</mwc-icon>
-                      <span>LOGOUT</span>
-                    </a>
-                  </li>
-                </ul>
             </div>
         `
-  }
-
-  firstUpdated() {
-    // ...
-  }
-
-  stateChanged(state) {
-    this.config = state.config
-    this.urls = state.app.registeredUrls
-  }
-
-  async logout(e) {
-    if(window.confirm('Are you sure you want to logout?')) {
-      store.dispatch(doLogout());
     }
-  }
+
+    firstUpdated() {
+        // ...
+    }
+
+    renderNodeManagement() {
+        const checkNodeManagement = store.getState().app.nodeConfig.knownNodes[store.getState().app.nodeConfig.node]
+        if (checkNodeManagement.enableManagement = true) {
+            return html`
+                <side-menu-item label="NODE MANAGEMENT" href="/app/node-management">
+                    <vaadin-icon icon="vaadin:cloud" slot="icon"></vaadin-icon>
+                </side-menu-item>
+            `
+        } else {
+            return html`
+            `
+        }
+    }
+
+    stateChanged(state) {
+        this.config = state.config
+        this.urls = state.app.registeredUrls
+    }
+
+    async logout(e) {
+        if(window.confirm('Are you sure you want to logout?')) {
+            store.dispatch(doLogout());
+        }
+    }
 }
 
 window.customElements.define('sidenav-menu', SidenavMenu)

qortal-ui-core/src/components/wallet-profile.js

@@ -36,17 +36,19 @@ class WalletProfile extends connect(store)(LitElement) {
                 #profileInMenu {
                     padding: 12px;
                     border-top: var(--border);
-                    background: var(--white);
+                    background: var(--sidetopbar);
                     color: var(--black);
                 }
+
                 #profileInMenu:hover {
-                    /* cursor:pointer; */
                 }
+
                 #accountIcon {
                     font-size:48px;
                     color: var(--mdc-theme-primary);
                     display: inline-block;
                 }
+
                 #accountName {
                     margin: 0;
                     font-size: 18px;
@@ -55,12 +57,14 @@ class WalletProfile extends connect(store)(LitElement) {
                     width:100%;
                     padding-bottom:8px;
                 }
+
                 #blocksMinted {
                     margin:0;
                     margin-top: 0;
                     font-size: 11px;
                     color: #03a9f4;
                 }
+
                 #address {
                     white-space: nowrap;
                     overflow: hidden;

qortal-ui-core/src/functional-components/side-menu-item-style.js

@@ -0,0 +1,153 @@
+import { css } from 'lit'
+
+export const sideMenuItemStyle = css`
+  :host {
+    --font-family: "Roboto", sans-serif;
+    --item-font-size: 1rem;
+    --sub-item-font-size: 0.85rem;
+    --item-padding: 1rem;
+    --item-content-padding: 1rem;
+    --icon-height: 1.25rem;
+    --icon-width: 1.25rem;
+    --item-border-radius: 5px;
+    --item-selected-color: #dddddd;
+    --item-selected-color-text: #333333;
+    --item-color-active: #d1d1d1;
+    --item-color-hover: #eeeeee;
+    --item-text-color: #080808;
+    --item-icon-color: #080808;
+    --item-border-color: #eeeeee;
+    --item-border-selected-color: #333333;
+
+    --overlay-box-shadow: 0 2px 4px -1px hsla(214, 53%, 23%, 0.16), 0 3px 12px -1px hsla(214, 50%, 22%, 0.26);
+    --overlay-background-color: #ffffff;
+    
+    --spacing: 4px;
+
+    font-family: var(--font-family);
+    display: flex;
+    overflow: hidden;
+    flex-direction: column;
+    border-radius: var(--item-border-radius);
+  }
+
+  #itemLink {
+    align-items: center;
+    font-size: var(--item-font-size);
+    font-weight: 400;
+    height: var(--icon-height);
+    transition: background-color 200ms;
+    padding: var(--item-padding);
+    cursor: pointer;
+    display: inline-flex;
+    flex-grow: 1;
+    align-items: center;
+    overflow: hidden;
+    text-decoration: none;
+    border-bottom: 1px solid var(--item-border-color);
+  }
+
+  #itemLink:hover {
+    background-color: var(--item-color-hover);
+  }
+
+  #itemLink:active {
+    background-color: var(--item-color-active);
+  }
+
+  #content {
+    padding-left: var(--item-content-padding);
+    flex: 1;
+  }
+
+  :host([compact]) #content {
+      padding-left: 0;
+      display: none;
+  }
+
+  :host([selected]) #itemLink {
+    background-color: var(--item-selected-color);
+    color: var(--item-selected-color-text);
+    border-left: 3px solid var(--item-border-selected-color);
+  }
+
+  :host([selected]) slot[name="icon"]::slotted(*) {
+    color: var(--item-selected-color-text);
+  }
+
+  :host(:not([selected])) #itemLink{
+    color: var(--item-text-color);
+  }
+
+  :host([expanded]){
+    background-color: var(--item-selected-color);
+  }
+  
+  :host([hasSelectedChild]){
+    background-color: var(--item-selected-color);
+  }
+
+  :host span {
+    cursor: inherit;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    user-select: none;
+    -webkit-user-select: none;
+    white-space: nowrap;
+  }
+
+  slot[name="icon"]::slotted(*) {
+    flex-shrink: 0;
+    color: var(--item-icon-color);
+    height: var(--icon-height);
+    width: var(--icon-width);
+    pointer-events: none;
+  }
+
+  #collapse-button {
+    float: right; 
+  }
+
+  :host([compact]) #itemLink[level]:not([level="0"]) {
+      padding: calc( var(--item-padding) / 2);
+  }
+
+  :host(:not([compact])) #itemLink[level]:not([level="0"]) {
+    padding-left: calc(var(--icon-width) + var(--item-content-padding));
+  }
+
+  #itemLink[level]:not([level="0"]) #content {
+    display: block;
+    visibility: visible;
+    width: auto;
+    font-weight: 400;
+    font-size: var(--sub-item-font-size)
+  }
+
+ #overlay {
+    display: block;
+    left: 101%;
+    min-width: 200px;
+    padding: 4px 2px;
+    background-color: var(--overlay-background-color);
+    background-image: var(--overlay-background-image, none);
+    box-shadow: var(--overlay-box-shadow);
+    border: 1px solid var(--overlay-background-color);
+    border-left: 0;
+    border-radius: 0 3px 3px 0;
+    position: absolute;
+    z-index: 1;
+    animation: pop 200ms forwards;
+  }
+  
+  @keyframes pop{
+      0% {
+        transform: translateX(-5px);
+        opacity: 0.5;
+      }
+      100% {
+        transform: translateX(0);
+        opacity: 1;
+      }
+  }
+`;

qortal-ui-core/src/functional-components/side-menu-item.js

@@ -0,0 +1,210 @@
+import { LitElement, html, css } from 'lit'
+import { ifDefined } from 'lit/directives/if-defined.js'
+import { sideMenuItemStyle } from './side-menu-item-style.js'
+import '@vaadin/icon'
+import '@vaadin/icons'
+import '@polymer/paper-tooltip'
+
+export class SideMenuItem extends LitElement {
+    static get properties() {
+        return {
+            selected: { type: Boolean, reflect: true },
+            label: { type: String, reflect: true },
+            expanded: { type: Boolean, reflect: true },
+            compact: { type: Boolean, reflect: true },
+            href: { type: String, reflect: true },
+            target: { type: String, reflect: true }
+        }
+    }
+
+    static get styles() {
+        return css`
+            ${sideMenuItemStyle}
+        `
+    }
+
+    constructor() {
+        super()
+        this.selected = false
+        this.expanded = false
+    }
+
+    render() {
+        return html`
+            ${this._itemLinkTemplate()} ${this._tooltipTemplate()}
+            ${this._childrenTemplate()}
+        `
+    }
+
+    firstUpdated(changedProperties) {
+        if (!this.hasChildren()) {
+            return
+        }
+        this.collapseExpandIcon = document.createElement("vaadin-icon")
+        this.collapseExpandIcon.id = "collapse-button"
+        this.shadowRoot.getElementById("content").appendChild(this.collapseExpandIcon)
+        this._boundOutsideClickListener = this._outsideClickListener.bind(this)
+    }
+
+    _itemLinkTemplate() {
+        return html`
+            <a id="itemLink" 
+                level=${this._getLevel} 
+                href=${this.href || '#!'}
+                @click="${(e) => this._onClick(e)}"
+                target=${ifDefined(this.target)}
+            >
+                <slot class="icon" name="icon"></slot>
+                <div id ="content">
+                    <span>${this.label}</span>
+                </div>
+            </a>
+        `
+    }
+
+    _tooltipTemplate() {
+        return html`
+            ${this._getLevel === 0 && this.compact ? html`
+                <paper-tooltip for="itemLink" position="right" animation-delay="0">
+                    ${this.label}
+                </paper-tooltip>
+            `
+            : undefined}
+        `
+    }
+
+    _childrenTemplate() {
+        return html`
+            ${this.expanded ? html`
+                ${this.compact ? html`
+                    <div id="overlay"><slot></slot></div>
+                `
+                : html`
+                    <slot></slot>
+                `}
+            `
+            : undefined}
+        `
+    }
+
+    updated(changedProperties) {
+        changedProperties.forEach((oldValue, propName) => {
+            if (propName === "compact") {
+                this._onCompactChanged()
+            }
+
+            if (propName === "expanded") {
+                this._onExpandedChanged()
+            }
+
+            if (propName === "selected"){
+                if (oldValue === this.selected){
+                    return
+                }
+
+                if (this.selected) {
+                    this._changeSelectedState(true)
+                    this._markParentWithSelectedChild()
+                }
+            }
+        });
+    }
+
+    _onCompactChanged() {
+        this.expanded = false;
+
+        if (this.collapseExpandIcon == null) {
+            return;
+        }
+
+        if (!this.compact) {
+            this.collapseExpandIcon["icon"] = "vaadin:chevron-down-small"
+        } else {
+            this.collapseExpandIcon["icon"] = "vaadin:chevron-right-small"
+        }
+    }
+
+    _onExpandedChanged() {
+        if (this.collapseExpandIcon == null) {
+            return;
+        }
+
+        if (this.expanded) {
+            this._onHandleExpanded();
+        } else {
+            this._onHandleCollapsed();
+        }
+    }
+
+    _onHandleExpanded() {
+        if (!this.compact) {
+            this.collapseExpandIcon["icon"] = "vaadin:chevron-up-small"
+        } else {
+            this.collapseExpandIcon["icon"] = "vaadin:chevron-left-small"
+            document.addEventListener("click", this._boundOutsideClickListener, true)
+        }
+    }
+
+    _onHandleCollapsed() {
+        if (!this.compact) {
+            this.collapseExpandIcon["icon"] = "vaadin:chevron-down-small"
+        } else {
+            this.collapseExpandIcon["icon"] = "vaadin:chevron-right-small"
+            document.removeEventListener(
+                "click",
+                this._boundOutsideClickListener,
+                true
+            )
+        }
+    }
+
+    _onClick(e) {
+        if (!this.hasChildren()) {
+            this.selected = true
+        } else {
+            this.expanded = !this.expanded
+            e.preventDefault()
+        }
+    }
+
+    _outsideClickListener(event) {
+        const eventPath = event.composedPath()
+        if (eventPath.indexOf(this) < 0) {
+            this.expanded = false
+        }
+    }
+
+    _changeSelectedState(selected, sourceEvent) {
+        this.selected = selected
+        let evt = new CustomEvent("side-menu-item-select", {
+            bubbles: true,
+            cancelable: true,
+            detail: { sourceEvent: sourceEvent }
+        });
+        this.dispatchEvent(evt)
+    }
+
+    hasChildren() {
+        return !!this.querySelector("side-menu-item")
+    }
+
+    _markParentWithSelectedChild() {
+        let element = this.parentElement;
+        while (element instanceof SideMenuItem) {
+            element.setAttribute('hasSelectedChild', true)
+            element = element.parentElement;
+        }
+    }
+
+    get _getLevel() {
+        let level = 0
+        let element = this.parentElement
+        while (element instanceof SideMenuItem) {
+            level++;
+            element = element.parentElement
+        }
+        return level
+    }
+}
+
+window.customElements.define("side-menu-item", SideMenuItem);

qortal-ui-core/src/functional-components/side-menu.js

@@ -0,0 +1,78 @@
+import {LitElement, html, css} from 'lit'
+
+class SideMenu extends LitElement {
+    static get properties() {
+        return {
+            items: {type: Array},
+            selectedValue: {type: String, reflect: true},
+            compact: {type: Boolean, reflect: true}
+        }
+    }
+
+    static get styles() {
+        return css`
+            nav {
+                padding: 0;
+            }
+
+            :host {
+                list-style: none;
+                width: 100%;
+                position: relative;
+            }
+
+            :host([compact]) {
+                width: auto;
+            }
+        `
+    }
+
+    constructor() {
+        super()
+        this.compact = false
+    }
+
+    render() {
+        return html`
+            <nav @side-menu-item-select=${this._handleSelect}>
+                <slot></slot>
+            </nav>
+        `
+    }
+
+    firstUpdated(_changedProperties) {
+        this.items = [...this.querySelectorAll("side-menu-item")]
+    }
+
+    _handleSelect(event) {
+        let targetItem = event.target
+        this._deselectAllItems()
+        targetItem.selected = true
+        this.selectedValue = targetItem.label
+    }
+
+    _deselectAllItems() {
+        this.items.forEach(element => {
+            if (this.compact) {
+                element.expanded = false
+            }
+            element.selected = false
+            element.hasChildren() ? element.removeAttribute('hasSelectedChild') : undefined
+        });
+    }
+
+    updated(changedProperties) {
+        changedProperties.forEach((oldValue, propName) => {
+            if (propName === "compact") {
+                this.items.forEach(item => (item.compact = this.compact))
+                let evt = new CustomEvent("side-menu-compact-change", {
+                    bubbles: true,
+                    cancelable: true
+                })
+                this.dispatchEvent(evt)
+            }
+        })
+    }
+}
+
+window.customElements.define("side-menu", SideMenu);

qortal-ui-core/src/plugins/streams.js

@@ -4,7 +4,7 @@ import { EpmlStream } from 'epml'
 const LOGIN_STREAM_NAME = 'logged_in'
 const CONFIG_STREAM_NAME = 'config'
 const SELECTED_ADDRESS_STREAM_NAME = 'selected_address'
-// const APP_INFO_STATE = 'app_info_state'
+const APP_INFO_STATE = 'app_info_state'
 const CHAT_HEADS_STREAM_NAME = 'chat_heads'
 const NODE_CONFIG_STREAM_NAME = 'node_config'
 const COPY_MENU_SWITCH = 'copy_menu_switch'
@@ -13,7 +13,7 @@ const FRAME_PASTE_MENU_SWITCH = 'frame_paste_menu_switch'
 export const loggedInStream = new EpmlStream(LOGIN_STREAM_NAME, () => store.getState().app.loggedIn)
 export const configStream = new EpmlStream(CONFIG_STREAM_NAME, () => store.getState().config)
 export const selectedAddressStream = new EpmlStream(SELECTED_ADDRESS_STREAM_NAME, () => store.getState().app.selectedAddress)
-// export const appInfoStateStream = new EpmlStream(APP_INFO_STATE, () => store.getState().app.appInfo)
+export const appInfoStateStream = new EpmlStream(APP_INFO_STATE, () => store.getState().app.appInfo)
 export const chatHeadsStateStream = new EpmlStream(CHAT_HEADS_STREAM_NAME, () => store.getState().app.chatHeads)
 export const nodeConfigStream = new EpmlStream(NODE_CONFIG_STREAM_NAME, () => store.getState().app.nodeConfig)
 export const copyMenuSwitchStream = new EpmlStream(COPY_MENU_SWITCH, () => store.getState().app.copyMenuSwitch)
@@ -59,8 +59,9 @@ store.subscribe(() => {
         chatHeadsStateStream.emit(state.app.chatHeads)
     }
 
-    // if (oldState.app.appInfo !== state.app.appInfo) {
+    if (oldState.app.appInfo !== state.app.appInfo) {
-    //     appInfoStateStream.emit(state.app.appInfo)
+        appInfoStateStream.emit(state.app.appInfo)
-    // }
+    }
+
     oldState = state
 })

qortal-ui-core/src/redux/app/actions/node-config.js

@@ -97,7 +97,7 @@ const obj4 = {
     protocol: 'http',
     domain: '127.0.0.1',
     port: 62391,
-    enableManagement: false
+    enableManagement: true
 }
 
 const obj5 = {

qortal-ui-core/src/redux/config/config-reducer.js

@@ -17,7 +17,6 @@ const DEFAULT_INITIAL_STATE = {
     },
     user: {
         language: 'english',
-        theme: 'light',
         server: {},
         node: 0,
         knownNodes: [{}]

qortal-ui-core/src/styles/switch-theme.css

@@ -1,16 +1,67 @@
 html {
-  /* color pallet */
   --white: #ffffff;
   --black: #080808;
   --gray: #c8c8c8;
   --graylight: #bbbbbb;
   --plugback: #ffffff;
+  --border: #d0d6de;
+  --border2: #dde2e8;
+  --copybutton: #707584;
+  --sectxt: #576374;
+  --vdicon: #707b8a;
+  --tradehead: #6a6c75;
+  --tradeborder: #666666;
+  --tradehave: #555555;
+  --txtfieldborder: #666666;
+  --txtfieldhoverborder: #00000;
+  --relaynodetxt: #646464;
+  --menuhover: #eeeeee;
+  --menuactive: #ebebeb;
+  --mainmenutext:#080808;
+  --mainmenutexthover:#080808;
+  --switchbackground: #666666;
+  --switchborder: #333333;
+  --sidetopbar:  #ffffff;
+  --nav-selected-color: #dddddd;
+  --nav-selected-color-text: #333333;
+  --nav-color-active: #d1d1d1;
+  --nav-color-hover: #eeeeee;
+  --nav-text-color: #080808;
+  --nav-icon-color: #080808;
+  --nav-border-color: #eeeeee;
+  --nav-border-selected-color: #03a9f4;
 }
 
 html[theme="dark"] {
-  --white: #36393f;
+  --white: #0f1a2e;
-  --black: #f8f8f8;
+  --black: #c9d2d9;
   --gray: #d8d8d8;
-  --graylight: #dddddd;
+  --graylight: #0b305e;
-  --plugback: #36393f;
+  --plugback: #0f1a2e;
+  --border: #0b305e;
+  --border2: #0b305e;
+  --copybutton: #d0d6de;
+  --sectxt: #bbc3cd;
+  --vdicon: #d0d6de;
+  --tradehead: #008fd5;
+  --tradeborder: #0b305e;
+  --tradehave: #dddddd;
+  --txtfieldborder: #0b305e;
+  --txtfieldhoverborder: #ffffff;
+  --relaynodetxt: #d4d4d4;
+  --menuhover: #008fd5;
+  --menuactive: #008fd5;
+  --mainmenutext:#008fd5;
+  --mainmenutexthover:#0f1a2e;
+  --switchbackground: #eeeeee;
+  --switchborder: #03a9f4;
+  --sidetopbar:  #070d19;
+  --nav-selected-color: #0f1a2e;
+  --nav-selected-color-text: #76c8f5;
+  --nav-color-active: #d1d1d1;
+  --nav-color-hover: #444444;
+  --nav-text-color: #008fd5;
+  --nav-icon-color: #008fd5;
+  --nav-border-color: #0b305e;
+  --nav-border-selected-color: #76c8f5;
 }

qortal-ui-plugins/package.json

@@ -45,7 +45,7 @@
     "epml": "^0.3.3",
     "html-escaper": "^3.0.3",
     "lit": "^2.2.0",
-    "rollup": "^2.68.0",
+    "rollup": "^2.70.0",
     "rollup-plugin-node-globals": "^1.4.0",
     "rollup-plugin-progress": "^1.1.2",
     "rollup-plugin-terser": "^7.0.2"

qortal-ui-plugins/plugins/core/components/ChatWelcomePage.js

@@ -239,9 +239,11 @@ class ChatWelcomePage extends LitElement {
 
     firstUpdated() {
 
+        this.changeTheme()
+
 	setInterval(() => {
 	    this.changeTheme();
-	}, 250)
+	}, 100)
 
         const stopKeyEventPropagation = (e) => {
             e.stopPropagation();

qortal-ui-plugins/plugins/core/group-management/group-management.src.js

@@ -429,6 +429,8 @@ class GroupManagement extends LitElement {
 
     firstUpdated() {
 
+        this.changeTheme()
+
 	setInterval(() => {
 	    this.changeTheme();
 	}, 100)

qortal-ui-plugins/plugins/core/main.src.js

@@ -13,7 +13,7 @@ parentEpml.ready().then(() => {
             domain: 'core',
             page: 'minting/index.html',
             title: 'Minting Details',
-            icon: 'info',
+            icon: 'vaadin:info-circle',
             menus: [],
             parent: false
         },
@@ -22,7 +22,7 @@ parentEpml.ready().then(() => {
             domain: 'core',
             page: 'wallet/index.html',
             title: 'Wallet',
-            icon: 'account_balance_wallet',
+            icon: 'vaadin:wallet',
             menus: [],
             parent: false
         },
@@ -31,7 +31,7 @@ parentEpml.ready().then(() => {
             domain: 'core',
             page: 'send-coin/index.html',
             title: 'Send Coin',
-            icon: 'send',
+            icon: 'vaadin:coin-piles',
             menus: [],
             parent: false
         },
@@ -40,7 +40,7 @@ parentEpml.ready().then(() => {
             domain: 'core',
             page: 'trade-portal/index.html',
             title: 'Trade Portal',
-            icon: 'toc',
+            icon: 'vaadin:bullets',
             menus: [],
             parent: false
         },
@@ -49,7 +49,7 @@ parentEpml.ready().then(() => {
             domain: 'core',
             page: 'reward-share/index.html',
             title: 'Reward Share',
-            icon: 'call_split',
+            icon: 'vaadin:share-square',
             menus: [],
             parent: false
         },
@@ -58,7 +58,7 @@ parentEpml.ready().then(() => {
             domain: 'core',
             page: 'name-registration/index.html',
             title: 'Name Registration',
-            icon: 'assignment_ind',
+            icon: 'vaadin:user-check',
             menus: [],
             parent: false
         },
@@ -67,7 +67,7 @@ parentEpml.ready().then(() => {
             domain: 'core',
             page: 'qdn/index.html',
             title: 'Websites',
-            icon: 'computer',
+            icon: 'vaadin:desktop',
             menus: [],
             parent: false
         },
@@ -76,7 +76,7 @@ parentEpml.ready().then(() => {
             domain: 'core',
             page: 'qdn/data-management/index.html',
             title: 'Data Management',
-            icon: 'dns',
+            icon: 'vaadin:database',
             menus: [],
             parent: false
         },
@@ -85,7 +85,7 @@ parentEpml.ready().then(() => {
             domain: 'core',
             page: 'messaging/q-chat/index.html',
             title: 'Q-Chat',
-            icon: 'message',
+            icon: 'vaadin:chat',
             menus: [],
             parent: false
         },
@@ -94,7 +94,7 @@ parentEpml.ready().then(() => {
             domain: 'core',
             page: 'group-management/index.html',
             title: 'Group Management',
-            icon: 'group',
+            icon: 'vaadin:group',
             menus: [],
             parent: false
         },
@@ -103,7 +103,7 @@ parentEpml.ready().then(() => {
             domain: 'core',
             page: 'puzzles/index.html',
             title: 'Puzzles',
-            icon: 'extension',
+            icon: 'vaadin:puzzle-piece',
             menus: [],
             parent: false
         }
@@ -127,7 +127,7 @@ parentEpml.ready().then(() => {
                 domain: 'core',
                 page: 'node-management/index.html',
                 title: 'Node Management',
-                icon: 'cloud',
+                icon: 'vaadin:cloud',
                 menus: [],
                 parent: false
             }

qortal-ui-plugins/plugins/core/messaging/chain-messaging/chain-messaging.src.js

@@ -3,7 +3,8 @@ import { LitElement, html, css } from 'lit'
 class ChainMessaging extends LitElement {
     static get properties() {
         return {
-            loading: { type: Boolean }
+            loading: { type: Boolean },
+            theme: { type: String, reflect: true }
         }
     }
 
@@ -22,7 +23,7 @@ class ChainMessaging extends LitElement {
             }
 
             #chain-messaging-page {
-                background:#fff;
+                background: var(--white);
             }
 
         `
@@ -30,18 +31,25 @@ class ChainMessaging extends LitElement {
 
     constructor() {
         super()
+        this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light'
     }
 
     render() {
         return html`
             <div id="chain-messaging-page">
-                <h2 style="text-align: center; margin-top: 3rem;">Coming Soon!</h2>
+                <h2 style="text-align: center; margin-top: 3rem; color: var(--black)">Coming Soon!</h2>
             </div>
         `
     }
 
     firstUpdated() {
 
+        this.changeTheme()
+
+	setInterval(() => {
+	    this.changeTheme();
+	}, 100)
+
         window.addEventListener("contextmenu", (event) => {
             event.preventDefault();
         });
@@ -55,6 +63,16 @@ class ChainMessaging extends LitElement {
         }
     }
 
+    changeTheme() {
+        const checkTheme = localStorage.getItem('qortalTheme')
+        if (checkTheme === 'dark') {
+            this.theme = 'dark';
+        } else {
+            this.theme = 'light';
+        }
+        document.querySelector('html').setAttribute('theme', this.theme);
+    }
+
     isEmptyArray(arr) {
         if (!arr) { return true }
         return arr.length === 0

qortal-ui-plugins/plugins/core/messaging/chain-messaging/index.html

@@ -3,6 +3,7 @@
 
 <head>
     <link rel="stylesheet" href="/font/material-icons.css">
+    <link rel="stylesheet" href="/font/switch-theme.css">
     <style>
         html {
             --scrollbarBG: #a1a1a1;
@@ -32,7 +33,7 @@
         body {
             margin: 0;
             font-family: "Roboto", sans-serif;
-            background-color: #fff;
+            background: var(--plugback);
         }
     </style>
 </head>

qortal-ui-plugins/plugins/core/messaging/messaging.src.js

@@ -136,6 +136,8 @@ class Messaging extends LitElement {
 
     firstUpdated() {
 
+        this.changeTheme()
+
 	setInterval(() => {
 	    this.changeTheme();
 	}, 100)

qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js

@@ -345,9 +345,11 @@ class Chat extends LitElement {
 
     firstUpdated() {
 
+        this.changeTheme()
+
 	setInterval(() => {
 	    this.changeTheme();
-	}, 250)
+	}, 100)
 
         const stopKeyEventPropagation = (e) => {
             e.stopPropagation();

qortal-ui-plugins/plugins/core/minting/minting-info.src.js

@@ -358,6 +358,8 @@ class MintingInfo extends LitElement {
 
     firstUpdated() {
 
+        this.changeTheme()
+
 	setInterval(() => {
 	    this.changeTheme();
 	}, 100)

qortal-ui-plugins/plugins/core/name-registration/name-registration.src.js

@@ -159,6 +159,8 @@ class NameRegistration extends LitElement {
 
     firstUpdated() {
 
+        this.changeTheme()
+
 	setInterval(() => {
 	    this.changeTheme();
 	}, 100)

qortal-ui-plugins/plugins/core/node-management/node-management.src.js

@@ -287,6 +287,8 @@ class NodeManagement extends LitElement {
 
     firstUpdated() {
 
+        this.changeTheme()
+
 	setInterval(() => {
 	    this.changeTheme();
 	}, 100)

qortal-ui-plugins/plugins/core/puzzles/puzzles.src.js

@@ -171,6 +171,8 @@ class Puzzles extends LitElement {
 
     firstUpdated() {
 
+        this.changeTheme()
+
 	setInterval(() => {
 	    this.changeTheme();
 	}, 100)

qortal-ui-plugins/plugins/core/qdn/browser/browser.src.js

@@ -131,7 +131,7 @@ class WebBrowser extends LitElement {
         const render = () => {
             const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node]
             const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port
-            this.url = `${nodeUrl}/render/${this.service}/${this.name}`;
+            this.url = `${nodeUrl}/render/${this.service}/${this.name}?theme=${this.theme}`;
         }
 
         const authorizeAndRender = () => {
@@ -203,6 +203,8 @@ class WebBrowser extends LitElement {
 
     firstUpdated() {
 
+        this.changeTheme()
+
 	setInterval(() => {
 	    this.changeTheme();
 	}, 100)

qortal-ui-plugins/plugins/core/qdn/publish/index.html

@@ -3,6 +3,7 @@
 
 <head>
     <link rel="stylesheet" href="/font/material-icons.css">
+    <link rel="stylesheet" href="/font/switch-theme.css">
     <style>
         html {
             --scrollbarBG: #a1a1a1;
@@ -32,7 +33,7 @@
         body {
             margin: 0;
             font-family: "Roboto", sans-serif;
-            background-color: #fff;
+            background: var(--plugback);
         }
     </style>
 </head>

qortal-ui-plugins/plugins/core/qdn/publish/publish.src.js

@@ -37,7 +37,8 @@ class PublishData extends LitElement {
             successMessage: { type: String },
             errorMessage: { type: String },
             loading: { type: Boolean },
-            btnDisable: { type: Boolean }
+            btnDisable: { type: Boolean },
+            theme: { type: String, reflect: true }
         }
     }
 
@@ -51,6 +52,16 @@ class PublishData extends LitElement {
 				--mdc-theme-primary: rgb(3, 169, 244);
 				--mdc-theme-secondary: var(--mdc-theme-primary);
 				--paper-input-container-focus-color: var(--mdc-theme-primary);
+				--lumo-primary-text-color: rgb(0, 167, 245);
+				--lumo-primary-color-50pct: rgba(0, 167, 245, 0.5);
+				--lumo-primary-color-10pct: rgba(0, 167, 245, 0.1);
+				--lumo-primary-color: hsl(199, 100%, 48%);
+				--lumo-base-color: var(--white);
+				--lumo-body-text-color: var(--black);
+				--lumo-secondary-text-color: var(--sectxt);
+				--lumo-contrast-60pct: var(--vdicon);
+				--_lumo-grid-border-color: var(--border);
+				--_lumo-grid-secondary-border-color: var(--border2);
 			}
 
 			#publishWrapper paper-button {
@@ -72,6 +83,7 @@ class PublishData extends LitElement {
 			.upload-text {
 				display: block;
 				font-size: 14px;
+                                color: var(--black);
 			}
 
 			.address-bar {
@@ -80,7 +92,7 @@ class PublishData extends LitElement {
 				left: 0;
 				right: 0;
 				height: 100px;
-				background-color: white;
+				background-color: var(--white);
 				height: 36px;
 			}
 
@@ -90,24 +102,136 @@ class PublishData extends LitElement {
 		`
     }
 
+    constructor() {
+        super()
+
+        this.showName = false;
+        this.showService = false
+        this.showIdentifier = false
+		this.showMetadata = false
+
+        const urlParams = new URLSearchParams(window.location.search)
+        this.name = urlParams.get('name')
+        this.service = urlParams.get('service')
+        this.identifier = urlParams.get('identifier')
+        this.category = urlParams.get('category')
+        this.uploadType = urlParams.get('uploadType') !== "null" ? urlParams.get('uploadType') : "file"
+
+        if (urlParams.get('showName') === "true") {
+            this.showName = true
+        }
+        if (urlParams.get('showService') === "true") {
+            this.showService = true
+        }
+        if (urlParams.get('showIdentifier') === "true") {
+            this.showIdentifier = true
+        }
+		if (urlParams.get('showMetadata') === "true") {
+            this.showMetadata = true
+        }
+
+        if (this.identifier != null) {
+            if (this.identifier === "null" || this.identifier.trim().length == 0) {
+                this.identifier = null
+            }
+        }
+
+        // Default to true so the message doesn't appear and disappear quickly
+        this.portForwardingEnabled = true
+        this.names = []
+        this.myRegisteredName = ''
+        this.selectedName = 'invalid'
+        this.path = ''
+        this.successMessage = ''
+        this.generalMessage = ''
+        this.errorMessage = ''
+        this.loading = false
+        this.btnDisable = false
+        this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light'
+
+        const fetchNames = () => {
+            parentEpml.request('apiCall', {
+                url: `/names/address/${this.selectedAddress.address}?limit=0&reverse=true`
+            }).then(res => {
+
+                setTimeout(() => {
+                    this.names = res
+                    if (res[0] != null) {
+                        this.myRegisteredName = res[0].name;
+                    }
+                }, 1)
+            })
+            setTimeout(fetchNames, this.config.user.nodeSettings.pingInterval)
+        }
+
+        const fetchCategories = () => {
+            parentEpml.request('apiCall', {
+                url: `/arbitrary/categories`
+            }).then(res => {
+
+                setTimeout(() => {
+                    this.categories = res
+                }, 1)
+            })
+        }
+
+        const fetchPeersSummary = () => {
+            parentEpml.request('apiCall', {
+                url: `/peers/summary`
+            }).then(res => {
+
+                setTimeout(() => {
+                    this.portForwardingEnabled = (res.inboundConnections != null && res.inboundConnections > 0);
+                }, 1)
+            })
+            setTimeout(fetchPeersSummary, this.config.user.nodeSettings.pingInterval)
+        }
+
+        let configLoaded = false
+        parentEpml.ready().then(() => {
+            parentEpml.subscribe('selected_address', async selectedAddress => {
+                this.selectedAddress = {}
+                selectedAddress = JSON.parse(selectedAddress)
+                if (!selectedAddress || Object.entries(selectedAddress).length === 0) return
+                this.selectedAddress = selectedAddress
+            })
+            parentEpml.subscribe('config', c => {
+                if (!configLoaded) {
+                    setTimeout(fetchNames, 1)
+                    setTimeout(fetchCategories, 1)
+                    setTimeout(fetchPeersSummary, 1)
+                    configLoaded = true
+                }
+                this.config = JSON.parse(c)
+            })
+            parentEpml.subscribe('copy_menu_switch', async value => {
+
+                if (value === 'false' && window.getSelection().toString().length !== 0) {
+
+                    this.clearSelection()
+                }
+            })
+        })
+    }
+
     render() {
         return html`
-			<div id="publishWrapper" style="width:auto; padding:10px; background: #fff; height:100vh;">
+		<div id="publishWrapper" style="width: auto; padding:10px; background: var(--white); height: 100vh;">
-				<div class="layout horizontal center" style=" padding:12px 15px;">
+			<div class="layout horizontal center" style=" padding:12px 15px;">
-					<div class="address-bar">
+				<div class="address-bar">
-						<mwc-button @click=${() => this.goBack()} class="address-bar-button"><mwc-icon>arrow_back_ios</mwc-icon> Back</mwc-button>
+					<mwc-button @click=${() => this.goBack()} class="address-bar-button"><mwc-icon>arrow_back_ios</mwc-icon> Back</mwc-button>
-					</div>
+				</div>
-					<paper-card style="width:100%; max-width:740px;">
+				    <paper-card style="width:100%; max-width:740px;">
-						<div style="margin:0; margin-top:20px;">
+                        <div style="margin:0; margin-top:20px;">
-							<h3 style="margin:0; padding:8px 0; text-transform:capitalize;">Publish / Update ${this.category}</h3>
+                            <h3 style="margin:0; padding:8px 0; text-transform: capitalize; color: var(--black);">Publish / Update ${this.category}</h3>
-							<p style="font-style:italic; font-size:14px;" ?hidden="${this.portForwardingEnabled}">Note: it is recommended that you set up port forwarding before hosting data, so that it can more easily accessed by peers on the network.</p>
+                            <p style="font-style: italic; font-size: 14px; color: var(--black);" ?hidden="${this.portForwardingEnabled}">Note: it is recommended that you set up port forwarding before hosting data, so that it can more easily accessed by peers on the network.</p>
-						</div>
+                        </div>
 					</paper-card>
 					<!-- TODO: adapt this dropdown to list all names on the account. Right now it's hardcoded to a single name -->
 					<p style="display: ${this.showName ? 'block' : 'none'}">
 						<mwc-select id="registeredName" label="Select Name" @selected=${(e) => this.selectName(e)} style="min-width: 130px; max-width:100%; width:100%;">
                             <mwc-list-item selected value=""></mwc-list-item>
-                            <mwc-list-item value="${this.registeredName}">${this.registeredName}</mwc-list-item>
+                            <mwc-list-item value="${this.myRegisteredName}">${this.myRegisteredName}</mwc-list-item>
 						</mwc-select>
 					</p>
 
@@ -143,7 +267,7 @@ class PublishData extends LitElement {
 						<mwc-textfield style="width:100%;" label="Identifier" id="identifier" type="text" value="${this.identifier != null ? this.identifier : ''}"></mwc-textfield>
 					</p>
 					
-					<p style="break-word;">${this.generalMessage}</p>
+					<p style="break-word; color: var(--black);">${this.generalMessage}</p>
 					<p style="color:red">${this.errorMessage}</p>
 					<p style="color:green;word-break: break-word;">${this.successMessage}</p>
 
@@ -156,11 +280,45 @@ class PublishData extends LitElement {
 					</div>
 				</div>
 			</div>
-		`
+		</div>
+	`
+    }
+
+    firstUpdated() {
+
+        this.changeTheme()
+
+	setInterval(() => {
+	    this.changeTheme();
+	}, 100)
+
+        window.addEventListener('contextmenu', (event) => {
+            event.preventDefault()
+            this._textMenu(event)
+        })
+
+        window.addEventListener('click', () => {
+            parentEpml.request('closeCopyTextMenu', null)
+        })
+
+        window.onkeyup = (e) => {
+            if (e.keyCode === 27) {
+                parentEpml.request('closeCopyTextMenu', null)
+            }
+        }
+    }
+
+    changeTheme() {
+        const checkTheme = localStorage.getItem('qortalTheme')
+        if (checkTheme === 'dark') {
+            this.theme = 'dark';
+        } else {
+            this.theme = 'light';
+        }
+        document.querySelector('html').setAttribute('theme', this.theme);
     }
 
     // Navigation
-
     goBack() {
         window.history.back();
     }
@@ -169,13 +327,13 @@ class PublishData extends LitElement {
     renderUploadField() {
         if (this.uploadType === "file") {
             return html`<p>
-				<input style="width:100%;" id="file" type="file" />
+				<input style="width: 100%; background: var(--white); color: var(--black)" id="file" type="file">
 			</p>`;
         }
         else if (this.uploadType === "zip") {
             return html`<p>
 				<span class="upload-text">Select zip file containing static content:</span><br />
-				<input style="width:100%;" id="file" type="file" accept=".zip" />
+				<input style="width: 100%; background: var(--white); color: var(--black)" id="file" type="file" accept=".zip">
 			</p>`;
         }
         else {
@@ -332,7 +490,6 @@ class PublishData extends LitElement {
                 url: `${uploadDataUrl}`,
                 body: `${postBody}`,
             })
-
             return uploadDataRes
         }
 
@@ -343,7 +500,6 @@ class PublishData extends LitElement {
                 url: `/transactions/convert`,
                 body: `${transactionBytesBase58}`,
             })
-
             return convertedBytes
         }
 
@@ -386,20 +542,11 @@ class PublishData extends LitElement {
             else {
                 myResponse = response
             }
-
             return myResponse
         }
-
         validate()
     }
 
-
-    // Helper Functions (Re-Used in Most part of the UI )
-
-    textColor(color) {
-        return color == 'light' ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.87)'
-    }
-
     _textMenu(event) {
         const getSelectedText = () => {
             var text = ''
@@ -421,141 +568,9 @@ class PublishData extends LitElement {
                 parentEpml.request('openCopyTextMenu', textMenuObject)
             }
         }
-
         checkSelectedTextAndShowMenu()
     }
 
-    constructor() {
-        super()
-
-        this.showName = false;
-        this.showService = false
-        this.showIdentifier = false
-        this.showMetadata = false;
-
-        const urlParams = new URLSearchParams(window.location.search)
-        this.name = urlParams.get('name')
-        this.service = urlParams.get('service')
-        this.identifier = urlParams.get('identifier')
-        this.category = urlParams.get('category')
-        this.uploadType = urlParams.get('uploadType') !== "null" ? urlParams.get('uploadType') : "file"
-
-        if (urlParams.get('showName') === "true") {
-            this.showName = true
-        }
-        if (urlParams.get('showService') === "true") {
-            this.showService = true
-        }
-        if (urlParams.get('showIdentifier') === "true") {
-            this.showIdentifier = true
-        }
-        if (urlParams.get('showMetadata') === "true") {
-            this.showMetadata = true
-        }
-
-        if (this.identifier != null) {
-            if (this.identifier === "null" || this.identifier.trim().length == 0) {
-                this.identifier = null
-            }
-        }
-
-        this.categories = [];
-        this.tags = ["tag 1", "tag 2", "tag 3", "tag 4", "tag 5"];
-
-        // Default to true so the message doesn't appear and disappear quickly
-        this.portForwardingEnabled = true
-        this.names = []
-        this.myRegisteredName = ''
-        this.selectedName = 'invalid'
-        this.path = ''
-        this.successMessage = ''
-        this.generalMessage = ''
-        this.errorMessage = ''
-        this.loading = false
-        this.btnDisable = false
-
-        const fetchNames = () => {
-            parentEpml.request('apiCall', {
-                url: `/names/address/${this.selectedAddress.address}?limit=0&reverse=true`
-            }).then(res => {
-
-                setTimeout(() => {
-                    this.names = res
-                    if (res[0] != null) {
-                        this.myRegisteredName = res[0].name;
-                    }
-                }, 1)
-            })
-            setTimeout(fetchNames, this.config.user.nodeSettings.pingInterval)
-        }
-
-        const fetchCategories = () => {
-            parentEpml.request('apiCall', {
-                url: `/arbitrary/categories`
-            }).then(res => {
-
-                setTimeout(() => {
-                    this.categories = res
-                }, 1)
-            })
-        }
-
-        const fetchPeersSummary = () => {
-            parentEpml.request('apiCall', {
-                url: `/peers/summary`
-            }).then(res => {
-
-                setTimeout(() => {
-                    this.portForwardingEnabled = (res.inboundConnections != null && res.inboundConnections > 0);
-                }, 1)
-            })
-            setTimeout(fetchPeersSummary, this.config.user.nodeSettings.pingInterval)
-        }
-
-        let configLoaded = false
-        parentEpml.ready().then(() => {
-            parentEpml.subscribe('selected_address', async selectedAddress => {
-                this.selectedAddress = {}
-                selectedAddress = JSON.parse(selectedAddress)
-                if (!selectedAddress || Object.entries(selectedAddress).length === 0) return
-                this.selectedAddress = selectedAddress
-            })
-            parentEpml.subscribe('config', c => {
-                if (!configLoaded) {
-                    setTimeout(fetchNames, 1)
-                    setTimeout(fetchCategories, 1)
-                    setTimeout(fetchPeersSummary, 1)
-                    configLoaded = true
-                }
-                this.config = JSON.parse(c)
-            })
-            parentEpml.subscribe('copy_menu_switch', async value => {
-
-                if (value === 'false' && window.getSelection().toString().length !== 0) {
-
-                    this.clearSelection()
-                }
-            })
-        })
-    }
-
-    firstUpdated() {
-
-        window.addEventListener('contextmenu', (event) => {
-            event.preventDefault()
-            this._textMenu(event)
-        })
-
-        window.addEventListener('click', () => {
-            parentEpml.request('closeCopyTextMenu', null)
-        })
-
-        window.onkeyup = (e) => {
-            if (e.keyCode === 27) {
-                parentEpml.request('closeCopyTextMenu', null)
-            }
-        }
-    }
 
     fetchResourceMetadata() {
         let identifier = this.identifier != null ? this.identifier : "default";
@@ -575,11 +590,10 @@ class PublishData extends LitElement {
             }, 1)
         })
     }
-
+    selectName(e) {
-    selectName() {
+        let name = this.shadowRoot.getElementById('registeredName')
-        const name = this.shadowRoot.getElementById('registeredName').value
+        this.selectedName = (name.value)
-        this.selectedName = name
+        this.name = (name.value)
-        this.name = name
         this.fetchResourceMetadata();
     }
 

qortal-ui-plugins/plugins/core/qdn/websites.src.js

@@ -400,6 +400,8 @@ class Websites extends LitElement {
 
     firstUpdated() {
 
+        this.changeTheme()
+
 	setInterval(() => {
 	    this.changeTheme();
 	}, 100)
@@ -416,7 +418,7 @@ class Websites extends LitElement {
             })
 
             this.followedNames = followedNames
-            setTimeout(getFollowedNames, 60000)
+            setTimeout(getFollowedNames, 120000)
         }
 
         const getBlockedNames = async () => {
@@ -425,7 +427,7 @@ class Websites extends LitElement {
             })
 
             this.blockedNames = blockedNames
-            setTimeout(getBlockedNames, 60000)
+            setTimeout(getBlockedNames, 120000)
         }
 
         const getWebFollowedNames = async () => {
@@ -434,7 +436,7 @@ class Websites extends LitElement {
             })
 
             this.webFollowedNames = webFollowedNames
-            setTimeout(getWebFollowedNames, 60000)
+            setTimeout(getWebFollowedNames, 120000)
         }
 
         const getWebBlockedNames = async () => {
@@ -443,7 +445,7 @@ class Websites extends LitElement {
             })
 
             this.webBlockedNames = webBlockedNames
-            setTimeout(getWebBlockedNames, 60000)
+            setTimeout(getWebBlockedNames, 120000)
         }
 
         const getBlockFollowedNames = async () => {
@@ -452,7 +454,7 @@ class Websites extends LitElement {
             })
 
             this.blockFollowedNames = blockFollowedNames
-            setTimeout(getBlockFollowedNames, 60000)
+            setTimeout(getBlockFollowedNames, 120000)
         }
 
         const getBlockBlockedNames = async () => {
@@ -461,7 +463,7 @@ class Websites extends LitElement {
             })
 
             this.blockBlockedNames = blockBlockedNames
-            setTimeout(getBlockBlockedNames, 60000)
+            setTimeout(getBlockBlockedNames, 120000)
         }
 
         const getSearchFollowedNames = async () => {
@@ -470,7 +472,7 @@ class Websites extends LitElement {
             })
 
             this.searchFollowedNames = searchFollowedNames
-            setTimeout(getSearchFollowedNames, 60000)
+            setTimeout(getSearchFollowedNames, 120000)
         }
 
         const getSearchBlockedNames = async () => {
@@ -479,7 +481,7 @@ class Websites extends LitElement {
             })
 
             this.searchBlockedNames = searchBlockedNames
-            setTimeout(getSearchBlockedNames, 60000)
+            setTimeout(getSearchBlockedNames, 120000)
         }
 
         const getRelayMode = async () => {
@@ -488,7 +490,7 @@ class Websites extends LitElement {
             })
 
             this.relayMode = relayMode;
-            setTimeout(getRelayMode, 60000)
+            setTimeout(getRelayMode, 120000)
         }
 
         window.addEventListener("contextmenu", (event) => {
@@ -530,8 +532,8 @@ class Websites extends LitElement {
                     setTimeout(getSearchBlockedNames, 1)
                     setTimeout(getRelayMode, 1)
                     setInterval(this.getArbitraryResources, 120000)
-                    setInterval(this.getFollowedWebsites, 60000)
+                    setInterval(this.getFollowedWebsites, 120000)
-                    setInterval(this.getBlockedWebsites, 60000)
+                    setInterval(this.getBlockedWebsites, 120000)
                     configLoaded = true
                 }
                 this.config = JSON.parse(c)

qortal-ui-plugins/plugins/core/reward-share/reward-share.src.js

@@ -165,6 +165,8 @@ class RewardShare extends LitElement {
 
     firstUpdated() {
 
+        this.changeTheme()
+
 	setInterval(() => {
 	    this.changeTheme();
 	}, 100)

qortal-ui-plugins/plugins/core/send-coin/send-coin.src.js

@@ -275,6 +275,8 @@ class SendMoneyPage extends LitElement {
 
     firstUpdated() {
 
+        this.changeTheme()
+
 	setInterval(() => {
 	    this.changeTheme();
 	}, 100)

qortal-ui-plugins/plugins/core/trade-portal/trade-portal.src.js

@@ -855,8 +855,11 @@ class TradePortal extends LitElement {
     }
 
     firstUpdated() {
+
         let _this = this
 
+        this.changeTheme()
+
 	setInterval(() => {
 	    this.changeTheme();
 	}, 100)

qortal-ui-plugins/plugins/core/wallet/wallet-app.src.js

@@ -660,6 +660,8 @@ class MultiWallet extends LitElement {
 
     firstUpdated() {
 
+        this.changeTheme()
+
 	setInterval(() => {
 	    this.changeTheme();
 	}, 100)