Add settings button to server list sidebar.

Move more border radiuses to variables.
2026-03-07 01:15:28 +00:00 · 2021-08-15 15:21:23 +01:00
parent ff9545ba2f
commit 8a104855a1
20 changed files with 54 additions and 52 deletions
--- a/src/components/common/IconBase.tsx
+++ b/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) =>
--- a/src/components/common/ServerIcon.tsx
+++ b/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";
--- a/src/components/common/messaging/bars/TypingIndicator.tsx
+++ b/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;
--- a/src/components/common/user/UserIcon.tsx
+++ b/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;
--- a/src/components/markdown/Markdown.module.scss
+++ b/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);
--- a/src/components/navigation/items/Item.module.scss
+++ b/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;
--- a/src/components/navigation/left/ServerListSidebar.tsx
+++ b/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>
    );
 });
--- a/src/components/ui/IconButton.tsx
+++ b/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 {
--- a/src/components/ui/Modal.tsx
+++ b/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"> & {
--- a/src/components/ui/Preloader.tsx
+++ b/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;
    }
--- a/src/components/ui/Radio.tsx
+++ b/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);
--- a/src/components/ui/fluent/CategoryButton.tsx
+++ b/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);