add FontAwesome icons (#15)

jdgarcia · web-flow · commit 012d64a95f47 · 2024-01-17T20:13:42.000-07:00
diff --git a/src/popup.ts b/src/popup.ts
@@ -78,11 +78,18 @@ const logout = async () => {
   });
 };
 
+const makeIcon = (faIcon: string) => {
+  const icon = document.createElement('i');
+  icon.classList.add('fa-regular', faIcon, 'icon');
+  return icon;
+};
+
 const renderLoggedInContent = async (user: User) => {
   const emailHash = await sha256(user.email);
 
   const mainEl = document.getElementById('main-content')!;
 
+  /* User Info element */
   const userEl = document.createElement('div');
   userEl.classList.add('user');
 
@@ -107,15 +114,27 @@ const renderLoggedInContent = async (user: User) => {
 
   userEl.appendChild(userInfoEl);
 
+  const siteLink = document.createElement('a');
+  siteLink.href = 'https://gitkraken.dev';
+  siteLink.target = '_blank';
+  const siteIcon = makeIcon('fa-arrow-up-right-from-square');
+  siteLink.appendChild(siteIcon);
+  userEl.appendChild(siteLink);
+
   mainEl.appendChild(userEl);
 
+  /* Sign out butto */
   const signOutBtn = document.createElement('button');
   signOutBtn.textContent = 'Sign out';
   signOutBtn.classList.add('btn');
   signOutBtn.addEventListener('click', async () => {
     await logout();
     window.close();
   });
+
+  const signOutIcon = makeIcon('fa-right-from-bracket');
+  signOutBtn.prepend(signOutIcon);
+
   mainEl.appendChild(signOutBtn);
 };
 
@@ -124,10 +143,13 @@ const renderLoggedOutContent = () => {
 
   const signInLink = document.createElement('a');
   signInLink.href = 'https://gitkraken.dev/login';
-  signInLink.target = '_blank';
   signInLink.textContent = 'Sign in GitKraken account';
+  signInLink.target = '_blank';
   signInLink.classList.add('btn');
 
+  const signInIcon = makeIcon('fa-right-from-bracket');
+  signInLink.prepend(signInIcon);
+
   mainEl.appendChild(signInLink);
 };
 
@@ -138,6 +160,9 @@ const main = async () => {
   } else {
     renderLoggedOutContent();
   }
+
+  const loadingIcon = document.getElementById('loading-icon');
+  loadingIcon?.remove();
 };
 
 void main();
diff --git a/static/css/fontawesome.min.css b/static/css/fontawesome.min.css
diff --git a/static/css/regular.min.css b/static/css/regular.min.css
@@ -0,0 +1,6 @@
+/*!
+ * Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license (Commercial License)
+ * Copyright 2023 Fonticons, Inc.
+ */
+:host,:root{--fa-style-family-classic:"Font Awesome 6 Pro";--fa-font-regular:normal 400 1em/1 "Font Awesome 6 Pro"}@font-face{font-family:"Font Awesome 6 Pro";font-style:normal;font-weight:400;font-display:block;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype")}.fa-regular,.far{font-weight:400}
diff --git a/static/popup.css b/static/popup.css
@@ -30,6 +30,9 @@ button.btn {
   text-align: start;
   padding: 5px;
 }
+a.btn .icon, button.btn .icon {
+  margin-right: 8px;
+}
 
 img.avatar {
   border-radius: 50%;
@@ -44,7 +47,8 @@ img.avatar {
   padding: 8px;
 }
 .user-info {
-  margin-left: 8px;
+  margin: 0 8px;
+  flex: 1 1 0%;
 }
 .user-info .user-name {
   font-weight: bold;
diff --git a/static/popup.html b/static/popup.html
@@ -1,7 +1,11 @@
 <html>
-  <script src="/dist/popup.js"></script>
+  <link rel="stylesheet" href="css/fontawesome.min.css" />
+  <link rel="stylesheet" href="css/regular.min.css" />
   <link rel="stylesheet" href="popup.css" />
+  <script src="/dist/popup.js"></script>
   <body>
-    <main id="main-content"></main>
+    <main id="main-content">
+      <i id="loading-icon" class="fa-regular fa-spinner-third fa-spin"></i>
+    </main>
   </body>
 </html>
diff --git a/static/webfonts/fa-regular-400.woff2 b/static/webfonts/fa-regular-400.woff2

Original file line number	Diff line number	Diff line change
`@@ -30,6 +30,9 @@ button.btn {`
`30`	`30`	`text-align: start;`
`31`	`31`	`padding: 5px;`
`32`	`32`	`}`
	`33`	`+a.btn .icon, button.btn .icon {`
	`34`	`+ margin-right: 8px;`
	`35`	`+}`
`33`	`36`
`34`	`37`	`img.avatar {`
`35`	`38`	`border-radius: 50%;`
`@@ -44,7 +47,8 @@ img.avatar {`
`44`	`47`	`padding: 8px;`
`45`	`48`	`}`
`46`	`49`	`.user-info {`
`47`		`- margin-left: 8px;`
	`50`	`+ margin: 0 8px;`
	`51`	`+ flex: 1 1 0%;`
`48`	`52`	`}`
`49`	`53`	`.user-info .user-name {`
`50`	`54`	`font-weight: bold;`