From b9a7baea7c528f69d67d68f640cefb062d46d651 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?L=C3=A9o?= <leopold.chappuis@savoirfairelinux.com>
Date: Tue, 11 Feb 2025 15:01:12 -0500
Subject: [PATCH] settings: update UI for General Settings
wrapped in a Card
Change-Id: I9b8038b0ca6b859808f946d33b14f422bcadc322
---
client/src/components/GeneralSettings/System.tsx | 9 ++++-----
client/src/components/LayoutSettings.tsx | 15 ++++++++++++---
client/src/components/Settings.tsx | 7 ++++++-
client/src/themes/Default.ts | 3 +++
server/locale/en/translation.json | 1 +
5 files changed, 26 insertions(+), 9 deletions(-)
diff --git a/client/src/components/GeneralSettings/System.tsx b/client/src/components/GeneralSettings/System.tsx
index 994c558c..81f300a8 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 a44550f5..7dbe9847 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 0f45fcec..36eb1bba 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 4fb272f7..ad138780 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 99674004..acfc626c 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.",
--
GitLab