feat: swap pomelo usernames for discriminators

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

@@ -694,3 +694,23 @@
 section {
     margin-bottom: 20px;
 }
+
+.titleNew {
+    display: flex;
+    margin: 15px 0;
+    gap: 8px;
+    align-items: center;
+
+    font-size: 0.8125rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    color: var(--secondary-foreground);
+
+    .new {
+        font-size: 10px;
+        background: red;
+        padding: 3px 5px;
+        border-radius: 20px;
+        color: white;
+    }
+}

src/pages/settings/panes/Profile.tsx

@@ -3,11 +3,13 @@ import { observer } from "mobx-react-lite";
 import { useHistory } from "react-router-dom";
 import { API } from "revolt.js";
 
+import { UserCircle } from "@styled-icons/boxicons-solid";
+
 import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
 import { useCallback, useContext, useEffect, useState } from "preact/hooks";
 
-import { Button, LineDivider, Tip } from "@revoltchat/ui";
+import { Button, LineDivider, Tip, CategoryButton } from "@revoltchat/ui";
 
 import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
 import { useTranslation } from "../../../lib/i18n";
@@ -77,6 +79,16 @@ export const Profile = observer(() => {
                     {...({} as any)}
                 />
             </div>
+            <div className={styles.titleNew}>
+                Display Name
+                <div className={styles.new}>NEW</div>
+            </div>
+            <CategoryButton
+                icon={<UserCircle size={24} />}
+                action="chevron"
+                description={"Change your display name to whatever you like"}>
+                Display Name
+            </CategoryButton>
             {/*<h3>Badges</h3>
             <div className={styles.badgePicker}>
                 <div className={styles.overlay} />