feat: update social logos to fit with each brand's guidance

IATI · Nov 13, 2024 · 618628a · 618628a
1 parent ded1af8
commit 618628a
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 16 deletions.
diff --git a/src/assets/svg/linkedin-logo.svg b/src/assets/svg/linkedin-logo.svg
diff --git a/src/assets/svg/x-logo.svg b/src/assets/svg/x-logo.svg
diff --git a/src/assets/svg/youtube-logo.svg b/src/assets/svg/youtube-logo.svg
diff --git a/src/scss/components/footer/_footer.scss b/src/scss/components/footer/_footer.scss
@@ -62,5 +62,5 @@
 
 .iati-footer__social {
   display: flex;
-  gap: 0.5rem;
+  gap: 18px;
 }
diff --git a/src/scss/components/footer/footer.stories.ts b/src/scss/components/footer/footer.stories.ts
@@ -78,10 +78,7 @@ export const Footer: Story = {
               >
                 ${Youtube.render?.call({ ...args })}
               </a>
-              <a
-                href="https://www.facebook.com/IATIaid/"
-                aria-label="Facebook"
-              >
+              <a href="https://www.facebook.com/IATIaid/" aria-label="Facebook">
                 ${Facebook.render?.call({ ...args })}
               </a>
             </div>

diff --git a/src/scss/components/icon/_icon.scss b/src/scss/components/icon/_icon.scss
@@ -1,15 +1,14 @@
 .iati-icon {
   display: inline-block;
-  height: 45px;
-  width: 45px;
-  border-radius: 100%;
-  background-color: white;
+  height: 36px;
+  aspect-ratio: 1 / 1;
   background-repeat: no-repeat;
-  background-size: 60%;
   background-position: center;
+  background-size: 100%;
 
   &--youtube {
     background-image: url("/src/assets/svg/youtube-logo.svg");
+    aspect-ratio: 1.2 / 1;
   }
 
   &--x {
@@ -21,8 +20,6 @@
   }
 
   &--facebook {
-    background-image: url("/src/assets/svg/facebook-logo-white.svg");
-    background-color: transparent;
-    background-size: 100%;
+    background-image: url("/src/assets/svg/facebook-logo.svg");
   }
 }