diff --git a/packages/website/ts/components/docs/resource/level.tsx b/packages/website/ts/components/docs/resource/level.tsx index 795f1ea19c..e008e587a9 100644 --- a/packages/website/ts/components/docs/resource/level.tsx +++ b/packages/website/ts/components/docs/resource/level.tsx @@ -43,6 +43,7 @@ export const Level: React.FC = ({ difficulty }) => { const LevelWrapper = styled.div` display: flex; align-items: center; + margin: 20px 0; `; const DifficultyLabel = styled.span` diff --git a/packages/website/ts/components/docs/resource/resource.tsx b/packages/website/ts/components/docs/resource/resource.tsx index b0eb3503ae..b13c3932d3 100644 --- a/packages/website/ts/components/docs/resource/resource.tsx +++ b/packages/website/ts/components/docs/resource/resource.tsx @@ -18,14 +18,12 @@ export interface IResourceProps { } export const Resource: React.FC = ({ heading, description, isCommunity, url, tags }) => { - console.log('isCommunity', isCommunity); - return ( {heading} - + {description} @@ -43,18 +41,19 @@ export const Resource: React.FC = ({ heading, description, isCom const Wrapper = styled.div` border: 1px solid #d7e3db; - padding: 25px 30px; + padding: 25px 30px 5px; margin-bottom: 1.1rem; display: block; `; const Meta = styled.div` display: flex; - align-items: center; justify-content: space-between; + flex-wrap: wrap; `; const Tags = styled.div` - display: flex; + display: inline-flex; align-items: center; + flex-wrap: wrap; `; diff --git a/packages/website/ts/components/docs/resource/tag.tsx b/packages/website/ts/components/docs/resource/tag.tsx index 94bee3f2f9..32a03b3327 100644 --- a/packages/website/ts/components/docs/resource/tag.tsx +++ b/packages/website/ts/components/docs/resource/tag.tsx @@ -28,18 +28,15 @@ const TagText = styled.div` background-color: ${({ isInverted }) => (isInverted ? colors.brandDark : colors.backgroundLight)}; color: ${({ isInverted }) => (isInverted ? colors.white : colors.brandDark)}; border-radius: 4px; - font-size: 0.666666667rem; + font-size: 0.67rem; font-family: 'Formular Mono'; font-weight: 400; + margin: 5px 10px 5px 0; padding: 6px 10px 5px; display: inline-flex; align-items: center; text-transform: uppercase; - & + & { - margin-left: 10px; - } - svg { margin-right: 7px; } diff --git a/packages/website/ts/components/docs/search_input.tsx b/packages/website/ts/components/docs/search_input.tsx index 5d3a7a4175..c9ac220aa3 100644 --- a/packages/website/ts/components/docs/search_input.tsx +++ b/packages/website/ts/components/docs/search_input.tsx @@ -1,11 +1,10 @@ import React from 'react'; -import styled from 'styled-components'; - -import { CustomAutoComplete } from 'ts/components/docs/search/autocomplete'; import algoliasearch from 'algoliasearch/lite'; import { Configure, connectAutoComplete, Index, InstantSearch } from 'react-instantsearch-dom'; +import { CustomAutoComplete } from 'ts/components/docs/search/autocomplete'; + const searchClient = algoliasearch('VHMP18K2OO', 'e46d0171577e85fa5418c50b18f80ade'); interface ISearchInputProps { diff --git a/packages/website/ts/pages/docs/tools.tsx b/packages/website/ts/pages/docs/tools.tsx index 4f96e94714..5cf0fc34ed 100644 --- a/packages/website/ts/pages/docs/tools.tsx +++ b/packages/website/ts/pages/docs/tools.tsx @@ -67,6 +67,10 @@ const Columns = styled.div` grid-template-columns: 250px 1fr; grid-column-gap: 98px; grid-row-gap: 30px; + + @media (max-width: 900px) { + grid-template-columns: 1fr; + } `; const FeaturedToolsWrapper = styled.div` @@ -180,7 +184,7 @@ const resources = [ heading: '0x Mesh - your gateway to networked liquidity', description: 'Learn about the 0x peer-to-peer network for sharing orders and how you can use it to tap into networked liquidity.', - tags: ['Relayer'], + tags: ['Relayer', 'Dogs', 'Bells and whistles', 'Interstellar', 'Maharaji'], url: 'https://0x.org', isCommunity: true, },