Arc test blitz fixes (#2356)

* - Typos

* - Nits from Sarah

* - Nits from Sarah

* - GitHub logo added for dark theme

* - Color for the GitHubOptions updated

* - Successful screen images fixed

* - Dark theme image set for headre

* - TODO added for when browser pop-up is blocked

spa/src/common/Wrapper.tsx

@@ -21,7 +21,7 @@ const navigateToHomePage = () => {
 	analyticsClient.sendUIEvent({ actionSubject: "dropExperienceViaBackButton", action: "clicked" });
 	AP.getLocation((location: string) => {
 		const locationUrl = new URL(location);
-		AP.navigator.go( "site", { absoluteUrl: `${locationUrl.origin}/plugins/servlet/upm` });
+		AP.navigator.go( "site", { absoluteUrl: `${locationUrl.origin}/jira/marketplace/discover/app/com.github.integration.production` });
 	});
 };
 

spa/src/components/SyncHeader/index.tsx

@@ -1,4 +1,4 @@
-import { token } from "@atlaskit/tokens";
+import { token, useThemeObserver } from "@atlaskit/tokens";
 import styled from "@emotion/styled";
 
 const HeaderWrapper = styled.div`
@@ -23,15 +23,23 @@ const Title = styled.h2`
 	margin: ${token("space.400")} ${token("space.0")} ${token("space.300")};
 `;
 
-const SyncHeader = () => (
-	<HeaderWrapper>
-		<LogoContainer>
-			<Logo className="logo" src="/public/assets/jira-logo.svg" alt=""/>
-			<SyncLogo className="sync-logo" src="/public/assets/sync.svg" alt=""/>
-			<Logo className="logo" src="/public/assets/github-logo.svg" alt=""/>
-		</LogoContainer>
-		<Title>Connect Github to Jira</Title>
-	</HeaderWrapper>
-);
+const SyncHeader = () => {
+	const { colorMode } = useThemeObserver();
+
+	return (
+		<HeaderWrapper>
+			<LogoContainer>
+				<Logo className="logo" src="/public/assets/jira-logo.svg" alt=""/>
+				<SyncLogo className="sync-logo" src="/public/assets/sync.svg" alt=""/>
+				<Logo
+					className="logo"
+					src={colorMode === "dark" ? "/public/assets/github-logo-dark-theme.svg" : "/public/assets/github-logo.svg"}
+					alt=""
+				/>
+			</LogoContainer>
+			<Title>Connect Github to Jira</Title>
+		</HeaderWrapper>
+	);
+};
 
 export default SyncHeader;

spa/src/pages/ConfigSteps/OrgsContainer/index.tsx

@@ -106,7 +106,7 @@ const OrganizationsList = ({
 		if (!org.isAdmin) {
 			return <>
 				<Paragraph>
-					Can't connect, you're not an organization owner.<br />Ask an owner to complete this step.
+					Can't connect, you're not the organization owner.<br />Ask an owner to complete this step.
 				</Paragraph>
 			</>;
 		}

spa/src/pages/ConfigSteps/index.tsx

@@ -48,9 +48,9 @@ const TooltipContainer = styled.div`
 	}
 `;
 const GitHubOption = styled.div<GitHubOptionType>`
-	background: ${props => props.optionKey === props.selectedOption ? "#DEEBFF" : "rgba(9, 30, 66, 0.04)"};
+	background: ${props => props.optionKey === props.selectedOption ? token("color.background.selected") : token("color.background.accent.gray.subtlest")};
 	font-weight: ${props => props.optionKey === props.selectedOption ? 600 : 400};
-	color: ${props => props.optionKey === props.selectedOption ? token("color.text.accent.blue") : "inherit"};
+	color: ${props => props.optionKey === props.selectedOption ? token("color.text.selected") : token("color.text")};
 	padding: ${token("space.100")} ${token("space.200")};
 	margin-right: ${token("space.100")};
 	border-radius: 100px;

spa/src/pages/Connected/index.tsx

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 import { Wrapper } from "../../common/Wrapper";
-import { token } from "@atlaskit/tokens";
+import { token, useThemeObserver } from "@atlaskit/tokens";
 import Heading from "@atlaskit/heading";
 import Button from "@atlaskit/button";
 import analyticsClient, { useEffectScreenEvent } from "../../analytics";
@@ -50,6 +50,8 @@ const Connected = () => {
 	useEffectScreenEvent("SuccessfulConnectedScreen");
 
 	const navigate = useNavigate();
+	const { colorMode } = useThemeObserver();
+
 	const navigateToBackfillPage = () => {
 		analyticsClient.sendUIEvent({ actionSubject: "checkBackfillStatus", action: "clicked" });
 		AP.navigator.go( "addonmodule", { moduleKey: "gh-addon-admin" });
@@ -58,10 +60,10 @@ const Connected = () => {
 	return (<Wrapper>
 		<ConnectedContainer>
 			<div>
-				<HeaderImg src="/public/assets/jira-github-connected.svg" alt=""/>
+				<HeaderImg src={colorMode === "dark" ? "/public/assets/jira-github-connected-dark-theme.svg" : "/public/assets/jira-github-connected.svg"} alt=""/>
 				<Title>GitHub is connected!</Title>
 				<TopContent>
-					Its' time to let everyone know that GitHub's ready to use and your<br />
+					It’s time to let everyone know GitHub’s ready to use and your<br />
 					team can use issue keys to link work to Jira.<br />
 				</TopContent>
 				<ButtonContainer>
@@ -119,7 +121,7 @@ const Connected = () => {
 					onClick={navigateToBackfillPage}
 				>
 					Check your backfill status
-				</Button>
+				</Button>.
 			</Paragraph>
 		</ConnectedContainer>
 	</Wrapper>);

spa/src/pages/StartConnection/index.tsx

@@ -90,7 +90,7 @@ const StartConnection = () => {
 	return (
 		<Wrapper>
 			<SyncHeader/>
-			<BeforeText>Before you start, you'll need:</BeforeText>
+			<BeforeText>Before you start, you should have:</BeforeText>
 			<ListContainer>
 				<ListItem>
 					<Logo>

spa/src/pages/StartConnection/test.tsx

@@ -21,7 +21,7 @@ test("Entry Config Screen", async () => {
 	);
 
 	expect(screen.getByText("Connect Github to Jira")).toBeTruthy();
-	expect(screen.getByText("Before you start, you'll need:")).toBeTruthy();
+	expect(screen.getByText("Before you start, you should have:")).toBeTruthy();
 	expect(screen.getByText("A GitHub account")).toBeTruthy();
 	expect(screen.getByText("Owner permission for a GitHub organization")).toBeTruthy();
 	expect(screen.getByRole("button", { name: "continue" })).toHaveTextContent("Continue");

spa/src/utils/index.ts

@@ -7,7 +7,13 @@ export const getJiraJWT = (): Promise<string> => new Promise(resolve => {
 });
 
 export function popup (url: string) {
-	return window.open(url, "_blank");
+	const openedPopup = window.open(url, "_blank");
+	if (!openedPopup || openedPopup.closed || typeof openedPopup.closed === "undefined") {
+		// TODO: Meaningful UI when browser pop-up is blocked
+		console.log("Popup is blocked");
+		return null;
+	}
+	return openedPopup;
 }
 
 export function reportError(err: unknown) {