From c1977567677385bef3f27ba0f8d20e13e07cd9e9 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 16 Dec 2020 18:25:07 +0200
Subject: [PATCH 1/4] Basic no-wallpaper support

---
 src/App.js                                      | 17 ++++++++++-------
 src/App.scss                                    |  4 +++-
 src/App.vue                                     |  3 +--
 src/components/desktop_nav/desktop_nav.scss     |  4 ++++
 .../settings_modal/tabs/general_tab.js          |  4 ++++
 .../settings_modal/tabs/general_tab.vue         |  5 +++++
 .../tabs/theme_tab/theme_tab.scss               |  3 ++-
 src/i18n/en.json                                |  1 +
 src/modules/config.js                           |  1 +
 src/services/theme_data/pleromafe.js            |  4 ++++
 static/themes/redmond-xx-se.json                |  1 +
 static/themes/redmond-xx.json                   |  1 +
 static/themes/redmond-xxi.json                  |  1 +
 13 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/src/App.js b/src/App.js
index 5270031915..c79184abe7 100644
--- a/src/App.js
+++ b/src/App.js
@@ -54,13 +54,16 @@ export default {
       return this.currentUser.background_image || this.$store.state.instance.background
     },
     bgStyle () {
-      return {
-        'background-image': `url(${this.background})`
-      }
-    },
-    bgAppStyle () {
-      return {
-        '--body-background-image': `url(${this.background})`
+      if (
+        this.currentUser.background_image ||
+          (
+            this.$store.state.instance.background &&
+              !this.$store.getters.mergedConfig.hideInstanceWallpaper
+          )
+      ) {
+        return {
+          '--body-background-image': `url(${this.background})`
+        }
       }
     },
     chat () { return this.$store.state.chat.channel.state === 'joined' },
diff --git a/src/App.scss b/src/App.scss
index cdc3209c91..394d643416 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -14,7 +14,9 @@
   right: -20px;
   background-size: cover;
   background-repeat: no-repeat;
-  background-position: 0 50%;
+  background-color: var(--wallpaper);
+  background-image: var(--body-background-image);
+  background-position: 50% 50px;
 }
 
 i[class^='icon-'] {
diff --git a/src/App.vue b/src/App.vue
index b4eb052467..1a1667788d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,12 +1,11 @@
 <template>
   <div
     id="app"
-    :style="bgAppStyle"
+    :style="bgStyle"
   >
     <div
       id="app_bg_wrapper"
       class="app-bg-wrapper"
-      :style="bgStyle"
     />
     <MobileNav v-if="isMobileLayout" />
     <DesktopNav v-else />
diff --git a/src/components/desktop_nav/desktop_nav.scss b/src/components/desktop_nav/desktop_nav.scss
index 8fd8e6202e..2d46858854 100644
--- a/src/components/desktop_nav/desktop_nav.scss
+++ b/src/components/desktop_nav/desktop_nav.scss
@@ -5,6 +5,10 @@
   width: 100%;
   position: fixed;
 
+  a {
+    color: var(--topBarLink, $fallback--link);
+  }
+
   .inner-nav {
     display: grid;
     grid-template-rows: 50px;
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index df592a1094..029ee7a1cc 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -34,6 +34,10 @@ const GeneralTab = {
       return this.$store.state.instance.postFormats || []
     },
     instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel },
+    instanceWallpaperUsed () {
+      return this.$store.state.instance.background &&
+        !this.$store.state.users.currentUser.background_image
+    },
     ...SharedComputedObject()
   }
 }
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index c1d0d0ecb8..a9081793bd 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -11,6 +11,11 @@
             {{ $t('settings.hide_isp') }}
           </Checkbox>
         </li>
+        <li v-if="instanceWallpaperUsed">
+          <Checkbox v-model="hideInstanceWallpaper">
+            {{ $t('settings.hide_wallpaper') }}
+          </Checkbox>
+        </li>
       </ul>
     </div>
     <div class="setting-item">
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
index 926eceff57..1b7d9f3152 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
@@ -165,7 +165,8 @@
     border-color: var(--border, $fallback--border);
     margin: 1em 0;
     padding: 1em;
-    background: var(--body-background-image);
+    background-color: var(--wallpaper);
+    background-image: var(--body-background-image);
     background-size: cover;
     background-position: 50% 50%;
 
diff --git a/src/i18n/en.json b/src/i18n/en.json
index ef23efd60c..7c8bfec250 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -328,6 +328,7 @@
     "hide_muted_posts": "Hide posts of muted users",
     "max_thumbnails": "Maximum amount of thumbnails per post",
     "hide_isp": "Hide instance-specific panel",
+    "hide_wallpaper": "Hide instance wallpaper",
     "preload_images": "Preload images",
     "use_one_click_nsfw": "Open NSFW attachments with just one click",
     "hide_post_stats": "Hide post statistics (e.g. the number of favorites)",
