fix(home,settings): updated homepage, settings

* new home screen
* cleaned up settings

external/lang

@@ -1 +1 @@
-Subproject commit 84d711fc721b125df3bedd8d2194494cc0666286
+Subproject commit 026f884b54f515d3e47f2dbd410c2386b5fa68a9

src/components/common/messaging/attachments/MessageReply.tsx

@@ -98,6 +98,12 @@ export const ReplyBase = styled.div<{
         transition: transform ease-in-out 0.1s;
         filter: brightness(1);
 
+        > span > p {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+        }
+
         &:hover {
             filter: brightness(2);
         }

src/pages/home/Home.module.scss

@@ -1,9 +1,18 @@
 .home {
     height: 100%;
     user-select: none;
+    position: relative;
+
+    .homeScreen {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        height: 95%;
+        padding: 12px;
 
         h3 {
-        margin: 1em 0;
+            margin: 20px 0;
             font-size: 48px;
             text-align: center;
 
@@ -12,18 +21,33 @@
             }
         }
 
-    .actions {
+        a {
-        gap: 8px;
+            font-size: 13px;
-        width: 236px;
+        }
 
-        margin: auto;
+        .actions {
-        display: flex;
+            //grid-template-columns: repeat(2, 300px);
+            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            grid-column: span 2;
+            gap: 16px;
+            //margin: auto;
+            display: grid;
             width: fit-content;
             align-items: stretch;
             flex-direction: column;
+            margin-bottom: 20px;
 
             a {
                 width: 100%;
+
+                &:nth-child(4) {
+                    margin-bottom: 20px;
+                }
+
+                div {
+                    margin: 0;
+                }
+            }
         }
     }
 }

src/pages/home/Home.tsx

@@ -1,4 +1,13 @@
-import { Home as HomeIcon } from "@styled-icons/boxicons-solid";
+import { Money } from "@styled-icons/boxicons-regular";
+import {
+    Home as HomeIcon,
+    PlusCircle,
+    Compass,
+    Megaphone,
+    Group,
+    Cog,
+    RightArrowCircle,
+} from "@styled-icons/boxicons-solid";
 import { Link } from "react-router-dom";
 import styled, { css } from "styled-components";
 
@@ -103,47 +112,28 @@ export default function Home() {
                         </div>
                     ))}
                 </div>
-                <div class="content">
+                <div className="content">
                     <Header placement="primary">
                         <IconConainer onClick={toggleChannelSidebar}>
                             <HomeIcon size={24} />
                         </IconConainer>
                         <Text id="app.navigation.tabs.home" />
                     </Header>
+                    <div className={styles.homeScreen}>
                         <h3>
                             <Text id="app.special.modals.onboarding.welcome" />
                             <br />
                             <img src={wideSVG} />
                         </h3>
                         <div className={styles.actions}>
-                        <Link to="/invite/Testers">
+                            <Link to="/settings">
                                 <CategoryButton
                                     action="chevron"
-                                icon={<Emoji emoji="😁" size={32} />}>
+                                    icon={<PlusCircle size={32} />}
-                                {client.servers.get(
+                                    description={
-                                    "01F7ZSBSFHQ8TA81725KQCSDDP",
+                                        "Invite all of your friends, some cool bots, and throw a big party."
-                                ) ? (
+                                    }>
-                                    <Text id="app.home.goto-testers" />
+                                    Create a group
-                                ) : (
-                                    <Text id="app.home.join-testers" />
-                                )}
-                            </CategoryButton>
-                        </Link>
-                        <a
-                            href="https://insrt.uk/donate"
-                            target="_blank"
-                            rel="noreferrer">
-                            <CategoryButton
-                                action="external"
-                                icon={<Emoji emoji="💷" size={32} />}>
-                                <Text id="app.home.donate" />
-                            </CategoryButton>
-                        </a>
-                        <Link to="/settings/feedback">
-                            <CategoryButton
-                                action="chevron"
-                                icon={<Emoji emoji="🎉" size={32} />}>
-                                <Text id="app.home.feedback" />
                                 </CategoryButton>
                             </Link>
                             <a
