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