diff --git a/services/web/app/views/layout/fat-footer-base.pug b/services/web/app/views/layout/fat-footer-base.pug index 95cf11f001..2e3dd2074f 100644 --- a/services/web/app/views/layout/fat-footer-base.pug +++ b/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"})} diff --git a/services/web/frontend/js/features/ui/components/bootstrap-5/footer/fat-footer-base.tsx b/services/web/frontend/js/features/ui/components/bootstrap-5/footer/fat-footer-base.tsx index e791060d97..dd85660ffd 100644 --- a/services/web/frontend/js/features/ui/components/bootstrap-5/footer/fat-footer-base.tsx +++ b/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() {
} + className="x-logo" + accessibilityLabel={t('app_on_x', { social: 'X' })} /> } + className="facebook-logo" accessibilityLabel={t('app_on_x', { social: 'Facebook' })} /> } + className="linkedin-logo" accessibilityLabel={t('app_on_x', { social: 'LinkedIn' })} />
@@ -70,15 +77,13 @@ function FooterBaseLink({ href, children }: FooterLinkProps) { function SocialMediaLink({ href, icon, + className, accessibilityLabel, }: SocialMediaLinkProps) { return ( - - + + {icon} + {accessibilityLabel} ) } diff --git a/services/web/frontend/js/shared/svgs/facebook-logo.tsx b/services/web/frontend/js/shared/svgs/facebook-logo.tsx new file mode 100644 index 0000000000..700665f138 --- /dev/null +++ b/services/web/frontend/js/shared/svgs/facebook-logo.tsx @@ -0,0 +1,34 @@ +function FacebookLogo() { + return ( + + + + + + + + + + + + ) +} + +export default FacebookLogo diff --git a/services/web/frontend/js/shared/svgs/linkedin-logo.tsx b/services/web/frontend/js/shared/svgs/linkedin-logo.tsx new file mode 100644 index 0000000000..54e89533a3 --- /dev/null +++ b/services/web/frontend/js/shared/svgs/linkedin-logo.tsx @@ -0,0 +1,20 @@ +function LinkedInLogo() { + return ( + + + + + + + ) +} + +export default LinkedInLogo diff --git a/services/web/frontend/js/shared/svgs/x-logo.tsx b/services/web/frontend/js/shared/svgs/x-logo.tsx new file mode 100644 index 0000000000..6f781b5211 --- /dev/null +++ b/services/web/frontend/js/shared/svgs/x-logo.tsx @@ -0,0 +1,12 @@ +function XLogo() { + return ( + + + + ) +} + +export default XLogo diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/footer.scss b/services/web/frontend/stylesheets/bootstrap-5/components/footer.scss index 3f6b829a37..139994ab08 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/components/footer.scss +++ b/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 { diff --git a/services/web/frontend/stylesheets/components/footer.less b/services/web/frontend/stylesheets/components/footer.less index e00e574e27..b36f51ab11 100644 --- a/services/web/frontend/stylesheets/components/footer.less +++ b/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 { diff --git a/services/web/frontend/stylesheets/core/scaffolding.less b/services/web/frontend/stylesheets/core/scaffolding.less index 58563cee46..58baf0241b 100755 --- a/services/web/frontend/stylesheets/core/scaffolding.less +++ b/services/web/frontend/stylesheets/core/scaffolding.less @@ -154,7 +154,8 @@ hr { border: 0; }; -.sr-only { +.sr-only, +.visually-hidden { @sr-only(); }