fun UI for profile background

src/components/settings_modal/tabs/appearance_tab.js

@@ -236,6 +236,10 @@ const AppearanceTab = {
     noIntersectionObserver () {
       return !window.IntersectionObserver
     },
+    instanceWallpaper () {
+      console.log(this.$store.state.instance.background)
+      this.$store.state.instance.background
+    },
     instanceWallpaperUsed () {
       return this.$store.state.instance.background &&
         !this.$store.state.users.currentUser.background_image
@@ -411,6 +415,9 @@ const AppearanceTab = {
         this.submitBackground('')
       }
     },
+    resetUploadedBackground () {
+      this.backgroundPreview = null
+    },
     submitBackground (background) {
       if (!this.backgroundPreview && background !== '') { return }
 

src/components/settings_modal/tabs/appearance_tab.scss

@@ -18,7 +18,31 @@
     height: auto;
   }
 
+  .banner-background {
+    display: flex;
+    gap: 1em;
+    flex-wrap: wrap;
+
+    h4 {
+      margin: 0;
+    }
+  }
+
+  .banner-background-input {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5em;
+
+    .custom-bg-control {
+      display: grid;
+      gap: 0.5em;
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+
   .banner-background-preview {
+    display: flex;
     max-width: 100%;
     width: 300px;
     position: relative;
@@ -26,32 +50,85 @@
     img {
       width: 100%;
     }
+
+    .fun-monitor {
+      position: relative;
+      pointer-events: none;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      * {
+        line-height: 1;
       }
 
-  .reset-button {
+      &-display-bezel,
+      &-display-screen {
+        aspect-ratio: 16 / 9;
+        width: 16em;
+      }
+         
+      img {
+        object-fit: cover;
+      }
+
+      .wallpaper {
         position: absolute;
-    top: 0.2em;
+        inset: 0;
-    right: 0.2em;
+        background-color: var(--wallpaper);
-    border-radius: var(--roundness);
+      }
+
+      &-display-uploading {
+        position: absolute;
+        inset: 0;
+        z-index: 1;
+        display: flex;
+        place-items: center;
+        place-content: center;
         background-color: rgb(0 0 0 / 60%);
-    opacity: 0.7;
+        font-size: 4em;
-    width: 1.5em;
-    height: 1.5em;
-    text-align: center;
-    line-height: 1.5em;
-    font-size: 1.5em;
-    cursor: pointer;
-
-    &:hover {
-      opacity: 1;
       }
 
-    svg {
+      &-display-screen {
-      color: white;
+        padding: 0;
+        overflow: hidden;
+        position: relative;
+
+        &-overlay {
+          background: transparent;
+          position: absolute;
+          inset: 0;
+          z-index: 2;
+        }
+
+        &-image {
+          aspect-ratio: 16 / 9
         }
       }
 
+      &-display-bezel {
+        padding: 1em;
+        margin: 0;
+        order: 1;
+        z-index: 3;
+      }
 
+      &-neck {
+        width: 5em;
+        height: 3em;
+        margin-top: -1em;
+        margin-bottom: -0.5em;
+        order: 2
+      }
+
+      &-stand {
+        width: 8em;
+        height: 1em;
+        order: 3;
+        z-index: 1
+      }
+    }
+  }
 
   .palettes-container {
     height: 15em;

src/components/settings_modal/tabs/appearance_tab.vue

@@ -154,46 +154,67 @@
         </div>
       </div>
       <h3>{{ $t('settings.background') }}</h3>
+      <div class="banner-background">
         <div class="banner-background-preview">
-        <img :src="user.background_image">
+          <div class="fun-monitor">
-        <button
+            <div class="fun-monitor-stand button-default" />
-          v-if="!isDefaultBackground"
+            <div class="fun-monitor-neck button-default" />
-          class="button-unstyled reset-button"
+            <div class="fun-monitor-display-bezel button-default">
-          :title="$t('settings.reset_profile_background')"
+              <div class="fun-monitor-display-screen input">
-          @click="resetBackground"
+              <img
+                v-if="backgroundPreview || user.background_image || instanceWallpaper"
+                class="fun-monitor-display-screen-image"
+                :src="backgroundPreview || user.background_image || instanceWallpaper"
+              />
+              <div v-else class="wallpaper" />
+              <div class="fun-monitor-display-screen-overlay input" />
+                <div
+                  v-if="backgroundUploading"
+                  class="fun-monitor-display-uploading"
                 >
                   <FAIcon
-            icon="times"
+                    class="fun-monitor-display-screen-uploading"
-            type="button"
+                    spin
+                    icon="circle-notch"
                   />
-        </button>
                 </div>
-      <p>{{ $t('settings.set_new_background') }}</p>
+              </div>
-      <img
+            </div>
-        v-if="backgroundPreview"
+          </div>
-        class="banner-background-preview"
+        </div>
-        :src="backgroundPreview"
+        <div class="banner-background-input">
-      >
+          <h4>{{ $t('settings.set_new_background') }}</h4>
-      <div>
           <input
             type="file"
             class="input"
             @change="uploadFile('background', $event)"
           >
-      </div>
+          <div class="custom-bg-control">
-      <FAIcon
-        v-if="backgroundUploading"
-        class="uploading"
-        spin
-        icon="circle-notch"
-      />
             <button
-        v-else-if="backgroundPreview"
+              :disabled="!backgroundPreview"
               class="btn button-default"
               @click="submitBackground(background)"
             >
               {{ $t('settings.save') }}
             </button>
+            <button
+              :disabled="!backgroundPreview"
+              class="btn button-default"
+              @click="resetUploadedBackground"
+            >
+              {{ $t('settings.reset') }}
+            </button>
+          </div>
+          <button
+            v-if="!isDefaultBackground"
+            class="btn button-default reset-button"
+            :title="$t('settings.reset_profile_background')"
+            @click="resetBackground"
+          >
+            {{ $t('settings.reset_profile_background') }}
+          </button>
+        </div>
+      </div>
       <h3>{{ $t('settings.visual_tweaks') }}</h3>
       <div class="alert neutral theme-notice">
         {{ $t("settings.style.visual_tweaks_section_note") }}