fix(settings): small bug fixes

external/lang

@@ -1 +1 @@
-Subproject commit 026f884b54f515d3e47f2dbd410c2386b5fa68a9
+Subproject commit 93ba149e7e4ad45438750d228c97bd320fbb4f6c

src/components/ui/Button.tsx

@@ -21,7 +21,7 @@ export default styled.button<Props>`
     align-items: center;
     justify-content: center;
     padding: 2px 16px;
-    font-size: 0.875rem;
+    font-size: 0.8125rem;
     font-family: inherit;
     font-weight: 500;
     flex-shrink: 0;

src/components/ui/Modal.tsx

@@ -61,29 +61,63 @@ const ModalBase = styled.div`
     }
 `;
 
-const ModalContainer = styled.div`
+const ModalContainer = styled.div<
+    {
+        [key in "userProfile"]?: boolean;
+    }
+>`
     overflow: hidden;
-    max-width: calc(100vw - 20px);
+    padding: 12px;
+    width: 100%;
+    max-width: 440px;
     border-radius: var(--border-radius);
 
     animation-name: ${zoomIn};
     animation-duration: 0.25s;
     animation-timing-function: cubic-bezier(0.3, 0.3, 0.18, 1.1);
+
+    ${(props) =>
+        !props.userProfile &&
+        css`
+            max-width: max-content;
+        `}
 `;
 
 const ModalContent = styled.div<
-    { [key in "attachment" | "noBackground" | "border" | "padding"]?: boolean }
+    {
+        [key in
+            | "attachment"
+            | "noBackground"
+            | "border"
+            | "padding"
+            | "userProfile"]?: boolean;
+    }
 >`
     text-overflow: ellipsis;
     border-radius: var(--border-radius);
 
+    .title {
+        font-size: 14px;
+        text-decoration: underline;
+    }
+
     h3 {
+        font-size: 14px;
+        text-transform: uppercase;
+
         margin-top: 0;
     }
 
     form {
         display: flex;
         flex-direction: column;
+        gap: 8px;
+
+        > div {
+            margin: 0;
+            color: var(--secondary-foreground);
+            font-size: 12px;
+        }
     }
 
     ${(props) =>
@@ -95,7 +129,7 @@ const ModalContent = styled.div<
     ${(props) =>
         props.padding &&
         css`
-            padding: 1.5em;
+            padding: 1rem;
         `}
 
     ${(props) =>
@@ -117,7 +151,7 @@ const ModalActions = styled.div`
     display: flex;
     flex-direction: row-reverse;
 
-    padding: 1em 1.5em;
+    padding: 1rem;
     background: var(--secondary-background);
     border-radius: 0 0 var(--border-radius) var(--border-radius);
 `;
@@ -131,6 +165,7 @@ interface Props {
     children?: Children;
     title?: Children;
 
+    userProfile?: boolean;
     disallowClosing?: boolean;
     noBackground?: boolean;
     dontModal?: boolean;
@@ -152,6 +187,7 @@ export default function Modal(props: Props) {
         <ModalContent
             attachment={!!props.actions}
             noBackground={props.noBackground}
+            userProfile={props.userProfile}
             border={props.border}
             padding={props.padding ?? !props.dontModal}>
             {props.title && <h3>{props.title}</h3>}
@@ -209,7 +245,9 @@ export default function Modal(props: Props) {
         <ModalBase
             className={animateClose ? "closing" : undefined}
             onClick={(!props.disallowClosing && props.onClose) || undefined}>
-            <ModalContainer onClick={(e) => (e.cancelBubble = true)}>
+            <ModalContainer
+                onClick={(e) => (e.cancelBubble = true)}
+                userProfile={false}>
                 {content}
                 {props.actions && (
                     <ModalActions>

src/components/ui/fluent/CategoryButton.tsx

@@ -146,7 +146,6 @@ export default function CategoryButton({
             {icon}
             <div class="content">
                 <div className="title">{children}</div>
-
                 <div className="description">{description}</div>
             </div>
             <div class="action">

src/context/revoltjs/FileUploads.module.scss

@@ -72,6 +72,7 @@
 
         .small {
             display: flex;
+            align-items: center;
             font-size: 10px;
             flex-direction: column;
             color: var(--tertiary-foreground);

src/context/revoltjs/FileUploads.tsx

@@ -20,33 +20,39 @@ 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;
-    }
+          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: "icon" | "banner";
+          width?: number;
+          height?: number;
+          previewURL?: string;
+          defaultPreview?: string;
+          desaturateDefault?: boolean;
+      }
     | {
-        style: "attachment";
-        attached: boolean;
-        uploading: boolean;
-        cancel: () => void;
-        size?: number;
-    }
+          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>;
-}
+type Props = BehaviourType &
+    StyleType & {
+        fileType:
+            | "backgrounds"
+            | "icons"
+            | "avatars"
+            | "attachments"
+            | "banners";
+        maxFileSize: number;
+        remove: () => Promise<void>;
+    };
 
 export async function uploadFile(
     autumnURL: string,
@@ -226,14 +232,19 @@ export function FileUploader(props: Props) {
                 })}
                 data-uploading={uploading}>
                 <div
-                    className={classNames(styles.image, props.desaturateDefault && previewURL == null && styles.desaturate)}
+                    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}')`
-                                    : "none",
+                                ? `linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('${previewURL}')`
+                                : "none",
                         width,
                         height,
                     }}

src/pages/settings/Settings.tsx

@@ -56,12 +56,13 @@ import { Sync } from "./panes/Sync";
 import { ThemeShop } from "./panes/ThemeShop";
 
 const IndexHeader = styled.div`
-    display: flex;
+    /*display: flex;*/
     background: var(--secondary-background);
     border-radius: var(--border-radius);
     padding: 20px;
     align-items: center;
     gap: 10px;
+    display: none;
 `;
 
 export default function Settings() {

src/pages/settings/panes/Sessions.tsx

@@ -232,7 +232,7 @@ export function Sessions() {
                 }}>
                 <Text id="app.settings.pages.sessions.logout" />
             </Button>*/}
-
+            <hr />
             <CategoryButton
                 onClick={async () => {
                     // ! FIXME: add to rAuth

src/pages/settings/server/Panes.module.scss

@@ -49,6 +49,7 @@
         display: flex;
         align-items: center;
         flex-direction: row;
+        border-radius: var(--border-radius);
         background: var(--secondary-background);
 
         span,
@@ -76,6 +77,9 @@
         }
     }
 
+    .invite {
+    }
+
     .member {
         cursor: pointer;
 
@@ -95,12 +99,18 @@
 
     .virtual {
         flex-grow: 1;
+        > div > div > div {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+            flex-grow: 1;
+        }
     }
 }
 
 .roles {
     gap: 12px;
-    height: 100%;
+    height: auto;
     display: flex;
 
     .list {