section sources by lang

webUI/react/src/components/ExtensionLangSelect.tsx

@@ -9,11 +9,12 @@ import DialogTitle from '@material-ui/core/DialogTitle';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogActions from '@material-ui/core/DialogActions';
 import Dialog from '@material-ui/core/Dialog';
-import Checkbox from '@material-ui/core/Checkbox';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import FormGroup from '@material-ui/core/FormGroup';
+import Switch from '@material-ui/core/Switch';
 import IconButton from '@material-ui/core/IconButton';
 import FilterListIcon from '@material-ui/icons/FilterList';
+import { List, ListItemSecondaryAction, ListItemText } from '@material-ui/core';
+import ListItem from '@material-ui/core/ListItem';
+import { langCodeToName } from '../util/language';
 
 const useStyles = makeStyles(() => createStyles({
     paper: {
@@ -72,21 +73,22 @@ export default function ExtensionLangSelect(props: IProps) {
                 open={open}
             >
                 <DialogTitle>Enabled Languages</DialogTitle>
-                <DialogContent dividers>
-                    <FormGroup>
+                <DialogContent dividers style={{ padding: 0 }}>
+                    <List>
                         {allLangs.map((lang) => (
-                            <FormControlLabel
-                                control={(
-                                    <Checkbox
+                            <ListItem key={lang}>
+                                <ListItemText primary={langCodeToName(lang)} />
+
+                                <ListItemSecondaryAction>
+                                    <Switch
                                         checked={mShownLangs.indexOf(lang) !== -1}
                                         onChange={(e) => handleChange(e, lang)}
-                                        color="default"
                                     />
-                                )}
-                                label={lang}
-                            />
+                                </ListItemSecondaryAction>
+
+                            </ListItem>
                         ))}
-                    </FormGroup>
+                    </List>
 
                 </DialogContent>
                 <DialogActions>

webUI/react/src/components/SourceCard.tsx

@@ -10,6 +10,7 @@ import Button from '@material-ui/core/Button';
 import Avatar from '@material-ui/core/Avatar';
 import Typography from '@material-ui/core/Typography';
 import useLocalStorage from '../util/useLocalStorage';
+import { langCodeToName } from '../util/language';
 
 const useStyles = makeStyles((theme) => ({
     root: {
@@ -67,7 +68,7 @@ export default function SourceCard(props: IProps) {
                             {name}
                         </Typography>
                         <Typography variant="caption" display="block" gutterBottom>
-                            {lang}
+                            {langCodeToName(lang)}
                         </Typography>
                     </div>
                 </div>