Change the selected button to a slider

client/src/components/popup/preferences.tsx

@@ -2,6 +2,8 @@ import * as React from 'react'
 import { Input, Typography } from '@mui/material'
 import Markdown from '../markdown'
 import { Switch, Button, ButtonGroup } from '@mui/material';
+import Box from '@mui/material/Box';
+import Slider from '@mui/material/Slider';
 
 import FormControlLabel from '@mui/material/FormControlLabel';
 
@@ -12,6 +14,29 @@ interface PreferencesPopupProps extends IPreferencesContext{
 }
 
 export function PreferencesPopup({ layout, setLayout, isSavePreferences, setIsSavePreferences, handleClose }: PreferencesPopupProps) {
+
+    const marks = [
+        {
+            value: 0,
+            label: 'Mobile',
+            key: "mobile"
+        },
+        {
+            value: 1,
+            label: 'Auto',
+            key: "auto"
+        },
+        {
+            value: 2,
+            label: 'Desktop',
+            key: "desktop"
+        },
+    ];
+
+    const handlerChangeLayout = (_: Event, value: number) => {
+        setLayout(marks[value].key as IPreferencesContext["layout"])
+    }
+
     return <div className="modal-wrapper">
         <div className="modal-backdrop" onClick={handleClose} />
         <div className="modal">
@@ -24,11 +49,19 @@ export function PreferencesPopup({ layout, setLayout, isSavePreferences, setIsSa
                     <div className='preferences-item first leave-left-gap'>
                         <FormControlLabel
                             control={
-                                <ButtonGroup aria-label="outlined primary button group">
+                                <Box sx={{ width: 300 }}>
-                                    <Button onClick={() => setLayout("mobile")} variant={layout === "mobile" ? "contained" : "outlined"}>Mobile</Button>
+                                    <Slider
-                                    <Button onClick={() => setLayout("auto")} variant={layout === "auto" ? "contained" : "outlined"}>Auto</Button>
+                                        aria-label="Always visible"
-                                    <Button onClick={() => setLayout("desktop")} variant={layout === "desktop" ? "contained" : "outlined"}>Desktop</Button>
+                                        value={marks.find(item => item.key === layout).value}
-                                </ButtonGroup>
+                                        step={1}
+                                        marks={marks}
+                                        max={2}
+                                        sx={{
+                                            '& .MuiSlider-track': { display: 'none', },
+                                        }}
+                                        onChange={handlerChangeLayout}
+                                    />
+                                </Box>
                             }
                             label=""
                         />

client/src/css/welcome.css

@@ -197,5 +197,5 @@ h5, h6 {
 }
 
 .preferences-item.leave-left-gap{
-  margin-left: 1em;
+  margin-left: 3em;
 }