1import { css } from '@emotion/react'; 2import { 3 breakpoints, 4 theme, 5 iconSize, 6 spacing, 7 typography, 8 ChevronDownIcon, 9} from '@expo/styleguide'; 10import React from 'react'; 11 12import { BOLD, LinkBase } from '~/ui/components/Text'; 13import { ExpoLogoIcon } from '~/ui/foundations/icons'; 14 15export const Logo = () => ( 16 <LinkBase css={linkStyle} href="/"> 17 <div css={logoStyle}> 18 <ExpoLogoIcon fill={theme.text.default} /> 19 </div> 20 <BOLD css={titleStyle}>Expo</BOLD> 21 <ChevronDownIcon size={iconSize.regular} css={chevronStyle} color={theme.icon.secondary} /> 22 <span css={subtitleStyle}>Docs</span> 23 </LinkBase> 24); 25 26const linkStyle = css` 27 display: flex; 28 flex-direction: row; 29 align-items: center; 30 text-decoration: none; 31`; 32 33const logoStyle = css` 34 float: left; 35 margin-right: ${spacing[2]}px; 36`; 37 38const chevronStyle = css` 39 transform: rotate(-90deg); 40 margin: 0 ${spacing[2]}px; 41 42 @media screen and (max-width: ${breakpoints.medium}px) { 43 margin-left: ${spacing[0.5]}px; 44 } 45`; 46 47const titleStyle = css` 48 ${typography.fontSizes[20]} 49 50 @media screen and (max-width: ${breakpoints.medium}px) { 51 display: none; 52 } 53`; 54 55const subtitleStyle = css` 56 color: ${theme.text.default}; 57 ${typography.fontSizes[18]} 58`; 59