Merge pull request #223 from brecert/identity-fix

Improve server identity avatar preview

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(
+                        defaultPreview={client.user?.generateAvatarURL({
-                            member.avatar ?? undefined,
+                            max_side: 256,
-                            { max_side: 256 },
+                        }, false)}
-                            true,
-                        )}
                         previewURL={client.generateFileURL(
                             member.avatar ?? undefined,
                             { max_side: 256 },
                             true,
                         )}
+                        desaturateDefault
                     />
                 </div>
                 <div>

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%;

src/context/revoltjs/FileUploads.tsx

@@ -16,35 +16,37 @@ import { useIntermediate } from "../intermediate/Intermediate";
 import { AppContext } from "./RevoltClient";
 import { takeError } from "./util";
 
-type Props = {
+type BehaviourType =
-    maxFileSize: number;
-    remove: () => Promise<void>;
-    fileType: "backgrounds" | "icons" | "avatars" | "attachments" | "banners";
-} & (
     | { behaviour: "ask"; onChange: (file: File) => void }
     | { behaviour: "upload"; onUpload: (id: string) => Promise<void> }
     | {
-          behaviour: "multi";
+        behaviour: "multi";
-          onChange: (files: File[]) => void;
+        onChange: (files: File[]) => void;
-          append?: (files: File[]) => void;
+        append?: (files: File[]) => void;
-      }
+    }
-) &
+
-    (
+type StyleType =
-        | {
+    | {
-              style: "icon" | "banner";
+        style: "icon" | "banner";
-              defaultPreview?: string;
+        width?: number;
-              previewURL?: string;
+        height?: number;
-              width?: number;
+        previewURL?: string;
-              height?: number;
+        defaultPreview?: string;
-          }
+        desaturateDefault?: boolean
-        | {
+    }
-              style: "attachment";
+    | {
-              attached: boolean;
+        style: "attachment";
-              uploading: boolean;
+        attached: boolean;
-              cancel: () => void;
+        uploading: boolean;
-              size?: number;
+        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}')`
+                                    ? `linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('${previewURL}')`
-                                : "black",
+                                    : "black",
                         width,
                         height,
                     }}