wallpapers are done except the dark mode

css/base.css

@@ -42,11 +42,12 @@
   --clr-text-primary: light-dark(#666, #999); /* Default text color */
   --clr-text-secondary: light-dark(#757575, #8a8a8a); /* Muted text, icons e.g. menu trigger */
   --clr-text-tertiary: light-dark(#999, #787878); /* Even more muted text, borders, some icons */
+  --clr-text-tertiary-activated: #888; /* Activated (hover, focus) tertiary text */
   --clr-text-placeholder: light-dark(#bbb, #555); /* Placeholder text */
   --clr-text-disabled: light-dark(#888, #777); /* Disabled text e.g. in-place-edit */
   --clr-border-light: light-dark(#ccc, #555); /* Common light border, separator */
   --clr-border-muted: light-dark(#ddd, #444); /* Softer border, e.g. in-place-edit dashed */
-  --clr-background-off-white: light-dark(#fafafa, #282828); /* Common very light background */
+  --clr-background-off-white: light-dark(#fafafa, #222); /* Common very light background */
   --clr-background-light-gray: light-dark(#f0f0f0, #0f0f0f); /* HR background, action button hover */
   --clr-background-extra-light-gray: light-dark(#eee, #222); /* Flat button faux bg, tabbar bg, chip bg */
   --clr-background-blue-gray-50: light-dark(#edf0f2, #202c33); /* Contact hover, messages panel, send message panel */
@@ -829,7 +830,7 @@ div.trusted-badge {
 .action-button {
   display: block;
   position: absolute;
-  color: var(--clr-text-tertiary);
+  color: var(--clr-text-secondary);
   font-size: 1.8rem;
   background-color: var(--clr-background-off-white);
   border-radius: 50%;
@@ -845,12 +846,15 @@ div.trusted-badge {
   z-index: 2;
 }
 
-.action-button:focus, .action-button:hover {
+.action-button:focus,
-  color: var(--clr-text-disabled);
+.action-button:hover,
+.action-button:hover:not([disabled]),
+.action-button:active:not([disabled]) {
+  color: var(--clr-text-tertiary-activated);
   background-color: var(--clr-background-light-gray);
 }
 .action-button:active {
-  color: light-dark(#777, #666); /* #777 */
+  color: var(--clr-text-tertiary-activated);
   background-color: var(--clr-background-extra-light-gray);
 }
 
@@ -1763,28 +1767,36 @@ img.channel {
   align-self: center;
 }
 
-/* Scrollable panel where the messages are shown */
+#messages-container {
-#messages-panel {
   position: relative;
-  padding: 0.75rem;
+  overflow-y: hidden;
-  overflow-y: scroll;
-  background-color: var(--clr-background-blue-gray-50);
   height: 100%;
 }
 
-#messages-panel::before {
+
+#messages-container::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
+  background-color: var(--clr-background-blue-gray-50);
   background-image: var(--wallpaper-url);
   background-repeat: var(--wallpaper-repeat);
   background-size: var(--wallpaper-size);
   background-position: var(--wallpaper-position);
   filter: blur(var(--wallpaper-blur)) invert(var(--wallpaper-invert));
   pointer-events: none;
+  z-index: 0;
+}
+
+/* Scrollable panel where the messages are shown */
+#messages-panel {
+  position: relative;
+  padding: 0.75rem;
+  overflow-y: scroll;
+  height: 100%;
 }
 
 /* Dark mode asigned by the OS */
@@ -1799,12 +1811,6 @@ img.channel {
   background-image: url("../img/bg_messages_dk.png");
 }
 
-#messages-container {
-  position: relative;
-  overflow-y: hidden;
-  height: 100%;
-}
-
 #write-only-background {
   position: absolute;
   top: 0;

src/views/wallpapers.jsx

@@ -10,7 +10,8 @@ export default class WallpapersView extends React.PureComponent {
     super(props);
 
     this.state = {
-      tab: WALLPAPER_DEFAULTS.type, // 'patt' | 'img'
+      tab: WALLPAPER_DEFAULTS.type, // currently selected tab: 'patt' | 'img'
+      selectedType: WALLPAPER_DEFAULTS.type, // type of the selected wallpaper.
       wallpaper: imageIndex[WALLPAPER_DEFAULTS.type][WALLPAPER_DEFAULTS.index].name,
       blur: 0,
     };
@@ -39,11 +40,11 @@ export default class WallpapersView extends React.PureComponent {
       e.preventDefault();
       type = this.state.tab;
       index = e.currentTarget.dataset.id;
-      blur = this.state.blur;
+      blur = type == 'patt' ? 0 : this.state.blur;
     }
     const fname = imageIndex[type][index].name;
     const size = type == 'patt' ? imageIndex[type][index].size : 0;
-    this.setState({tab: type, wallpaper: fname, blur: 0});
+    this.setState({tab: type, wallpaper: fname, selectedType: type, blur: blur});
     this.props.onWallpaperSelected(`../${WALLPAPER_DEFAULTS.path}${fname}`, size, this.blurValues[blur]);
   }
 
@@ -51,9 +52,11 @@ export default class WallpapersView extends React.PureComponent {
     e.preventDefault();
     const blur = e.currentTarget.value;
     this.setState({blur: blur});
-    // Path relative to CSS file.
+    if (this.state.selectedType == 'img') {
+      // Apply blur to patterns only. Path relative to CSS file.
       this.props.onWallpaperSelected(`../${WALLPAPER_DEFAULTS.path}${this.state.wallpaper}`, 0, this.blurValues[blur]);
     }
+  }
 
   render() {
     return (

umd/827.prod.js

@@ -1,2 +1,2 @@
-"use strict";(self.webpackChunktinode_webapp=self.webpackChunktinode_webapp||[]).push([[827],{3827:function(e,a,t){t.r(a),t.d(a,{default:function(){return d}});var l=t(1594),s=t.n(l),r=t(8181),n=t(7151),i=t(9027),c=t(1781);class d extends s().PureComponent{constructor(e){super(e),this.state={tab:i.S.type,wallpaper:c[i.S.type][i.S.index].name,blur:0},this.blurValues=[0,1,2,4,8,16],this.handleTabClick=this.handleTabClick.bind(this),this.handleWallpaperSelected=this.handleWallpaperSelected.bind(this),this.handleBlurChanged=this.handleBlurChanged.bind(this)}handleTabClick(e){e.preventDefault(),n.A.navigateTo(n.A.addUrlParam(window.location.hash,"tab",e.currentTarget.dataset.id)),this.setState({tab:e.currentTarget.dataset.id})}handleWallpaperSelected(e){let a,t,l;e?(e.preventDefault(),t=this.state.tab,a=e.currentTarget.dataset.id,l=this.state.blur):(t=i.S.type,a=i.S.index,l=0);const s=c[t][a].name,r="patt"==t?c[t][a].size:0;this.setState({tab:t,wallpaper:s,blur:0}),this.props.onWallpaperSelected(`../${i.S.path}${s}`,r,this.blurValues[l])}handleBlurChanged(e){e.preventDefault();const a=e.currentTarget.value;this.setState({blur:a}),this.props.onWallpaperSelected(`../${i.S.path}${this.state.wallpaper}`,0,this.blurValues[a])}render(){return s().createElement("div",{className:"flex-column"},s().createElement("div",{className:"panel-form-row clean-clickable"},s().createElement("a",{className:"flat-button",onClick:()=>this.handleWallpaperSelected(null)},s().createElement("i",{className:"material-icons"},"undo")," ",s().createElement(r.FormattedMessage,{id:"button_restore",defaultMessage:[{type:0,value:"Restore default"}]}))),s().createElement("ul",{className:"tabbar"},s().createElement("li",{className:"patt"===this.state.tab?"active":null},s().createElement("a",{href:"#","data-id":"patt",onClick:this.handleTabClick},s().createElement(r.FormattedMessage,{id:"tabtitle_pattern",defaultMessage:[{type:0,value:"pattern"}]}))),s().createElement("li",{className:"img"===this.state.tab?"active":null},s().createElement("a",{href:"#","data-id":"img",onClick:this.handleTabClick},s().createElement(r.FormattedMessage,{id:"tabtitle_image",defaultMessage:[{type:0,value:"image"}]})))),s().createElement("div",{id:"settings-form",className:"scrollable-panel"},"patt"===this.state.tab?s().createElement("div",{className:"image-grid"},c.patt.map((e,a)=>{const t=this.state.wallpaper===e.name?" selected":"";return s().createElement("div",{key:a,"data-id":a,className:`image-grid-cell${t}`,onClick:this.handleWallpaperSelected},s().createElement("img",{src:i.S.path+e.name,alt:e.name,style:{width:`${e.size}px`,height:`${e.size}px`}}))})):s().createElement(s().Fragment,null,s().createElement("div",{className:"panel-form-column"},s().createElement("div",{className:"panel-form-row"},s().createElement("label",{className:"small"},s().createElement(r.FormattedMessage,{id:"label_blur_wallpaper",defaultMessage:[{type:0,value:"Blur:"}]}))),s().createElement("div",{className:"panel-form-row"},s().createElement("input",{type:"range",id:"blur",name:"blur",min:"0",max:"5",step:"1",value:this.state.blur,onChange:this.handleBlurChanged}))),s().createElement("div",{className:"image-grid"},c.img.map((e,a)=>{const t=this.state.wallpaper===e.name?" selected":"";return s().createElement("div",{key:a,"data-id":a,className:`image-grid-cell${t}`,onClick:this.handleWallpaperSelected},s().createElement("img",{src:i.S.path+e.pr,alt:e.name,style:{width:"100%",height:"100%"}}))})))))}}}}]);
+"use strict";(self.webpackChunktinode_webapp=self.webpackChunktinode_webapp||[]).push([[827],{3827:function(e,t,a){a.r(t),a.d(t,{default:function(){return d}});var l=a(1594),s=a.n(l),r=a(8181),n=a(7151),i=a(9027),c=a(1781);class d extends s().PureComponent{constructor(e){super(e),this.state={tab:i.S.type,selectedType:i.S.type,wallpaper:c[i.S.type][i.S.index].name,blur:0},this.blurValues=[0,1,2,4,8,16],this.handleTabClick=this.handleTabClick.bind(this),this.handleWallpaperSelected=this.handleWallpaperSelected.bind(this),this.handleBlurChanged=this.handleBlurChanged.bind(this)}handleTabClick(e){e.preventDefault(),n.A.navigateTo(n.A.addUrlParam(window.location.hash,"tab",e.currentTarget.dataset.id)),this.setState({tab:e.currentTarget.dataset.id})}handleWallpaperSelected(e){let t,a,l;e?(e.preventDefault(),a=this.state.tab,t=e.currentTarget.dataset.id,l="patt"==a?0:this.state.blur):(a=i.S.type,t=i.S.index,l=0);const s=c[a][t].name,r="patt"==a?c[a][t].size:0;this.setState({tab:a,wallpaper:s,selectedType:a,blur:l}),this.props.onWallpaperSelected(`../${i.S.path}${s}`,r,this.blurValues[l])}handleBlurChanged(e){e.preventDefault();const t=e.currentTarget.value;this.setState({blur:t}),"img"==this.state.selectedType&&this.props.onWallpaperSelected(`../${i.S.path}${this.state.wallpaper}`,0,this.blurValues[t])}render(){return s().createElement("div",{className:"flex-column"},s().createElement("div",{className:"panel-form-row clean-clickable"},s().createElement("a",{className:"flat-button",onClick:()=>this.handleWallpaperSelected(null)},s().createElement("i",{className:"material-icons"},"undo")," ",s().createElement(r.FormattedMessage,{id:"button_restore",defaultMessage:[{type:0,value:"Restore default"}]}))),s().createElement("ul",{className:"tabbar"},s().createElement("li",{className:"patt"===this.state.tab?"active":null},s().createElement("a",{href:"#","data-id":"patt",onClick:this.handleTabClick},s().createElement(r.FormattedMessage,{id:"tabtitle_pattern",defaultMessage:[{type:0,value:"pattern"}]}))),s().createElement("li",{className:"img"===this.state.tab?"active":null},s().createElement("a",{href:"#","data-id":"img",onClick:this.handleTabClick},s().createElement(r.FormattedMessage,{id:"tabtitle_image",defaultMessage:[{type:0,value:"image"}]})))),s().createElement("div",{id:"settings-form",className:"scrollable-panel"},"patt"===this.state.tab?s().createElement("div",{className:"image-grid"},c.patt.map((e,t)=>{const a=this.state.wallpaper===e.name?" selected":"";return s().createElement("div",{key:t,"data-id":t,className:`image-grid-cell${a}`,onClick:this.handleWallpaperSelected},s().createElement("img",{src:i.S.path+e.name,alt:e.name,style:{width:`${e.size}px`,height:`${e.size}px`}}))})):s().createElement(s().Fragment,null,s().createElement("div",{className:"panel-form-column"},s().createElement("div",{className:"panel-form-row"},s().createElement("label",{className:"small"},s().createElement(r.FormattedMessage,{id:"label_blur_wallpaper",defaultMessage:[{type:0,value:"Blur:"}]}))),s().createElement("div",{className:"panel-form-row"},s().createElement("input",{type:"range",id:"blur",name:"blur",min:"0",max:"5",step:"1",value:this.state.blur,onChange:this.handleBlurChanged}))),s().createElement("div",{className:"image-grid"},c.img.map((e,t)=>{const a=this.state.wallpaper===e.name?" selected":"";return s().createElement("div",{key:t,"data-id":t,className:`image-grid-cell${a}`,onClick:this.handleWallpaperSelected},s().createElement("img",{src:i.S.path+e.pr,alt:e.name,style:{width:"100%",height:"100%"}}))})))))}}}}]);
 //# sourceMappingURL=827.prod.js.map

umd/src_views_wallpapers_jsx.dev.js

@@ -28,6 +28,7 @@ class WallpapersView extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureC
     super(props);
     this.state = {
       tab: _config_js__WEBPACK_IMPORTED_MODULE_3__.WALLPAPER_DEFAULTS.type,
+      selectedType: _config_js__WEBPACK_IMPORTED_MODULE_3__.WALLPAPER_DEFAULTS.type,
       wallpaper: _img_bkg_index_json__WEBPACK_IMPORTED_MODULE_4__[_config_js__WEBPACK_IMPORTED_MODULE_3__.WALLPAPER_DEFAULTS.type][_config_js__WEBPACK_IMPORTED_MODULE_3__.WALLPAPER_DEFAULTS.index].name,
       blur: 0
     };
@@ -53,14 +54,15 @@ class WallpapersView extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureC
       e.preventDefault();
       type = this.state.tab;
       index = e.currentTarget.dataset.id;
-      blur = this.state.blur;
+      blur = type == 'patt' ? 0 : this.state.blur;
     }
     const fname = _img_bkg_index_json__WEBPACK_IMPORTED_MODULE_4__[type][index].name;
     const size = type == 'patt' ? _img_bkg_index_json__WEBPACK_IMPORTED_MODULE_4__[type][index].size : 0;
     this.setState({
       tab: type,
       wallpaper: fname,
-      blur: 0
+      selectedType: type,
+      blur: blur
     });
     this.props.onWallpaperSelected(`../${_config_js__WEBPACK_IMPORTED_MODULE_3__.WALLPAPER_DEFAULTS.path}${fname}`, size, this.blurValues[blur]);
   }
@@ -70,8 +72,10 @@ class WallpapersView extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureC
     this.setState({
       blur: blur
     });
+    if (this.state.selectedType == 'img') {
       this.props.onWallpaperSelected(`../${_config_js__WEBPACK_IMPORTED_MODULE_3__.WALLPAPER_DEFAULTS.path}${this.state.wallpaper}`, 0, this.blurValues[blur]);
     }
+  }
   render() {
     return react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
       className: "flex-column"