Add appearance setting for rounded corners. Closes #2471

web/pages/admin/config/appearance/index.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, useEffect, useState } from 'react';
 
-import { Button, Col, Collapse, Row, Space } from 'antd';
+import { Button, Col, Collapse, Row, Slider, Space } from 'antd';
 import Paragraph from 'antd/lib/typography/Paragraph';
 import Title from 'antd/lib/typography/Title';
 import { EditCustomStyles } from '../../../../components/config/EditCustomStyles';
@@ -97,6 +97,8 @@ export default function Appearance() {
     { name: 'theme-color-components-scrollbar-thumb', description: 'Scrollbar Thumb' },
   ];
 
+  const others = [{ name: 'theme-rounded-corners', description: 'Corner radius' }];
+
   const [colors, setColors] = useState<Record<string, AppearanceVariable>>();
   const [submitStatus, setSubmitStatus] = useState<StatusState>(null);
 
@@ -109,12 +111,14 @@ export default function Appearance() {
 
   const setColorDefaults = () => {
     const c = {};
-    [...paletteVariables, ...componentColorVariables, ...chatColorVariables].forEach(color => {
-      const resolvedColor = getComputedStyle(document.documentElement).getPropertyValue(
-        `--${color.name}`,
-      );
-      c[color.name] = { value: resolvedColor.trim(), description: color.description };
-    });
+    [...paletteVariables, ...componentColorVariables, ...chatColorVariables, ...others].forEach(
+      color => {
+        const resolvedColor = getComputedStyle(document.documentElement).getPropertyValue(
+          `--${color.name}`,
+        );
+        c[color.name] = { value: resolvedColor.trim(), description: color.description };
+      },
+    );
     setColors(c);
   };
 
@@ -179,6 +183,12 @@ export default function Appearance() {
     return <div>Loading...</div>;
   }
 
+  const onBorderRadiusChange = (value: string) => {
+    const variableName = 'theme-rounded-corners';
+
+    updateColor(variableName, `${value.toString()}px`, '');
+  };
+
   return (
     <Space direction="vertical">
       <Title>Customize Appearance</Title>
@@ -239,6 +249,32 @@ export default function Appearance() {
               })}
             </Row>
           </Panel>
+          <Panel header={<Title level={3}>Other Settings</Title>} key="4">
+            How rounded should corners be?
+            <Row gutter={[16, 16]}>
+              <Col span={12}>
+                <Slider
+                  min={0}
+                  max={20}
+                  tooltip={{ formatter: null }}
+                  onChange={v => {
+                    onBorderRadiusChange(v);
+                  }}
+                  value={Number(colors['theme-rounded-corners']?.value?.replace('px', '') || 0)}
+                />
+              </Col>
+              <Col span={4}>
+                <div
+                  style={{
+                    width: '100px',
+                    height: '30px',
+                    borderRadius: `${colors['theme-rounded-corners']?.value}`,
+                    backgroundColor: 'var(--theme-color-palette-7)',
+                  }}
+                />
+              </Col>
+            </Row>
+          </Panel>
         </Collapse>
       </div>