From f6be6d7cf834b3338fac34b47bd45282abf14634 Mon Sep 17 00:00:00 2001
From: Paul Makles <paulmakles@gmail.com>
Date: Fri, 2 Sep 2022 14:17:42 +0100
Subject: [PATCH] feat: change emojis page from grid to list

---
 external/components                           |  2 +-
 external/lang                                 |  2 +-
 .../settings/customisation/EmojiUploader.tsx  |  1 +
 src/pages/settings/server/Emojis.tsx          | 63 ++++++-------------
 4 files changed, 21 insertions(+), 47 deletions(-)

diff --git a/external/components b/external/components
index fd7ad8b8..55709411 160000
--- a/external/components
+++ b/external/components
@@ -1 +1 @@
-Subproject commit fd7ad8b8712d24977c1c47dc5705a32487ace0ed
+Subproject commit 557094115d17a363eb6fb8f27c6e697e049ce623
diff --git a/external/lang b/external/lang
index 429734c3..05e7213b 160000
--- a/external/lang
+++ b/external/lang
@@ -1 +1 @@
-Subproject commit 429734c32b3584dd9c23124bd0682bba31834eb8
+Subproject commit 05e7213b2290dfced3d41d54cb85f49670404cf2
diff --git a/src/components/settings/customisation/EmojiUploader.tsx b/src/components/settings/customisation/EmojiUploader.tsx
index 108fc27c..e1a5d37f 100644
--- a/src/components/settings/customisation/EmojiUploader.tsx
+++ b/src/components/settings/customisation/EmojiUploader.tsx
@@ -19,6 +19,7 @@ export function EmojiUploader({ server }: Props) {
             <h3>
                 <Text id="app.settings.server_pages.emojis.upload" />
             </h3>
+            {fileId}
             <Form
                 schema={{
                     name: "text",
diff --git a/src/pages/settings/server/Emojis.tsx b/src/pages/settings/server/Emojis.tsx
index d5f4b3d1..0dd3cf1d 100644
--- a/src/pages/settings/server/Emojis.tsx
+++ b/src/pages/settings/server/Emojis.tsx
@@ -8,40 +8,24 @@ import { Button, Column, Row, Stacked } from "@revoltchat/ui";
 
 import UserShort from "../../../components/common/user/UserShort";
 import { EmojiUploader } from "../../../components/settings/customisation/EmojiUploader";
-import { modalController } from "../../../controllers/modals/ModalController";
 
 interface Props {
     server: Server;
 }
 
-const List = styled.div`
-    gap: 8px;
-    display: flex;
-    flex-wrap: wrap;
-`;
-
-const Emoji = styled(Column)`
+const Emoji = styled(Row)`
     padding: 8px;
     border-radius: var(--border-radius);
     background: var(--secondary-background);
 `;
 
 const Preview = styled.img`
-    width: 72px;
-    height: 72px;
+    width: 32px;
+    height: 32px;
     object-fit: contain;
     border-radius: var(--border-radius);
 `;
 
-const UserInfo = styled(Row)`
-    font-size: 12px;
-
-    svg {
-        width: 14px;
-        height: 14px;
-    }
-`;
-
 export const Emojis = observer(({ server }: Props) => {
     const emoji = [...server.client.emojis.values()].filter(
         (x) => x.parent.type === "Server" && x.parent.id === server._id,
@@ -57,33 +41,22 @@ export const Emojis = observer(({ server }: Props) => {
                 {" – "}
                 {emoji.length}
             </h3>
-            <List>
-                {emoji.map((emoji) => (
-                    <Emoji key={emoji._id} centred>
-                        <Stacked>
-                            <Preview src={emoji.imageURL} />
-                        </Stacked>
-                        <span>{`:${emoji.name}:`}</span>
-                        <UserInfo centred>
-                            <UserShort user={emoji.creator} />
-                        </UserInfo>
-                        <Button
-                            palette="plain"
-                            onClick={() =>
-                                modalController.writeText(emoji._id)
-                            }>
-                            <Text id="app.context_menu.copy_id" />
+            {emoji.map((emoji) => (
+                <Emoji key={emoji._id} centred>
+                    <Stacked>
+                        <Preview src={emoji.imageURL} />
+                    </Stacked>
+                    <span>{`:${emoji.name}:`}</span>
+                    <Row centred>
+                        <UserShort user={emoji.creator} />
+                    </Row>
+                    {server.havePermission("ManageCustomisation") && (
+                        <Button palette="plain" onClick={() => emoji.delete()}>
+                            <Text id="app.special.modals.actions.delete" />
                         </Button>
-                        {server.havePermission("ManageCustomisation") && (
-                            <Button
-                                palette="plain"
-                                onClick={() => emoji.delete()}>
-                                <Text id="app.special.modals.actions.delete" />
-                            </Button>
-                        )}
-                    </Emoji>
-                ))}
-            </List>
+                    )}
+                </Emoji>
+            ))}
         </Column>
     );
 });