1import { css } from '@emotion/react'; 2import { 3 breakpoints, 4 theme, 5 iconSize, 6 spacing, 7 typography, 8 ChevronDownIcon, 9 Logo as LogoIcon, 10} from '@expo/styleguide'; 11import React from 'react'; 12 13import { BOLD, LinkBase } from '~/ui/components/Text'; 14 15export const Logo = () => ( 16 <LinkBase css={linkStyle} href="/"> 17 <div css={logoStyle}> 18 <LogoIcon color={theme.text.default} style={{ height: 20 }} /> 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 padding-top: 2px; 36 margin-right: ${spacing[1.5]}px; 37`; 38 39const chevronStyle = css` 40 transform: rotate(-90deg); 41 margin: 0 ${spacing[2]}px; 42 43 @media screen and (max-width: ${breakpoints.medium}px) { 44 margin-left: ${spacing[0.5]}px; 45 } 46`; 47 48const titleStyle = css` 49 ${typography.fontSizes[20]} 50 51 @media screen and (max-width: ${breakpoints.medium}px) { 52 display: none; 53 } 54`; 55 56const subtitleStyle = css` 57 color: ${theme.text.default}; 58 ${typography.fontSizes[18]} 59`; 60