@@ -152,23 +142,80 @@ export default function Home() {
                                 rel="noreferrer">
                                 <CategoryButton
                                     action="external"
-                                icon={<Emoji emoji="🧭" size={32} />}>
+                                    icon={<Compass size={32} />}
-                                <Text id="app.home.social" />
+                                    description={
+                                        "Find a community based on your hobbies or interests."
+                                    }>
+                                    Join a community
                                 </CategoryButton>
                             </a>
+
+                            {client.servers.get(
+                                "01F7ZSBSFHQ8TA81725KQCSDDP",
+                            ) ? (
+                                <Link to="/server/01F7ZSBSFHQ8TA81725KQCSDDP">
+                                    <CategoryButton
+                                        action="chevron"
+                                        icon={<RightArrowCircle size={32} />}
+                                        description={
+                                            "You can report issues and discuss improvements with us directly here."
+                                        }>
+                                        <Text id="app.home.goto-testers" />
+                                    </CategoryButton>
+                                </Link>
+                            ) : (
+                                <Link to="/invite/Testers">
+                                    <CategoryButton
+                                        action="chevron"
+                                        icon={<Group size={32} />}
+                                        description={
+                                            "You can report issues and discuss improvements with us directly here."
+                                        }>
+                                        <Text id="app.home.join-testers" />
+                                    </CategoryButton>
+                                </Link>
+                            )}
+
+                            <Link to="/settings/feedback">
+                                <CategoryButton
+                                    action="chevron"
+                                    icon={<Megaphone size={32} />}
+                                    description={
+                                        "Let us know how we can improve our app by giving us feedback."
+                                    }>
+                                    <Text id="app.home.feedback" />
+                                </CategoryButton>
+                            </Link>
+                            <a
+                                href="https://insrt.uk/donate"
+                                target="_blank"
+                                rel="noreferrer">
+                                <CategoryButton
+                                    action="external"
+                                    icon={<Money size={32} />}>
+                                    <Text id="app.home.donate" />
+                                </CategoryButton>
+                            </a>
+
                             <Tooltip
-                            content={<Text id="app.home.settings-tooltip" />}>
+                                content={
+                                    <Text id="app.home.settings-tooltip" />
+                                }>
                                 <Link to="/settings">
                                     <CategoryButton
                                         action="chevron"
-                                    icon={<Emoji emoji="🔧" size={32} />}>
+                                        icon={<Cog size={32} />}>
                                         <Text id="app.home.settings" />
                                     </CategoryButton>
                                 </Link>
                             </Tooltip>
                         </div>
+                        <Link to="/settings/appearance">
+                            <a>Turn off homescreen effects</a>
+                        </Link>
                     </div>
-            </Overlay>
+                </div>
+            </Overlay>{" "}
         </div>
     );
 }

src/pages/home/snow.scss

@@ -1,5 +1,7 @@
 // Pure CSS Snowfall
 // Released by Artimon under MIT license
+//
+// Source: https://github.com/Artimon/pure-css-snowfall
 
 $count: 36;
 $screenOffset: 0px;

src/pages/settings/panes/Panes.module.scss

@@ -149,11 +149,21 @@
 
     .badgePicker {
         display: flex;
-        gap: 10px;
         margin-bottom: 20px;
 
+        //padding-bottom: 8px;
+        position: relative;
+
+        .container {
+            display: flex;
+            overflow-x: auto;
+            gap: 10px;
+        }
+
         .check {
             cursor: pointer;
+
+            flex-shrink: 0;
             height: 50px;
             width: 50px;
             background: var(--secondary-background);
@@ -173,9 +183,41 @@
         }
     }
 
