bump version, update dependencies

css/base.css

@@ -7,6 +7,16 @@
   /* Height of caption panel */
   --caption-panel-height: 4rem;
 
+  /* Wallpaper */
+  --wallpaper-url: url('../img/bkg/a00.png'); /* path relative to CSS file */
+  --wallpaper-repeat: repeat;
+  --wallpaper-blur: 0px;
+  --wallpaper-invert: 0;
+  --wallpaper-brightness: 1;
+  --wallpaper-size: contain;
+  --wallpaper-position: center;
+
+
   /* Core Palette */
   --clr-bright: light-dark(#fff, #181818);
   --clr-dark: light-dark(#000, #fff);
@@ -33,11 +43,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 */
@@ -57,7 +68,7 @@
   --clr-error-border-light: light-dark(#ffbdc6, #ff334e); /* Info box error border */
   --clr-error-text-dark: light-dark(#b51c1c, #de2323); /* Info box error text, icon */
   --clr-error-icon: light-dark(#ef5552, #d81b0e); /* Info box error icon specific */
-  --clr-warning-accent: light-dark(#FFC107, #000e16); /* Amber, danger-color */
+  --clr-warning-accent: light-dark(#FFC107, #808020); /* Amber, danger-color */
   --clr-warning-bg-light: light-dark(#fff9c4, #00060c); /* Info box warning bg */
   --clr-warning-border-light: light-dark(#fff59d, #000a2b); /* Info box warning border */
   --clr-warning-text-dark: light-dark(#6d4c41, #a08356); /* Info box warning text */
@@ -161,6 +172,41 @@
   --clr-badge-magenta-text: light-dark(#939, #747);
   --clr-badge-magenta-border: light-dark(#c9c, #636);
 
+    /* Chips */
+  --clr-chip-bg: var(--clr-background-extra-light-gray);
+  --clr-chip-invalid-text: var(--clr-error-text-muted);
+  --clr-chip-invalid-bg: var(--clr-badge-red-bg);
+  --clr-chip-remove-icon-bg: light-dark(#aaa, #555);
+  --clr-chip-remove-icon-text: var(--clr-background-extra-light-gray);
+  --clr-chip-remove-icon-hover-bg: var(--clr-text-placeholder);
+  --clr-chip-remove-icon-hover-text: var(--clr-bright);
+
+    /* Tabbar */
+  --clr-tabbar-bg: var(--clr-background-extra-light-gray);
+  --clr-tabbar-inactive-text: light-dark(rgba(33,150,243,0.6), rgba(22,90,160,1));
+  --clr-tabbar-active-text: var(--clr-primary-accent);
+  --clr-tabbar-inactive-border: var(--clr-border-light);
+  --clr-tabbar-active-border: var(--clr-primary-accent);
+
+  /* Miscellaneous UI */
+  --clr-highlight-text: var(--clr-std-teal);
+  --clr-highlight-preview-text: light-dark(#5f9ea0, #205e60);
+  --clr-spinner-track: light-dark(#f3f3f3, #0c0c0c);
+  --clr-spinner-active: var(--clr-primary-action);
+  --clr-cropper-bounding-box-border: var(--clr-primary-action);
+  --clr-cropper-bounding-box-bg: var(--clr-text-tertiary);
+  --clr-cropper-cutout-border: var(--clr-text-tertiary);
+  --clr-cropper-cutout-shadow: light-dark(rgb(230 246 255 / 66%), rgb(25 10 0 / 66%));
+  --clr-audio-bg: var(--clr-background-extra-light-gray);
+  --clr-audio-icon: light-dark(rgba(102, 117, 117, 0.8), rgba(153, 138, 138, 0.8));
+  --clr-audio-icon-disabled: light-dark(rgba(153  153  153 / 75%), rgba(102 102 102 / 75%));
+  --clr-audio-timer-text: light-dark(rgba(102, 102, 102, 0.75), rgba(153, 153, 153, 0.75));
+  --clr-pinned-menu-bg: light-dark(#f8f8f8, #1a1a1a);
+  --clr-drag-n-drop-border: var(--clr-std-grey);
+  --clr-drag-n-drop-text: var(--clr-std-grey);
+  --clr-drag-n-drop-bg: light-dark(rgba(255,255,255,.95), rgba(0,0,0,.95));
+  --clr-drag-n-drop-outline: light-dark(rgba(255,255,255,.95), rgba(0,0,0,.95));
+
   /* Letter Tiles Base */
   --clr-lettertile-default-text: light-dark(#fafafacc, #dcdcdccc);
   --clr-lettertile-hover-text: var(--clr-bright);
@@ -236,41 +282,6 @@
   --clr-dk-fg-13: var(--clr-dk-bg-13);
   --clr-dk-fg-14: var(--clr-dk-bg-14);
   --clr-dk-fg-15: var(--clr-dk-bg-15);
-
-  /* Chips */
-  --clr-chip-bg: var(--clr-background-extra-light-gray);
-  --clr-chip-invalid-text: var(--clr-error-text-muted);
-  --clr-chip-invalid-bg: var(--clr-badge-red-bg);
-  --clr-chip-remove-icon-bg: light-dark(#aaa, #555);
-  --clr-chip-remove-icon-text: var(--clr-background-extra-light-gray);
-  --clr-chip-remove-icon-hover-bg: var(--clr-text-placeholder);
-  --clr-chip-remove-icon-hover-text: var(--clr-bright);
-
-  /* Miscellaneous UI */
-  --clr-highlight-text: var(--clr-std-teal);
-  --clr-highlight-preview-text: light-dark(#5f9ea0, #205e60);
-  --clr-spinner-track: light-dark(#f3f3f3, #0c0c0c);
-  --clr-spinner-active: var(--clr-primary-action);
-  --clr-cropper-bounding-box-border: var(--clr-primary-action);
-  --clr-cropper-bounding-box-bg: var(--clr-text-tertiary);
-  --clr-cropper-cutout-border: var(--clr-text-tertiary);
-  --clr-cropper-cutout-shadow: light-dark(rgb(230 246 255 / 66%), rgb(25 10 0 / 66%));
-  --clr-audio-bg: var(--clr-background-extra-light-gray);
-  --clr-audio-icon: light-dark(rgba(102, 117, 117, 0.8), rgba(153, 138, 138, 0.8));
-  --clr-audio-icon-disabled: light-dark(rgba(153  153  153 / 75%), rgba(102 102 102 / 75%));
-  --clr-audio-timer-text: light-dark(rgba(102, 102, 102, 0.75), rgba(153, 153, 153, 0.75));
-  --clr-pinned-menu-bg: light-dark(#f8f8f8, #1a1a1a);
-  --clr-drag-n-drop-border: var(--clr-std-grey);
-  --clr-drag-n-drop-text: var(--clr-std-grey);
-  --clr-drag-n-drop-bg: light-dark(rgba(255,255,255,.95), rgba(0,0,0,.95));
-  --clr-drag-n-drop-outline: light-dark(rgba(255,255,255,.95), rgba(0,0,0,.95));
-
-  /* Tabbar */
-  --clr-tabbar-bg: var(--clr-background-extra-light-gray);
-  --clr-tabbar-inactive-text: light-dark(rgba(33,150,243,0.6), rgba(22,90,160,0.6));
-  --clr-tabbar-active-text: var(--clr-primary-accent);
-  --clr-tabbar-inactive-border: var(--clr-border-light);
-  --clr-tabbar-active-border: var(--clr-primary-accent);
 }
 
 * {
@@ -820,7 +831,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%;
@@ -836,12 +847,15 @@ div.trusted-badge {
   z-index: 2;
 }
 
-.action-button:focus, .action-button:hover {
-  color: var(--clr-text-disabled);
+.action-button:focus,
+.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);
 }
 
@@ -1754,30 +1768,47 @@ img.channel {
   align-self: center;
 }
 
+#messages-container {
+  position: relative;
+  overflow-y: hidden;
+  height: 100%;
+}
+
+
+#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))
+    brightness(var(--wallpaper-brightness));
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* Dark mode wallpaper adjustments: image wallpaper *
+#messages-container.dark.wpimg::before {
+  filter: brightness(50%);
+}
+/* Dark mode wallpaper adjustments: pattern wallpaper *
+#messages-container.dark.wppatt::before {
+  filter: invert(1);
+}
+*/
+
 /* Scrollable panel where the messages are shown */
 #messages-panel {
   position: relative;
   padding: 0.75rem;
   overflow-y: scroll;
-  background-color: var(--clr-background-blue-gray-50);
-  height: 100%;
-  background-image: url("../img/bg_messages.png");
-}
-
-/* Explicitly set dark mode */
-#messages-panel[color-scheme="dark"] {
-  background-image: url("../img/bg_messages_dk.png");
-}
-/* Dark mode asigned by the OS */
-@media (prefers-color-scheme: dark) {
-  #messages-panel {
-    background-image: url("../img/bg_messages_dk.png");
-  }
-}
-
-#messages-container {
-  position: relative;
-  overflow-y: hidden;
   height: 100%;
 }
 
@@ -3567,6 +3598,38 @@ ul.phone-country-selector span.country {
   overflow-x: hidden;
 }
 
+.image-grid {
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
+  gap: 0.35rem;
+  padding: 0.25rem;
+}
+
+.image-grid-cell {
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  height: 7rem;
+  overflow: hidden;
+  border-radius: 0.25rem;
+  border: 1.5px solid transparent;
+  cursor: pointer;
+  box-shadow: 0 0 0.2rem var( --clr-shadow-hr-inset); /* gray */
+}
+
+.image-grid-cell img {
+  object-fit: cover;
+}
+
+.image-grid-cell.selected {
+  border: 1.5px solid var(--clr-secondary-accent);
+}
+
+img.inverted {
+  filter: invert(1);
+}
+
 div.toast {
   visibility: hidden;
   display: flex;

img/bkg/index.json

@@ -0,0 +1,18 @@
+{
+  "patt": [
+    {"name": "a00.png", "size": 200}, {"name": "a01.jpg", "size": 384}, {"name": "a02.jpg", "size": 384},
+    {"name": "a03.jpg", "size": 384}, {"name": "a04.png", "size": 400}, {"name": "a05.jpg", "size": 400},
+    {"name": "a06.jpg", "size": 256}, {"name": "a07.jpg", "size": 384}, {"name": "a08.jpg", "size": 384},
+    {"name": "a09.jpg", "size": 400}, {"name": "a10.jpg", "size": 256}, {"name": "a11.png", "size": 200}
+  ],
+  "img": [
+    {"name": "w01.jpg", "pr": "p01.jpg"}, {"name": "w02.jpg", "pr": "p02.jpg"}, {"name": "w03.jpg", "pr": "p03.jpg"},
+    {"name": "w04.jpg", "pr": "p04.jpg"}, {"name": "w05.jpg", "pr": "p05.jpg"}, {"name": "w06.jpg", "pr": "p06.jpg"},
+    {"name": "w07.jpg", "pr": "p07.jpg"}, {"name": "w08.jpg", "pr": "p08.jpg"}, {"name": "w09.jpg", "pr": "p09.jpg"},
+    {"name": "w10.jpg", "pr": "p10.jpg"}, {"name": "w11.jpg", "pr": "p11.jpg"}, {"name": "w12.jpg", "pr": "p12.jpg"},
+    {"name": "w13.jpg", "pr": "p13.jpg"}, {"name": "w14.jpg", "pr": "p14.jpg"}, {"name": "w15.jpg", "pr": "p15.jpg"},
+    {"name": "w16.jpg", "pr": "p16.jpg"}, {"name": "w17.jpg", "pr": "p17.jpg"}, {"name": "w18.jpg", "pr": "p18.jpg"},
+    {"name": "w19.jpg", "pr": "p19.jpg"}, {"name": "w20.jpg", "pr": "p20.jpg"}, {"name": "w21.jpg", "pr": "p21.jpg"},
+    {"name": "w22.jpg", "pr": "p22.jpg"}, {"name": "w23.jpg", "pr": "p23.jpg"}, {"name": "w24.jpg", "pr": "p24.jpg"}
+  ]
+}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tinode-webapp",
   "description": "Tinode messenger for the web",
-  "version": "0.25.0-beta1",
+  "version": "0.25.0-beta2",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tinode/webapp.git"
@@ -75,7 +75,7 @@
     "react": "^18.3.0",
     "react-dom": "^18.3.0",
     "react-intl": "^7.0.0",
-    "tinode-sdk": "^0.25.0-beta1",
+    "tinode-sdk": "^0.24.0-beta1",
     "webm-duration-fix": "^1.0.4"
   },
   "devDependencies": {

src/config.js

@@ -150,10 +150,13 @@ export const SELF_AVATAR_URI = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS
 export const TOAST_DURATION = 3_000;
 
 // Initial/default color scheme.
-export const DEFAULT_COLOR_SCHEME = 'light dark';
+export const DEFAULT_COLOR_SCHEME = 'auto';
 
 // Default text size in points.
 export const DEFAULT_TEXT_SIZE = 10;
 
 // MIME type for the legacy Drafty form-response data.
 export const DRAFTY_FR_MIME_TYPE_LEGACY = 'application/json'; // Remove in 2026.
+
+// Path to wallpaper images.
+export const WALLPAPER_DEFAULTS = {type: 'patt', index: 0, path:'img/bkg/'};

src/i18n/ar.json

@@ -1864,5 +1864,40 @@
     "description": "Count of group topic members",
     "missing": false,
     "obsolete": false
+  },
+  "tabtitle_image": {
+    "translation": "صورة",
+    "defaultMessage": "image",
+    "description": "Tab title Image",
+    "missing": false,
+    "obsolete": false
+  },
+  "tabtitle_pattern": {
+    "translation": "نمط",
+    "defaultMessage": "pattern",
+    "description": "Tab title Pattern",
+    "missing": false,
+    "obsolete": false
+  },
+  "button_restore": {
+    "translation": "استعادة الافتراضي",
+    "defaultMessage": "Restore default",
+    "description": "Reset setting to default",
+    "missing": false,
+    "obsolete": false
+  },
+  "wallpapers": {
+    "translation": "الخلفيات",
+    "defaultMessage": "Wallpapers",
+    "description": "Link or title for working with wallpapers.",
+    "missing": false,
+    "obsolete": false
+  },
+  "label_blur_wallpaper": {
+    "translation": "ضبابية:",
+    "defaultMessage": "Blur:",
+    "description": "Label adjusting blur amount",
+    "missing": false,
+    "obsolete": false
   }
 }

src/i18n/de.json

@@ -1864,5 +1864,40 @@
     "description": "Count of group topic members",
     "missing": false,
     "obsolete": false
+  },
+  "tabtitle_image": {
+    "translation": "Bild",
+    "defaultMessage": "image",
+    "description": "Tab title Image",
+    "missing": false,
+    "obsolete": false
+  },
+  "tabtitle_pattern": {
+    "translation": "Muster",
+    "defaultMessage": "pattern",
+    "description": "Tab title Pattern",
+    "missing": false,
+    "obsolete": false
+  },
+  "button_restore": {
+    "translation": "Standard wiederherstellen",
+    "defaultMessage": "Restore default",
+    "description": "Reset setting to default",
+    "missing": false,
+    "obsolete": false
+  },
+  "wallpapers": {
+    "translation": "Hintergrundbilder",
+    "defaultMessage": "Wallpapers",
+    "description": "Link or title for working with wallpapers.",
+    "missing": false,
+    "obsolete": false
+  },
+  "label_blur_wallpaper": {
+    "translation": "Unschärfe:",
+    "defaultMessage": "Blur:",
+    "description": "Label adjusting blur amount",
+    "missing": false,
+    "obsolete": false
   }
 }

src/i18n/en.json

@@ -1864,5 +1864,40 @@
     "description": "Count of group topic members",
     "missing": false,
     "obsolete": false
+  },
+  "tabtitle_image": {
+    "translation": "image",
+    "defaultMessage": "image",
+    "description": "Tab title Image",
+    "missing": false,
+    "obsolete": false
+  },
+  "tabtitle_pattern": {
+    "translation": "pattern",
+    "defaultMessage": "pattern",
+    "description": "Tab title Pattern",
+    "missing": false,
+    "obsolete": false
+  },
+  "button_restore": {
+    "translation": "Restore default",
+    "defaultMessage": "Restore default",
+    "description": "Reset setting to default",
+    "missing": false,
+    "obsolete": false
+  },
+  "wallpapers": {
+    "translation": "Wallpapers",
+    "defaultMessage": "Wallpapers",
+    "description": "Link or title for working with wallpapers.",
+    "missing": false,
+    "obsolete": false
+  },
+  "label_blur_wallpaper": {
+    "translation": "Blur:",
+    "defaultMessage": "Blur:",
+    "description": "Label adjusting blur amount",
+    "missing": false,
+    "obsolete": false
   }
 }

src/i18n/es.json

@@ -1864,5 +1864,40 @@
     "description": "Count of group topic members",
     "missing": false,
     "obsolete": false
+  },
+  "tabtitle_image": {
+    "translation": "imagen",
+    "defaultMessage": "image",
+    "description": "Tab title Image",
+    "missing": false,
+    "obsolete": false
+  },
+  "tabtitle_pattern": {
+    "translation": "patrón",
+    "defaultMessage": "pattern",
+    "description": "Tab title Pattern",
+    "missing": false,
+    "obsolete": false
+  },
+  "button_restore": {
+    "translation": "Restaurar predeterminado",
+    "defaultMessage": "Restore default",
+    "description": "Reset setting to default",
+    "missing": false,
+    "obsolete": false
+  },
+  "wallpapers": {
+    "translation": "Fondos de pantalla",
+    "defaultMessage": "Wallpapers",
+    "description": "Link or title for working with wallpapers.",
+    "missing": false,
+    "obsolete": false
+  },
+  "label_blur_wallpaper": {
+    "translation": "Desenfoque:",
+    "defaultMessage": "Blur:",
+    "description": "Label adjusting blur amount",
+    "missing": false,
+    "obsolete": false
   }
 }

src/i18n/ex/base-en.json

@@ -107,6 +107,10 @@
     "defaultMessage": "Reset",
     "description": "Button [Reset]"
   },
+  "button_restore": {
+    "defaultMessage": "Restore default",
+    "description": "Reset setting to default"
+  },
   "button_security": {
     "defaultMessage": "Security",
     "description": "Navigaton button for security panel."
@@ -406,6 +410,10 @@
     "defaultMessage": "Alias",
     "description": "Label for editing user or topic alias"
   },
+  "label_blur_wallpaper": {
+    "defaultMessage": "Blur:",
+    "description": "Label adjusting blur amount"
+  },
   "label_client": {
     "defaultMessage": "Client:",
     "description": "Label for a client version"
@@ -980,10 +988,18 @@
     "defaultMessage": "by id",
     "description": "Tab title Find topic by ID"
   },
+  "tabtitle_image": {
+    "defaultMessage": "image",
+    "description": "Tab title Image"
+  },
   "tabtitle_new_group": {
     "defaultMessage": "new group",
     "description": "Tab title New Group"
   },
+  "tabtitle_pattern": {
+    "defaultMessage": "pattern",
+    "description": "Tab title Pattern"
+  },
   "tags_editor_no_tags": {
     "defaultMessage": "Add some tags",
     "description": "Tag editor prompt when no tags are found."
@@ -1063,5 +1079,9 @@
   "user_not_found": {
     "defaultMessage": "Not found",
     "description": "In place of a user's full name when the user is not found."
+  },
+  "wallpapers": {
+    "defaultMessage": "Wallpapers",
+    "description": "Link or title for working with wallpapers."
   }
 }

src/i18n/fr.json

@@ -1864,5 +1864,40 @@
     "description": "Count of group topic members",
     "missing": false,
     "obsolete": false
+  },
+  "tabtitle_image": {
+    "translation": "image",
+    "defaultMessage": "image",
+    "description": "Tab title Image",
+    "missing": false,
+    "obsolete": false
+  },
+  "tabtitle_pattern": {
+    "translation": "motif",
+    "defaultMessage": "pattern",
+    "description": "Tab title Pattern",
+    "missing": false,
+    "obsolete": false
+  },
+  "button_restore": {
+    "translation": "Restaurer par défaut",
+    "defaultMessage": "Restore default",
+    "description": "Reset setting to default",
+    "missing": false,
+    "obsolete": false
+  },
+  "wallpapers": {
+    "translation": "Fonds d'écran",
+    "defaultMessage": "Wallpapers",
+    "description": "Link or title for working with wallpapers.",
+    "missing": false,
+    "obsolete": false
+  },
+  "label_blur_wallpaper": {
+    "translation": "Flou :",
+    "defaultMessage": "Blur:",
+    "description": "Label adjusting blur amount",
+    "missing": false,
+    "obsolete": false
   }
 }

src/i18n/it.json

@@ -1864,5 +1864,40 @@
     "description": "Count of group topic members",
     "missing": false,
     "obsolete": false
+  },
+  "tabtitle_image": {
+    "translation": "immagine",
+    "defaultMessage": "image",
+    "description": "Tab title Image",
+    "missing": false,
+    "obsolete": false
+  },
+  "tabtitle_pattern": {
+    "translation": "motivo",
+    "defaultMessage": "pattern",
+    "description": "Tab title Pattern",
+    "missing": false,
+    "obsolete": false
+  },
+  "button_restore": {
+    "translation": "Ripristina predefinito",
+    "defaultMessage": "Restore default",
+    "description": "Reset setting to default",
+    "missing": false,
+    "obsolete": false
+  },
+  "wallpapers": {
+    "translation": "Sfondi",
+    "defaultMessage": "Wallpapers",
+    "description": "Link or title for working with wallpapers.",
+    "missing": false,
+    "obsolete": false
+  },
+  "label_blur_wallpaper": {
+    "translation": "Sfocatura:",
+    "defaultMessage": "Blur:",
+    "description": "Label adjusting blur amount",
+    "missing": false,
+    "obsolete": false
   }
 }

src/i18n/ko.json

@@ -1864,5 +1864,40 @@
     "description": "Count of group topic members",
     "missing": false,
     "obsolete": false
+  },
+  "tabtitle_image": {
+    "translation": "이미지",
+    "defaultMessage": "image",
+    "description": "Tab title Image",
+    "missing": false,
+    "obsolete": false
+  },
+  "tabtitle_pattern": {
+    "translation": "패턴",
+    "defaultMessage": "pattern",
+    "description": "Tab title Pattern",
+    "missing": false,
+    "obsolete": false
+  },
+  "button_restore": {
+    "translation": "기본값 복원",
+    "defaultMessage": "Restore default",
+    "description": "Reset setting to default",
+    "missing": false,
+    "obsolete": false
+  },
+  "wallpapers": {
+    "translation": "배경화면",
+    "defaultMessage": "Wallpapers",
+    "description": "Link or title for working with wallpapers.",
+    "missing": false,
+    "obsolete": false
+  },
+  "label_blur_wallpaper": {
+    "translation": "흐림:",
+    "defaultMessage": "Blur:",
+    "description": "Label adjusting blur amount",
+    "missing": false,
+    "obsolete": false
   }
 }

