Desktop: Resolves #9261: Mention in sync wizard that Dropbox and OneDrive are slow on first sync

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 = <SyncTargetDescription height={height} ref={info.name === 'joplinCloud' ? joplinCloudDescriptionRef : null}>{info.description}</SyncTargetDescription>;
 		const featuresComp = showJoplinCloudForm && info.name === 'joplinCloud' ? null : renderFeatures(info.name);
 
+		const renderSlowSyncWarning = () => {
+			if (info.name === 'joplinCloud') return null;
+			return <SlowSyncWarning>{`⚠️ ${_('%s is not optimised for synchronising many small files so your initial synchronisation will be slow.', info.label)}`}</SlowSyncWarning>;
+		};
+
 		return (
 			<SyncTargetBox id={key} key={key} faded={showJoplinCloudForm && info.name !== 'joplinCloud'}>
 				<SyncTargetTitle>{logo}{info.label}</SyncTargetTitle>
 				{descriptionComp}
 				{featuresComp}
 				{renderSelectArea(info)}
+				{renderSlowSyncWarning()}
 			</SyncTargetBox>
 		);
 	}