+    // TOFIX: need to merge overlay 1 and 2 later
+
+    .overlay {
+        position: absolute;
+        flex-shrink: 0;
+        width: 8px;
+        background: red;
+        height: 100%;
+
+        background: linear-gradient(
+            to right,
+            var(--primary-background),
+            transparent
+        );
+    }
+
+    .overlay2 {
+        position: absolute;
+        right: 0;
+        flex-shrink: 0;
+        width: 8px;
+        background: red;
+        height: 100%;
+
+        background: linear-gradient(
+            to left,
+            var(--primary-background),
+            transparent
+        );
+    }
+
     .row {
         gap: 20px;
         display: flex;
+        margin-bottom: 30px;
 
         .pfp {
             display: flex;

src/pages/settings/panes/Profile.tsx

@@ -74,10 +74,15 @@ export const Profile = observer(() => {
             </div>
             {/*<h3>Badges</h3>
             <div className={styles.badgePicker}>
+                <div className={styles.overlay} />
+                <div className={styles.container}>
                     <div className={styles.check}>a</div>
                     <div className={styles.check}>b</div>
                     <div className={styles.check}>c</div>
+                </div>
+                <div className={styles.overlay2} />
             </div>*/}
+            <hr />
             <div className={styles.row}>
                 <div className={styles.pfp}>
                     <h3>

src/pages/settings/panes/Sessions.tsx

@@ -1,5 +1,5 @@
 import { Chrome, Android, Apple, Windows } from "@styled-icons/boxicons-logos";
-import { HelpCircle, Desktop } from "@styled-icons/boxicons-regular";
+import { HelpCircle, Desktop, LogOut } from "@styled-icons/boxicons-regular";
 import {
     Safari,
     Firefoxbrowser,
@@ -24,6 +24,7 @@ import { AppContext } from "../../../context/revoltjs/RevoltClient";
 import Button from "../../../components/ui/Button";
 import Preloader from "../../../components/ui/Preloader";
 import Tip from "../../../components/ui/Tip";
+import CategoryButton from "../../../components/ui/fluent/CategoryButton";
 
 dayjs.extend(relativeTime);
 
@@ -207,7 +208,7 @@ export function Sessions() {
                     </div>
                 );
             })}
-            <Button
+            {/*<Button
                 error
                 onClick={async () => {
                     // ! FIXME: add to rAuth
@@ -230,7 +231,37 @@ export function Sessions() {
                     setSessions(sessions.filter((x) => x._id === deviceId));
                 }}>
                 <Text id="app.settings.pages.sessions.logout" />
-            </Button>
+            </Button>*/}
+
+            <CategoryButton
+                onClick={async () => {
+                    // ! FIXME: add to rAuth
+                    const del: string[] = [];
+                    render.forEach((session) => {
+                        if (deviceId !== session._id) {
+                            del.push(session._id);
+                        }
+                    });
+
+                    setDelete(del);
+
+                    for (const id of del) {
+                        await client.req(
+                            "DELETE",
+                            `/auth/session/${id}` as "/auth/session/id",
+                        );
+                    }
+
+                    setSessions(sessions.filter((x) => x._id === deviceId));
+                }}
+                icon={<LogOut size={24} color={"var(--error)"} />}
+                action={"chevron"}
+                description={
+                    "Logs you out of all sessions except this device."
+                }>
+                <Text id="app.settings.pages.sessions.logout" />
+            </CategoryButton>
+
             <Tip>
                 <span>
                     <Text id="app.settings.tips.sessions.a" />

src/pages/settings/panes/ThemeShop.tsx

@@ -296,6 +296,7 @@ export function ThemeShop() {
             <Tip warning hideSeparator>
                 The Theme Shop is currently under construction.
             </Tip>
+            <hr />
             {/* FIXME INTEGRATE WITH MOBX */}
             {/*<ActiveTheme>
                 <div class="active-indicator">