Style and icon updates (#18)

* style updates to match mockups

* update extension icons

* update extension icon when user logs in or out

* move code that will be called by both popup and background script to shared file

* update extension icon on startup

scripts/makeManifest.js

@@ -13,10 +13,10 @@ const manifestBase = {
 	description: packageJson['description'],
 	version: packageJson['version'],
 	icons: {
-		16: 'icons/logo-16.png',
-		32: 'icons/logo-32.png',
-		48: 'icons/logo-48.png',
-		128: 'icons/logo-128.png',
+		16: 'icons/gk-grey-16.png',
+		32: 'icons/gk-grey-32.png',
+		48: 'icons/gk-grey-48.png',
+		128: 'icons/gk-grey-128.png',
 	},
 	permissions: [
 		'cookies',

src/background.ts

@@ -4,6 +4,7 @@ import { injectionScope as inject_azureDevops } from './hosts/azureDevops';
 import { injectionScope as inject_bitbucket } from './hosts/bitbucket';
 import { injectionScope as inject_github } from './hosts/github';
 import { injectionScope as inject_gitlab } from './hosts/gitlab';
+import { fetchUser, updateExtensionIcon } from './shared';
 
 webNavigation.onDOMContentLoaded.addListener(injectScript, {
 	url: [
@@ -55,3 +56,11 @@ function getInjectionFn(url: string): (url: string) => void {
 	console.error('Unsupported host');
 	throw new Error('Unsupported host');
 }
+
+const main = async () => {
+	// Update the extension icon based on whether the user is logged in.
+	const user = await fetchUser();
+	void updateExtensionIcon(Boolean(user));
+};
+
+void main();

src/popup.ts

@@ -1,17 +1,8 @@
 // Note: This code runs every time the extension popup is opened.
 
 import { cookies } from 'webextension-polyfill';
-
-interface User {
-  email: string;
-  name?: string;
-  proAccessState?: {
-    trial?: {
-      end?: string;
-    }
-  };
-  username: string;
-}
+import { fetchUser, getAccessToken, updateExtensionIcon } from './shared';
+import type { User } from './types';
 
 // Source: https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/digest#basic_example
 const sha256 = async (text: string) => {
@@ -41,38 +32,6 @@ const getUserTrialDaysLeft = (user: User) => {
   return Math.ceil(diff / (1000 * 60 * 60 * 24));
 };
 
-const getAccessToken = async () => {
-  // Attempt to get the access token cookie from GitKraken.dev
-  const cookie = await cookies.get({
-    url: 'https://gitkraken.dev',
-    name: 'accessToken'
-  });
-
-  return cookie?.value;
-};
-
-const fetchUser = async () => {
-  const token = await getAccessToken();
-  if (!token) {
-    // The user is not logged in.
-    return;
-  }
-
-  const res = await fetch('https://api.gitkraken.dev/user', {
-    headers: {
-      Authorization: `Bearer ${token}`
-    }
-  });
-
-  if (!res.ok) {
-    // The access token is invalid or expired.
-    return;
-  }
-
-  const user = await res.json();
-  return user as User;
-};
-
 const logout = async () => {
   const token = await getAccessToken();
   if (!token) {
@@ -97,6 +56,8 @@ const logout = async () => {
     url: 'https://gitkraken.dev',
     name: 'accessToken'
   });
+
+  await updateExtensionIcon(false);
 };
 
 const makeIcon = (faIcon: string) => {
@@ -239,8 +200,10 @@ const main = async () => {
   const user = await fetchUser();
   if (user) {
     void renderLoggedInContent(user);
+    void updateExtensionIcon(true);
   } else {
     renderLoggedOutContent();
+    void updateExtensionIcon(false);
   }
 
   const loadingIcon = document.getElementById('loading-icon');

src/shared.ts

@@ -0,0 +1,51 @@
+import { action, cookies } from 'webextension-polyfill';
+import type { User } from './types';
+
+const IconPaths = {
+  Grey: {
+    16: '/icons/gk-grey-16.png',
+    32: '/icons/gk-grey-32.png',
+    48: '/icons/gk-grey-48.png',
+    128: '/icons/gk-grey-128.png',
+  },
+  Green: {
+    16: '/icons/gk-green-16.png',
+    32: '/icons/gk-green-32.png',
+    48: '/icons/gk-green-48.png',
+    128: '/icons/gk-green-128.png',
+  },
+};
+
+export const updateExtensionIcon = (isLoggedIn: boolean) => action.setIcon({ path: isLoggedIn ? IconPaths.Green : IconPaths.Grey });
+
+export const getAccessToken = async () => {
+  // Attempt to get the access token cookie from GitKraken.dev
+  const cookie = await cookies.get({
+    url: 'https://gitkraken.dev',
+    name: 'accessToken'
+  });
+
+  return cookie?.value;
+};
+
+export const fetchUser = async () => {
+  const token = await getAccessToken();
+  if (!token) {
+    // The user is not logged in.
+    return;
+  }
+
+  const res = await fetch('https://api.gitkraken.dev/user', {
+    headers: {
+      Authorization: `Bearer ${token}`
+    }
+  });
+
+  if (!res.ok) {
+    // The access token is invalid or expired.
+    return;
+  }
+
+  const user = await res.json();
+  return user as User;
+};

src/types.ts

@@ -0,0 +1,10 @@
+export interface User {
+  email: string;
+  name?: string;
+  proAccessState?: {
+    trial?: {
+      end?: string;
+    }
+  };
+  username: string;
+}

static/popup.css

@@ -3,6 +3,7 @@
   margin: 0;
   padding: 0;
   font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  color: #25292F;
 }
 
 #main-content {
@@ -16,7 +17,6 @@
 }
 
 a.menu-row-btn {
-  color: black;
   text-decoration: none;
   display: block;
   padding: 5px;
@@ -42,6 +42,7 @@ img.avatar {
 .user {
   display: flex;
   align-items: center;
+  background-color: #F7F8FA;
   border: 1px solid #D7D8DB;
   border-radius: 6px;
   padding: 8px;