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;