diff --git a/README.md b/README.md index 02f62442..3410cb64 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # Qortal Project UI [![License](https://img.shields.io/badge/license-GPL--3.0-blue)](https://opensource.org/licenses/GPL-3.0) -Discord +[![Qortal Discord Invite](https://img.shields.io/discord/745037351163527189?color=%237289DA&label=chat&logo=discord&logoColor=white)](https://discord.com/invite/54UyhB7) Decentralizing The World diff --git a/qortal-ui-core/assets/js/svg.js b/qortal-ui-core/assets/js/svg.js new file mode 100644 index 00000000..bf4e4288 --- /dev/null +++ b/qortal-ui-core/assets/js/svg.js @@ -0,0 +1,4 @@ +import { html } from 'lit' + +export const svgSun = html``; +export const svgMoon = html ``; diff --git a/qortal-ui-core/font/switch-theme.css b/qortal-ui-core/font/switch-theme.css new file mode 100644 index 00000000..53170400 --- /dev/null +++ b/qortal-ui-core/font/switch-theme.css @@ -0,0 +1,45 @@ +html { + --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; +} + +html[theme="dark"] { + --white: #0f1a2e; + --black: #c9d2d9; + --gray: #d8d8d8; + --graylight: #0b305e; + --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; +} diff --git a/qortal-ui-core/package.json b/qortal-ui-core/package.json index d591cb68..a281a663 100644 --- a/qortal-ui-core/package.json +++ b/qortal-ui-core/package.json @@ -19,7 +19,7 @@ "dependencies": { "@hapi/hapi": "^20.2.1", "@hapi/inert": "^6.0.5", - "sass": "^1.49.8" + "sass": "^1.49.9" }, "devDependencies": { "@babel/core": "^7.17.5", @@ -55,17 +55,17 @@ "@polymer/paper-tooltip": "^3.0.1", "@rollup/plugin-alias": "^3.1.9", "@rollup/plugin-babel": "^5.3.1", - "@rollup/plugin-commonjs": "^21.0.1", + "@rollup/plugin-commonjs": "^21.0.2", "@rollup/plugin-node-resolve": "^13.1.3", "@rollup/plugin-replace": "^4.0.0", - "@vaadin/grid": "^22.0.5", - "@vaadin/password-field": "^22.0.5", + "@vaadin/grid": "^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.6", + "postcss": "^8.4.7", "pwa-helpers": "^0.9.1", "random-sentence-generator": "^0.0.8", "redux": "^4.1.2", diff --git a/qortal-ui-core/public/index.html b/qortal-ui-core/public/index.html index a171e51f..345e19a6 100644 --- a/qortal-ui-core/public/index.html +++ b/qortal-ui-core/public/index.html @@ -21,9 +21,9 @@ - + - + + Qortal diff --git a/qortal-ui-core/src/components/app-info.js b/qortal-ui-core/src/components/app-info.js index 34b6fb1e..16937bc2 100644 --- a/qortal-ui-core/src/components/app-info.js +++ b/qortal-ui-core/src/components/app-info.js @@ -27,10 +27,12 @@ class AppInfo extends connect(store)(LitElement) { .normal { --mdc-theme-primary: rgb(3, 169, 244); } + .normal-button { --mdc-theme-primary: rgb(3, 169, 244); --mdc-theme-on-primary: white; } + mwc-button.normal-button { --mdc-theme-primary: rgb(3, 169, 244); --mdc-theme-on-primary: white; @@ -38,10 +40,12 @@ class AppInfo extends connect(store)(LitElement) { .test-net { --mdc-theme-primary: black; } + .test-net-button { --mdc-theme-primary: black; --mdc-theme-on-primary: white; } + mwc-button.test-net-button { --mdc-theme-primary: black; --mdc-theme-on-primary: white; @@ -49,7 +53,8 @@ class AppInfo extends connect(store)(LitElement) { #profileInMenu { flex: 0 0 100px; padding:12px; - border-top: 1px solid #eee; + border-top: 1px solid var(--border); + background: var(--white); } .info { margin: 0; @@ -58,6 +63,7 @@ class AppInfo extends connect(store)(LitElement) { display: inline-block; width:100%; padding-bottom:8px; + color: var(--black); } .blue { color: #03a9f4; @@ -67,7 +73,7 @@ class AppInfo extends connect(store)(LitElement) { display: inline; } .black { - color: black; + color: var(--black); margin: 0; font-size: 14px; font-weight:200; diff --git a/qortal-ui-core/src/components/app-view.js b/qortal-ui-core/src/components/app-view.js index e15170a6..64de88e5 100644 --- a/qortal-ui-core/src/components/app-view.js +++ b/qortal-ui-core/src/components/app-view.js @@ -9,6 +9,7 @@ import './wallet-profile.js' import './app-info.js' import './sidenav-menu.js' import './show-plugin.js' +import './qort-theme-toggle.js' import '@material/mwc-drawer' @@ -27,47 +28,56 @@ class AppView extends connect(store)(LitElement) { static get styles() { return [ css` - :host { - --app-drawer-width: 260px; - } - app-drawer-layout:not([narrow]) [drawer-toggle]:not(sidenav-menu) { - display: none; - } - app-drawer { - box-shadow: var(--shadow-2); - background: var(--mdc-theme-surface); - } - app-header { - box-shadow: var(--shadow-2); - } - app-toolbar { - background: var(--mdc-theme-surface); - color: var(--mdc-theme-on-surface); - } - #sideBar { - height: 100vh; - display: flex; - flex-direction: column; - } - .sideBarMenu{ - overflow-y: auto; - flex: 1 1; - } - #sideBar::-webkit-scrollbar { - width: 7px; - background-color: transparent; - } + :host { + --app-drawer-width: 260px; + } - #sideBar::-webkit-scrollbar-track { - background-color: transparent; - } + app-drawer-layout:not([narrow]) [drawer-toggle]:not(sidenav-menu) { + display: none; + } - #sideBar::-webkit-scrollbar-thumb { - background-color: #333; - border-radius: 6px; - border: 3px solid #333; - } - ` + app-drawer { + box-shadow: var(--shadow-2); + background: var(--white); + } + + app-header { + box-shadow: var(--shadow-2); + } + + app-toolbar { + background: var(--white); + color: var(--black); + border-top: var(--border); + } + + #sideBar { + height: 100vh; + display: flex; + flex-direction: column; + background: var(--white); + } + + .sideBarMenu{ + overflow-y: auto; + flex: 1 1; + } + + #sideBar::-webkit-scrollbar { + width: 7px; + background-color: transparent; + } + + #sideBar::-webkit-scrollbar-track { + background-color: transparent; + } + + #sideBar::-webkit-scrollbar-thumb { + background-color: #333; + border-radius: 6px; + border: 3px solid #333; + } + ` ] } @@ -94,6 +104,8 @@ class AppView extends connect(store)(LitElement) { + +
  
