jams-react-client: adjust preview

Change-Id: Ib25ffa760b2f73edd6e1ddc979bfe62966d5de3d

README.md

@@ -77,7 +77,8 @@ The following commands will generate the userguide and the jars needed:
 ```
 docker build -f Dockerfile -t jams:latest --target prod .
 docker run -v $(pwd)/jams:/jams --rm jams:latest
-sudo chown -R $(whoami) jams
+USER=$(whoami)
+sudo chown -R $USER jams
 cd jams
 java -jar jams-launcher.jar
 ```

jams-react-client/public/locales/en/translation.json

@@ -260,7 +260,7 @@
     "welcome_has_description": "Description",
     "welcome_Description": "Here is your Jami identifier, don't hesitate to share it in order to be contacted more easily!",
     "welcome_has_Tips": "Enable Tips display",
-    "instruction_title": "Use Jami title or personalize it (max 20 characters)",
+    "instruction_title": "Use Jami title or personalize it (max 30 characters)",
     "instruction_description": "Use Jami description or personalize it (max 100 characters)",
     "welcome_has_BackgroundCustom": "Background",
     "instruction_background": "Choose a background color or a background image",

jams-react-client/src/components/CustomImgDropZone/CustomImgDropZone.js

@@ -73,7 +73,7 @@ function CustomImgDropZone(props) {
 }
 
 CustomImgDropZone.defaultProps = {
-  accept: { "image/*": [".png", ".jpeg", ".jpg"] },
+  accept: { "image/*": [".png", ".jpeg", ".jpg", ".svg"] },
   maxFiles: 1,
 };
 

jams-react-client/src/components/CustomUiPreview/CustomUiPreview.js

@@ -2,7 +2,6 @@ import React from "react";
 
 import { makeStyles } from "@material-ui/core/styles";
 
-import customUiBackgroundImage from "assets/img/CustomUiBg.jpg";
 import logoImage from "assets/img/logo-jami-net.svg";
 
 import TipBox from "./TipBox";
@@ -12,10 +11,7 @@ import { url_path } from "../../globalUrls";
 import { url_port } from "../../globalUrls";
 
 const styles = {
-  backgroundImage: {
-    backgroundImage: `url(${customUiBackgroundImage})`,
-    backgroundSize: "cover",
-    backgroundPosition: "center",
+  root: {
     height: "250px",
     position: (props) => (props.isOldPreview ? "relative" : "absolute"),
     left: 0,
@@ -30,8 +26,8 @@ const styles = {
     left: "50%",
     top: "50%",
     transform: "translate(-50%, -50%)",
-    width: "80%",
-    height: "200px",
+    width: "100%",
+    height: "250px",
 
     borderRadius: "5px",
     backgroundColor: "white",
@@ -57,10 +53,12 @@ const styles = {
     display: "flex",
     flexDirection: "column",
     justifyContent: "center",
+    alignItems: "center",
   },
   welcomeRow: {
     display: "flex",
     flexDirection: (props) => (props.isCompactDisplay ? "column" : "row"),
+    width: "400px",
     height: "100px",
     justifyContent: "center",
     alignItems: "center",
@@ -81,13 +79,16 @@ const styles = {
   title: {
     margin: 0,
     fontWeight: 500,
+    fontSize: "10px",
   },
   description: {
-    fontSize: "5px",
+    fontSize: "8px",
   },
   tipRow: {
     display: "flex",
-    justifyContent: "center",
+    justifyContent: "space-between",
+    width: "400px",
+    marginTop: "0.5rem",
   },
 };
 
@@ -156,7 +157,7 @@ export default function CustomUiPreview({
   const tip3 = i18next.t("preview_tip3", "How to set shortcuts?");
 
   return (
-    <div className={classes.backgroundImage}>
+    <div className={classes.root}>
       <div className={classes.previewWindow}>
         <div className={classes.sidebar}></div>
         <div className={classes.mainContent}>

jams-react-client/src/components/CustomUiPreview/JamiIdCard.js

@@ -11,8 +11,8 @@ import { infoColor } from "assets/jss/material-dashboard-react";
 const styles = {
   root: {
     backgroundColor: (props) => (props.isCompactDisplay ? "#f4f4f4" : "white"),
-    maxWidth: (props) => (props.isCompactDisplay ? "100%" : "110px"),
-    width: (props) => (props.isCompactDisplay ? "100%" : "110px"),
+    maxWidth: (props) => (props.isCompactDisplay ? "100%" : "150px"),
+    width: (props) => (props.isCompactDisplay ? "100%" : "150px"),
     height: (props) => (props.isCompactDisplay ? "20px" : "40px"),
     position: "relative",
     borderRadius: "9px",

jams-react-client/src/components/CustomUiPreview/TipBox.js

@@ -5,12 +5,10 @@ import tipLightBulbImage from "assets/img/tip_light_bulb.svg";
 
 const styles = {
   root: {
-    width: "80px",
-    maxWidth: "80px",
+    maxWidth: "115px",
     flexBasis: "100%",
     backgroundColor: "#f4f4f4",
     padding: "0px 5px 5px 5px",
-    margin: "2px",
     borderRadius: "10px",
   },
   img: {
@@ -18,11 +16,11 @@ const styles = {
   },
   title: {
     verticalAlign: "middle",
-    fontSize: 6,
+    fontSize: "8px",
     marginLeft: "0.5rem",
   },
   text: {
-    fontSize: 5,
+    fontSize: "6px",
     margin: 0,
   },
 };

jams-react-client/src/views/Blueprint/EditBlueprintUiForm.js

@@ -88,7 +88,7 @@ const TitleForm = ({ uiCustomization, handleUpdateUi }) => {
       <span>
         {i18next.t(
           "instruction_title",
-          "Use Jami title or personalize it (max 20 characters)"
+          "Use Jami title or personalize it (max 30 characters)"
         )}
       </span>
       <TextField
@@ -99,7 +99,7 @@ const TitleForm = ({ uiCustomization, handleUpdateUi }) => {
           handleUpdateUi("title", e.target.value);
         }}
         fullWidth
-        inputProps={{ maxLength: 20 }}
+        inputProps={{ maxLength: 30 }}
       />
     </FormGroup>
   );

jams-react-client/src/views/Blueprint/parsePolicyData.js

@@ -73,7 +73,7 @@ const setCustomizationSettings = (policyData) => {
   ui.title = result.title;
   ui.hasDescription = result.description !== "";
   ui.description = result.description;
-  ui.hasTips = result.hasTips;
+  ui.hasTips = result.areTipsEnabled;
 
   if (result.backgroundType === "default") {
     ui.hasBackground = false;

jams-react-client/src/views/Blueprints/Blueprints.js

@@ -401,7 +401,7 @@ export default function Blueprints() {
                 </Link>
                 <CardFooter>
                   <IconButton
-                    color="secondary"
+                    color="primary"
                     onClick={() => {
                       handleRemoveBlueprint(blueprint.name);
                     }}