src/i18n/ro.json

@@ -1864,5 +1864,40 @@
     "description": "Count of group topic members",
     "missing": false,
     "obsolete": false
+  },
+  "tabtitle_image": {
+    "translation": "imagine",
+    "defaultMessage": "image",
+    "description": "Tab title Image",
+    "missing": false,
+    "obsolete": false
+  },
+  "tabtitle_pattern": {
+    "translation": "model",
+    "defaultMessage": "pattern",
+    "description": "Tab title Pattern",
+    "missing": false,
+    "obsolete": false
+  },
+  "button_restore": {
+    "translation": "Restabilește implicit",
+    "defaultMessage": "Restore default",
+    "description": "Reset setting to default",
+    "missing": false,
+    "obsolete": false
+  },
+  "wallpapers": {
+    "translation": "Imagini de fundal",
+    "defaultMessage": "Wallpapers",
+    "description": "Link or title for working with wallpapers.",
+    "missing": false,
+    "obsolete": false
+  },
+  "label_blur_wallpaper": {
+    "translation": "Estompare:",
+    "defaultMessage": "Blur:",
+    "description": "Label adjusting blur amount",
+    "missing": false,
+    "obsolete": false
   }
 }

src/i18n/ru.json

@@ -1864,5 +1864,40 @@
     "description": "Count of group topic members",
     "missing": false,
     "obsolete": false
