diff --git a/packages/app-desktop/gui/SyncWizard/Dialog.tsx b/packages/app-desktop/gui/SyncWizard/Dialog.tsx index e5a0d5b32..d9ec4c118 100644 --- a/packages/app-desktop/gui/SyncWizard/Dialog.tsx +++ b/packages/app-desktop/gui/SyncWizard/Dialog.tsx @@ -79,7 +79,7 @@ const SyncTargetBox = styled.div<{ faded: boolean }>` background-color: ${props => props.theme.backgroundColor}; border: 1px solid ${props => props.theme.dividerColor}; border-radius: 8px; - padding: 0.8em 2.2em 2em 2.2em; + padding: 2em 2.2em 2em 2.2em; margin-right: 1em; max-width: 400px; opacity: ${props => props.faded ? 0.5 : 1}; @@ -127,6 +127,14 @@ const FormLabel = styled.label` margin: 1em 0 0.6em 0; `; +const SlowSyncWarning = styled.div` + margin-top: 1em; + opacity: 0.8; + font-family: ${props => props.theme.fontFamily}; + color: ${props => props.theme.color}; + font-size: 14px; +`; + const syncTargetNames: string[] = [ 'joplinCloud', 'dropbox', @@ -283,12 +291,18 @@ export default function(props: Props) { const descriptionComp = {info.description}; const featuresComp = showJoplinCloudForm && info.name === 'joplinCloud' ? null : renderFeatures(info.name); + const renderSlowSyncWarning = () => { + if (info.name === 'joplinCloud') return null; + return {`⚠️ ${_('%s is not optimised for synchronising many small files so your initial synchronisation will be slow.', info.label)}`}; + }; + return ( {logo}{info.label} {descriptionComp} {featuresComp} {renderSelectArea(info)} + {renderSlowSyncWarning()} ); }