[CP-2190] I want intuitive text to import contacts in Center (#1396)

packages/app/src/__deprecated__/renderer/locales/default/en-US.json

@@ -331,7 +331,7 @@
   "module.contacts.firstName": "First name",
   "module.contacts.forwardNamecard": "Forward namecard",
   "module.contacts.forwardTooltipDescription": "Forward namecard",
-  "module.contacts.googleButtonText": "Continue with Google",
+  "module.contacts.googleButtonText": "Log in to Google",
   "module.contacts.ice": "ICE",
   "module.contacts.iceContact": "ICE contact",
   "module.contacts.importBody": "Select the contacts you want to save on your Pure",
@@ -354,7 +354,7 @@
   "module.contacts.information": "Information",
   "module.contacts.listFavourites": "Favorites",
   "module.contacts.listUnnamedContact": "No name",
-  "module.contacts.manualImportText": "Import from vcf file",
+  "module.contacts.manualImportText": "Import vCard",
   "module.contacts.newContactCallLabel": "Add contact",
   "module.contacts.newTitle": "New contact",
   "module.contacts.noAddress": "No address",
@@ -364,7 +364,7 @@
   "module.contacts.noNotes": "No notes",
   "module.contacts.noPhoneNumber": "No phone number",
   "module.contacts.notes": "Note",
-  "module.contacts.outlookButtonText": "continue with outlook",
+  "module.contacts.outlookButtonText": "Log in to Outlook",
   "module.contacts.panelManageButton": "Manage",
   "module.contacts.panelNewContactButton": "New contact",
   "module.contacts.panelSearchListNoData": "No data provided",
@@ -391,7 +391,8 @@
   "module.contacts.speedDialTitle": "Speed dial settings",
   "module.contacts.synchronizingModalBody": "This might take a few minutes, please wait.",
   "module.contacts.synchronizingModalTitle": "Synchronising contacts…",
-  "module.contacts.syncModalText": "Log in to allow Mudita Center to synchronize contacts between your device and Google or iCloud accounts",
+  "module.contacts.syncModalText": "To start importing contacts to and from your Google or Outlook accounts, simply log in to your account.",
+  "module.contacts.syncModalHelpText": "For Apple Devices, you'll need to <link>create a vCard (VFC file)</link>, then import it.",
   "module.contacts.syncModalTitle": "Import contacts",
   "module.contacts.unblock": "Unblock",
   "module.contacts.unblockTooltipDescription": "Unblock contact",

packages/app/src/__deprecated__/renderer/wrappers/app-update-step-modal/app-update.modals.tsx

@@ -20,6 +20,7 @@ import {
   ModalContentWithoutMargin,
   RoundIconWrapper,
   ModalMainText,
+  ModalLink,
 } from "App/ui/components/modal-dialog"
 import { Size } from "App/__deprecated__/renderer/components/core/button/button.config"
 import { AppUpdateStepModalTestIds } from "App/__deprecated__/renderer/wrappers/app-update-step-modal/app-update-step-modal-test-ids.enum"
@@ -30,7 +31,6 @@ import { useDispatch } from "react-redux"
 import { togglePrivacyPolicyAccepted } from "App/settings/actions"
 import { Dispatch } from "../../store"
 import styled from "styled-components"
-import { fontWeight, textColor } from "../../styles/theming/theme-getters"
 import { BrowserActions } from "App/__deprecated__/common/enums/browser-actions.enum"
 
 export interface AppUpdateAvailableProps {
@@ -95,13 +95,8 @@ const messages = defineMessages({
 const PrivacyPolicyCheckboxWrapper = styled.div`
   display: flex;
 `
-
-const StyledLink = styled.a`
-  text-decoration: underline;
-  cursor: pointer;
+const StyledLink = styled(ModalLink)`
   font-size: 1.4rem;
-  font-weight: ${fontWeight("default")};
-  color: ${textColor("action")};
 `
 
 const AppUpdateModal: FunctionComponent<ComponentProps<typeof ModalDialog>> = ({
@@ -251,9 +246,7 @@ export const AppUpdateError: FunctionComponent<
         message={{
           ...messages.errorUpdateDescription,
           values: {
-            link: (
-              <StyledLink onClick={openMuditaWebPage}>mudita.com</StyledLink>
-            ),
+            link: <ModalLink onClick={openMuditaWebPage}>mudita.com</ModalLink>,
           },
         }}
       />

packages/app/src/contacts/components/sync-contacts-modal/sync-contacts-modal.component.tsx

@@ -3,24 +3,27 @@
  * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
  */
 
-import React, { useRef, ComponentProps } from "react"
+import React, { useRef, ComponentProps, ReactNode } from "react"
 import { ModalSize } from "App/__deprecated__/renderer/components/core/modal/modal.interface"
 import { FunctionComponent } from "App/__deprecated__/renderer/types/function-component.interface"
 import { noop } from "App/__deprecated__/renderer/utils/noop"
 import { intl } from "App/__deprecated__/renderer/utils/intl"
-import { TextDisplayStyle } from "App/__deprecated__/renderer/components/core/text/text.component"
+import Text, {
+  TextDisplayStyle,
+} from "App/__deprecated__/renderer/components/core/text/text.component"
 import {
   ButtonsContainer,
   ButtonWrapper,
-  ModalText,
   SyncButton,
 } from "App/contacts/components/sync-contacts-modal/sync-contacts.styled"
 import { SyncContactsModalTestIds } from "App/contacts/components/sync-contacts-modal/sync-contacts-modal-test-ids.enum"
 import { defineMessages } from "react-intl"
 import GoogleButton from "react-google-button"
-import { ModalDialog } from "App/ui/components/modal-dialog"
+import { ModalDialog, ModalLink } from "App/ui/components/modal-dialog"
 import { IconType } from "App/__deprecated__/renderer/components/core/icon/icon-type"
 import InputFileSelect from "App/contacts/components/sync-contacts-modal/input-file-select"
+import { ipcRenderer } from "electron-better-ipc"
+import { HelpActions } from "App/__deprecated__/common/enums/help-actions.enum"
 
 const messages = defineMessages({
   title: {
@@ -29,6 +32,9 @@ const messages = defineMessages({
   text: {
     id: "module.contacts.syncModalText",
   },
+  helpText: {
+    id: "module.contacts.syncModalHelpText",
+  },
   googleButtonText: {
     id: "module.contacts.googleButtonText",
   },
@@ -70,6 +76,8 @@ const SyncContactsModal: FunctionComponent<Props> = ({
     }
   }
 
+  const openHelpWindow = () => ipcRenderer.callMain(HelpActions.OpenWindow)
+
   return (
     <ModalDialog
       size={ModalSize.Small}
@@ -78,10 +86,21 @@ const SyncContactsModal: FunctionComponent<Props> = ({
       onClose={onClose}
       {...props}
     >
-      <ModalText
+      <Text
         displayStyle={TextDisplayStyle.Paragraph2}
         message={messages.text}
       />
+      <Text
+        displayStyle={TextDisplayStyle.Paragraph2}
+        message={{
+          ...messages.helpText,
+          values: {
+            link: (...chunks: ReactNode[]) => (
+              <ModalLink onClick={openHelpWindow}>{chunks}</ModalLink>
+            ),
+          },
+        }}
+      />
       <ButtonsContainer>
         <ButtonWrapper>
           <GoogleButton

packages/app/src/ui/components/modal-dialog/modal-dialog.styles.tsx

@@ -4,7 +4,11 @@
  */
 
 import styled from "styled-components"
-import { backgroundColor } from "App/__deprecated__/renderer/styles/theming/theme-getters"
+import {
+  backgroundColor,
+  fontWeight,
+  textColor,
+} from "App/__deprecated__/renderer/styles/theming/theme-getters"
 import Text from "App/__deprecated__/renderer/components/core/text/text.component"
 
 export const ModalContentWithoutMargin = styled.div`
@@ -51,3 +55,9 @@ export const RoundIconWrapper = styled.div`
 export const ModalMainText = styled(Text)`
   margin-bottom: 0.8rem;
 `
+export const ModalLink = styled.a`
+  text-decoration: underline;
+  cursor: pointer;
+  font-weight: ${fontWeight("default")};
+  color: ${textColor("action")};
+`