+  },
+  "tabtitle_image": {
+    "translation": "картинка",
+    "defaultMessage": "image",
+    "description": "Tab title Image",
+    "missing": false,
+    "obsolete": false
+  },
+  "tabtitle_pattern": {
+    "translation": "узор",
+    "defaultMessage": "pattern",
+    "description": "Tab title Pattern",
+    "missing": false,
+    "obsolete": false
+  },
+  "button_restore": {
+    "translation": "Восстановить по умолчанию",
+    "defaultMessage": "Restore default",
+    "description": "Reset setting to default",
+    "missing": false,
+    "obsolete": false
+  },
+  "wallpapers": {
+    "translation": "Обои",
+    "defaultMessage": "Wallpapers",
+    "description": "Link or title for working with wallpapers.",
+    "missing": false,
+    "obsolete": false
+  },
+  "label_blur_wallpaper": {
+    "translation": "Размытие:",
+    "defaultMessage": "Blur:",
+    "description": "Label adjusting blur amount",
+    "missing": false,
+    "obsolete": false
   }
 }

src/i18n/th.json

@@ -1864,5 +1864,40 @@
     "description": "Count of group topic members",
     "missing": false,
     "obsolete": false
+  },
+  "tabtitle_image": {
+    "translation": "รูปภาพ",
+    "defaultMessage": "image",
+    "description": "Tab title Image",
+    "missing": false,
+    "obsolete": false
+  },
+  "tabtitle_pattern": {
+    "translation": "ลายลวดลาย",
+    "defaultMessage": "pattern",
+    "description": "Tab title Pattern",
+    "missing": false,
+    "obsolete": false
+  },
+  "button_restore": {
+    "translation": "คืนค่าเริ่มต้น",
+    "defaultMessage": "Restore default",
+    "description": "Reset setting to default",
+    "missing": false,
+    "obsolete": false
+  },
+  "wallpapers": {
+    "translation": "วอลเปเปอร์",
+    "defaultMessage": "Wallpapers",
+    "description": "Link or title for working with wallpapers.",
+    "missing": false,
+    "obsolete": false
+  },
+  "label_blur_wallpaper": {
+    "translation": "เบลอ:",
+    "defaultMessage": "Blur:",
+    "description": "Label adjusting blur amount",
+    "missing": false,
+    "obsolete": false
   }
 }

