From 413c212f7b3e5221f85a922a4b7fb397dda6abaa Mon Sep 17 00:00:00 2001
From: gRoussac <gRoussac@users.noreply.github.com>
Date: Fri, 28 Aug 2026 23:20:12 +0200
Subject: [PATCH] fix(interinnl): move footer social icons under Connect

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 apps/interinnl/src/app/footer/footer.html    | 92 +++++++-------------
 apps/interinnl/src/app/footer/footer.scss    | 43 ++++++---
 apps/interinnl/src/app/footer/footer.spec.ts | 41 +++++++++
 3 files changed, 107 insertions(+), 69 deletions(-)
 create mode 100644 apps/interinnl/src/app/footer/footer.spec.ts

diff --git a/apps/interinnl/src/app/footer/footer.html b/apps/interinnl/src/app/footer/footer.html
index 3d2c0dc..8e6073f 100644
--- a/apps/interinnl/src/app/footer/footer.html
+++ b/apps/interinnl/src/app/footer/footer.html
@@ -12,50 +12,6 @@
       <p>{{ content.tagline }}</p>
       <p class="innl-footer__motto">{{ content.motto }}</p>
       <innl-flags size="lg" />
-      <div class="innl-footer__social">
-        <a
-          class="innl-footer__social-link"
-          [href]="content.links.githubOrg"
-          rel="noopener noreferrer"
-          target="_blank"
-          aria-label="InterINNL on GitHub"
-        >
-          <svg
-            width="20"
-            height="20"
-            viewBox="0 0 24 24"
-            fill="currentColor"
-            aria-hidden="true"
-            focusable="false"
-          >
-            <path
-              d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.082 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
-            />
-          </svg>
-        </a>
-        @if (content.links.linkedinGroup) {
-        <a
-          class="innl-footer__social-link"
-          [href]="content.links.linkedinGroup"
-          rel="noopener noreferrer"
-          target="_blank"
-          aria-label="InterINNL on LinkedIn"
-        >
-          <svg
-            width="20"
-            height="20"
-            viewBox="0 0 24 24"
-            fill="currentColor"
-            aria-hidden="true"
-            focusable="false"
-          >
-            <path
-              d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"
-            />
-          </svg>
-        </a>
-        }
-      </div>
     </div>
 
     <div>
@@ -85,22 +41,40 @@ <h3>Projects</h3>
       >
     </div>
 
-    <div>
+    <div class="innl-footer__connect">
       <h3>Connect</h3>
-      <a
-        [href]="content.links.githubOrg"
-        rel="noopener noreferrer"
-        target="_blank"
-        >GitHub</a
-      >
-      @if (content.links.linkedinGroup) {
-      <a
-        [href]="content.links.linkedinGroup"
-        rel="noopener noreferrer"
-        target="_blank"
-        >LinkedIn group</a
-      >
-      }
+      <div class="innl-footer__social">
+        <a
+          class="innl-footer__social-link innl-footer__social-link--github"
+          [href]="content.links.githubOrg"
+          rel="noopener noreferrer"
+          target="_blank"
+          aria-label="InterINNL on GitHub"
+        >
+          <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+            <path
+              fill="currentColor"
+              d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0 0 22 12.017C22 6.484 17.522 2 12 2Z"
+            />
+          </svg>
+        </a>
+        @if (content.links.linkedinGroup) {
+        <a
+          class="innl-footer__social-link innl-footer__social-link--linkedin"
+          [href]="content.links.linkedinGroup"
+          rel="noopener noreferrer"
+          target="_blank"
+          aria-label="InterINNL on LinkedIn"
+        >
+          <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+            <path
+              fill="currentColor"
+              d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"
+            />
+          </svg>
+        </a>
+        }
+      </div>
       <a [href]="'mailto:' + content.links.contactEmail"
         >{{ content.links.contactEmail }}</a
       >
diff --git a/apps/interinnl/src/app/footer/footer.scss b/apps/interinnl/src/app/footer/footer.scss
index d01f03c..99348b2 100644
--- a/apps/interinnl/src/app/footer/footer.scss
+++ b/apps/interinnl/src/app/footer/footer.scss
@@ -42,30 +42,53 @@
   margin-bottom: 0.85rem !important;
 }
 
+.innl-footer__connect h3 {
+  margin-bottom: 0.85rem;
+}
+
 .innl-footer__social {
   display: flex;
-  gap: 0.65rem;
-  margin-top: 1rem;
+  gap: 0.75rem;
+  margin: 0 0 1rem;
 }
 
 .innl-footer__social-link {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 2.5rem;
-  height: 2.5rem;
-  border-radius: 0.5rem;
+  width: 2.75rem;
+  height: 2.75rem;
+  border-radius: 50%;
   color: #fff;
-  background: rgb(255 255 255 / 12%);
+  border: 1px solid rgb(255 255 255 / 28%);
+  background: transparent;
   transition:
-    background 0.15s ease,
-    transform 0.15s ease;
+    color 0.2s ease,
+    background 0.2s ease,
+    border-color 0.2s ease,
+    transform 0.2s ease;
+}
+
+.innl-footer__social-link svg {
+  width: 1.25rem;
+  height: 1.25rem;
 }
 
 .innl-footer__social-link:hover {
-  background: rgb(255 255 255 / 22%);
-  transform: translateY(-1px);
   text-decoration: none;
+  transform: translateY(-2px);
+}
+
+.innl-footer__social-link--github:hover {
+  color: var(--innl-navy);
+  background: #fff;
+  border-color: #fff;
+}
+
+.innl-footer__social-link--linkedin:hover {
+  color: #fff;
+  background: #0a66c2;
+  border-color: #0a66c2;
 }
 
 .innl-footer h3 {
diff --git a/apps/interinnl/src/app/footer/footer.spec.ts b/apps/interinnl/src/app/footer/footer.spec.ts
new file mode 100644
index 0000000..79399b0
--- /dev/null
+++ b/apps/interinnl/src/app/footer/footer.spec.ts
@@ -0,0 +1,41 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Footer } from './footer';
+import { interinnlContent } from '../content';
+
+describe('Footer', () => {
+  let fixture: ComponentFixture<Footer>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [Footer],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(Footer);
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(fixture.componentInstance).toBeTruthy();
+  });
+
+  it('should show social icons under Connect with correct links', () => {
+    const root = fixture.nativeElement as HTMLElement;
+    const connect = root.querySelector('.innl-footer__connect');
+    expect(connect).toBeTruthy();
+
+    const social = connect?.querySelector('.innl-footer__social');
+    expect(social).toBeTruthy();
+
+    const github = social?.querySelector(
+      'a.innl-footer__social-link--github',
+    ) as HTMLAnchorElement | null;
+    expect(github?.href).toBe(interinnlContent.links.githubOrg);
+    expect(github?.getAttribute('aria-label')).toBe('InterINNL on GitHub');
+
+    const linkedin = social?.querySelector(
+      'a.innl-footer__social-link--linkedin',
+    ) as HTMLAnchorElement | null;
+    expect(linkedin?.href).toBe(interinnlContent.links.linkedinGroup);
+    expect(linkedin?.getAttribute('aria-label')).toBe('InterINNL on LinkedIn');
+  });
+});