this.openSettings()} title="Settings" >
diff --git a/qortal-ui-core/src/components/qort-theme-toggle.js b/qortal-ui-core/src/components/qort-theme-toggle.js new file mode 100644 index 00000000..ba4d4e22 --- /dev/null +++ b/qortal-ui-core/src/components/qort-theme-toggle.js @@ -0,0 +1,134 @@ +import { LitElement, html, css } from 'lit' +import { svgSun, svgMoon } from '../../assets/js/svg.js' + +class QortThemeToggle extends LitElement { + static get properties() { + return { + theme: { + type: String, + reflect: true + } + } + } + + constructor() { + super(); + this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light'; + } + + static styles = [ + css` + :host { + display: inline-block; + position: relative; + width: 54px; + height: 32px; + transform: translateY(-2px); + } + + svg { + width: 32px; + height: 32px; + } + + input { + cursor: pointer; + position: absolute; + z-index: 1; + opacity: 0; + width: 100%; + height: 100%; + } + + .slider { + position: absolute; + cursor: pointer; + width: 100%; + height: 16px; + top: 50%; + transform: translateY(-50%); + border-radius: 1rem; + background-color: var(--graylight); + transition: all .4s ease; + } + + .icon { + width: 32px; + height: 32px; + display: inline-block; + position: absolute; + top: 50%; + background: var(--graylight); + border: 2px solid var(--gray); + border-radius: 50%; + transition: transform 300ms ease; + } + + :host([theme="light"]) .icon { + transform: translate(0, -50%); + } + + input:checked ~ .icon, + :host([theme="dark"]) .icon { + transform: translate(calc(100% - 18px), -50%); + } + + .moon { + display: none; + } + + .moon svg { + transform: scale(0.6); + } + + :host([theme="dark"]) .sun { + display: none; + } + + :host([theme="dark"]) .moon { + display: inline-block; + } + ` + ]; + + render() { + return html` + this.toggleTheme()}/> +
+
+ ${svgSun} + ${svgMoon} +
+ `; + } + + firstUpdated() { + this.initTheme(); + } + + + toggleTheme() { + if (this.theme === 'light') { + this.theme = 'dark'; + } else { + this.theme = 'light'; + } + + this.dispatchEvent( + new CustomEvent('qort-theme-change', { + bubbles: true, + composed: true, + detail: this.theme, + }), + ); + + window.localStorage.setItem('qortalTheme', this.theme); + this.initTheme(); + } + + initTheme() { + document.querySelector('html').setAttribute('theme', this.theme); + } +} + +window.customElements.define('qort-theme-toggle', QortThemeToggle); \ No newline at end of file diff --git a/qortal-ui-core/src/components/settings-view/security-view.js b/qortal-ui-core/src/components/settings-view/security-view.js index 7e36f885..d5a37eaf 100644 --- a/qortal-ui-core/src/components/settings-view/security-view.js +++ b/qortal-ui-core/src/components/settings-view/security-view.js @@ -15,12 +15,17 @@ class SecurityView extends connect(store)(LitElement) { static get styles() { return css` - * { + * { --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); } + .center-box { position: relative; top: 45%; @@ -28,6 +33,7 @@ class SecurityView extends connect(store)(LitElement) { transform: translate(-50%, 0%); text-align: center; } + .q-button { display: inline-flex; flex-direction: column; @@ -61,7 +67,7 @@ class SecurityView extends connect(store)(LitElement) {

password - +
this.downloadBackup()} class="q-button"> Download BackUp File
diff --git a/qortal-ui-core/src/components/settings-view/user-settings.js b/qortal-ui-core/src/components/settings-view/user-settings.js index bf494ca2..0170fdcd 100644 --- a/qortal-ui-core/src/components/settings-view/user-settings.js +++ b/qortal-ui-core/src/components/settings-view/user-settings.js @@ -28,39 +28,46 @@ class UserSettings extends connect(store)(LitElement) { max-width: 100vw; height: 100%; max-height: 100vh; - background-color: #fff; - color: #333333; + background-color: var(--white); + color: var(--black); line-height: 1.6; } + .decline { --mdc-theme-primary: var(--mdc-theme-error) } + paper-dialog.userSettings { width: 100%; max-width: 100vw; height: 100%; max-height: 100vh; - background-color: #fff; - color: #333333; + background-color: var(--white); + color: var(--black); line-height: 1.6; overflow-y: auto; } + .actions { display:flex; justify-content: space-between; padding: 0 4em; margin: 15px 0 -2px 0; } + .close-icon { font-size: 36px; } + .close-icon:hover { cursor: pointer; opacity: .6; } + .buttons { text-align:right; } + .container { max-width: 90vw; margin-left: auto; @@ -68,107 +75,127 @@ class UserSettings extends connect(store)(LitElement) { margin-top: 20px; padding: .6em; } + ul { list-style: none; padding: 0; margin-bottom: 0; } + .leftBar { - background-color: #fff; - color: #333333; - border: 1px solid #a1a1a1; + background-color: var(--white); + color: var(--black); + border: 1px solid var(--border); padding: 20px 0 0 0; border-radius: 5px; } + .leftBar img { margin: 0 auto; width: 75%; height: 75%; text-align: center; } + .leftBar .slug { text-align: center; margin-top: 20px; - color: #333333; + color: var(--black); font-size: 16px; font-weight: 600; margin-bottom: 7px; } + .leftBar ul li { - border-bottom: 1px solid #DDD; + border-bottom: 1px solid var(--border); } + .leftBar ul li:last-child { border-bottom: none; } + .leftBar ul li a { - color: #333333; + color: var(--black); font-size: 16px; font-weight: 400; text-decoration: none; padding: .9em; display: block; } + .leftBar ul li a i { margin-right: 8px; font-size: 16px; } + .leftBar ul li a:hover { - background-color: #f6f6f6; + background-color: var(--menuhover); color: #515151; } + .leftBar ul li:active { border-bottom: none; } + .leftBar ul li a.active { color: #515151; - background-color: #eee; + background-color: var(--menuactive); border-left: 2px solid #515151; margin-left: -2px; } + .mainPage { - background-color: #fff; - color: #333333; - border: 1px solid #a1a1a1; + background-color: var(--white); + color: var(--black); + border: 1px solid var(--border); padding: 20px 0 10px 0; border-radius: 5px; font-size: 16px; text-align: center; min-height: 460px; } + @media(max-width:700px) { .mainPage { margin-top: 30px; } } + @media(min-width:765px) { * { margin: 0; padding: 0; box-sizing: border-box; } + .actions { display:flex; justify-content: space-between; padding: 0 4em; margin: 15px 0 -25px 0; } + .container { padding: 2em; } + .wrapper { display: grid; grid-template-columns: 1fr 3fr; grid-gap: 30px; } + .wrapper > .mainPage { padding: 2em; } + .leftBar { text-align: left; max-height: 403px; max-width: 400px; font-size: 16px; } + .mainPage { font-size: 16px; } diff --git a/qortal-ui-core/src/components/sidenav-menu.js b/qortal-ui-core/src/components/sidenav-menu.js index 76ed6b18..e407ad28 100644 --- a/qortal-ui-core/src/components/sidenav-menu.js +++ b/qortal-ui-core/src/components/sidenav-menu.js @@ -20,11 +20,12 @@ class SidenavMenu extends connect(store)(LitElement) { .mcd-menu { list-style: none; padding: 0px 0px; - background: rgb(255, 255, 255); + background: var(--white); border-radius: 2px; width: 100%; outline: none; } + .mcd-menu li { position: relative; line-height: 48px; @@ -32,17 +33,19 @@ class SidenavMenu extends connect(store)(LitElement) { padding: 2px; list-style: none; } + .mcd-menu li a { display: block; text-decoration: none; padding-left: 20px; - color: var(--mdc-theme-on-surface); + color: var(--mainmenutext); text-align: left; height: 48px; position: relative; - border-bottom: 1px solid #EEE; + border-bottom: 1px solid var(--border); outline: none; } + .mcd-menu li a mwc-icon { float: left; margin: 0 10px 0 0; @@ -65,21 +68,24 @@ class SidenavMenu extends connect(store)(LitElement) { .mcd-menu li:hover > a mwc-icon { opacity: 1; } + .mcd-menu li:hover a span { opacity: 1; outline: none; } .mcd-menu li:hover > a { - background: #f8f8f8; - color: #515151; + background: var(--menuhover); + color: var(--mainmenutexthover); } + .mcd-menu li a.active { position: relative; color: #515151; - background-color: #eee; + background-color: var(--menuactive); outline: none; } + .mcd-menu li a.active:before { content: ""; position: absolute; @@ -123,6 +129,7 @@ class SidenavMenu extends connect(store)(LitElement) { border-left: 4px solid #515151; outline: none; } + .mcd-menu li ul:before { content: ""; position: absolute; @@ -133,6 +140,7 @@ class SidenavMenu extends connect(store)(LitElement) { border-top: 5px solid transparent; outline: none; } + .mcd-menu li:hover > ul, .mcd-menu li ul li:hover > ul { display: block; @@ -145,21 +153,24 @@ class SidenavMenu extends connect(store)(LitElement) { .mcd-menu li ul li a { text-align: left; border: 0; - border-bottom: 1px solid #EEE; + 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; @@ -170,6 +181,7 @@ class SidenavMenu extends connect(store)(LitElement) { border-top: 5px solid transparent; outline: none; } + .mcd-menu li ul li:hover > ul { top: 0px; left: 200px; @@ -186,10 +198,6 @@ class SidenavMenu extends connect(store)(LitElement) { render() { return html` - -