src/i18n/uk.json

@@ -1864,5 +1864,40 @@
     "description": "Count of group topic members",
     "missing": false,
     "obsolete": false
+  },
+  "tabtitle_image": {
+    "translation": "зображення",
+    "defaultMessage": "image",
+    "description": "Tab title Image",
+    "missing": false,
+    "obsolete": false
+  },
+  "tabtitle_pattern": {
+    "translation": "візерунок",
+    "defaultMessage": "pattern",
+    "description": "Tab title Pattern",
+    "missing": false,
+    "obsolete": false
+  },
+  "button_restore": {
+    "translation": "Відновити типові",
+    "defaultMessage": "Restore default",
+    "description": "Reset setting to default",
+    "missing": false,
+    "obsolete": false
+  },
+  "wallpapers": {
+    "translation": "Шпалери",
+    "defaultMessage": "Wallpapers",
+    "description": "Link or title for working with wallpapers.",
+    "missing": false,
+    "obsolete": false
+  },
+  "label_blur_wallpaper": {
+    "translation": "Розмиття:",
+    "defaultMessage": "Blur:",
+    "description": "Label adjusting blur amount",
+    "missing": false,
+    "obsolete": false
   }
 }

src/i18n/zh-TW.json

@@ -1864,5 +1864,40 @@
     "description": "Count of group topic members",
     "missing": false,
     "obsolete": false
