From c93f0245f1bddc638f096b89bcecf16d34719a9f Mon Sep 17 00:00:00 2001
From: nizune <9-nizune@users.noreply.gitlab.insrt.uk>
Date: Wed, 4 Aug 2021 14:48:33 +0200
Subject: [PATCH] Fixed message replies + refined account settings

---
 .../messaging/attachments/MessageReply.tsx    |  6 +-
 src/pages/settings/panes/Account.tsx          | 72 +++++++++++++------
 src/pages/settings/panes/Panes.module.scss    | 41 ++++++++++-
 3 files changed, 93 insertions(+), 26 deletions(-)

diff --git a/src/components/common/messaging/attachments/MessageReply.tsx b/src/components/common/messaging/attachments/MessageReply.tsx
index 1714dd6d..1966785f 100644
--- a/src/components/common/messaging/attachments/MessageReply.tsx
+++ b/src/components/common/messaging/attachments/MessageReply.tsx
@@ -48,7 +48,7 @@ export const ReplyBase = styled.div<{
     }
 
     .user {
-        gap: 4px;
+        gap: 6px;
         display: flex;
         flex-shrink: 0;
         font-weight: 600;
@@ -92,9 +92,9 @@ export const ReplyBase = styled.div<{
             pointer-events: none;
         }
 
-        > span {
+        /*> span > p {
             display: flex;
-        }
+        }*/
     }
 
     > svg:first-child {
diff --git a/src/pages/settings/panes/Account.tsx b/src/pages/settings/panes/Account.tsx
index 818d8b76..9e8a5580 100644
--- a/src/pages/settings/panes/Account.tsx
+++ b/src/pages/settings/panes/Account.tsx
@@ -1,5 +1,5 @@
-import { At, Key } from "@styled-icons/boxicons-regular";
-import { Envelope, HelpCircle } from "@styled-icons/boxicons-solid";
+import { At, Key, Block } from "@styled-icons/boxicons-regular";
+import { Envelope, HelpCircle, Lock, Trash } from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
 import { Link, useHistory } from "react-router-dom";
 import { Profile } from "revolt-api/types/Users";
@@ -140,38 +140,68 @@ export const Account = observer(() => {
             <h3>
                 <Text id="app.settings.pages.account.2fa.title" />
             </h3>
-            <h5>
-                Currently work in progress, see{" "}
-                <a
-                    href="https://gitlab.insrt.uk/insert/rauth/-/issues/2"
-                    target="_blank"
-                    rel="noreferrer">
-                    tracking issue here
-                </a>
-                .
-            </h5>
-            {/*<h5><Text id="app.settings.pages.account.two_factor_auth.description" /></h5>
-            <Button accent compact>
-                <Text id="app.settings.pages.account.two_factor_auth.add_auth" />
-            </Button>*/}
-
+            <h5><Text id="app.settings.pages.account.2fa.description" /></h5>
+            <div className={styles.entrytest}>
+                <Lock size={24}/>
+                <div className={styles.content}>
+                    Currently not available
+                    <div className={styles.description}>
+                        Two-factor auth is currently work-in-progress, see{" "}
+                        <a
+                            href="https://gitlab.insrt.uk/insert/rauth/-/issues/2"
+                            target="_blank"
+                            rel="noreferrer">
+                            tracking issue here
+                        </a>
+                        .
+                    </div>
+                </div>
+                <Button accent compact disabled>
+                    <Text id="app.settings.pages.account.2fa.add_auth" />
+                </Button>
+            </div>
             <h3>
                 <Text id="app.settings.pages.account.manage.title" />
             </h3>
             <h5>
                 <Text id="app.settings.pages.account.manage.description" />
             </h5>
-            <div className={styles.buttons}>
-                {/* <Button contrast>
+            <div className={styles.entrytest}>
+                <Block size={24}/>
+                <div className={styles.content}>
                     <Text id="app.settings.pages.account.manage.disable" />
-                </Button> */}
+                    <div className={styles.description}>
+                        Disable your account. You won't be able to access it unless you log back in.
+                    </div>
+                </div>
+                <Button accent compact disabled>
+                    Unavailable
+                </Button>
+            </div>
+            <div className={styles.entrytest}>
+                <Trash size={24}/>
+                <div className={styles.content}>
+                    <Text id="app.settings.pages.account.manage.delete" />
+                    <div className={styles.description}>
+                        Delete your account, including all of your data.
+                    </div>
+                </div>
                 <a href="mailto:contact@revolt.chat?subject=Delete%20my%20account">
                     <Button error compact>
                         <Text id="app.settings.pages.account.manage.delete" />
                     </Button>
                 </a>
             </div>
-
+            <div className={styles.buttons}>
+                {/* <Button contrast>
+                    <Text id="app.settings.pages.account.manage.disable" />
+                </Button> 
+                <a href="mailto:contact@revolt.chat?subject=Delete%20my%20account">
+                    <Button error compact>
+                        <Text id="app.settings.pages.account.manage.delete" />
+                    </Button>
+                </a>*/}
+            </div>
             <Tip>
                 <span>
                     <Text id="app.settings.tips.account.a" />
diff --git a/src/pages/settings/panes/Panes.module.scss b/src/pages/settings/panes/Panes.module.scss
index 5fa93ec4..de4486a8 100644
--- a/src/pages/settings/panes/Panes.module.scss
+++ b/src/pages/settings/panes/Panes.module.scss
@@ -56,10 +56,13 @@
 
     .details {
         display: flex;
-        margin: 1em 0;
+        padding: 1em 0;
         gap: 10px;
         flex-direction: column;
 
+        /*border-top: 1px solid var(--secondary-header);
+        border-width: 100%;*/
+
         > div {
             gap: 12px;
             /*padding: 4px;*/
@@ -149,6 +152,40 @@
         display: flex;
         gap: 12px;
     }
+
+    .entrytest {
+        gap: 12px;
+        /* padding: 4px; */
+        height: 54px;
+        padding: 8px 12px;
+        display: flex;
+        align-items: center;
+        flex-direction: row;
+        background: var(--secondary-header);
+        border-radius: 6px;
+        margin-bottom: 10px;
+
+        > svg {
+            color: var(--error);
+        }
+
+        .content {
+            display: flex;
+            flex-grow: 1;
+            flex-direction: column;
+            font-weight: 600;
+            font-size: 14px;
+
+            .description {
+                font-size: 11px;
+                font-weight: 400;
+
+                a:hover {
+                    text-decoration: underline;
+                }
+            }
+        }
+    }
 }
 
 @media only screen and (max-width: 800px) {
@@ -504,7 +541,7 @@
         display: flex;
         flex-direction: column;
         margin-bottom: 1em;
-        gap: 10px;
+        gap: 8px;
         
         .entry {
             display: flex;