From 2309ed6acc26df93a6282db8008c29486b8d40a0 Mon Sep 17 00:00:00 2001
From: Philippe Larose <philippe.larose@savoirfairelinux.com>
Date: Tue, 9 Jul 2024 14:05:00 -0400
Subject: [PATCH] jams-react-client: fix UI issues
UserProfileFieldsList component: max-width: 50%; should be removed on info fields
Contact:
ConversationId icon should be outlined
Building should be a suitcase for company name
UiCustomization
Separate with a line with margin top and bottom 3 sections: title/description, background and logo
Show color picker directly instead of a button that then displays a color picker
Fix customization overflowing on mobile
Put action back in the right column table
Ticket: https://redmine.savoirfairelinux.com/issues/7465
Change-Id: I07d5ea053faaabc8dc6847726a8b9fb3ba11b27c
---
.../CustomUiPreview/CustomUiPreview.tsx | 16 +---------------
.../components/CustomUiPreview/JamiIdCard.tsx | 1 -
.../src/components/CustomUiPreview/TipBox.tsx | 1 +
.../views/Blueprint/EditBlueprintPermissions.tsx | 3 +++
.../src/views/Blueprint/EditBlueprintUiForm.tsx | 6 +++++-
.../src/views/Contacts/Contacts.tsx | 12 +++++++-----
jams-react-client/src/views/Groups/EditGroup.tsx | 3 +++
.../views/UserProfile/AdminAddUserToGroup.tsx | 3 +++
.../src/views/UserProfile/DisplayUserProfile.tsx | 1 +
.../views/UserProfile/UserProfileFieldsList.tsx | 2 +-
10 files changed, 25 insertions(+), 23 deletions(-)
diff --git a/jams-react-client/src/components/CustomUiPreview/CustomUiPreview.tsx b/jams-react-client/src/components/CustomUiPreview/CustomUiPreview.tsx
index 6595865a..ff9cde2d 100644
--- a/jams-react-client/src/components/CustomUiPreview/CustomUiPreview.tsx
+++ b/jams-react-client/src/components/CustomUiPreview/CustomUiPreview.tsx
@@ -44,33 +44,22 @@ const styles = {
zIndex: (props: CustomUiPreviewProps) => (props.isOldPreview ? "1" : "2"),
},
previewWindow: {
- position: "absolute",
left: "50%",
top: "50%",
- transform: "translate(-50%, -50%)",
width: "100%",
height: "350px",
borderRadius: "5px",
backgroundColor: "white",
- display: "flex",
boxShadow: "0px 3px 6px #0000005C",
},
- sidebar: {
- minWidth: "100px",
- width: "100px",
- height: "100%",
- backgroundColor: "#f4f4f4",
- borderRadius: "5px 0px 0px 5px",
- },
welcomeScreen: {
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
flex: 1,
-
- padding: "2rem",
+ height: "100%",
borderRadius: "0px 5px 5px 0px",
backgroundColor: (props: UiCustomization) => props.backgroundColor,
@@ -81,7 +70,6 @@ const styles = {
mainContent: {
display: "flex",
flexDirection: "column",
- width: "400px",
// height: "100px",
justifyContent: "center",
alignItems: "center",
@@ -116,7 +104,6 @@ const styles = {
tipRow: {
display: "flex",
justifyContent: "space-between",
- width: "400px",
marginTop: "0.5rem",
},
};
@@ -203,7 +190,6 @@ export const CustomUiPreview: FC<CustomUiPreviewProps> = ({
return (
<div className={classes.root}>
<div className={classes.previewWindow}>
- <div className={classes.sidebar}></div>
<div className={classes.welcomeScreen}>
<div className={classes.mainContent}>
{hasLogo ? (
diff --git a/jams-react-client/src/components/CustomUiPreview/JamiIdCard.tsx b/jams-react-client/src/components/CustomUiPreview/JamiIdCard.tsx
index ea97baac..45607b59 100644
--- a/jams-react-client/src/components/CustomUiPreview/JamiIdCard.tsx
+++ b/jams-react-client/src/components/CustomUiPreview/JamiIdCard.tsx
@@ -31,7 +31,6 @@ const styles = {
alignItems: "center",
justifyContent: "center",
position: "relative",
- width: "150px",
height: "20px",
borderRadius: "5px",
},
diff --git a/jams-react-client/src/components/CustomUiPreview/TipBox.tsx b/jams-react-client/src/components/CustomUiPreview/TipBox.tsx
index d8f47535..6131e848 100644
--- a/jams-react-client/src/components/CustomUiPreview/TipBox.tsx
+++ b/jams-react-client/src/components/CustomUiPreview/TipBox.tsx
@@ -24,6 +24,7 @@ import { luma } from "./luma";
const styles = {
root: {
maxWidth: "115px",
+ margin: "5px",
flexBasis: "100%",
backgroundColor: (props: { color: string; fontColor: string }) =>
props.color,
diff --git a/jams-react-client/src/views/Blueprint/EditBlueprintPermissions.tsx b/jams-react-client/src/views/Blueprint/EditBlueprintPermissions.tsx
index eea2bc97..8ac66cd2 100644
--- a/jams-react-client/src/views/Blueprint/EditBlueprintPermissions.tsx
+++ b/jams-react-client/src/views/Blueprint/EditBlueprintPermissions.tsx
@@ -465,6 +465,9 @@ export default function EditBlueprintPermissions(
<TableCell align="left">
{i18next.t("last_name", "Last name") as string}
</TableCell>
+ <TableCell align="right">
+ {i18next.t("action", "Action") as string}
+ </TableCell>
</TableRow>
</TableHead>
<TableBody>
diff --git a/jams-react-client/src/views/Blueprint/EditBlueprintUiForm.tsx b/jams-react-client/src/views/Blueprint/EditBlueprintUiForm.tsx
index 17aaf62a..3ec677b8 100644
--- a/jams-react-client/src/views/Blueprint/EditBlueprintUiForm.tsx
+++ b/jams-react-client/src/views/Blueprint/EditBlueprintUiForm.tsx
@@ -20,7 +20,7 @@ import Checkbox from "@mui/material/Checkbox";
import Switch from "@mui/material/Switch";
import FormGroup from "@mui/material/FormGroup";
import FormControlLabel from "@mui/material/FormControlLabel";
-import { Box, Button, Slider, TextField } from "@mui/material";
+import { Box, Button, Divider, Slider, TextField } from "@mui/material";
import Typography from "@mui/material/Typography";
import CustomImgDropZone from "components/CustomImgDropZone/CustomImgDropZone";
@@ -592,6 +592,8 @@ const EditBlueprintUiForm: React.FC<EditBlueprintUiFormProps> = ({
handleUpdateUi={handleUpdateUi}
/>
+ <Divider style={{ margin: "10px 0" }} />
+
<HasBackgroundCustomForm
uiCustomization={uiCustomization}
handleUpdateUi={handleUpdateUi}
@@ -615,6 +617,8 @@ const EditBlueprintUiForm: React.FC<EditBlueprintUiFormProps> = ({
handleUpdateUi={handleUpdateUi}
/>
+ <Divider style={{ margin: "10px 0" }} />
+
<HasLogoForm
uiCustomization={uiCustomization}
handleUpdateUi={handleUpdateUi}
diff --git a/jams-react-client/src/views/Contacts/Contacts.tsx b/jams-react-client/src/views/Contacts/Contacts.tsx
index 0e7bcd7f..965cd5a4 100644
--- a/jams-react-client/src/views/Contacts/Contacts.tsx
+++ b/jams-react-client/src/views/Contacts/Contacts.tsx
@@ -29,8 +29,6 @@ import CardAvatar from "components/Card/CardAvatar";
import CardBody from "components/Card/CardBody";
import CardFooter from "components/Card/CardFooter";
-import BusinessOutlinedIcon from "@mui/icons-material/BusinessOutlined";
-import QuestionAnswerIcon from "@mui/icons-material/QuestionAnswer";
import SmsFailedIcon from "@mui/icons-material/SmsFailed";
import LaunchIcon from "@mui/icons-material/Launch";
@@ -66,7 +64,11 @@ import DialogTitle from "@mui/material/DialogTitle";
import i18next from "i18next";
import { Contact, ServerContact } from "../../types/Contact";
import { UserProfile } from "views/UserProfile/DisplayUserProfile";
-import { InfoOutlined } from "@mui/icons-material";
+import {
+ BusinessCenterOutlined,
+ InfoOutlined,
+ QuestionAnswerOutlined,
+} from "@mui/icons-material";
const styles = {
...headerLinksStyle,
@@ -518,7 +520,7 @@ export default function Users(props: UsersProps) {
</li>
<li style={{ display: "block" }}>
{contact.organization && (
- <BusinessOutlinedIcon
+ <BusinessCenterOutlined
fontSize="small"
style={{ marginRight: "10px" }}
/>
@@ -532,7 +534,7 @@ export default function Users(props: UsersProps) {
style={{ marginRight: "10px" }}
></SmsFailedIcon>
) : (
- <QuestionAnswerIcon
+ <QuestionAnswerOutlined
fontSize="small"
style={{ marginRight: "10px" }}
/>
diff --git a/jams-react-client/src/views/Groups/EditGroup.tsx b/jams-react-client/src/views/Groups/EditGroup.tsx
index 8ce674b6..8ef7234f 100644
--- a/jams-react-client/src/views/Groups/EditGroup.tsx
+++ b/jams-react-client/src/views/Groups/EditGroup.tsx
@@ -514,6 +514,9 @@ export default function EditGroup(props: EditGroupProps) {
<TableCell align="left">
{i18next.t("last_name", "Last name") as string}
</TableCell>
+ <TableCell align="right">
+ {i18next.t("action", "Action") as string}
+ </TableCell>
</TableRow>
</TableHead>
<TableBody>
diff --git a/jams-react-client/src/views/UserProfile/AdminAddUserToGroup.tsx b/jams-react-client/src/views/UserProfile/AdminAddUserToGroup.tsx
index c9c3d016..d0aeaf82 100644
--- a/jams-react-client/src/views/UserProfile/AdminAddUserToGroup.tsx
+++ b/jams-react-client/src/views/UserProfile/AdminAddUserToGroup.tsx
@@ -153,6 +153,9 @@ const AdminAddUserToGroup: FC<AdminAddUserToGroupProps> = ({
<TableCell align="left">
{i18next.t("group_name", "Group name") as string}
</TableCell>
+ <TableCell align="right">
+ {i18next.t("action", "Action") as string}
+ </TableCell>
</TableRow>
</TableHead>
<TableBody>
diff --git a/jams-react-client/src/views/UserProfile/DisplayUserProfile.tsx b/jams-react-client/src/views/UserProfile/DisplayUserProfile.tsx
index e1a1694f..b15ffee3 100644
--- a/jams-react-client/src/views/UserProfile/DisplayUserProfile.tsx
+++ b/jams-react-client/src/views/UserProfile/DisplayUserProfile.tsx
@@ -127,6 +127,7 @@ const styles = (theme: Theme) => ({
display: "flex",
flexDirection: "row",
alignItems: "end",
+ width: "100%",
"& button": {
marginRight: "1rem",
},
diff --git a/jams-react-client/src/views/UserProfile/UserProfileFieldsList.tsx b/jams-react-client/src/views/UserProfile/UserProfileFieldsList.tsx
index 0df0f7c6..70e10ff0 100644
--- a/jams-react-client/src/views/UserProfile/UserProfileFieldsList.tsx
+++ b/jams-react-client/src/views/UserProfile/UserProfileFieldsList.tsx
@@ -41,7 +41,7 @@ interface UserProfileFieldsListProps {
const UserProfileFieldsList: FC<UserProfileFieldsListProps> = ({ user }) => {
return (
- <Grid item xs={12} sm={12} md={6}>
+ <Grid item xs={12}>
<List dense={false}>
{(user.firstName || user.lastName) && (
<ListItem>
--
GitLab