+  },
+  "tabtitle_image": {
+    "translation": "圖片",
+    "defaultMessage": "image",
+    "description": "Tab title Image",
+    "missing": false,
+    "obsolete": false
+  },
+  "tabtitle_pattern": {
+    "translation": "圖案",
+    "defaultMessage": "pattern",
+    "description": "Tab title Pattern",
+    "missing": false,
+    "obsolete": false
+  },
+  "button_restore": {
+    "translation": "恢復預設",
+    "defaultMessage": "Restore default",
+    "description": "Reset setting to default",
+    "missing": false,
+    "obsolete": false
+  },
+  "wallpapers": {
+    "translation": "桌布",
+    "defaultMessage": "Wallpapers",
+    "description": "Link or title for working with wallpapers.",
+    "missing": false,
+    "obsolete": false
+  },
+  "label_blur_wallpaper": {
+    "translation": "模糊：",
+    "defaultMessage": "Blur:",
+    "description": "Label adjusting blur amount",
+    "missing": false,
+    "obsolete": false
   }
 }

src/i18n/zh.json

@@ -1864,5 +1864,40 @@
     "description": "Count of group topic members",
     "missing": false,
     "obsolete": false
+  },
+  "tabtitle_image": {
+    "translation": "图片",
+    "defaultMessage": "image",
+    "description": "Tab title Image",
+    "missing": false,
+    "obsolete": false
+  },
+  "tabtitle_pattern": {
+    "translation": "图案",
+    "defaultMessage": "pattern",
+    "description": "Tab title Pattern",
+    "missing": false,
+    "obsolete": false
+  },
+  "button_restore": {
+    "translation": "恢复默认",
+    "defaultMessage": "Restore default",
+    "description": "Reset setting to default",
+    "missing": false,
+    "obsolete": false
+  },
+  "wallpapers": {
+    "translation": "壁纸",
+    "defaultMessage": "Wallpapers",
+    "description": "Link or title for working with wallpapers.",
+    "missing": false,
+    "obsolete": false
+  },
+  "label_blur_wallpaper": {
+    "translation": "模糊：",
+    "defaultMessage": "Blur:",
+    "description": "Label adjusting blur amount",
+    "missing": false,
+    "obsolete": false
   }
 }

