jams-react-client: minor ui fixes on customization tab

- encodeURI the backgroundUrl to escape space correctly
- Fix minor border issues with JamiIdCard
- Set English as the first language in the LanguagePicker
- Changed the main enable Checkbox to a Switch
- hasTips is now true, to match the default on Jami

Change-Id: I0d611e720efd99ec726f321a2bd77aff237543ca

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

@@ -138,7 +138,7 @@ export default function CustomUiPreview({
     backgroundColor = "white";
   }
   if (backgroundUrl) {
-    backgroundUrl = `${url_path}:${url_port}/${backgroundUrl}`;
+    backgroundUrl = encodeURI(`${url_path}:${url_port}/${backgroundUrl}`);
   }
 
   const isCompactDisplay = !hasTitle && !hasDescription && !hasTips;

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

@@ -21,11 +21,10 @@ const styles = {
   },
   logo: {
     position: "absolute",
-    left: 0,
+    left: "-1px",
     top: 0,
     backgroundColor: infoColor[0],
-    borderRadius: (props) =>
-      props.isCompactDisplay ? "20px" : "20px 20px 20px 0px",
+    borderRadius: "20px 20px 20px 0px",
     padding: "0px 5px 0px 5px",
   },
   nameplate: {

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

@@ -32,8 +32,8 @@ export default function LanguagePicker(props) {
       .then((result) => {
         const response = result.data.map(({ attributes }) => attributes);
         let translates_languages = [
-          ...response,
           { code: "en", name: "English" },
+          ...response,
         ];
 
         const exists = translates_languages

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

 import React, { useState } from "react";
 
 import Checkbox from "@material-ui/core/Checkbox";
+import Switch from "@material-ui/core/Switch";
 import { SketchPicker } from "react-color";
 import FormGroup from "@material-ui/core/FormGroup";
 import FormControlLabel from "@material-ui/core/FormControlLabel";
@@ -43,7 +44,7 @@ const IsCustomizationEnabledForm = ({
     <FormGroup row>
       <FormControlLabel
         control={
-          <Checkbox
+          <Switch
             checked={isCustomizationEnabled}
             color="primary"
             onChange={(e) => {

jams-react-client/src/views/Blueprint/policyData.constants.js

@@ -4,7 +4,7 @@ export const DEFAULT_UI_CUSTOMIZATION = {
   title: "",
   hasDescription: true,
   description: "",
-  hasTips: false,
+  hasTips: true,
 
   hasBackground: false,
   backgroundColor: "",