fix(home,settings): updated homepage, settings

* new home screen
* cleaned up settings

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.check}>a</div>
-                <div className={styles.check}>b</div>
-                <div className={styles.check}>c</div>
+                <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">