Have each provider button link to its specific url on gk.dev

Author: jdgarcia

src/popup/components/ConnectAProvider.tsx

@@ -6,24 +6,40 @@ export const ConnectAProvider = () => {
 		<div className="connect-provider-container">
 			<div className="connect-provider-prompt text-center">
 				<div className="text-2xl bold">Connect an integration to see all of your pull requests</div>
-				<a className="provider-buttons" href={`${GKDotDevUrl}/settings/integrations`} target="_blank">
-					<div className="provider-button text-sm text-secondary">
+				<div className="provider-buttons">
+					<a
+						className="provider-button text-sm text-secondary"
+						href={`${GKDotDevUrl}/settings/integrations?connect=github`}
+						target="_blank"
+					>
 						<img src="img/github-color.svg" height={24} />
 						<div>GitHub</div>
-					</div>
-					<div className="provider-button text-sm text-secondary">
+					</a>
+					<a
+						className="provider-button text-sm text-secondary"
+						href={`${GKDotDevUrl}/settings/integrations?connect=gitlab`}
+						target="_blank"
+					>
 						<img src="img/gitlab-color.svg" height={24} />
 						<div>GitLab</div>
-					</div>
-					<div className="provider-button text-sm text-secondary">
+					</a>
+					<a
+						className="provider-button text-sm text-secondary"
+						href={`${GKDotDevUrl}/settings/integrations?connect=bitbucket`}
+						target="_blank"
+					>
 						<img src="img/bitbucket-color.svg" height={24} />
 						<div>Bitbucket</div>
-					</div>
-					<div className="provider-button text-sm text-secondary">
+					</a>
+					<a
+						className="provider-button text-sm text-secondary"
+						href={`${GKDotDevUrl}/settings/integrations?connect=azure`}
+						target="_blank"
+					>
 						<img src="img/azuredevops-color.svg" height={24} />
 						<div>Azure DevOps</div>
-					</div>
-				</a>
+					</a>
+				</div>
 				<div className="text-sm text-secondary italic">
 					*Only cloud-hosted providers are currently supported.
 				</div>