From 6e2948f3eee42282570b6f2ad4da7f88fe9c8d70 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?L=C3=A9o?= <leopold.chappuis@savoirfairelinux.com>
Date: Thu, 13 Feb 2025 14:40:57 -0500
Subject: [PATCH] conversation-preferences: enhance UI
adjust width and align components
Change-Id: I0c5cfe46e9cf30125acfd32bf98c414d11c8052d
---
.../src/components/ConversationPreferences.tsx | 16 ++++++++++++----
1 file changed, 12 insertions(+), 4 deletions(-)
diff --git a/client/src/components/ConversationPreferences.tsx b/client/src/components/ConversationPreferences.tsx
index d1a904c7..362a7bbc 100644
--- a/client/src/components/ConversationPreferences.tsx
+++ b/client/src/components/ConversationPreferences.tsx
@@ -284,6 +284,7 @@ const Infos = () => {
justifyContent: 'center',
alignItems: 'center',
alignContent: 'center',
+ width: '100%',
}}
>
<SettingsItemWrapper title="Description">
@@ -292,7 +293,7 @@ const Infos = () => {
type="text"
disabled={!isAdmin}
onChange={onDescriptionChange}
- sx={{ maxWidth: '80%', textWrap: 'wrap' }}
+ sx={{ maxWidth: '80%', textWrap: 'wrap', marginTop: '-6px' }}
value={description}
onAbort={() => {
setDescription(conversationInfos.description || '')
@@ -312,7 +313,11 @@ const Infos = () => {
<Box>{conversationType}</Box>
</SettingsItemWrapper>
<SettingsItemWrapper title="Swarm ID">
- <Box maxWidth={isMedium ? '220px' : '180px'} marginLeft={'16px'}>
+ <Box
+ maxWidth={isMedium ? '220px' : '180px'}
+ sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-end' }}
+ marginRight="-15px"
+ >
<EllipsisMiddle text={conversationId} />
</Box>
</SettingsItemWrapper>
@@ -620,13 +625,15 @@ const Settings = () => {
sx={{
display: 'flex',
flexDirection: 'column',
- justifyContent: 'center',
alignItems: 'center',
alignContent: 'center',
+ width: '100%',
}}
>
<SettingsItemWrapper title={t('conversation_color')}>
- <ColorPicker conversationId={conversationId} />
+ <Box sx={{ marginRight: '13px' }}>
+ <ColorPicker conversationId={conversationId} />
+ </Box>
</SettingsItemWrapper>
<SettingsItemWrapper title={t('mute_conversation')}>
<Switch onChange={onConversationMuteChange} checked={ignoreNotifications} />
@@ -641,6 +648,7 @@ const Settings = () => {
display: 'flex',
justifyContent: 'space-evenly',
'&:hover': { backgroundColor: 'red' },
+ maxWidth: '200px',
}}
onClick={() => {
RemoveConversationDialogHandler.openDialog()
--
GitLab