settings: update UI for General Settings

wrapped in a Card

Change-Id: I9b8038b0ca6b859808f946d33b14f422bcadc322

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>
   )
 }
 

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>

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>
   )

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',

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.",