From 11f8d081ba63342126dfbef8a3362c4139e10a5e Mon Sep 17 00:00:00 2001
From: Snazzah <7025343+Snazzah@users.noreply.github.com>
Date: Fri, 3 Sep 2021 17:32:50 +0000
Subject: [PATCH 1/2] Revamp Server Identity Popover

---
 .../popovers/ServerIdentityModal.module.scss  |  17 +++
 .../popovers/ServerIdentityModal.tsx          | 101 ++++++++++--------
 2 files changed, 76 insertions(+), 42 deletions(-)
 create mode 100644 src/context/intermediate/popovers/ServerIdentityModal.module.scss

diff --git a/src/context/intermediate/popovers/ServerIdentityModal.module.scss b/src/context/intermediate/popovers/ServerIdentityModal.module.scss
new file mode 100644
index 00000000..f88aed03
--- /dev/null
+++ b/src/context/intermediate/popovers/ServerIdentityModal.module.scss
@@ -0,0 +1,17 @@
+.identityMain {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+
+  > div {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .buttons {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+  }
+}
diff --git a/src/context/intermediate/popovers/ServerIdentityModal.tsx b/src/context/intermediate/popovers/ServerIdentityModal.tsx
index 3ef55266..6150389b 100644
--- a/src/context/intermediate/popovers/ServerIdentityModal.tsx
+++ b/src/context/intermediate/popovers/ServerIdentityModal.tsx
@@ -1,13 +1,13 @@
 import { observer } from "mobx-react-lite";
 import { Server } from "revolt.js/dist/maps/Servers";
 
+import styles from "./ServerIdentityModal.module.scss";
 import { useEffect, useState } from "preact/hooks";
 
 import Button from "../../../components/ui/Button";
 import InputBox from "../../../components/ui/InputBox";
 import Modal from "../../../components/ui/Modal";
 import Overline from "../../../components/ui/Overline";
-import Tip from "../../../components/ui/Tip";
 
 import { FileUploader } from "../../revoltjs/FileUploads";
 import { useClient } from "../../revoltjs/RevoltClient";
@@ -27,49 +27,66 @@ export const ServerIdentityModal = observer(({ server, onClose }: Props) => {
     if (!member) return null;
 
     const [nickname, setNickname] = useState("");
-    useEffect(() => setNickname(member.nickname ?? ""), [member.nickname]);
+    const [currentNickname, setCurrentNickname] = useState("");
+    useEffect(() => {
+        setNickname(member.nickname ?? "");
+        setCurrentNickname(member.nickname ?? "");
+    }, [member.nickname]);
 
     return (
-        <Modal visible={true} onClose={onClose}>
-            <Tip warning hideSeparator>
-                This section is under construction.
-            </Tip>
-            <Overline type="subtle">Nickname</Overline>
-            <p>
-                <InputBox
-                    value={nickname}
-                    onChange={(e) => setNickname(e.currentTarget.value)}
-                />
-            </p>
-            <p>
-                <Button onClick={() => member.edit({ nickname })}>Save</Button>
-            </p>
-            <p>
-                <Button onClick={() => member.edit({ remove: "Nickname" })}>
-                    Remove
-                </Button>
-            </p>
-            <Overline type="subtle">Avatar</Overline>
-            <FileUploader
-                width={80}
-                height={80}
-                style="icon"
-                fileType="avatars"
-                behaviour="upload"
-                maxFileSize={4_000_000}
-                onUpload={(avatar) => member.edit({ avatar })}
-                remove={() => member.edit({ remove: "Avatar" })}
-                defaultPreview={client.generateFileURL(
-                    member.avatar ?? undefined,
-                    { max_side: 256 },
-                    true,
-                )}
-                previewURL={client.generateFileURL(
-                    member.avatar ?? undefined,
-                    { max_side: 256 },
-                    true,
-                )}
-            />
+        <Modal
+            visible={true}
+            title={`Change Identity on ${server.name}`}
+            onClose={onClose}>
+            <div className={styles.identityMain}>
+                <div>
+                    <Overline type="subtle">Avatar</Overline>
+                    <FileUploader
+                        width={80}
+                        height={80}
+                        style="icon"
+                        fileType="avatars"
+                        behaviour="upload"
+                        maxFileSize={4_000_000}
+                        onUpload={(avatar) => member.edit({ avatar })}
+                        remove={() => member.edit({ remove: "Avatar" })}
+                        defaultPreview={client.generateFileURL(
+                            member.avatar ?? undefined,
+                            { max_side: 256 },
+                            true,
+                        )}
+                        previewURL={client.generateFileURL(
+                            member.avatar ?? undefined,
+                            { max_side: 256 },
+                            true,
+                        )}
+                    />
+                </div>
+                <div>
+                    <Overline type="subtle">Nickname</Overline>
+                    <InputBox
+                        value={nickname}
+                        placeholder={client.user!.username}
+                        onChange={(e) => setNickname(e.currentTarget.value)}
+                    />
+                    <div className={styles.buttons}>
+                        <Button
+                            disabled={nickname === currentNickname}
+                            onClick={() => member.edit({ nickname })}>
+                            Save
+                        </Button>
+                        {currentNickname !== "" && (
+                            <Button
+                                plain
+                                onClick={() =>
+                                    member.edit({ remove: "Nickname" })
+                                }>
+                                Remove
+                            </Button>
+                        )}
+                    </div>
+                </div>
+            </div>
         </Modal>
     );
 });

From b0407490a8a797848935c12ff616c98238dee410 Mon Sep 17 00:00:00 2001
From: Snazzah <7025343+Snazzah@users.noreply.github.com>
Date: Fri, 3 Sep 2021 17:45:10 +0000
Subject: [PATCH 2/2] Add translate strings to server identity

---
 .../popovers/ServerIdentityModal.tsx          | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/context/intermediate/popovers/ServerIdentityModal.tsx b/src/context/intermediate/popovers/ServerIdentityModal.tsx
index 6150389b..c252697e 100644
--- a/src/context/intermediate/popovers/ServerIdentityModal.tsx
+++ b/src/context/intermediate/popovers/ServerIdentityModal.tsx
@@ -2,6 +2,7 @@ import { observer } from "mobx-react-lite";
 import { Server } from "revolt.js/dist/maps/Servers";
 
 import styles from "./ServerIdentityModal.module.scss";
+import { Text } from "preact-i18n";
 import { useEffect, useState } from "preact/hooks";
 
 import Button from "../../../components/ui/Button";
@@ -36,11 +37,18 @@ export const ServerIdentityModal = observer(({ server, onClose }: Props) => {
     return (
         <Modal
             visible={true}
-            title={`Change Identity on ${server.name}`}
+            title={
+                <Text
+                    id={"app.special.popovers.server_identity.title"}
+                    fields={{ server: server.name }}
+                />
+            }
             onClose={onClose}>
             <div className={styles.identityMain}>
                 <div>
-                    <Overline type="subtle">Avatar</Overline>
+                    <Overline type="subtle">
+                        <Text id="app.special.popovers.server_identity.avatar" />
+                    </Overline>
                     <FileUploader
                         width={80}
                         height={80}
@@ -63,7 +71,9 @@ export const ServerIdentityModal = observer(({ server, onClose }: Props) => {
                     />
                 </div>
                 <div>
-                    <Overline type="subtle">Nickname</Overline>
+                    <Overline type="subtle">
+                        <Text id="app.special.popovers.server_identity.nickname" />
+                    </Overline>
                     <InputBox
                         value={nickname}
                         placeholder={client.user!.username}
@@ -73,7 +83,7 @@ export const ServerIdentityModal = observer(({ server, onClose }: Props) => {
                         <Button
                             disabled={nickname === currentNickname}
                             onClick={() => member.edit({ nickname })}>
-                            Save
+                            <Text id="app.special.modals.actions.save" />
                         </Button>
                         {currentNickname !== "" && (
                             <Button
@@ -81,7 +91,7 @@ export const ServerIdentityModal = observer(({ server, onClose }: Props) => {
                                 onClick={() =>
                                     member.edit({ remove: "Nickname" })
                                 }>
-                                Remove
+                                <Text id="app.special.modals.actions.remove" />
                             </Button>
                         )}
                     </div>