enhancement/issue 176 Add bluesky icon to social media tray

src/components/footer/footer.module.css

@@ -1,6 +1,6 @@
 .footer {
   background-color: var(--color-tertiary);
-  padding: var(--size-fluid-1) var(--size-fluid-3);
+  padding: var(--size-fluid-1);
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
@@ -17,10 +17,7 @@
 
 .logo svg {
   width: 150px;
-}
-
-.logo svg g.letters {
-  fill: var(--color-white);
+  fill: var(--color-gray);
 }
 
 .footer app-social-tray {

src/components/social-tray/social-tray.js

@@ -2,6 +2,7 @@ import styles from "./social-tray.module.css";
 import discordIcon from "../../assets/discord.svg?type=raw";
 import githubIcon from "../../assets/github.svg?type=raw";
 import twitterIcon from "../../assets/twitter-logo.svg?type=raw";
+import blueskyIcon from "../../assets/bluesky.svg?type=raw";
 
 export default class SocialTray extends HTMLElement {
   connectedCallback() {
@@ -18,6 +19,12 @@ export default class SocialTray extends HTMLElement {
             ${discordIcon}
           </a>
         </li>
+
+        <li class="${styles.socialIcon}">
+          <a href="https://bsky.app/profile/projectevergreen.bsky.social" title="BlueSky">
+            ${blueskyIcon}
+          </a>
+        </li>
 
         <li class="${styles.socialIcon}">
           <a href="https://twitter.com/PrjEvergreen" title="Twitter">

src/components/social-tray/social-tray.spec.js

@@ -10,6 +10,10 @@ const ICONS = [
     link: "/discord/",
     title: "Discord",
   },
+  {
+    link: "https://bsky.app/profile/projectevergreen.bsky.social",
+    title: "BlueSky",
+  },
   {
     link: "https://twitter.com/PrjEvergreen",
     title: "Twitter",
@@ -37,8 +41,8 @@ describe("Components/Social Tray", () => {
       const links = tray.querySelectorAll("ul li a");
       const icons = tray.querySelectorAll("ul li a svg");
 
-      expect(links.length).to.equal(3);
-      expect(icons.length).to.equal(3);
+      expect(links.length).to.equal(4);
+      expect(icons.length).to.equal(4);
 
       Array.from(links).forEach((link) => {
         const iconItem = ICONS.find((icon) => icon.title === link.getAttribute("title"));