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
/>
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
;
- fileType: "backgrounds" | "icons" | "avatars" | "attachments" | "banners";
-} & (
+type BehaviourType =
| { behaviour: "ask"; onChange: (file: File) => void }
| { behaviour: "upload"; onUpload: (id: string) => Promise }
| {
- 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;
+}
export async function uploadFile(
autumnURL: string,
@@ -224,14 +226,14 @@ export function FileUploader(props: Props) {
})}
data-uploading={uploading}>