From 33d79beae69c90f8d9bbc7302bb9fc4a7fdb0cda Mon Sep 17 00:00:00 2001
From: brecert <me@bree.dev>
Date: Sat, 11 Sep 2021 11:38:58 -0400
Subject: [PATCH] Improve server identity avatar preview

- server identity avatar preview now displays your current avatar, but desaturated and grayscale when no avatar is set

resolves #218
---
 .../popovers/ServerIdentityModal.tsx          | 10 ++--
 src/context/revoltjs/FileUploads.module.scss  |  4 ++
 src/context/revoltjs/FileUploads.tsx          | 60 ++++++++++---------
 3 files changed, 40 insertions(+), 34 deletions(-)

diff --git a/src/context/intermediate/popovers/ServerIdentityModal.tsx b/src/context/intermediate/popovers/ServerIdentityModal.tsx
index c252697e..a11d87e6 100644
--- a/src/context/intermediate/popovers/ServerIdentityModal.tsx
+++ b/src/context/intermediate/popovers/ServerIdentityModal.tsx
@@ -12,6 +12,7 @@ import Overline from "../../../components/ui/Overline";
 
 import { FileUploader } from "../../revoltjs/FileUploads";
 import { useClient } from "../../revoltjs/RevoltClient";
+import styled, { css } from "styled-components";
 
 interface Props {
     server: Server;
@@ -58,16 +59,15 @@ export const ServerIdentityModal = observer(({ server, onClose }: Props) => {
                         maxFileSize={4_000_000}
                         onUpload={(avatar) => member.edit({ avatar })}
                         remove={() => member.edit({ remove: "Avatar" })}
-                        defaultPreview={client.generateFileURL(
-                            member.avatar ?? undefined,
-                            { max_side: 256 },
-                            true,
-                        )}
+                        defaultPreview={client.user?.generateAvatarURL({
+                            max_side: 256,
+                        }, false)}
                         previewURL={client.generateFileURL(
                             member.avatar ?? undefined,
                             { max_side: 256 },
                             true,
                         )}
+                        desaturateDefault
                     />
                 </div>
                 <div>
diff --git a/src/context/revoltjs/FileUploads.module.scss b/src/context/revoltjs/FileUploads.module.scss
index 0b5592fc..85ef5c6f 100644
--- a/src/context/revoltjs/FileUploads.module.scss
+++ b/src/context/revoltjs/FileUploads.module.scss
@@ -42,6 +42,10 @@
             filter: brightness(0.8);
         }
 
+        &.desaturate {
+            filter: brightness(0.7) sepia(50%) grayscale(90%);
+        }
+
         .edit {
             opacity: 0;
             width: 100%;
diff --git a/src/context/revoltjs/FileUploads.tsx b/src/context/revoltjs/FileUploads.tsx
index c757f8cd..6c7c868b 100644
--- a/src/context/revoltjs/FileUploads.tsx
+++ b/src/context/revoltjs/FileUploads.tsx
@@ -16,35 +16,37 @@ import { useIntermediate } from "../intermediate/Intermediate";
 import { AppContext } from "./RevoltClient";
 import { takeError } from "./util";
 
-type Props = {
-    maxFileSize: number;
-    remove: () => Promise<void>;
-    fileType: "backgrounds" | "icons" | "avatars" | "attachments" | "banners";
-} & (
+type BehaviourType =
     | { behaviour: "ask"; onChange: (file: File) => void }
     | { behaviour: "upload"; onUpload: (id: string) => Promise<void> }
     | {
-          behaviour: "multi";
-          onChange: (files: File[]) => void;
-          append?: (files: File[]) => void;
-      }
-) &
-    (
-        | {
-              style: "icon" | "banner";
-              defaultPreview?: string;
-              previewURL?: string;
-              width?: number;
-              height?: number;
-          }
-        | {
-              style: "attachment";
-              attached: boolean;
-              uploading: boolean;
-              cancel: () => void;
-              size?: number;
-          }
-    );
+        behaviour: "multi";
+        onChange: (files: File[]) => void;
+        append?: (files: File[]) => void;
+    }
+
+type StyleType =
+    | {
+        style: "icon" | "banner";
+        width?: number;
+        height?: number;
+        previewURL?: string;
+        defaultPreview?: string;
+        desaturateDefault?: boolean
+    }
+    | {
+        style: "attachment";
+        attached: boolean;
+        uploading: boolean;
+        cancel: () => void;
+        size?: number;
+    }
+
+type Props = BehaviourType & StyleType & {
+    fileType: "backgrounds" | "icons" | "avatars" | "attachments" | "banners";
+    maxFileSize: number;
+    remove: () => Promise<void>;
+}
 
 export async function uploadFile(
     autumnURL: string,
@@ -224,14 +226,14 @@ export function FileUploader(props: Props) {
                 })}
                 data-uploading={uploading}>
                 <div
-                    className={styles.image}
+                    className={classNames(styles.image, props.desaturateDefault && previewURL == null && styles.desaturate)}
                     style={{
                         backgroundImage:
                             style === "icon"
                                 ? `url('${previewURL ?? defaultPreview}')`
                                 : previewURL
-                                ? `linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('${previewURL}')`
-                                : "black",
+                                    ? `linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('${previewURL}')`
+                                    : "black",
                         width,
                         height,
                     }}