Refreshed languages menu in settings

src/components/navigation/left/ServerListSidebar.tsx

@@ -77,7 +77,7 @@ const ServerList = styled.div`
     display: flex;
     overflow-y: scroll;
     padding-bottom: 20px;
-    width: 58px;
+    /*width: 58px;*/
     flex-direction: column;
 
     scrollbar-width: none;
@@ -89,6 +89,11 @@ const ServerList = styled.div`
     &::-webkit-scrollbar {
         width: 0px;
     }
+
+    /*${isTouchscreenDevice &&
+    css`
+        width: 58px;
+    `}*/
 `;
 
 const ServerEntry = styled.div<{ active: boolean; home?: boolean }>`

src/components/navigation/left/ServerSidebar.tsx

@@ -1,6 +1,6 @@
 import { observer } from "mobx-react-lite";
 import { Redirect, useParams } from "react-router";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 
 import { attachContextMenu } from "preact-context-menu";
 import { useEffect } from "preact/hooks";
@@ -11,6 +11,7 @@ import PaintCounter from "../../../lib/PaintCounter";
 import { dispatch } from "../../../redux";
 import { connectState } from "../../../redux/connector";
 import { Unreads } from "../../../redux/reducers/unreads";
+import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
 
 import { useClient } from "../../../context/revoltjs/RevoltClient";
 
@@ -37,6 +38,13 @@ const ServerBase = styled.div`
     border-start-start-radius: 8px;
     border-end-start-radius: 8px;
     overflow: hidden;
+
+    ${isTouchscreenDevice &&
+        css`
+            padding-bottom: 50px;
+            border-end-start-radius: 0;
+        `}
+    
 `;
 
 const ServerList = styled.div`

src/pages/settings/Settings.module.scss

@@ -98,9 +98,6 @@
     flex-direction: row;
     background: var(--primary-background);
 
-    /* Scrollbox hides the scrollbar on the desktop app. */
-    /*@media (hover: hover) { .scrollbox { visibility: hidden; }}*/
-
     .scrollbox {
         overflow-y: scroll;
         visibility: hidden;
@@ -115,6 +112,7 @@
     }
     
     ::-webkit-scrollbar-thumb {
+        width: 4px;
         background-clip: content-box;
         border-top: 80px solid transparent;
     }
@@ -125,6 +123,7 @@
         overflow-y: scroll;
         justify-content: flex-end;
         background: var(--secondary-background);
+        scrollbar-width: thin;
 
         .container {
             min-width: 218px;

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

@@ -467,28 +467,42 @@
 
 .languages {
     .list {
+        display: flex;
+        flex-direction: column;
         margin-bottom: 1em;
+        gap: 10px;
         
         .entry {
-            height: 50px;
+            display: flex;
+            height: 45px;
+            padding: 0 8px;
+            background: var(--tertiary-background);
+            border-radius: var(--border-radius);
+            margin-top: 0;
+
+            &:hover {
+                background: var(--secondary-background);
+            }
         }
 
         .entry > span > span {
-            gap: 20px;
+            gap: 12px;
             display: flex;
             align-items: center;
             flex-direction: row;
 
             .flag {
                 display: flex;
-                font-size: 2.625rem;
-                line-height: 48px;
 
                 > div {
                     display: flex;
                     align-items: center;
                     justify-content: center;
                 }
+
+                > img {
+                    height: 32px !important;
+                }
             }
 
             .description {