Added google drive as a provider to sync notes.

packages/app-desktop/gui/NoteList/googleDrive/CloudSyncComponent.js

@@ -0,0 +1,33 @@
+import React from 'react';
+
+const CloudSyncComponent = () => {
+	const providers = [
+		{ name: 'Joplin Cloud', value: 'joplin' },
+		{ name: 'Dropbox', value: 'dropbox' },
+		{ name: 'OneDrive', value: 'onedrive' },
+		{ name: 'Google Drive', value: 'google' },
+	];
+
+	const handleProviderSelect = (provider) => {
+		window.location.href = `${process.env.REACT_APP_BACKEND_URL}/auth/${provider}`;
+	};
+
+	return (
+		<div>
+			<h2>Select a Provider to Sync Your Notes</h2>
+			<div className="provider-list">
+				{providers.map((provider) => (
+					<button
+						key={provider.value}
+						onClick={() => handleProviderSelect(provider.value)}
+						className="provider-button"
+					>
+						{provider.name}
+					</button>
+				))}
+			</div>
+		</div>
+	);
+};
+
+export default CloudSyncComponent;

packages/app-desktop/gui/NoteList/googleDrive/googleStrategy.js

@@ -0,0 +1,18 @@
+const passport = require('passport');
+const GoogleStrategy = require('passport-google-oauth20').Strategy;
+
+passport.use(new GoogleStrategy({
+	clientID: process.env.GOOGLE_CLIENT_ID,
+	clientSecret: process.env.GOOGLE_CLIENT_SECRET,
+	callbackURL: '/auth/google/callback',
+}, (accessToken, refreshToken, profile, done) => {
+	done(null, { profile, accessToken });
+}));
+
+passport.serializeUser((user, done) => {
+	done(null, user);
+});
+
+passport.deserializeUser((obj, done) => {
+	done(null, obj);
+});

packages/app-desktop/gui/NoteListControls/NoteListControls.tsx

@@ -125,15 +125,15 @@ function NoteListControls(props: Props) {
 		if (breakpoint === dynamicBreakpoints.Sm) {
 			return 'icon-note';
 		} else {
-			return 'fas fa-plus';
+			return 'fas fa-pencil-alt';
 		}
 	}, [breakpoint, dynamicBreakpoints]);
 
 	const todoIcon = useMemo(() => {
 		if (breakpoint === dynamicBreakpoints.Sm) {
 			return 'far fa-check-square';
 		} else {
-			return 'fas fa-plus';
+			return 'fas fa-pencil-alt';
 		}
 	}, [breakpoint, dynamicBreakpoints]);
 

packages/app-desktop/gui/NoteSearchBar.tsx

@@ -192,7 +192,7 @@ class NoteSearchBar extends React.Component<Props> {
 						onKeyDown={this.searchInput_keyDown}
 						ref="searchInput"
 						type="text"
-						style={{ width: 200, marginRight: 5, backgroundColor: this.backgroundColor, color: theme.color }}
+						style={{ width: 200, marginRight: 5, backgroundColor: this.backgroundColor, color: theme.color, fontSize: 'x-large' }}
 					/>
 					{allowScrolling ? previousButton : null}
 					{allowScrolling ? nextButton : null}

packages/lib/components/shared/NoteList/getEmptyFolderMessage.ts

@@ -12,7 +12,7 @@ const getEmptyFolderMessage = (folders: FolderEntity[], selectedFolderId: string
 	}
 
 	if (Setting.value('appType') === 'desktop') {
-		return _('No notes in here. Create one by clicking on "New note".');
+		return _('No notes in here. Click "New note" to start adding your notes.');
 	} else {
 		return _('There are currently no notes. Create one by clicking on the (+) button.');
 	}