diff --git a/src/modules/config.js b/src/modules/config.js
index 444b8ec7c3..cd088737cb 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -20,6 +20,7 @@ export const defaultState = {
   customTheme: undefined,
   customThemeSource: undefined,
   hideISP: false,
+  hideInstanceWallpaper: false,
   // bad name: actually hides posts of muted USERS
   hideMutedPosts: undefined, // instance default
   collapseMessageWithSubject: undefined, // instance default
diff --git a/src/services/theme_data/pleromafe.js b/src/services/theme_data/pleromafe.js
index 7ed8579757..bec1eebdfc 100644
--- a/src/services/theme_data/pleromafe.js
+++ b/src/services/theme_data/pleromafe.js
@@ -84,6 +84,10 @@ export const SLOT_INHERITANCE = {
     opacity: 'bg',
     priority: 1
   },
+  wallpaper: {
+    depends: ['bg'],
+    color: (mod, bg) => brightness(-2 * mod, bg).rgb
+  },
   fg: {
     depends: [],
     priority: 1
diff --git a/static/themes/redmond-xx-se.json b/static/themes/redmond-xx-se.json
index 24480d2c7b..b62769dbc7 100644
--- a/static/themes/redmond-xx-se.json
+++ b/static/themes/redmond-xx-se.json
@@ -267,6 +267,7 @@
     },
     "colors": {
       "bg": "#c0c0c0",
+      "wallpaper": "#008080",
       "text": "#000000",
       "link": "#0000ff",
       "accent": "#000080",
diff --git a/static/themes/redmond-xx.json b/static/themes/redmond-xx.json
index cf9010fe20..83b591091d 100644
--- a/static/themes/redmond-xx.json
+++ b/static/themes/redmond-xx.json
@@ -258,6 +258,7 @@
     },
     "colors": {
       "bg": "#c0c0c0",
+      "wallpaper": "#008080",
       "text": "#000000",
       "link": "#0000ff",
       "accent": "#000080",
diff --git a/static/themes/redmond-xxi.json b/static/themes/redmond-xxi.json
index 7fdc4a6d65..60ceae7c2c 100644
--- a/static/themes/redmond-xxi.json
+++ b/static/themes/redmond-xxi.json
@@ -240,6 +240,7 @@
     },
     "colors": {
       "bg": "#d6d6ce",
+      "wallpaper": "#396ba5",
       "text": "#000000",
       "link": "#0000ff",
       "accent": "#0a246a",

From 5cb41c7175bd8030f55aee5965d8420929fb9855 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 16 Dec 2020 18:28:10 +0200
Subject: [PATCH 2/4] theme ui

---
 .../settings_modal/tabs/theme_tab/theme_tab.vue          | 9 +++++++++
 src/i18n/en.json                                         | 1 +
 2 files changed, 10 insertions(+)

diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
index 4ab793d66c..b8add42f48 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
@@ -616,6 +616,15 @@
               :disabled="underlayOpacityLocal === 'transparent'"
             />
           </div>
+          <div class="color-item">
+            <h4>{{ $t('settings.style.advanced_colors.wallpaper') }}</h4>
+            <ColorInput
+              v-model="wallpaperColorLocal"
+              name="wallpaper"
+              :label="$t('settings.style.advanced_colors.wallpaper')"
+              :fallback="previewTheme.colors.wallpaper"
+            />
+          </div>
           <div class="color-item">
             <h4>{{ $t('settings.style.advanced_colors.poll') }}</h4>
             <ColorInput
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 7c8bfec250..d1de8f3491 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -516,6 +516,7 @@
         "inputs": "Input fields",
         "faint_text": "Faded text",
         "underlay": "Underlay",
+        "wallpaper": "Wallpaper",
         "poll": "Poll graph",
         "icons": "Icons",
         "highlight": "Highlighted elements",

From 81bac9f8ac094df9a71a9c4f4427f11655362537 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 16 Dec 2020 18:33:54 +0200
Subject: [PATCH 3/4] change your log

---
 CHANGELOG.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index dd4a28360f..d627a14680 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Mouseover titles for emojis in reaction picker
 - Support to input emoji into the search box in reaction picker
 - Added some missing unicode emoji
+- Support for solid color wallpaper, instance doesn't have to define a wallpaper anymore
 
 ### Fixed
 - Fixed the occasional bug where screen would scroll 1px when typing into a reply form
@@ -18,10 +19,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Fixed pinned statuses not appearing in user profiles
 - Fixed some elements not being keyboard navigation friendly
 - Fixed your latest chat messages disappearing when closing chat view and opening it again during the same session
+- Fixed link color not applied to instance name in topbar
 
 ### Changed
 - Errors when fetching are now shown with popup errors instead of "Error fetching updates" in panel headers
 - Made reply/fav/repeat etc buttons easier to hit
+- Wallpaper is now top-aligned, horizontally centered.
 
 
 ## [2.2.1] - 2020-11-11

From 93af7ee36a6956d4ec3d0ffd57ec733ddc7cd4e9 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 18 Dec 2020 01:01:58 +0200
Subject: [PATCH 4/4] simplified code, review

---
 src/App.js | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/App.js b/src/App.js
index c79184abe7..1ca029b69a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -15,6 +15,7 @@ import UserReportingModal from './components/user_reporting_modal/user_reporting
 import PostStatusModal from './components/post_status_modal/post_status_modal.vue'
 import GlobalNoticeList from './components/global_notice_list/global_notice_list.vue'
 import { windowWidth, windowHeight } from './services/window_utils/window_utils'
+import { mapGetters } from 'vuex'
 
 export default {
   name: 'app',
@@ -50,17 +51,15 @@ export default {
   },
   computed: {
     currentUser () { return this.$store.state.users.currentUser },
-    background () {
-      return this.currentUser.background_image || this.$store.state.instance.background
+    userBackground () { return this.currentUser.background_image },
+    instanceBackground () {
+      return this.mergedConfig.hideInstanceWallpaper
+        ? null
+        : this.$store.state.instance.background
     },
+    background () { return this.userBackground || this.instanceBackground },
     bgStyle () {
-      if (
-        this.currentUser.background_image ||
-          (
-            this.$store.state.instance.background &&
-              !this.$store.getters.mergedConfig.hideInstanceWallpaper
-          )
-      ) {
+      if (this.background) {
         return {
           '--body-background-image': `url(${this.background})`
         }
@@ -80,7 +79,8 @@ export default {
       return {
         'order': this.$store.state.instance.sidebarRight ? 99 : 0
       }
-    }
+    },
+    ...mapGetters(['mergedConfig'])
   },
   methods: {
     updateMobileState () {