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,11 +16,7 @@ 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> }
     | {
@@ -28,14 +24,15 @@ type Props = {
         onChange: (files: File[]) => void;
         append?: (files: File[]) => void;
     }
-) &
+
-    (
+type StyleType =
     | {
         style: "icon" | "banner";
-              defaultPreview?: string;
-              previewURL?: string;
         width?: number;
         height?: number;
+        previewURL?: string;
+        defaultPreview?: string;
+        desaturateDefault?: boolean
     }
     | {
         style: "attachment";
@@ -44,7 +41,12 @@ type Props = {
         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,7 +226,7 @@ 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"