Add settings button to server list sidebar.

Move more border radiuses to variables.

src/components/common/IconBase.tsx

@@ -26,7 +26,7 @@ export default styled.svg<IconModifiers>`
         ${(props) =>
             !props.square &&
             css`
-                border-radius: 50%;
+                border-radius: var(--border-radius-half);
             `}
     }
 
@@ -46,7 +46,7 @@ export const ImageIconBase = styled.img<IconModifiers>`
     ${(props) =>
         !props.square &&
         css`
-            border-radius: 50%;
+            border-radius: var(--border-radius-half);
         `}
 
     ${(props) =>

src/components/common/ServerIcon.tsx

@@ -16,10 +16,10 @@ const ServerText = styled.div`
     display: grid;
     padding: 0.2em;
     overflow: hidden;
-    border-radius: 50%;
     place-items: center;
     color: var(--foreground);
     background: var(--primary-background);
+    border-radius: var(--border-radius-half);
 `;
 
 // const fallback = "/assets/group.png";

src/components/common/messaging/bars/TypingIndicator.tsx

@@ -35,7 +35,7 @@ const Base = styled.div`
             width: 16px;
             height: 16px;
             object-fit: cover;
-            border-radius: 50%;
+            border-radius: var(--border-radius-half);
 
             &:not(:first-child) {
                 margin-left: -4px;

src/components/common/user/UserIcon.tsx

@@ -36,7 +36,7 @@ export function useStatusColour(user?: User) {
 const VoiceIndicator = styled.div<{ status: VoiceStatus }>`
     width: 10px;
     height: 10px;
-    border-radius: 50%;
+    border-radius: var(--border-radius-half);
 
     display: flex;
     align-items: center;

src/components/markdown/Markdown.module.scss

@@ -151,9 +151,9 @@
                 background: var(--accent);
 
                 font-size: 10px;
-                border-radius: 2px;
                 text-transform: uppercase;
                 box-shadow: 0 2px #787676;
+                border-radius: calc(var(--border-radius) / 3);
 
                 &:active {
                     transform: translateY(1px);

src/components/navigation/items/Item.module.scss

@@ -136,8 +136,8 @@
     height: 6px;
     margin: 9px;
     flex-shrink: 0;
-    border-radius: 50%;
     background: var(--foreground);
+    border-radius: var(--border-radius-half);
 
     display: grid;
     font-size: 10px;

src/components/navigation/left/ServerListSidebar.tsx

@@ -1,6 +1,7 @@
 import { Plus } from "@styled-icons/boxicons-regular";
+import { Cog } from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
-import { useHistory, useLocation, useParams } from "react-router-dom";
+import { Link, useHistory, useLocation, useParams } from "react-router-dom";
 import { RelationshipStatus } from "revolt-api/types/Users";
 import styled, { css } from "styled-components";
 
@@ -75,7 +76,6 @@ const ServerList = styled.div`
     display: flex;
     overflow-y: scroll;
     padding-bottom: 20px;
-    /*width: 58px;*/
     flex-direction: column;
 
     scrollbar-width: none;
@@ -87,11 +87,6 @@ const ServerList = styled.div`
     &::-webkit-scrollbar {
         width: 0px;
     }
-
-    /*${isTouchscreenDevice &&
-    css`
-        width: 58px;
-    `}*/
 `;
 
 const ServerEntry = styled.div<{ active: boolean; home?: boolean }>`
@@ -139,7 +134,6 @@ const ServerEntry = styled.div<{ active: boolean; home?: boolean }>`
         svg {
             margin-top: 5px;
             pointer-events: none;
-            // outline: 1px solid red;
         }
     }
 
@@ -150,6 +144,13 @@ const ServerEntry = styled.div<{ active: boolean; home?: boolean }>`
         `}
 `;
 
+const SettingsButton = styled.div`
+    width: 50px;
+    height: 56px;
+    display: grid;
+    place-items: center;
+`;
+
 function Swoosh() {
     return (
         <span>
@@ -314,17 +315,17 @@ 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>
+            {!isTouchscreenDevice && (
+                <SettingsButton>
+                    <Link to="/settings">
+                        <IconButton>
+                            <Cog size={32} strokeWidth="0.5" />
+                        </IconButton>
+                    </Link>
+                </SettingsButton>
+            )}
         </ServersBase>
     );
 });

src/components/ui/IconButton.tsx

@@ -13,11 +13,11 @@ export default styled.div<Props>`
     display: grid;
     cursor: pointer;
     place-items: center;
-    transition: 0.1s ease background-color;
+
+    transition: 0.1s ease all;
 
     fill: ${normal};
     color: ${normal};
-    /*stroke: ${normal};*/
 
     a {
         color: ${normal};
@@ -30,7 +30,6 @@ export default styled.div<Props>`
     &:hover {
         fill: ${hover};
         color: ${hover};
-        /*stroke: ${hover};*/
 
         a {
             color: ${hover};
@@ -41,7 +40,7 @@ export default styled.div<Props>`
         props.type === "circle" &&
         css`
             padding: 4px;
-            border-radius: 50%;
+            border-radius: var(--border-radius-half);
             background-color: var(--secondary-header);
 
             &:hover {

src/components/ui/Modal.tsx

@@ -117,8 +117,8 @@ const ModalActions = styled.div`
     flex-direction: row-reverse;
 
     padding: 1em 1.5em;
-    border-radius: 0 0 8px 8px;
     background: var(--secondary-background);
+    border-radius: 0 0 var(--border-radius) var(--border-radius);
 `;
 
 export type Action = Omit<ButtonProps, "onClick"> & {

src/components/ui/Preloader.tsx

@@ -66,9 +66,9 @@ const PreloaderBase = styled.div`
         height: 32px;
         display: block;
         position: absolute;
-        border-radius: 50%;
         box-sizing: border-box;
         border: 2px solid #fff;
+        border-radius: var(--border-radius-half);
         animation: ${prRing} 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
         border-color: #fff transparent transparent transparent;
     }

src/components/ui/Radio.tsx

@@ -43,9 +43,9 @@ const RadioBase = styled.label<BaseProps>`
         width: 24px;
         height: 24px;
         display: grid;
-        border-radius: 50%;
         place-items: center;
         background: var(--foreground);
+        border-radius: var(--border-radius-half);
 
         svg {
             color: var(--foreground);

src/components/ui/fluent/CategoryButton.tsx

@@ -13,7 +13,7 @@ interface BaseProps {
 const CategoryBase = styled.div<BaseProps>`
     /*height: 54px;*/
     padding: 9.8px 12px;
-    border-radius: 6px;
+    border-radius: var(--border-radius);
     margin-bottom: 10px;
     color: var(--foreground);
     background: var(--secondary-header);

src/context/intermediate/popovers/UserProfile.module.scss

@@ -88,7 +88,7 @@
     overflow-y: auto;
     flex-direction: column;
     background: var(--primary-background);
-    border-radius: 0 0 2px 2px;
+    border-radius: 0 0 var(--border-radius) var(--border-radius);
 
     .empty {
         display: flex;
@@ -157,7 +157,7 @@
     img {
         width: 32px;
         height: 32px;
-        border-radius: 50%;
+        border-radius: var(--border-radius-half);
     }
 
     span {

src/context/revoltjs/FileUploads.module.scss

@@ -4,7 +4,7 @@
 
     &.icon {
         .image {
-            border-radius: 50%;
+            border-radius: var(--border-radius-half);
         }
     }
 
@@ -50,7 +50,7 @@
             color: white;
             place-items: center;
             background: rgba(95, 95, 95, 0.5);
-            transition: .2s ease-in-out opacity;
+            transition: 0.2s ease-in-out opacity;
         }
     }
 
@@ -75,7 +75,8 @@
     }
 
     &[data-uploading="true"] {
-        .image, .modify:first-child {
+        .image,
+        .modify:first-child {
             cursor: not-allowed !important;
         }
     }

src/pages/channels/ChannelHeader.tsx

@@ -46,9 +46,9 @@ const Info = styled.div`
     .status {
         width: 10px;
         height: 10px;
-        border-radius: 50%;
         display: inline-block;
         margin-inline-end: 6px;
+        border-radius: var(--border-radius-half);
     }
 
     .desc {

src/pages/friends/Friend.module.scss

@@ -147,7 +147,6 @@
             align-items: center;
             min-width: 0;
 
-            
             .title {
                 text-overflow: ellipsis;
                 overflow: hidden;
@@ -157,14 +156,14 @@
             span {
                 width: 1.5em;
                 height: 1.5em;
-                font-size: 12px;
                 color: white;
-                border-radius: 50%;
+                flex-shrink: 0;
+                font-size: 12px;
                 align-items: center;
                 display: inline-flex;
                 justify-content: center;
                 background: var(--error);
-                flex-shrink: 0;
+                border-radius: var(--border-radius-half);
             }
         }
 

src/pages/settings/Settings.module.scss

@@ -252,7 +252,7 @@
             display: flex;
             align-items: center;
             justify-content: center;
-            border-radius: 50%;
+            border-radius: var(--border-radius-half);
             height: 40px;
             width: 40px;
             border: 3px solid var(--tertiary-background);

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

@@ -72,7 +72,7 @@
             align-items: center;
             flex-direction: row;
             background: var(--secondary-header);
-            border-radius: 6px;
+            border-radius: var(--border-radius);
 
             > svg {
                 flex-shrink: 0;

src/styles/_context-menu.scss

@@ -3,20 +3,21 @@
     min-width: 190px;
     padding: 6px 8px;
     user-select: none;
-    font-size: .875rem;
+    font-size: 0.875rem;
     color: var(--secondary-foreground);
     border-radius: var(--border-radius);
     background: var(--primary-background) !important;
     box-shadow: 0px 0px 8px 8px rgba(0, 0, 0, 0.05);
 
-    > span, .main > span {
+    > span,
+    .main > span {
         gap: 6px;
         margin: 2px 0;
         display: flex;
         padding: 6px 8px;
-        border-radius: 3px;
         align-items: center;
         white-space: nowrap;
+        border-radius: calc(var(--border-radius) / 2);
 
         &:not([data-disabled="true"]) {
             cursor: pointer;
@@ -28,7 +29,7 @@
 
         .tip {
             flex-grow: 1;
-            font-size: .650rem;
+            font-size: 0.65rem;
             text-align: right;
             color: var(--tertiary-foreground);
         }
@@ -60,7 +61,7 @@
         .status {
             cursor: pointer;
             max-width: 132px;
-            font-size: .625rem;
+            font-size: 0.625rem;
             color: var(--secondary-foreground);
 
             text-overflow: ellipsis;
@@ -72,7 +73,7 @@
     .indicator {
         width: 8px;
         height: 8px;
-        border-radius: 50%;
+        border-radius: var(--border-radius-half);
 
         &.online {
             background: var(--status-online);

src/styles/_variables.scss

@@ -20,6 +20,7 @@
      */
     --app-height: 100vh;
     --border-radius: 6px;
+    --border-radius-half: 0;
 
     --input-border-width: 2px;
     --textarea-padding: 16px;