1import React from 'react' 2import styled from 'styled-components' 3import {Flex, Box} from 'rebass' 4import {LinkButton} from '../Button' 5 6const Container = styled(Flex)` 7 background-color: ${(props) => props.theme.colors.purpleBlack}; 8 color: ${(props) => props.theme.colors.white}; 9` 10 11const ContentWrapper = styled(Flex)` 12 max-width: 640px; 13 align-items: center; 14` 15 16const Text = styled.p` 17 line-height: 1.5; 18 text-align: center; 19` 20 21const aStyle = { 22 color: '#fb3b49', 23 textDecoration: 'none' 24} 25 26const DarkBlock = () => { 27 return ( 28 <Container> 29 <ContentWrapper px={4} py={6} m='auto' flexDirection='column'> 30 <Text> 31 <p>The current stable version of npm is <a href={'https://github.com/npm/cli/releases/latest'} style={aStyle}>available on GitHub.</a></p> 32 <p>To upgrade, run: <code className={'language-text'} style={{color: 'white'}}>npm install npm@latest -g</code></p> 33 </Text> 34 <Box pt={4}><LinkButton to='cli-commands/npm' w={'120px'}>read docs</LinkButton></Box> 35 </ContentWrapper> 36 </Container> 37 ) 38} 39 40export default DarkBlock 41