Browse Source
* Adding Social Banner with Support for Ukraine * Changing spacing the social banner * Fixing lint errors * Remove external link icon from social banner * Add banner for beta site * Add todo * Fix centering on mobile in old site Co-authored-by: Rick Hanlon <rickhanlonii@gmail.com>main
Dmitry Vinnik | Meta
3 years ago
committed by
GitHub
GitHub
11 changed files with 199 additions and 56 deletions
@ -0,0 +1,26 @@ |
|||
/** |
|||
* Copyright (c) Facebook, Inc. and its affiliates. |
|||
* |
|||
*/ |
|||
|
|||
import React from 'react'; |
|||
import {ExternalLink} from './ExternalLink'; |
|||
|
|||
// TODO: Unify with the old site settings.
|
|||
// Turning this off also requires changing the Page top value to pull up the sidebar.
|
|||
const bannerText = 'Support Ukraine 🇺🇦'; |
|||
const bannerLink = 'https://opensource.fb.com/support-ukraine'; |
|||
const bannerLinkText = 'Help Provide Humanitarian Aid to Ukraine.'; |
|||
|
|||
export default function SocialBanner() { |
|||
return ( |
|||
<div className="w-full bg-gray-100 dark:bg-gray-700 sticky py-2 h-16 sm:h-10 sm:py-0 flex items-center justify-center flex-col sm:flex-row"> |
|||
{bannerText} |
|||
<ExternalLink |
|||
className="ml-0 sm:ml-1 text-link dark:text-link-dark hover:underline" |
|||
href={bannerLink}> |
|||
{bannerLinkText} |
|||
</ExternalLink> |
|||
</div> |
|||
); |
|||
} |
|||
@ -0,0 +1,77 @@ |
|||
/** |
|||
* Copyright (c) Facebook, Inc. and its affiliates. |
|||
* |
|||
* @emails react-core |
|||
* @flow |
|||
*/ |
|||
|
|||
// $FlowFixMe Update Flow
|
|||
import React from 'react'; |
|||
import {colors, fonts, media} from 'theme'; |
|||
import ExternalLinkSvg from 'templates/components/ExternalLinkSvg'; |
|||
|
|||
const linkProps = { |
|||
href: 'https://opensource.fb.com/support-ukraine', |
|||
target: '_blank', |
|||
rel: 'noopener', |
|||
}; |
|||
|
|||
const bannerText = 'Support Ukraine 🇺🇦 '; |
|||
const bannerLink = 'Help Provide Humanitarian Aid to Ukraine.'; |
|||
|
|||
export default function SocialBanner() { |
|||
return ( |
|||
<div |
|||
css={{ |
|||
display: 'var(--social-banner-display)', |
|||
height: 'var(--social-banner-height-normal)', |
|||
fontSize: 18, |
|||
[media.lessThan('large')]: { |
|||
fontSize: 16, |
|||
}, |
|||
[media.lessThan('small')]: { |
|||
height: 'var(--social-banner-height-small)', |
|||
fontSize: 14, |
|||
}, |
|||
}}> |
|||
<div |
|||
css={{ |
|||
display: 'flex', |
|||
justifyContent: 'center', |
|||
alignItems: 'center', |
|||
height: '100%', |
|||
}}> |
|||
<span |
|||
css={{ |
|||
display: 'flex', |
|||
[media.lessThan('small')]: { |
|||
flexDirection: 'column', |
|||
lineHeight: 1.5, |
|||
textAlign: 'center', |
|||
}, |
|||
}}> |
|||
<span |
|||
css={{ |
|||
marginRight: '0.5rem', |
|||
}}> |
|||
{bannerText} |
|||
</span> |
|||
|
|||
<a |
|||
css={{ |
|||
color: '#ddd', |
|||
transition: 'color 200ms ease-out', |
|||
':hover': { |
|||
color: colors.white, |
|||
}, |
|||
}} |
|||
{...linkProps} |
|||
target="_blank" |
|||
rel="noopener"> |
|||
<span css={{color: colors.brand}}>{bannerLink}</span> |
|||
</a> |
|||
</span> |
|||
</div> |
|||
</div> |
|||
); |
|||
} |
|||
@ -0,0 +1,9 @@ |
|||
/** |
|||
* Copyright (c) Facebook, Inc. and its affiliates. |
|||
* |
|||
* @emails react-core |
|||
*/ |
|||
|
|||
import SurveyBanner from './SurveyBanner'; |
|||
|
|||
export default SurveyBanner; |
|||
Loading…
Reference in new issue