Merge pull request #24021 from overleaf/td-social-logos

Update social media logos in footer

GitOrigin-RevId: a9498d7501c6d4c4ce1b76884f0f278dd92d4cf7

services/web/app/views/layout/fat-footer-base.pug

@@ -11,12 +11,22 @@
 				include language-picker
 	.fat-footer-base-section.fat-footer-base-social
 		.fat-footer-base-item
-			a.fat-footer-social(href="https://twitter.com/overleaf")
-				i.fa.fa-twitter-square(aria-hidden="true")
-				.sr-only #{translate("app_on_x", {social: "Twitter"})}
-			a.fat-footer-social(href="https://www.facebook.com/overleaf.editor")
-				i.fa.fa-facebook-square(aria-hidden="true")
-				.sr-only #{translate("app_on_x", {social: "Facebook"})}
-			a.fat-footer-social(href="https://www.linkedin.com/company/writelatex-limited")
-				i.fa.fa-linkedin-square(aria-hidden="true")
-				.sr-only #{translate("app_on_x", {social: "LinkedIn"})}
+			a.fat-footer-social.x-logo(href="https://x.com/overleaf")
+				svg(xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1227" height="25")
+					path(d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z")
+				span.visually-hidden #{translate("app_on_x", {social: "X"})}
+			a.fat-footer-social.facebook-logo(href="https://www.facebook.com/overleaf.editor")
+				svg(xmlns="http://www.w3.org/2000/svg" viewBox="0 0 666.66668 666.66717" height="25")
+					defs
+						clipPath(id="a" clipPathUnits="userSpaceOnUse")
+							path(d="M0 700h700V0H0Z")
+					g(clip-path="url(#a)" transform="matrix(1.33333 0 0 -1.33333 -133.333 800)")
+						path.background(d="M0 0c0 138.071-111.929 250-250 250S-500 138.071-500 0c0-117.245 80.715-215.622 189.606-242.638v166.242h-51.552V0h51.552v32.919c0 85.092 38.508 124.532 122.048 124.532 15.838 0 43.167-3.105 54.347-6.211V81.986c-5.901.621-16.149.932-28.882.932-40.993 0-56.832-15.528-56.832-55.9V0h81.659l-14.028-76.396h-67.631v-171.773C-95.927-233.218 0-127.818 0 0" fill="#0866ff" transform="translate(600 350)")
+						path.text(d="m0 0 14.029 76.396H-67.63v27.019c0 40.372 15.838 55.899 56.831 55.899 12.733 0 22.981-.31 28.882-.931v69.253c-11.18 3.106-38.509 6.212-54.347 6.212-83.539 0-122.048-39.441-122.048-124.533V76.396h-51.552V0h51.552v-166.242a250.559 250.559 0 0 1 60.394-7.362c10.254 0 20.358.632 30.288 1.831V0Z" fill="#fff" transform="translate(447.918 273.604)")
+				span.visually-hidden #{translate("app_on_x", {social: "Facebook"})}
+			a.fat-footer-social.linkedin-logo(href="https://www.linkedin.com/company/writelatex-limited")
+				svg(xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72" height="25")
+					g(fill="none" fill-rule="evenodd")
+						path.background(fill="#0B66C3" d="M8 72h56a8 8 0 0 0 8-8V8a8 8 0 0 0-8-8H8a8 8 0 0 0-8 8v56a8 8 0 0 0 8 8")
+						path.text(fill="#FFF" d="M62 62H51.316V43.802c0-4.99-1.896-7.777-5.845-7.777-4.296 0-6.54 2.901-6.54 7.777V62H28.632V27.333H38.93v4.67s3.096-5.729 10.453-5.729c7.353 0 12.617 4.49 12.617 13.777zM16.35 22.794c-3.508 0-6.35-2.864-6.35-6.397C10 12.864 12.842 10 16.35 10c3.507 0 6.347 2.864 6.347 6.397 0 3.533-2.84 6.397-6.348 6.397ZM11.032 62h10.736V27.333H11.033V62")
+				span.visually-hidden #{translate("app_on_x", {social: "LinkedIn"})}

services/web/frontend/js/features/ui/components/bootstrap-5/footer/fat-footer-base.tsx

@@ -1,7 +1,10 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import LanguagePicker from '../language-picker'
-import Icon from '@/shared/components/icon'
+import FacebookLogo from '@/shared/svgs/facebook-logo'
+import LinkedInLogo from '@/shared/svgs/linkedin-logo'
+import XLogo from '@/shared/svgs/x-logo'
+import classNames from 'classnames'
 
 type FooterLinkProps = {
   href: string
@@ -10,7 +13,8 @@ type FooterLinkProps = {
 
 type SocialMediaLinkProps = {
   href: string
-  icon: string
+  icon: React.ReactNode
+  className: string
   accessibilityLabel: string
 }
 
@@ -39,18 +43,21 @@ function FatFooterBase() {
       <div className="fat-footer-base-section fat-footer-base-social">
         <div className="fat-footer-base-item">
           <SocialMediaLink
-            href="https://twitter.com/overleaf"
-            icon="twitter-square"
-            accessibilityLabel={t('app_on_x', { social: 'Twitter' })}
+            href="https://x.com/overleaf"
+            icon={<XLogo />}
+            className="x-logo"
+            accessibilityLabel={t('app_on_x', { social: 'X' })}
           />
           <SocialMediaLink
             href="https://www.facebook.com/overleaf.editor"
-            icon="facebook-square"
+            icon={<FacebookLogo />}
+            className="facebook-logo"
             accessibilityLabel={t('app_on_x', { social: 'Facebook' })}
           />
           <SocialMediaLink
             href="https://www.linkedin.com/company/writelatex-limited"
-            icon="linkedin-square"
+            icon={<LinkedInLogo />}
+            className="linkedin-logo"
             accessibilityLabel={t('app_on_x', { social: 'LinkedIn' })}
           />
         </div>
@@ -70,15 +77,13 @@ function FooterBaseLink({ href, children }: FooterLinkProps) {
 function SocialMediaLink({
   href,
   icon,
+  className,
   accessibilityLabel,
 }: SocialMediaLinkProps) {
   return (
-    <a className="fat-footer-social" href={href}>
-      <Icon
-        type={icon}
-        className="fa"
-        accessibilityLabel={accessibilityLabel}
-      />
+    <a className={classNames('fat-footer-social', className)} href={href}>
+      {icon}
+      <span className="visually-hidden">{accessibilityLabel}</span>
     </a>
   )
 }

services/web/frontend/js/shared/svgs/facebook-logo.tsx

@@ -0,0 +1,34 @@
+function FacebookLogo() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="25"
+      viewBox="0 0 666.66668 666.66717"
+    >
+      <defs>
+        <clipPath id="a" clipPathUnits="userSpaceOnUse">
+          <path d="M0 700h700V0H0Z" />
+        </clipPath>
+      </defs>
+      <g
+        clipPath="url(#a)"
+        transform="matrix(1.33333 0 0 -1.33333 -133.333 800)"
+      >
+        <path
+          d="M0 0c0 138.071-111.929 250-250 250S-500 138.071-500 0c0-117.245 80.715-215.622 189.606-242.638v166.242h-51.552V0h51.552v32.919c0 85.092 38.508 124.532 122.048 124.532 15.838 0 43.167-3.105 54.347-6.211V81.986c-5.901.621-16.149.932-28.882.932-40.993 0-56.832-15.528-56.832-55.9V0h81.659l-14.028-76.396h-67.631v-171.773C-95.927-233.218 0-127.818 0 0"
+          fill="#0866ff"
+          className="background"
+          transform="translate(600 350)"
+        />
+        <path
+          d="m0 0 14.029 76.396H-67.63v27.019c0 40.372 15.838 55.899 56.831 55.899 12.733 0 22.981-.31 28.882-.931v69.253c-11.18 3.106-38.509 6.212-54.347 6.212-83.539 0-122.048-39.441-122.048-124.533V76.396h-51.552V0h51.552v-166.242a250.559 250.559 0 0 1 60.394-7.362c10.254 0 20.358.632 30.288 1.831V0Z"
+          className="text"
+          fill="#fff"
+          transform="translate(447.918 273.604)"
+        />
+      </g>
+    </svg>
+  )
+}
+
+export default FacebookLogo

services/web/frontend/js/shared/svgs/linkedin-logo.tsx

@@ -0,0 +1,20 @@
+function LinkedInLogo() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" height="25" viewBox="0 0 72 72">
+      <g fill="none" fillRule="evenodd">
+        <path
+          className="background"
+          fill="#0B66C3"
+          d="M8 72h56a8 8 0 0 0 8-8V8a8 8 0 0 0-8-8H8a8 8 0 0 0-8 8v56a8 8 0 0 0 8 8"
+        />
+        <path
+          className="text"
+          fill="#FFF"
+          d="M62 62H51.316V43.802c0-4.99-1.896-7.777-5.845-7.777-4.296 0-6.54 2.901-6.54 7.777V62H28.632V27.333H38.93v4.67s3.096-5.729 10.453-5.729c7.353 0 12.617 4.49 12.617 13.777zM16.35 22.794c-3.508 0-6.35-2.864-6.35-6.397C10 12.864 12.842 10 16.35 10c3.507 0 6.347 2.864 6.347 6.397 0 3.533-2.84 6.397-6.348 6.397ZM11.032 62h10.736V27.333H11.033V62"
+        />
+      </g>
+    </svg>
+  )
+}
+
+export default LinkedInLogo

services/web/frontend/js/shared/svgs/x-logo.tsx

@@ -0,0 +1,12 @@
+function XLogo() {
+  return (
+    <svg height="25" viewBox="0 0 1200 1227" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z"
+        fill="#0f1419"
+      />
+    </svg>
+  )
+}
+
+export default XLogo

services/web/frontend/stylesheets/bootstrap-5/components/footer.scss

@@ -126,16 +126,18 @@ footer.site-footer {
 }
 
 .fat-footer {
-  --link-color: var(--content-secondary-dark);
-  --link-hover-color: var(--content-secondary-dark);
-  --link-visited-color: var(--content-secondary-dark);
+  --footer-text-color: var(--content-secondary-dark);
+  --footer-background-color: var(--bg-dark-primary);
+  --link-color: var(--footer-text-color);
+  --link-hover-color: var(--footer-text-color);
+  --link-visited-color: var(--footer-text-color);
   --link-text-decoration: none;
   --link-hover-text-decoration: underline;
 
   container-name: fatfooter;
   container-type: inline-size;
-  background: var(--bg-dark-primary);
-  color: var(--content-secondary-dark);
+  background: var(--footer-background-color);
+  color: var(--footer-text-color);
   display: flex;
   flex-direction: column;
 
@@ -168,7 +170,7 @@ footer.site-footer {
   }
 
   .footer-section-heading {
-    color: var(--content-secondary-dark);
+    color: var(--footer-text-color);
 
     @include heading-sm;
 
@@ -195,7 +197,7 @@ footer.site-footer {
     @include body-sm;
 
     #language-picker-toggle {
-      color: var(--content-secondary-dark);
+      color: var(--footer-text-color);
     }
 
     .fat-footer-base-meta a:not(.dropdown-toggle) {
@@ -214,6 +216,31 @@ footer.site-footer {
     white-space: nowrap;
   }
 
+  .fat-footer-social {
+    &.x-logo svg path {
+      fill: var(--footer-text-color);
+    }
+
+    &.facebook-logo svg,
+    &.linkedin-logo svg {
+      path.background {
+        fill: var(--footer-text-color);
+      }
+    }
+
+    &.facebook-logo svg {
+      path.text {
+        fill: transparent;
+      }
+    }
+
+    &.linkedin-logo svg {
+      path.text {
+        fill: var(--footer-background-color);
+      }
+    }
+  }
+
   @include footer-container-down(md) {
     .fat-footer-sections {
       grid-template-columns: repeat(2, 1fr);
@@ -261,10 +288,6 @@ footer.site-footer {
         margin-top: var(--spacing-00);
       }
 
-      .fat-footer-social {
-        @include heading-lg;
-      }
-
       .fat-footer-base-copyright {
         order: 2;
       }
@@ -310,9 +333,7 @@ footer.site-footer {
       }
 
       .fat-footer-social {
-        margin: var(--spacing-07) var(--spacing-02);
-
-        @include heading-lg;
+        margin: var(--spacing-07) var(--spacing-03);
       }
     }
   }
@@ -379,6 +400,8 @@ footer.site-footer {
 
 .website-redesign-fat-footer,
 .website-redesign .fat-footer {
+  --footer-text-color: var(--content-primary);
+
   .fat-footer-container {
     @include footer-container-down(sm) {
       margin: var(--spacing-11) 0;
@@ -386,16 +409,7 @@ footer.site-footer {
   }
 
   &.fat-footer {
-    --link-color: var(--content-primary);
-    --link-hover-color: var(--content-primary);
-    --link-visited-color: var(--content-primary);
-
     background: var(--content-primary-dark);
-    color: var(--content-primary);
-
-    .footer-section-heading {
-      color: var(--content-primary);
-    }
 
     h2 {
       font-weight: 400;
@@ -408,6 +422,33 @@ footer.site-footer {
         color: inherit;
       }
     }
+
+    // This is duplication of fill colours in the SVGs themselves. This could be fixed by using :has() but that's not
+    // supported in older versions of browsers and these logos need to be correct.
+    .fat-footer-social {
+      &.x-logo svg path {
+        fill: #0f1419;
+      }
+
+      &.facebook-logo svg,
+      &.linkedin-logo svg {
+        path.text {
+          fill: #fff;
+        }
+      }
+
+      &.facebook-logo svg {
+        path.background {
+          fill: #0866ff;
+        }
+      }
+
+      &.linkedin-logo svg {
+        path.background {
+          fill: #0b66c3;
+        }
+      }
+    }
   }
 
   .footer-brand {

services/web/frontend/stylesheets/components/footer.less

@@ -131,6 +131,31 @@ footer.site-footer {
         }
       }
     }
+
+    .fat-footer-social {
+      &.x-logo svg path {
+        fill: @ol-blue-gray-1;
+      }
+
+      &.facebook-logo svg,
+      &.linkedin-logo svg {
+        path.background {
+          fill: @ol-blue-gray-1;
+        }
+      }
+
+      &.facebook-logo svg {
+        path.text {
+          fill: transparent;
+        }
+      }
+
+      &.linkedin-logo svg {
+        path.text {
+          fill: @ol-blue-gray-6;
+        }
+      }
+    }
   }
 
   .fat-footer-base-item {
@@ -324,6 +349,33 @@ footer.site-footer {
     .fat-footer-base {
       color: @neutral-90;
     }
+
+    // This is duplication of fill colours in the SVGs themselves. This could be avoided by using :has() but that's not
+    // supported in older versions of browsers and these logos need to be correct.
+    .fat-footer-social {
+      &.x-logo svg path {
+        fill: #0f1419;
+      }
+
+      &.facebook-logo svg,
+      &.linkedin-logo svg {
+        path.text {
+          fill: #fff;
+        }
+      }
+
+      &.facebook-logo svg {
+        path.background {
+          fill: #0866ff;
+        }
+      }
+
+      &.linkedin-logo svg {
+        path.background {
+          fill: #0b66c3;
+        }
+      }
+    }
   }
 
   .footer-brand {

services/web/frontend/stylesheets/core/scaffolding.less

@@ -154,7 +154,8 @@ hr {
   border: 0;
 };
 
-.sr-only {
+.sr-only,
+.visually-hidden {
   @sr-only();
 }