From ab54afc1e0a2a583102e2db3f8a547d57f654007 Mon Sep 17 00:00:00 2001
From: nizune <9-nizune@users.noreply.gitlab.insrt.uk>
Date: Mon, 2 Aug 2021 12:22:39 +0200
Subject: [PATCH] Small update for desktop app

---
 .../navigation/left/ServerListSidebar.tsx     | 14 +++++
 src/pages/settings/GenericSettings.tsx        | 56 ++++++++++---------
 src/pages/settings/Settings.module.scss       | 25 ++++++++-
 3 files changed, 66 insertions(+), 29 deletions(-)

diff --git a/src/components/navigation/left/ServerListSidebar.tsx b/src/components/navigation/left/ServerListSidebar.tsx
index 3079feab..f3c8ba0b 100644
--- a/src/components/navigation/left/ServerListSidebar.tsx
+++ b/src/components/navigation/left/ServerListSidebar.tsx
@@ -1,4 +1,5 @@
 import { Plus } from "@styled-icons/boxicons-regular";
+import { Compass } from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
 import { useLocation, useParams } from "react-router-dom";
 import { RelationshipStatus } from "revolt-api/types/Users";
@@ -94,6 +95,10 @@ const ServerEntry = styled.div<{ active: boolean; home?: boolean }>`
     display: flex;
     align-items: center;
 
+    :focus {
+        outline: 3px solid blue;
+      }
+
     > div {
         height: 42px;
         padding-inline-start: 6px;
@@ -299,6 +304,15 @@ export const ServerListSidebar = observer(({ unreads, lastOpened }: Props) => {
                     }>
                     <Plus size={36} />
                 </IconButton>
+                {/*<IconButton
+                    onClick={() =>
+                        openScreen({
+                            id: "special_input",
+                            type: "create_server",
+                        })
+                    }>
+                    <Compass size={36} />
+                </IconButton>*/}
                 <PaintCounter small />
             </ServerList>
         </ServersBase>
diff --git a/src/pages/settings/GenericSettings.tsx b/src/pages/settings/GenericSettings.tsx
index c2b0dfee..d672a69c 100644
--- a/src/pages/settings/GenericSettings.tsx
+++ b/src/pages/settings/GenericSettings.tsx
@@ -122,37 +122,40 @@ export function GenericSettings({
             )}
             {(!isTouchscreenDevice || typeof page === "undefined") && (
                 <div className={styles.sidebar}>
-                    <div className={styles.container}>
-                        {pages.map((entry, i) =>
-                            entry.hidden ? undefined : (
-                                <>
-                                    {entry.category && (
-                                        <Category
-                                            variant="uniform"
-                                            text={entry.category}
-                                        />
-                                    )}
-                                    <ButtonItem
-                                        active={
-                                            page === entry.id ||
-                                            (i === 0 &&
-                                                !isTouchscreenDevice &&
-                                                typeof page === "undefined")
-                                        }
-                                        onClick={() => switchPage(entry.id)}
-                                        compact>
-                                        {entry.icon} {entry.title}
-                                    </ButtonItem>
-                                    {entry.divider && <LineDivider />}
-                                </>
-                            ),
-                        )}
-                        {custom}
+                    <div className={styles.scrollbox}>
+                        <div className={styles.container}>
+                            {pages.map((entry, i) =>
+                                entry.hidden ? undefined : (
+                                    <>
+                                        {entry.category && (
+                                            <Category
+                                                variant="uniform"
+                                                text={entry.category}
+                                            />
+                                        )}
+                                        <ButtonItem
+                                            active={
+                                                page === entry.id ||
+                                                (i === 0 &&
+                                                    !isTouchscreenDevice &&
+                                                    typeof page === "undefined")
+                                            }
+                                            onClick={() => switchPage(entry.id)}
+                                            compact>
+                                            {entry.icon} {entry.title}
+                                        </ButtonItem>
+                                        {entry.divider && <LineDivider />}
+                                    </>
+                                ),
+                            )}
+                            {custom}
+                        </div>
                     </div>
                 </div>
             )}
             {(!isTouchscreenDevice || typeof page === "string") && (
                 <div className={styles.content}>
+                    {/*<div className={styles.scrollbox}>*/}
                     {!isTouchscreenDevice &&
                         !pages.find((x) => x.id === page && x.hideTitle) && (
                             <h1>
@@ -164,6 +167,7 @@ export function GenericSettings({
                             </h1>
                         )}
                     <Switch>{children}</Switch>
+                    {/*</div>*/}
                 </div>
             )}
             {!isTouchscreenDevice && (
diff --git a/src/pages/settings/Settings.module.scss b/src/pages/settings/Settings.module.scss
index 7dc73b2f..7ca5058a 100644
--- a/src/pages/settings/Settings.module.scss
+++ b/src/pages/settings/Settings.module.scss
@@ -83,6 +83,24 @@
     justify-content: center;
     background: var(--primary-background);
 
+    .scrollbox {
+        overflow: auto;
+        visibility: hidden;
+
+        transition: visibility 0.2s;
+    }
+
+    .container,
+    .scrollbox:hover,
+    .scrollbox:focus {
+    visibility: visible;
+    }
+    
+    ::-webkit-scrollbar-thumb {
+        background-clip: content-box;
+        border-top: 80px solid transparent;
+    }
+
     .sidebar {
         flex: 1 0 218px;
         display: flex;
@@ -93,11 +111,12 @@
 
         .container {
             width: 218px;
-            padding: 60px 8px;
+            padding: 80px 8px;
             height: fit-content;
             display: flex;
             gap: 2px;
             flex-direction: column;
+            visibility: visible;
         }
 
         .divider {
@@ -139,7 +158,7 @@
     .content {
         flex: 3;
         max-width: 740px;
-        padding: 60px 2em;
+        padding: 80px 2em;
         overflow-y: scroll;
         overflow-x: hidden;
 
@@ -186,7 +205,7 @@
     .action {
         flex: 1;
         flex-shrink: 0;
-        padding: 60px 8px;
+        padding: 80px 8px;
         color: var(--tertiary-background);
 
         &:after {