src/index.js

@@ -29,6 +29,7 @@ const messageLoader = {
   'en': _ => import('./i18n.min/en.json'),
   'es': _ => import('./i18n.min/es.json'),
   'fr': _ => import('./i18n.min/fr.json'),
+  'it': _ => import('./i18n.min/it.json'),
   'ko': _ => import('./i18n.min/ko.json'),
   'ro': _ => import('./i18n.min/ro.json'),
   'ru': _ => import('./i18n.min/ru.json'),

src/lib/utils.js

@@ -1,6 +1,7 @@
 // Odds and ends
 
 import { Tinode } from 'tinode-sdk';
+import { WALLPAPER_DEFAULTS } from '../config.js';
 
 // Make shortcut icon appear with a green dot + show unread count in title.
 export function updateFavicon(count) {
@@ -248,3 +249,8 @@ export function cancelablePromise(promise) {
   };
 };
 
+export function defaultWallpaper() {
+  const wallpaperIndex = require('../../img/bkg/index.json');
+  const wp = wallpaperIndex[WALLPAPER_DEFAULTS.type][WALLPAPER_DEFAULTS.index];
+  return {name: `../${WALLPAPER_DEFAULTS.path}${wp.name}`, size: wp.size};
+}

src/version.js

@@ -1,3 +1,3 @@
 // This is a generated file. Don't edit.
 
-export const PACKAGE_VERSION = "0.25.0-beta1";
+export const PACKAGE_VERSION = "0.25.0-beta2";

src/views/acc-general-view.jsx

@@ -7,7 +7,7 @@ export default class AccGeneralView extends React.PureComponent {
     super(props);
 
     this.state = {
-      colorSchema: props.colorSchema || 'light dark',
+      colorSchema: props.colorSchema || 'auto',
       textSize: (props.textSize * 10) || '100',
       sendOnEnter: props.sendOnEnter || 'plain',
     };
@@ -39,6 +39,7 @@ export default class AccGeneralView extends React.PureComponent {
   render() {
     return (
         <div id="settings-form" className="scrollable-panel">
+          <div className="panel-form-column">
             <div className="panel-form-row">
               <label className="small">
                 <FormattedMessage id="label_color_schema" defaultMessage="Theme:"
@@ -48,12 +49,12 @@ export default class AccGeneralView extends React.PureComponent {
             <div className="panel-form-row">
               <ul className="quoted">
                 <li key="system">
-                <input type="radio" id="system" name="color-scheme-select" value="light dark"
-                  checked={this.state.colorSchema == 'light dark'}
+                  <input type="radio" id="system" name="color-scheme-select" value="auto"
+                    checked={this.state.colorSchema == 'auto'}
                     onChange={this.handleColorSchemaSelected} />&nbsp;
                   <label htmlFor="system">
                     <FormattedMessage id="color_schema_system" defaultMessage="System default" description="Name of the color schema"/>&nbsp;
-                  <img src="../img/routine.svg" style={{verticalAlign: 'top', width: '1.6rem', height: '1.6rem'}}/>
+                    <img src="img/routine.svg" style={{verticalAlign: 'top', width: '1.6rem', height: '1.6rem'}}/>
                   </label>
                 </li>
                 <li key="light">
@@ -76,14 +77,23 @@ export default class AccGeneralView extends React.PureComponent {
                 </li>
               </ul>
             </div>
+          </div>
           <div className="hr" />
+          <div className="panel-form-row clean-clickable">
+            <a onClick={this.props.onSelectWallpapers} className="flat-button">
+              <i className="material-icons">wallpaper</i>&nbsp;
+              <FormattedMessage id="wallpapers" defaultMessage="Wallpapers"
+                  description="Link or title for working with wallpapers." />
+            </a>
+          </div>
+          <div className="hr" />
+          <div className="panel-form-column">
             <div className="panel-form-row">
               <label className="small">
                 <FormattedMessage id="label_text_size" defaultMessage="Text size:"
                   description="Label adjusting text size" />
               </label>
             </div>
-          <div className="panel-form-column">
             <div className="panel-form-row">
               <input type="range" id="text_size" name="text_size" min="80" max="120" step="10"
                 list="text_size_options" value={this.state.textSize} onChange={this.handleTextSizeChanged} />

src/views/info-view.jsx

@@ -601,8 +601,8 @@ class InfoView extends React.Component {
                   <FormattedMessage id="label_topic_name" defaultMessage="Name"
                     description="Label for editing topic name" />
                 </label></div>
-                <div className="large ellipsized">{this.state.fullName}
-                {this.state.channel ? <img src="/img/channel.png" className="channel" alt="channel" /> : null}</div>
+                <div className="large ellipsized">{this.state.fullName}&nbsp;
+                {this.state.channel ? <i className="material-icons">podcasts</i> : null}</div>
               </div>
               {this.state.private ?
                 <div className="group">