mirror of
https://github.com/yu-i-i/overleaf-cep.git
synced 2026-05-23 17:19:37 +02:00
Merge pull request #24021 from overleaf/td-social-logos
Update social media logos in footer GitOrigin-RevId: a9498d7501c6d4c4ce1b76884f0f278dd92d4cf7
This commit is contained in:
Tim Down
@@ -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"})}
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
34
services/web/frontend/js/shared/svgs/facebook-logo.tsx
Normal file
34
services/web/frontend/js/shared/svgs/facebook-logo.tsx
Normal file
@@ -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
|
||||
20
services/web/frontend/js/shared/svgs/linkedin-logo.tsx
Normal file
20
services/web/frontend/js/shared/svgs/linkedin-logo.tsx
Normal file
@@ -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
|
||||
12
services/web/frontend/js/shared/svgs/x-logo.tsx
Normal file
12
services/web/frontend/js/shared/svgs/x-logo.tsx
Normal file
@@ -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
|
||||
@@ -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 {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -154,7 +154,8 @@ hr {
|
||||
border: 0;
|
||||
};
|
||||
|
||||
.sr-only {
|
||||
.sr-only,
|
||||
.visually-hidden {
|
||||
@sr-only();
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user