Add settings button to server list sidebar.

Move more border radiuses to variables.

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;