From 9e1a15eb3f4a85f94ff7fa7a442a608ffcc01289 Mon Sep 17 00:00:00 2001
From: nizune <9-nizune@users.noreply.gitlab.insrt.uk>
Date: Tue, 6 Jul 2021 13:16:29 +0200
Subject: [PATCH] Fix: Messagebox is now fully working

---
 external/lang                                 |  2 +-
 .../common/messaging/MessageBox.tsx           | 49 +++++++++++++------
 src/pages/settings/Settings.module.scss       |  6 ++-
 src/pages/settings/panes/Account.tsx          |  7 ++-
 src/pages/settings/panes/Panes.module.scss    |  9 ++++
 src/styles/_variables.scss                    |  2 +-
 6 files changed, 56 insertions(+), 19 deletions(-)

diff --git a/external/lang b/external/lang
index 2a9ef2c8..e0c436c9 160000
--- a/external/lang
+++ b/external/lang
@@ -1 +1 @@
-Subproject commit 2a9ef2c8025dd71a20fddca7c94cb7af30978c4b
+Subproject commit e0c436c957206aecd416981ba0050f88aa32259e
diff --git a/src/components/common/messaging/MessageBox.tsx b/src/components/common/messaging/MessageBox.tsx
index d6cad740..e3a11e28 100644
--- a/src/components/common/messaging/MessageBox.tsx
+++ b/src/components/common/messaging/MessageBox.tsx
@@ -1,5 +1,4 @@
-import { ShieldX } from "@styled-icons/boxicons-regular";
-import { Send } from "@styled-icons/boxicons-solid";
+import { Send, HappyAlt, ShieldX } from "@styled-icons/boxicons-solid";
 import Axios, { CancelTokenSource } from "axios";
 import { Channel } from "revolt.js";
 import { ChannelPermission } from "revolt.js/dist/api/permissions";
@@ -40,6 +39,7 @@ import AutoComplete, { useAutoComplete } from "../AutoComplete";
 import { PermissionTooltip } from "../Tooltip";
 import FilePreview from "./bars/FilePreview";
 import ReplyBar from "./bars/ReplyBar";
+import { Styleshare } from "@styled-icons/simple-icons";
 
 type Props = {
     channel: Channel;
@@ -65,29 +65,45 @@ const Base = styled.div`
     textarea {
         font-size: var(--text-size);
         background: transparent;
+
+        &::placeholder {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
     }
 `;
 
 const Blocked = styled.div`
     display: flex;
     align-items: center;
-    padding: 14px 0;
     user-select: none;
     font-size: var(--text-size);
     color: var(--tertiary-foreground);
 
+    .text {
+        padding: 14px 14px 14px 0;
+    }
+
     svg {
         flex-shrink: 0;
-        margin-inline-end: 10px;
     }
 `;
 
 const Action = styled.div`
-    display: grid;
+    display: flex;
     place-items: center;
 
     > div {
-        padding: 10px 12px;
+        height: 48px;
+        width: 48px;
+        padding: 12px;
+    }
+
+    .mobile {
+        @media (pointer: fine) {
+            display: none;
+        }
     }
 `;
 
@@ -112,12 +128,16 @@ export default function MessageBox({ channel }: Props) {
         return (
             <Base>
                 <Blocked>
+                    <Action>
                     <PermissionTooltip
                         permission="SendMessages"
                         placement="top">
                         <ShieldX size={22} />
                     </PermissionTooltip>
-                    <Text id="app.main.channel.misc.no_sending" />
+                    </Action>
+                    <div className="text">
+                        <Text id="app.main.channel.misc.no_sending" />
+                    </div>
                 </Blocked>
             </Base>
         );
@@ -477,13 +497,14 @@ export default function MessageBox({ channel }: Props) {
                     onFocus={onFocus}
                     onBlur={onBlur}
                 />
-                {isTouchscreenDevice && (
-                    <Action>
-                        <IconButton onClick={send}>
-                            <Send size={20} />
-                        </IconButton>
-                    </Action>
-                )}
+                <Action>
+                    {/*<IconButton onClick={emojiPicker}>
+                        <HappyAlt size={20} />
+                </IconButton>*/}
+                    <IconButton className="mobile" onClick={send}>
+                        <Send size={20} />
+                    </IconButton>
+                </Action>
             </Base>
         </>
     );
diff --git a/src/pages/settings/Settings.module.scss b/src/pages/settings/Settings.module.scss
index a28bdb9c..a28237e0 100644
--- a/src/pages/settings/Settings.module.scss
+++ b/src/pages/settings/Settings.module.scss
@@ -189,11 +189,15 @@
             width: 40px;
             border: 3px solid var(--tertiary-background);
             cursor: pointer;
-
+            
             svg {
                 color: var(--secondary-foreground);
             }
 
+            &:hover {
+                background: var(--secondary-header);
+            }
+
             &:active {
                 transform: translateY(2px);
             }
diff --git a/src/pages/settings/panes/Account.tsx b/src/pages/settings/panes/Account.tsx
index 472fb05d..b6677319 100644
--- a/src/pages/settings/panes/Account.tsx
+++ b/src/pages/settings/panes/Account.tsx
@@ -1,5 +1,5 @@
 import { At } from "@styled-icons/boxicons-regular";
-import { Envelope, Key } from "@styled-icons/boxicons-solid";
+import { Envelope, Key, HelpCircle } from "@styled-icons/boxicons-solid";
 import { Link, useHistory } from "react-router-dom";
 import { Users } from "revolt.js/dist/api/objects";
 
@@ -60,7 +60,10 @@ export function Account() {
                     size={72}
                     onClick={() => switchPage("profile")}
                 />
-                <div className={styles.username}>@{user.username}</div>
+                <div className={styles.userDetail}>
+                    <div className={styles.username}>@{user.username}</div>
+                    <div className={styles.userid}><HelpCircle size={16} />{user._id}</div>
+                </div>
             </div>
             <div className={styles.details}>
                 {(
diff --git a/src/pages/settings/panes/Panes.module.scss b/src/pages/settings/panes/Panes.module.scss
index 763210f9..3dfe7a90 100644
--- a/src/pages/settings/panes/Panes.module.scss
+++ b/src/pages/settings/panes/Panes.module.scss
@@ -21,6 +21,15 @@
             font-size: 24px;
             font-weight: 600;
         }
+
+        .userid {
+            font-size: .875rem;
+            font-weight: 600;
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            color: var(--tertiary-foreground);
+        }
     }
 
     .details {
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 21a9b500..73530ade 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -10,7 +10,7 @@
 
     --textarea-padding: 16px;
     --textarea-line-height: 20px;
-    --message-box-padding: 12px;
+    --message-box-padding: 14px 14px 14px 0;
 
     --bottom-navigation-height: 50px;
 }