diff --git a/client/src/components/GeneralSettings/System.tsx b/client/src/components/GeneralSettings/System.tsx index 994c558c36891a0f3e559fce5603b499beafd5f8..81f300a88cd5a758a96b30e3300c433fabfae7ec 100644 --- a/client/src/components/GeneralSettings/System.tsx +++ b/client/src/components/GeneralSettings/System.tsx @@ -15,9 +15,10 @@ * License along with this program. If not, see * <https://www.gnu.org/licenses/>. */ -import { Box, Stack, useMediaQuery, useTheme } from '@mui/material' +import { Box, Stack } from '@mui/material' import { useTranslation } from 'react-i18next' +import LayoutSettings from '../LayoutSettings' import { SettingsGroup } from '../Settings' import SettingLanguage from './SettingLanguage' import SettingLinkPreview from './SettingLinkPreview' @@ -27,14 +28,12 @@ import SettingTips from './SettingTips' function System() { const { t } = useTranslation() - const theme = useTheme() - const isMobile: boolean = useMediaQuery(theme.breakpoints.only('xs')) const marginValue = '10px' const style = { mt: marginValue, mb: marginValue } return ( - <Box sx={{ display: 'flex', justifyContent: isMobile ? 'center' : 'flex-start', padding: '2%' }}> + <LayoutSettings title={t('general_settings')} disableMarginTop={true}> <Stack sx={{ padding: '3%', @@ -59,7 +58,7 @@ function System() { </Box> </SettingsGroup> </Stack> - </Box> + </LayoutSettings> ) } diff --git a/client/src/components/LayoutSettings.tsx b/client/src/components/LayoutSettings.tsx index a44550f56bcd9fa43e0665974f9f18f39506c3b7..7dbe9847409229c5796cec59ca4d88f3747c164d 100644 --- a/client/src/components/LayoutSettings.tsx +++ b/client/src/components/LayoutSettings.tsx @@ -22,9 +22,10 @@ interface LayoutSettingsProps { children: React.ReactNode title: string text?: string + disableMarginTop?: boolean } -export default function LayoutSettings({ children, title, text }: LayoutSettingsProps) { +export default function LayoutSettings({ children, title, text, disableMarginTop }: LayoutSettingsProps) { const theme = useTheme() const isMobile = useMediaQuery(theme.breakpoints.down('sm')) @@ -45,17 +46,25 @@ export default function LayoutSettings({ children, title, text }: LayoutSettings padding: '20px', boxShadow: isMobile ? 'none' : undefined, border: isMobile ? 'none' : undefined, + backgroundColor: isMobile ? theme.ChatInterface.backgroundColor : 'unset', }} > <CardHeader title={<Typography variant="h5">{title}</Typography>} subheader={ - <Box sx={{ mt: '40px' }}> + <Box sx={{ mt: disableMarginTop ? '0px' : '40px' }}> <Typography variant="body2">{text}</Typography> </Box> } /> - <Box sx={{ marginTop: '50px', maxWidth: '100%', display: 'flex', justifyContent: 'center' }}> + <Box + sx={{ + marginTop: disableMarginTop ? '0px' : '50px', + maxWidth: '100%', + display: 'flex', + justifyContent: 'center', + }} + > <Box sx={{ maxWidth: '90%' }}>{children}</Box> </Box> </Card> diff --git a/client/src/components/Settings.tsx b/client/src/components/Settings.tsx index 0f45fcece77dcbf12267b72ff8734cb679a6013e..36eb1bbadce323a4c835ad34737a63bbb92fe28d 100644 --- a/client/src/components/Settings.tsx +++ b/client/src/components/Settings.tsx @@ -90,7 +90,12 @@ interface SettingGroupProps { export const SettingsGroup = ({ label, children }: SettingGroupProps) => { return ( - <List sx={{ width: '250px' }} subheader={<ListSubheader sx={{ paddingLeft: 0 }}>{label}</ListSubheader>}> + <List + sx={{ minWidth: '250px' }} + subheader={ + <ListSubheader sx={{ paddingLeft: 0, backgroundColor: 'inherit', fontSize: '18px' }}>{label}</ListSubheader> + } + > {children} </List> ) diff --git a/client/src/themes/Default.ts b/client/src/themes/Default.ts index 4fb272f746594cd422e38cc0d805a0e7a46b2367..ad1387806fac77731d291335f2a6b96d36e52d9d 100644 --- a/client/src/themes/Default.ts +++ b/client/src/themes/Default.ts @@ -32,6 +32,7 @@ declare module '@mui/material/styles' { replyBorderColor: string messageReplyColor: string reactionModalBackground: string + backgroundColor: string } LoginPage: { backgroundColor: string @@ -254,6 +255,7 @@ const palettes = { replyBorderColor: '2px solid white', messageReplyColor: '#D3D3D3', reactionModalBackground: 'lightgrey', + backgroundColor: 'white', }, LoginPage: { backgroundColor: '#f9fafc', @@ -356,6 +358,7 @@ const palettes = { replyBorderColor: '3px solid #121212', messageReplyColor: '#404040', reactionModalBackground: '#1e1f1e', + backgroundColor: '#050505', }, LoginPage: { backgroundColor: '#f9fafc', diff --git a/server/locale/en/translation.json b/server/locale/en/translation.json index 99674004a3671612ce85d85277d21b370f0a9b54..acfc626c2247128fb12650e0c92dbb0150295c59 100644 --- a/server/locale/en/translation.json +++ b/server/locale/en/translation.json @@ -136,6 +136,7 @@ "file_not_downloaded": "File not downloaded on the server, please download the file before sharing.", "find_contacts": "Find contacts", "find_users_and_conversations": "Search…", + "general_settings": "General", "go_to_conversation": "Jump to conversation", "getting_name_server_error": "An error occurred while attempting to retrieve the name server.", "getting_oauth_clients_error": "An error occurred while attempting to retrieve the OAuth clients.",