Add settings button to server list sidebar.

Move more border radiuses to variables.

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);