manual improvement 2 & add telegram bot

client/src/components/settings/ThemeModeSetting.tsx

@@ -57,7 +57,22 @@ const ThemeModeSetting: FunctionComponent = () => {
           if (next) setMode(next);
         }}
         aria-label={t('appearance')}
-        sx={{ '& .MuiToggleButton-root': { gap: 0.75, paddingBlock: 0.75, borderRadius: 'var(--bal-radius-sm)' } }}
+        sx={{
+          gap: 1,
+          // Each segment is already individually rounded, so MUI's default treatment — segments
+          // butted edge to edge with the shared border collapsed via a negative inline margin — put
+          // two rounded corners flush against each other with no separation at all. Spacing them
+          // makes each one read as its own choice; the negative margin has to be undone explicitly,
+          // otherwise the gap is eaten by it.
+          '& .MuiToggleButtonGroup-grouped': {
+            marginInlineStart: 0,
+            gap: 0.75,
+            paddingBlock: 0.75,
+            border: '1px solid',
+            borderColor: 'divider',
+            borderRadius: 'var(--bal-radius-sm)',
+          },
+        }}
       >
         {MODES.map((option) => (
           <ToggleButton key={option.mode} value={option.mode}>