Fixed message replies + refined account settings

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 {

src/pages/settings/panes/Account.tsx

@@ -1,5 +1,5 @@
-import { At, Key } from "@styled-icons/boxicons-regular";
+import { At, Key, Block } from "@styled-icons/boxicons-regular";
-import { Envelope, HelpCircle } from "@styled-icons/boxicons-solid";
+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,8 +140,13 @@ export const Account = observer(() => {
             <h3>
                 <Text id="app.settings.pages.account.2fa.title" />
             </h3>
-            <h5>
+            <h5><Text id="app.settings.pages.account.2fa.description" /></h5>
-                Currently work in progress, see{" "}
+            <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"
@@ -149,29 +154,54 @@ export const Account = observer(() => {
                             tracking issue here
                         </a>
                         .
-            </h5>
+                    </div>
-            {/*<h5><Text id="app.settings.pages.account.two_factor_auth.description" /></h5>
+                </div>
-            <Button accent compact>
+                <Button accent compact disabled>
-                <Text id="app.settings.pages.account.two_factor_auth.add_auth" />
+                    <Text id="app.settings.pages.account.2fa.add_auth" />
-            </Button>*/}
+                </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}>
+            <div className={styles.entrytest}>
-                {/* <Button contrast>
+                <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" />

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;