Fixes : Admin: Custom emoji page layout (#2993)

* Update emojis.tsx

* Prettified Code!

* Second Iteration

* Update emojis.tsx

* Putting Delete Button at top-right

Will this work ?

* Prettified Code!

* Update emojis.tsx

Changing Icon of Delete Button
Decreasing Delete-Button Size

* Prettified Code!

* Tweak style of delete emoji button

---------

Co-authored-by: dev265545 <dev265545@users.noreply.github.com>
Co-authored-by: Gabe Kangas <gabek@real-ity.com>

web/pages/admin/chat/emojis.tsx

@@ -1,11 +1,9 @@
-import { Button, Space, Table, Typography, Upload } from 'antd';
+import { Avatar, Button, Card, Col, Row, Tooltip, Typography } from 'antd';
-import { RcFile } from 'antd/lib/upload';
+import Upload, { RcFile } from 'antd/lib/upload';
 import React, { ReactElement, useEffect, useState } from 'react';
 import dynamic from 'next/dynamic';
 import FormStatusIndicator from '../../../components/admin/FormStatusIndicator';
-
 import { DELETE_EMOJI, fetchData, UPLOAD_EMOJI } from '../../../utils/apis';
-
 import { ACCEPTED_IMAGE_TYPES, getBase64 } from '../../../utils/images';
 import {
   createInputStatus,
@@ -15,12 +13,12 @@ import {
 } from '../../../utils/input-statuses';
 import { RESET_TIMEOUT } from '../../../utils/config-constants';
 import { URL_CUSTOM_EMOJIS } from '../../../utils/constants';
-
 import { AdminLayout } from '../../../components/layouts/AdminLayout';
 
+const { Meta } = Card;
 // Lazy loaded components
 
-const DeleteOutlined = dynamic(() => import('@ant-design/icons/DeleteOutlined'), {
+const CloseOutlined = dynamic(() => import('@ant-design/icons/CloseOutlined'), {
   ssr: false,
 });
 
@@ -33,7 +31,6 @@ const { Title, Paragraph } = Typography;
 
 const Emoji = () => {
   const [emojis, setEmojis] = useState<CustomEmoji[]>([]);
-
   const [loading, setLoading] = useState(false);
   const [submitStatus, setSubmitStatus] = useState(null);
   const [uploadFile, setUploadFile] = useState<RcFile>(null);
@@ -133,30 +130,6 @@ const Emoji = () => {
     setLoading(false);
   }
 
-  const columns = [
-    {
-      title: '',
-      key: 'delete',
-      render: (text, record) => (
-        <Space size="middle">
-          <Button onClick={() => handleDelete(record.url)} icon={<DeleteOutlined />} />
-        </Space>
-      ),
-    },
-    {
-      title: 'Name',
-      key: 'name',
-      dataIndex: 'name',
-    },
-    {
-      title: 'Emoji',
-      key: 'url',
-      render: (text, record) => (
-        <img src={record.url} alt={record.name} style={{ maxWidth: '2vw' }} />
-      ),
-    },
-  ];
-
   return (
     <div>
       <Title>Emojis</Title>
@@ -164,13 +137,6 @@ const Emoji = () => {
         Here you can upload new custom emojis for usage in the chat. When uploading a new emoji, the
         filename will be used as emoji name.
       </Paragraph>
-
-      <Table
-        rowKey={record => record.url}
-        dataSource={emojis}
-        columns={columns}
-        pagination={false}
-      />
       <br />
       <Upload
         name="emoji"
@@ -187,6 +153,49 @@ const Emoji = () => {
         </Button>
       </Upload>
       <FormStatusIndicator status={submitStatus} />
+      <br />
+      <Row>
+        {emojis.map(record => (
+          <Col style={{ padding: '10px' }} key={record.name}>
+            <Card style={{ width: 120, marginTop: 16 }} actions={[]}>
+              <Meta
+                description={[
+                  <div
+                    style={{
+                      display: 'flex',
+                      justifyItems: 'center',
+                      alignItems: 'center',
+                      flexDirection: 'column',
+                      gap: '20px',
+                    }}
+                  >
+                    <Tooltip title={record.name}>
+                      <Avatar style={{ height: 50, width: 50 }} src={record.url} />
+                    </Tooltip>
+                    <Button
+                      size="small"
+                      type="ghost"
+                      title="Delete emoji"
+                      style={{
+                        position: 'absolute',
+                        right: 0,
+                        top: 0,
+                        height: 24,
+                        width: 24,
+                        border: 'none',
+                        color: 'gray',
+                      }}
+                      onClick={() => handleDelete(record.url)}
+                      icon={<CloseOutlined />}
+                    />
+                  </div>,
+                ]}
+              />
+            </Card>
+          </Col>
+        ))}
+      </Row>
+      <br />
     </div>
   );
 };