From 7748c8634c854058530b48c3abac7862aecd3984 Mon Sep 17 00:00:00 2001 From: Alexey Ivanov Date: Fri, 24 Jan 2020 23:15:23 +0900 Subject: [PATCH 1/9] Move react components to components folder --- pages/_document.js | 1 + pages/doc.js | 20 ++++++++++--------- pages/features.js | 13 ++++++------ pages/index.js | 16 +++++++-------- pages/support.js | 13 ++++++------ src/{ => components}/Diagram/index.js | 7 ++++--- .../Documentation/HeadInjector.js | 2 +- .../Documentation/LightButton.js | 2 +- .../Documentation/Markdown/Markdown.js | 19 +++++++++--------- .../Documentation/Markdown/lang/dvc.js | 0 .../Documentation/Markdown/lang/usage.js | 0 .../Markdown/utils/remark-linker.js | 3 ++- .../Documentation/RightPanel/RightPanel.js | 4 ++-- .../Documentation/SidebarMenu/SidebarMenu.js | 17 ++++++++-------- .../Documentation/Tutorials.js | 0 src/{ => components}/DownloadButton/index.js | 4 ++-- src/{ => components}/FeaturesHero/index.js | 0 src/{ => components}/Footer/index.js | 3 ++- src/{ => components}/GithubLine/index.js | 0 src/{ => components}/Hamburger/index.js | 0 src/{ => components}/HamburgerMenu/index.js | 5 +++-- src/{ => components}/Hero/index.js | 3 ++- src/{ => components}/LandingHero/index.js | 8 +++++--- src/{ => components}/Layout/index.js | 6 +++--- src/{ => components}/LearnMore/index.js | 6 ++++-- src/{ => components}/Modal/index.js | 0 src/{ => components}/Nav/index.js | 5 +++-- src/{ => components}/Page/index.js | 3 ++- src/{ => components}/Popover/Popover.js | 0 src/{ => components}/PromoSection/index.js | 10 ++++++---- src/{ => components}/SearchForm/index.js | 0 src/{ => components}/Subscribe/index.js | 3 ++- src/{ => components}/SubscribeForm/index.js | 3 ++- src/{ => components}/TextCollapse/index.js | 0 src/{ => components}/TextRotate/index.js | 0 src/{ => components}/Tooltip/desktop-view.js | 2 +- src/{ => components}/Tooltip/index.js | 4 ++-- src/{ => components}/Tooltip/mobile-view.js | 0 src/{ => components}/TopMenu/index.js | 13 ++++++------ src/{ => components}/TrySection/index.js | 2 +- src/{ => components}/UseCases/index.js | 5 +++-- src/{ => components}/Video/index.js | 3 ++- 42 files changed, 110 insertions(+), 95 deletions(-) rename src/{ => components}/Diagram/index.js (99%) rename src/{ => components}/Documentation/HeadInjector.js (86%) rename src/{ => components}/Documentation/LightButton.js (97%) rename src/{ => components}/Documentation/Markdown/Markdown.js (98%) rename src/{ => components}/Documentation/Markdown/lang/dvc.js (100%) rename src/{ => components}/Documentation/Markdown/lang/usage.js (100%) rename src/{ => components}/Documentation/Markdown/utils/remark-linker.js (95%) rename src/{ => components}/Documentation/RightPanel/RightPanel.js (99%) rename src/{ => components}/Documentation/SidebarMenu/SidebarMenu.js (96%) rename src/{ => components}/Documentation/Tutorials.js (100%) rename src/{ => components}/DownloadButton/index.js (98%) rename src/{ => components}/FeaturesHero/index.js (100%) rename src/{ => components}/Footer/index.js (98%) rename src/{ => components}/GithubLine/index.js (100%) rename src/{ => components}/Hamburger/index.js (100%) rename src/{ => components}/HamburgerMenu/index.js (98%) rename src/{ => components}/Hero/index.js (91%) rename src/{ => components}/LandingHero/index.js (98%) rename src/{ => components}/Layout/index.js (95%) rename src/{ => components}/LearnMore/index.js (95%) rename src/{ => components}/Modal/index.js (100%) rename src/{ => components}/Nav/index.js (97%) rename src/{ => components}/Page/index.js (93%) rename src/{ => components}/Popover/Popover.js (100%) rename src/{ => components}/PromoSection/index.js (96%) rename src/{ => components}/SearchForm/index.js (100%) rename src/{ => components}/Subscribe/index.js (98%) rename src/{ => components}/SubscribeForm/index.js (98%) rename src/{ => components}/TextCollapse/index.js (100%) rename src/{ => components}/TextRotate/index.js (100%) rename src/{ => components}/Tooltip/desktop-view.js (99%) rename src/{ => components}/Tooltip/index.js (92%) rename src/{ => components}/Tooltip/mobile-view.js (100%) rename src/{ => components}/TopMenu/index.js (95%) rename src/{ => components}/TrySection/index.js (98%) rename src/{ => components}/UseCases/index.js (98%) rename src/{ => components}/Video/index.js (98%) diff --git a/pages/_document.js b/pages/_document.js index b6147b6012..5b5216aef3 100644 --- a/pages/_document.js +++ b/pages/_document.js @@ -1,6 +1,7 @@ import React from 'react' import Document, { Head, Main, NextScript } from 'next/document' import { ServerStyleSheet } from 'styled-components' + import { META_BASE_TITLE, META_DESCRIPTION, diff --git a/pages/doc.js b/pages/doc.js index ce71d3d4be..931bb6b280 100644 --- a/pages/doc.js +++ b/pages/doc.js @@ -8,17 +8,19 @@ import Router from 'next/router' import fetch from 'isomorphic-fetch' // components -import Page from '../src/Page' -import { HeadInjector } from '../src/Documentation/HeadInjector' -import Hamburger from '../src/Hamburger' -import SearchForm from '../src/SearchForm' -import SidebarMenu from '../src/Documentation/SidebarMenu/SidebarMenu' -import Markdown from '../src/Documentation/Markdown/Markdown' -import RightPanel from '../src/Documentation/RightPanel/RightPanel' +import Page from '../src/components/Page' +import { HeadInjector } from '../src/components/Documentation/HeadInjector' +import Hamburger from '../src/components/Hamburger' +import SearchForm from '../src/components/SearchForm' +import SidebarMenu from '../src/components/Documentation/SidebarMenu/SidebarMenu' +import Markdown, { + extractSlugFromTitle +} from '../src/components/Documentation/Markdown/Markdown' +import RightPanel from '../src/components/Documentation/RightPanel/RightPanel' // sidebar data and helpers + import { getItemByPath, structure } from '../src/utils/sidebar' -import { extractSlugFromTitle } from '../src/Documentation/Markdown/Markdown' -// styles + import { media } from '../src/styles' const ROOT_ELEMENT = 'bodybag' diff --git a/pages/features.js b/pages/features.js index b3ad984fa4..101a172e78 100644 --- a/pages/features.js +++ b/pages/features.js @@ -1,15 +1,14 @@ import React from 'react' import styled from 'styled-components' - import Head from 'next/head' -import { container } from '../src/styles' -import { media } from '../src/styles' +import Page from '../src/components/Page' +import Hero from '../src/components/Hero' +import FeaturesHero from '../src/components/FeaturesHero' +import TrySection from '../src/components/TrySection' + +import { container, media } from '../src/styles' -import Page from '../src/Page' -import Hero from '../src/Hero' -import FeaturesHero from '../src/FeaturesHero' -import TrySection from '../src/TrySection' import { META_BASE_TITLE } from '../src/consts' const HeadInjector = () => ( diff --git a/pages/index.js b/pages/index.js index b62f04c6bb..c75a31407a 100644 --- a/pages/index.js +++ b/pages/index.js @@ -2,15 +2,15 @@ import React from 'react' import styled from 'styled-components' import Head from 'next/head' -import LearnMore from '../src/LearnMore' +import LearnMore from '../src/components/LearnMore' +import Page from '../src/components/Page' +import Hero from '../src/components/Hero' +import LandingHero from '../src/components/LandingHero' +import Diagram from '../src/components/Diagram' +import PromoSection from '../src/components/PromoSection' +import UseCases from '../src/components/UseCases' +import Subscribe from '../src/components/Subscribe' -import Page from '../src/Page' -import Hero from '../src/Hero' -import LandingHero from '../src/LandingHero' -import Diagram from '../src/Diagram' -import PromoSection from '../src/PromoSection' -import UseCases from '../src/UseCases' -import Subscribe from '../src/Subscribe' import { META_BASE_TITLE } from '../src/consts' const HeadInjector = () => ( diff --git a/pages/support.js b/pages/support.js index b9b91e4fd0..a15860692a 100644 --- a/pages/support.js +++ b/pages/support.js @@ -1,16 +1,15 @@ import React from 'react' import styled from 'styled-components' -import { Mark } from '../src/styles' import color from 'color' - import Head from 'next/head' -import { OnlyDesktop, container, media } from '../src/styles' +import Page from '../src/components/Page' +import Hero from '../src/components/Hero' +import TrySection from '../src/components/TrySection' +import Popover from '../src/components/Popover/Popover' + +import { Mark, OnlyDesktop, container, media } from '../src/styles' -import Page from '../src/Page' -import Hero from '../src/Hero' -import TrySection from '../src/TrySection' -import Popover from '../src/Popover/Popover' import { META_BASE_TITLE } from '../src/consts' const HeadInjector = () => ( diff --git a/src/Diagram/index.js b/src/components/Diagram/index.js similarity index 99% rename from src/Diagram/index.js rename to src/components/Diagram/index.js index 76a0b8a3f7..c699c71835 100644 --- a/src/Diagram/index.js +++ b/src/components/Diagram/index.js @@ -4,6 +4,9 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import NextLink from 'next/link' import styled from 'styled-components' +import { Element } from 'react-scroll' +import Slider from 'react-slick' + import { OnlyDesktop, OnlyMobile, @@ -11,9 +14,7 @@ import { columns, container, media -} from '../styles' -import { Element } from 'react-scroll' -import Slider from 'react-slick' +} from '../../styles' const LearnMore = ({ href }) => ( diff --git a/src/Documentation/HeadInjector.js b/src/components/Documentation/HeadInjector.js similarity index 86% rename from src/Documentation/HeadInjector.js rename to src/components/Documentation/HeadInjector.js index b00cab0f29..c0a5b22391 100644 --- a/src/Documentation/HeadInjector.js +++ b/src/components/Documentation/HeadInjector.js @@ -2,7 +2,7 @@ import Head from 'next/head' import PropTypes from 'prop-types' import React from 'react' -import { META_BASE_TITLE } from '../consts' +import { META_BASE_TITLE } from '../../consts' export const HeadInjector = ({ sectionName = 'Documentation' }) => ( diff --git a/src/Documentation/LightButton.js b/src/components/Documentation/LightButton.js similarity index 97% rename from src/Documentation/LightButton.js rename to src/components/Documentation/LightButton.js index 90d083a59c..48213b3f65 100644 --- a/src/Documentation/LightButton.js +++ b/src/components/Documentation/LightButton.js @@ -14,7 +14,7 @@ export const LightButton = styled.a` border-radius: 3px; cursor: pointer; transition: 0.2s background-color ease-out; - z-index: 1 + z-index: 1; &:hover { background-color: #f5f7f9; diff --git a/src/Documentation/Markdown/Markdown.js b/src/components/Documentation/Markdown/Markdown.js similarity index 98% rename from src/Documentation/Markdown/Markdown.js rename to src/components/Documentation/Markdown/Markdown.js index 1fcde582f7..dda5ef15b2 100644 --- a/src/Documentation/Markdown/Markdown.js +++ b/src/components/Documentation/Markdown/Markdown.js @@ -2,13 +2,15 @@ import React from 'react' import PropTypes from 'prop-types' import NextLink from 'next/link' import Router from 'next/router' -// components import ReactMarkdown from 'react-markdown' +import Collapsible from 'react-collapsible' +import kebabCase from 'lodash.kebabcase' +import styled from 'styled-components' + import { LightButton } from '../LightButton' import Tutorials from '../Tutorials' import Tooltip from '../../Tooltip' -import Collapsible from 'react-collapsible' -// syntax highlighter + import { Light as SyntaxHighlighter } from 'react-syntax-highlighter' import { docco } from 'react-syntax-highlighter/dist/cjs/styles/hljs' import python from 'react-syntax-highlighter/dist/cjs/languages/hljs/python' @@ -20,13 +22,10 @@ import vim from 'react-syntax-highlighter/dist/cjs/languages/hljs/vim' import usage from './lang/usage' import dvc from './lang/dvc' import linker from './utils/remark-linker' -// consts -import { PAGE_DOC } from '../../consts' -// utils -import kebabCase from 'lodash.kebabcase' -// styles -import styled from 'styled-components' -import { media } from '../../../src/styles' + +import { PAGE_DOC } from '../../../consts' + +import { media } from '../../../styles' SyntaxHighlighter.registerLanguage('dvc', dvc) SyntaxHighlighter.registerLanguage('python', python) diff --git a/src/Documentation/Markdown/lang/dvc.js b/src/components/Documentation/Markdown/lang/dvc.js similarity index 100% rename from src/Documentation/Markdown/lang/dvc.js rename to src/components/Documentation/Markdown/lang/dvc.js diff --git a/src/Documentation/Markdown/lang/usage.js b/src/components/Documentation/Markdown/lang/usage.js similarity index 100% rename from src/Documentation/Markdown/lang/usage.js rename to src/components/Documentation/Markdown/lang/usage.js diff --git a/src/Documentation/Markdown/utils/remark-linker.js b/src/components/Documentation/Markdown/utils/remark-linker.js similarity index 95% rename from src/Documentation/Markdown/utils/remark-linker.js rename to src/components/Documentation/Markdown/utils/remark-linker.js index b5aa40118a..36a9d24371 100644 --- a/src/Documentation/Markdown/utils/remark-linker.js +++ b/src/components/Documentation/Markdown/utils/remark-linker.js @@ -1,7 +1,8 @@ ;`use strict` import visit from 'unist-util-visit' -import { getItemByPath } from '../../../utils/sidebar' + +import { getItemByPath } from '../../../../utils/sidebar' const DVC_REGEXP = /dvc\s+[a-z][a-z-.]*/ const COMMAND_REGEXP = /^[a-z][a-z-]*$/ diff --git a/src/Documentation/RightPanel/RightPanel.js b/src/components/Documentation/RightPanel/RightPanel.js similarity index 99% rename from src/Documentation/RightPanel/RightPanel.js rename to src/components/Documentation/RightPanel/RightPanel.js index 085d54a74c..74431d3c3b 100644 --- a/src/Documentation/RightPanel/RightPanel.js +++ b/src/components/Documentation/RightPanel/RightPanel.js @@ -1,10 +1,10 @@ import React from 'react' import PropTypes from 'prop-types' import styled from 'styled-components' +import throttle from 'lodash.throttle' + import { LightButton } from '../LightButton' import Tutorials from '../Tutorials' -// utils -import throttle from 'lodash.throttle' const ROOT_ELEMENT = 'bodybag' const MARKDOWN_ROOT = '#markdown-root' diff --git a/src/Documentation/SidebarMenu/SidebarMenu.js b/src/components/Documentation/SidebarMenu/SidebarMenu.js similarity index 96% rename from src/Documentation/SidebarMenu/SidebarMenu.js rename to src/components/Documentation/SidebarMenu/SidebarMenu.js index e5f1ab0811..0c059fd0aa 100644 --- a/src/Documentation/SidebarMenu/SidebarMenu.js +++ b/src/components/Documentation/SidebarMenu/SidebarMenu.js @@ -3,17 +3,16 @@ import PerfectScrollbar from 'perfect-scrollbar' import scrollIntoView from 'dom-scroll-into-view' import PropTypes from 'prop-types' import NextLink from 'next/link' -// consts -import { PAGE_DOC } from '../../consts' -// components -import DownloadButton from '../../DownloadButton' -// utils import includes from 'lodash.includes' -// styles import styled from 'styled-components' -import { OnlyDesktop, media } from '../../styles' -// sidebar helpers -import { getParentsListFromPath } from '../../utils/sidebar' + +import { PAGE_DOC } from '../../../consts' + +import DownloadButton from '../../DownloadButton' + +import { OnlyDesktop, media } from '../../../styles' + +import { getParentsListFromPath } from '../../../utils/sidebar' /** Height of each menu child items (to calc Element weight for animations) */ const heightMap = {} diff --git a/src/Documentation/Tutorials.js b/src/components/Documentation/Tutorials.js similarity index 100% rename from src/Documentation/Tutorials.js rename to src/components/Documentation/Tutorials.js diff --git a/src/DownloadButton/index.js b/src/components/DownloadButton/index.js similarity index 98% rename from src/DownloadButton/index.js rename to src/components/DownloadButton/index.js index fedcb59394..7f3e157bf5 100644 --- a/src/DownloadButton/index.js +++ b/src/components/DownloadButton/index.js @@ -2,8 +2,8 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import styled, { css } from 'styled-components' -import isClient from '../utils/isClient' -import { logEvent } from '../utils/ga' +import isClient from '../../utils/isClient' +import { logEvent } from '../../utils/ga' const VERSION = `0.80.0` const OSX = `osx` diff --git a/src/FeaturesHero/index.js b/src/components/FeaturesHero/index.js similarity index 100% rename from src/FeaturesHero/index.js rename to src/components/FeaturesHero/index.js diff --git a/src/Footer/index.js b/src/components/Footer/index.js similarity index 98% rename from src/Footer/index.js rename to src/components/Footer/index.js index 7f7dfde01e..e97789ed56 100644 --- a/src/Footer/index.js +++ b/src/components/Footer/index.js @@ -2,7 +2,8 @@ import React from 'react' import PropTypes from 'prop-types' import styled from 'styled-components' import NextLink from 'next/link' -import { columns, container, media } from '../styles' + +import { columns, container, media } from '../../styles' const SocialLink = ({ src, href, children }) => ( diff --git a/src/GithubLine/index.js b/src/components/GithubLine/index.js similarity index 100% rename from src/GithubLine/index.js rename to src/components/GithubLine/index.js diff --git a/src/Hamburger/index.js b/src/components/Hamburger/index.js similarity index 100% rename from src/Hamburger/index.js rename to src/components/Hamburger/index.js diff --git a/src/HamburgerMenu/index.js b/src/components/HamburgerMenu/index.js similarity index 98% rename from src/HamburgerMenu/index.js rename to src/components/HamburgerMenu/index.js index 07842b4fb7..4cbd3810fd 100644 --- a/src/HamburgerMenu/index.js +++ b/src/components/HamburgerMenu/index.js @@ -2,10 +2,11 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import styled from 'styled-components' import NextLink from 'next/link' -import { media } from '../styles' + +import { media } from '../../styles' import Hamburger from '../Hamburger' -import { logEvent } from '../utils/ga' +import { logEvent } from '../../utils/ga' const SocialLink = ({ src, href, click, children }) => ( diff --git a/src/Hero/index.js b/src/components/Hero/index.js similarity index 91% rename from src/Hero/index.js rename to src/components/Hero/index.js index 62b7420d90..7f8d47ffae 100644 --- a/src/Hero/index.js +++ b/src/components/Hero/index.js @@ -1,7 +1,8 @@ import React from 'react' import PropTypes from 'prop-types' import styled from 'styled-components' -import { container } from '../styles' + +import { container } from '../../styles' export default function Hero({ children }) { return ( diff --git a/src/LandingHero/index.js b/src/components/LandingHero/index.js similarity index 98% rename from src/LandingHero/index.js rename to src/components/LandingHero/index.js index fa2af551ed..13722ebdda 100644 --- a/src/LandingHero/index.js +++ b/src/components/LandingHero/index.js @@ -1,11 +1,13 @@ import React, { Component } from 'react' import styled, { css } from 'styled-components' +import { scroller } from 'react-scroll' -import { OnlyDesktop, OnlyMobile, media } from '../styles' import DownloadButton from '../DownloadButton' import GithubLine from '../GithubLine' -import { logEvent } from '../utils/ga' -import { scroller } from 'react-scroll' + +import { logEvent } from '../../utils/ga' + +import { OnlyDesktop, OnlyMobile, media } from '../../styles' export default class LandingHero extends Component { state = { diff --git a/src/Layout/index.js b/src/components/Layout/index.js similarity index 95% rename from src/Layout/index.js rename to src/components/Layout/index.js index 016130e2f5..a63941166a 100644 --- a/src/Layout/index.js +++ b/src/components/Layout/index.js @@ -2,12 +2,12 @@ import React, { useEffect } from 'react' import PropTypes from 'prop-types' import styled from 'styled-components' import { useRouter } from 'next/router' -// components + import TopMenu from '../TopMenu' import Footer from '../Footer' import HamburgerMenu from '../HamburgerMenu' -// utils -import { initGA, logPageView } from '../utils/ga' + +import { initGA, logPageView } from '../../utils/ga' export default function Layout({ children, enableSmoothScroll }) { const router = useRouter() diff --git a/src/LearnMore/index.js b/src/components/LearnMore/index.js similarity index 95% rename from src/LearnMore/index.js rename to src/components/LearnMore/index.js index 41cb14e683..90626fbc9b 100644 --- a/src/LearnMore/index.js +++ b/src/components/LearnMore/index.js @@ -1,8 +1,10 @@ import React from 'react' import styled, { keyframes } from 'styled-components' -import { media } from '../styles' import { scroller } from 'react-scroll' -import { logEvent } from '../utils/ga' + +import { media } from '../../styles' + +import { logEvent } from '../../utils/ga' const scrollToDiagram = () => { logEvent('hero', 'learn-more') diff --git a/src/Modal/index.js b/src/components/Modal/index.js similarity index 100% rename from src/Modal/index.js rename to src/components/Modal/index.js diff --git a/src/Nav/index.js b/src/components/Nav/index.js similarity index 97% rename from src/Nav/index.js rename to src/components/Nav/index.js index e3e9da5dc4..17589040d2 100644 --- a/src/Nav/index.js +++ b/src/components/Nav/index.js @@ -1,11 +1,12 @@ import React from 'react' import PropTypes from 'prop-types' import styled from 'styled-components' -import { media } from '../styles' -import { logEvent } from '../utils/ga' import NextLink from 'next/link' import Router from 'next/router' +import { media } from '../../styles' +import { logEvent } from '../../utils/ga' + const getStarted = () => { logEvent('menu', 'get-started') diff --git a/src/Page/index.js b/src/components/Page/index.js similarity index 93% rename from src/Page/index.js rename to src/components/Page/index.js index 1cd9e04885..2259c07bbf 100644 --- a/src/Page/index.js +++ b/src/components/Page/index.js @@ -3,9 +3,10 @@ import PropTypes from 'prop-types' import { createGlobalStyle } from 'styled-components' import reset from 'styled-reset' -import { global } from '../styles' import Layout from '../Layout' +import { global } from '../../styles' + const GlobalStyle = createGlobalStyle` ${reset} ${global} diff --git a/src/Popover/Popover.js b/src/components/Popover/Popover.js similarity index 100% rename from src/Popover/Popover.js rename to src/components/Popover/Popover.js diff --git a/src/PromoSection/index.js b/src/components/PromoSection/index.js similarity index 96% rename from src/PromoSection/index.js rename to src/components/PromoSection/index.js index c396551be4..ace5e37078 100644 --- a/src/PromoSection/index.js +++ b/src/components/PromoSection/index.js @@ -1,10 +1,12 @@ import React from 'react' import styled from 'styled-components' import Router from 'next/router' -import { media } from '../styles' -import { logEvent } from '../utils/ga' -// consts -import { PAGE_DOC } from '../consts' + +import { media } from '../../styles' + +import { logEvent } from '../../utils/ga' + +import { PAGE_DOC } from '../../consts' function goToDocGetStarted() { logEvent('promo', 'get-started') diff --git a/src/SearchForm/index.js b/src/components/SearchForm/index.js similarity index 100% rename from src/SearchForm/index.js rename to src/components/SearchForm/index.js diff --git a/src/Subscribe/index.js b/src/components/Subscribe/index.js similarity index 98% rename from src/Subscribe/index.js rename to src/components/Subscribe/index.js index 662cadb499..d4a036480b 100644 --- a/src/Subscribe/index.js +++ b/src/components/Subscribe/index.js @@ -1,9 +1,10 @@ import React from 'react' import styled from 'styled-components' -import { media } from '../styles' import SubscribeForm from '../SubscribeForm' +import { media } from '../../styles' + export default function Subscribe() { return ( diff --git a/src/SubscribeForm/index.js b/src/components/SubscribeForm/index.js similarity index 98% rename from src/SubscribeForm/index.js rename to src/components/SubscribeForm/index.js index bce07cb78f..48e8a22671 100644 --- a/src/SubscribeForm/index.js +++ b/src/components/SubscribeForm/index.js @@ -1,6 +1,7 @@ import React from 'react' import styled from 'styled-components' -import { media } from '../styles' + +import { media } from '../../styles' export default function SubscribeForm() { return ( diff --git a/src/TextCollapse/index.js b/src/components/TextCollapse/index.js similarity index 100% rename from src/TextCollapse/index.js rename to src/components/TextCollapse/index.js diff --git a/src/TextRotate/index.js b/src/components/TextRotate/index.js similarity index 100% rename from src/TextRotate/index.js rename to src/components/TextRotate/index.js diff --git a/src/Tooltip/desktop-view.js b/src/components/Tooltip/desktop-view.js similarity index 99% rename from src/Tooltip/desktop-view.js rename to src/components/Tooltip/desktop-view.js index 267287edc8..e2bd40e3f9 100644 --- a/src/Tooltip/desktop-view.js +++ b/src/components/Tooltip/desktop-view.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types' import ReactMarkdown from 'react-markdown' import styled from 'styled-components' -import { HEADER } from '../consts' +import { HEADER } from '../../consts' class DesktopView extends Component { state = { diff --git a/src/Tooltip/index.js b/src/components/Tooltip/index.js similarity index 92% rename from src/Tooltip/index.js rename to src/components/Tooltip/index.js index 261a3f9810..7b755a205d 100644 --- a/src/Tooltip/index.js +++ b/src/components/Tooltip/index.js @@ -5,9 +5,9 @@ import includes from 'lodash.includes' import DesktopView from './desktop-view' import MobileView from './mobile-view' -import glossary from '../../public/static/docs/glossary' +import glossary from '../../../public/static/docs/glossary' -import { OnlyDesktopInline, OnlyMobileInline } from '../styles' +import { OnlyDesktopInline, OnlyMobileInline } from '../../styles' class Tooltip extends Component { state = { diff --git a/src/Tooltip/mobile-view.js b/src/components/Tooltip/mobile-view.js similarity index 100% rename from src/Tooltip/mobile-view.js rename to src/components/Tooltip/mobile-view.js diff --git a/src/TopMenu/index.js b/src/components/TopMenu/index.js similarity index 95% rename from src/TopMenu/index.js rename to src/components/TopMenu/index.js index 9633fdf86a..b53cf6c5e6 100644 --- a/src/TopMenu/index.js +++ b/src/components/TopMenu/index.js @@ -1,15 +1,14 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import NextLink from 'next/link' -// components -import Nav from '../Nav' -// utils import throttle from 'lodash.throttle' -// styles import styled from 'styled-components' -import { media } from '../styles' -// constants -import { HEADER } from '../consts' + +import Nav from '../Nav' + +import { media } from '../../styles' + +import { HEADER } from '../../consts' const MIN_HEIGHT = 78 diff --git a/src/TrySection/index.js b/src/components/TrySection/index.js similarity index 98% rename from src/TrySection/index.js rename to src/components/TrySection/index.js index 695e9342fa..0f4eb1b65b 100644 --- a/src/TrySection/index.js +++ b/src/components/TrySection/index.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types' import styled from 'styled-components' import NextLink from 'next/link' -import { container, media } from '../styles' +import { container, media } from '../../styles' export default function TrySection({ title, buttonText = 'Get Started' }) { return ( diff --git a/src/UseCases/index.js b/src/components/UseCases/index.js similarity index 98% rename from src/UseCases/index.js rename to src/components/UseCases/index.js index eb8acb490f..1a4be75fe6 100644 --- a/src/UseCases/index.js +++ b/src/components/UseCases/index.js @@ -1,11 +1,12 @@ import React from 'react' import styled from 'styled-components' -import { OnlyDesktop, OnlyMobile, container, media } from '../styles' +import { Element } from 'react-scroll' import { default as YoutubeVideo } from '../Video' -import { Element } from 'react-scroll' import TextCollapse from '../TextCollapse' +import { OnlyDesktop, OnlyMobile, container, media } from '../../styles' + const Heading1 = () => ( diff --git a/src/Video/index.js b/src/components/Video/index.js similarity index 98% rename from src/Video/index.js rename to src/components/Video/index.js index e3a9e52303..fc394c89f7 100644 --- a/src/Video/index.js +++ b/src/components/Video/index.js @@ -1,7 +1,8 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import styled from 'styled-components' -import { logEvent } from '../utils/ga' + +import { logEvent } from '../../utils/ga' const WatchButton = ({ onClick, disabled }) => ( - - - - } - enterExitTransitionDurationMs={200} - > - - - - - - - - - Bugs & Features - - - Found an issue or have an idea? Check our GitHub{' '} - - issues tracker - {' '} - to see if there is already a fix or report a new one. - - - - - - - - - Forum - - - Discuss your ideas or{' '} - - best practices - {' '} - in the DVC forum. - - - - - - - - - Email - - - Don’t hesitate to shoot us an email at{' '} - - - support@dvc.org - - {' '} - with any questions. - - - - - - - - - + <> + + Support | {META_BASE_TITLE} + + + ) } - -const SupportHero = styled.div` - padding-top: 90px; - padding-bottom: 80px; - overflow: hidden; -` - -const Heading = styled.h1` - font-family: BrandonGrotesqueMed; - margin: 0px auto; - max-width: 610px; - font-size: 40px; - font-weight: 500; - line-height: 1.4; - text-align: center; - color: #40364d; -` - -const Container = styled.div` - ${container}; -` - -const Features = styled.div` - display: flex; - flex-flow: row; - flex-wrap: wrap; - padding-top: 80px; - padding-bottom: 70px; - max-width: 800px; - margin: 0 auto; - - ${media.phablet` - padding-top: 70px; - padding-bottom: 50px; - `}; -` - -const Feature = styled.div` - flex: 1 0 300px; - margin: 0 20px 60px; - padding: 10px; -` - -const FeatureHeading = styled.div` - display: flex; - align-items: center; - margin-bottom: 10px; -` - -const Icon = styled.div` - height: 50px; - width: 50px; - border-radius: 50%; - background-color: ${props => - color(props.color) - .alpha(0.15) - .string()}; - margin-right: 10px; - - &::after { - content: ' '; - display: block; - width: 50px; - height: 50px; - opacity: 1; - mask-image: url(${props => props.url}); - mask-repeat: no-repeat; - mask-position: center; - background-color: ${props => props.color}; - transform: translate(-10px, 0); - } -` - -const Name = styled.h3` - font-family: BrandonGrotesqueMed; - margin-top: 10px; - margin-bottom: 10px; - font-size: 22px; - font-weight: 500; - color: #40364d; - min-height: 28px; -` - -const Description = styled.div` - font-size: 20px; - color: #5f6c72; -` - -const FlexRow = styled.div` - display: flex; - align-items: center; -` - -const Link = styled.a` - text-decoration: none; -` - -const Button = styled.button` - text-decoration: none; - margin-top: 20px; - border-radius: 4px; - background-color: white; - border: 2px solid ${props => props.color}; - color: ${props => props.color}; - font-family: BrandonGrotesqueMed, Tahoma, Arial; - height: 42px; - font-size: 18px; - cursor: pointer; - transition: 0.2s background-color ease-out; - padding: 5px 20px; - - &:hover { - background-color: ${props => props.color}; - color: white; - } -` - -const DiscrodWidget = styled.img` - display: block; - margin-top: 20px; - margin-left: 20px; - width: 50px; - height: 50px; - cursor: pointer; - mask-image: url('/static/img/support/discord.svg'); - mask-repeat: no-repeat; - mask-position: center; - background-color: #b88eeb; - - &:hover { - opacity: 0.7; - } -` diff --git a/src/components/Support/index.js b/src/components/Support/index.js new file mode 100644 index 0000000000..fb0ec3bfac --- /dev/null +++ b/src/components/Support/index.js @@ -0,0 +1,248 @@ +import React from 'react' +import styled from 'styled-components' +import color from 'color' + +import Page from '../Page' +import Hero from '../Hero' +import TrySection from '../TrySection' +import Popover from '../Popover/Popover' + +import { Mark, OnlyDesktop, container, media } from '../../styles' + +export default function SupportPage() { + return ( + + + + Questions, feedback, or just need to get in touch? + + + + + + + + Slack-like Chat + + + Join data science practitioners in our welcoming{' '} + + DVC community + + . It’s the fastest way to ask for a help. + + + + + + + + } + enterExitTransitionDurationMs={200} + > + + + + + + + + + Bugs & Features + + + Found an issue or have an idea? Check our GitHub{' '} + + issues tracker + {' '} + to see if there is already a fix or report a new one. + + + + + + + + + Forum + + + Discuss your ideas or{' '} + + best practices + {' '} + in the DVC forum. + + + + + + + + + Email + + + Don’t hesitate to shoot us an email at{' '} + + + support@dvc.org + + {' '} + with any questions. + + + + + + + + + + ) +} + +const SupportHero = styled.div` + padding-top: 90px; + padding-bottom: 80px; + overflow: hidden; +` + +const Heading = styled.h1` + font-family: BrandonGrotesqueMed; + margin: 0px auto; + max-width: 610px; + font-size: 40px; + font-weight: 500; + line-height: 1.4; + text-align: center; + color: #40364d; +` + +const Container = styled.div` + ${container}; +` + +const Features = styled.div` + display: flex; + flex-flow: row; + flex-wrap: wrap; + padding-top: 80px; + padding-bottom: 70px; + max-width: 800px; + margin: 0 auto; + + ${media.phablet` + padding-top: 70px; + padding-bottom: 50px; + `}; +` + +const Feature = styled.div` + flex: 1 0 300px; + margin: 0 20px 60px; + padding: 10px; +` + +const FeatureHeading = styled.div` + display: flex; + align-items: center; + margin-bottom: 10px; +` + +const Icon = styled.div` + height: 50px; + width: 50px; + border-radius: 50%; + background-color: ${props => + color(props.color) + .alpha(0.15) + .string()}; + margin-right: 10px; + + &::after { + content: ' '; + display: block; + width: 50px; + height: 50px; + opacity: 1; + mask-image: url(${props => props.url}); + mask-repeat: no-repeat; + mask-position: center; + background-color: ${props => props.color}; + transform: translate(-10px, 0); + } +` + +const Name = styled.h3` + font-family: BrandonGrotesqueMed; + margin-top: 10px; + margin-bottom: 10px; + font-size: 22px; + font-weight: 500; + color: #40364d; + min-height: 28px; +` + +const Description = styled.div` + font-size: 20px; + color: #5f6c72; +` + +const FlexRow = styled.div` + display: flex; + align-items: center; +` + +const Link = styled.a` + text-decoration: none; +` + +const Button = styled.button` + text-decoration: none; + margin-top: 20px; + border-radius: 4px; + background-color: white; + border: 2px solid ${props => props.color}; + color: ${props => props.color}; + font-family: BrandonGrotesqueMed, Tahoma, Arial; + height: 42px; + font-size: 18px; + cursor: pointer; + transition: 0.2s background-color ease-out; + padding: 5px 20px; + + &:hover { + background-color: ${props => props.color}; + color: white; + } +` + +const DiscrodWidget = styled.img` + display: block; + margin-top: 20px; + margin-left: 20px; + width: 50px; + height: 50px; + cursor: pointer; + mask-image: url('/static/img/support/discord.svg'); + mask-repeat: no-repeat; + mask-position: center; + background-color: #b88eeb; + + &:hover { + opacity: 0.7; + } +` From 50beb010b82ba3bc23452eb9a5134d60d3c74125 Mon Sep 17 00:00:00 2001 From: Alexey Ivanov Date: Fri, 31 Jan 2020 00:25:54 +0900 Subject: [PATCH 6/9] Moved Home component from page --- pages/index.js | 66 ++++++++++-------------------------- src/components/Home/index.js | 37 ++++++++++++++++++++ 2 files changed, 55 insertions(+), 48 deletions(-) create mode 100644 src/components/Home/index.js diff --git a/pages/index.js b/pages/index.js index c75a31407a..fdffef445b 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,58 +1,28 @@ import React from 'react' -import styled from 'styled-components' import Head from 'next/head' -import LearnMore from '../src/components/LearnMore' -import Page from '../src/components/Page' -import Hero from '../src/components/Hero' -import LandingHero from '../src/components/LandingHero' -import Diagram from '../src/components/Diagram' -import PromoSection from '../src/components/PromoSection' -import UseCases from '../src/components/UseCases' -import Subscribe from '../src/components/Subscribe' +import Home from '../src/components/Home' import { META_BASE_TITLE } from '../src/consts' -const HeadInjector = () => ( - - - - {META_BASE_TITLE} - -) - export default function HomePage() { return ( - - - - - - - - - - - - - - + <> + + + + {META_BASE_TITLE} + + + ) } - -const LearnMoreSection = styled.div` - z-index: 2; - position: absolute; - transform: translate(-50%, 0%); - left: 50%; - bottom: 16px; -` diff --git a/src/components/Home/index.js b/src/components/Home/index.js new file mode 100644 index 0000000000..7a72604090 --- /dev/null +++ b/src/components/Home/index.js @@ -0,0 +1,37 @@ +import React from 'react' +import styled from 'styled-components' + +import LearnMore from '../LearnMore' +import Page from '../Page' +import Hero from '../Hero' +import LandingHero from '../LandingHero' +import Diagram from '../Diagram' +import PromoSection from '../PromoSection' +import UseCases from '../UseCases' +import Subscribe from '../Subscribe' + +export default function HomePage() { + return ( + + + + + + + + + + + + + + ) +} + +const LearnMoreSection = styled.div` + z-index: 2; + position: absolute; + transform: translate(-50%, 0%); + left: 50%; + bottom: 16px; +` From 7bf941f069e21ec6d2355ef866d65984b0f50a8c Mon Sep 17 00:00:00 2001 From: Alexey Ivanov Date: Fri, 31 Jan 2020 00:28:18 +0900 Subject: [PATCH 7/9] Rename popover filename --- src/components/Popover/{Popover.js => index.js} | 0 src/components/Support/index.js | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename src/components/Popover/{Popover.js => index.js} (100%) diff --git a/src/components/Popover/Popover.js b/src/components/Popover/index.js similarity index 100% rename from src/components/Popover/Popover.js rename to src/components/Popover/index.js diff --git a/src/components/Support/index.js b/src/components/Support/index.js index fb0ec3bfac..9224e32013 100644 --- a/src/components/Support/index.js +++ b/src/components/Support/index.js @@ -5,7 +5,7 @@ import color from 'color' import Page from '../Page' import Hero from '../Hero' import TrySection from '../TrySection' -import Popover from '../Popover/Popover' +import Popover from '../Popover' import { Mark, OnlyDesktop, container, media } from '../../styles' From 59e399dcc1f4f0f2359e779eefa7229e33b7994d Mon Sep 17 00:00:00 2001 From: Alexey Ivanov Date: Sat, 1 Feb 2020 03:08:08 +0900 Subject: [PATCH 8/9] Move styled-components to separate files --- src/components/Diagram/index.js | 215 ++---------------- src/components/Diagram/styles.js | 187 +++++++++++++++ src/components/Documentation/LightButton.js | 31 --- .../Documentation/Markdown/index.js | 209 +---------------- .../Documentation/Markdown/styles.js | 203 +++++++++++++++++ .../Documentation/RightPanel/index.js | 88 +------ .../Documentation/RightPanel/styles.js | 79 +++++++ .../Documentation/SidebarMenu/index.js | 108 +-------- .../Documentation/SidebarMenu/styles.js | 94 ++++++++ .../{Tutorials.js => Tutorials/index.js} | 44 +--- .../Documentation/Tutorials/styles.js | 37 +++ src/components/Documentation/index.js | 129 +---------- src/components/Documentation/styles.js | 158 +++++++++++++ src/components/DownloadButton/index.js | 157 ++----------- src/components/DownloadButton/styles.js | 143 ++++++++++++ src/components/Features/index.js | 54 +---- src/components/Features/styles.js | 54 +++++ src/components/FeaturesHero/index.js | 21 +- src/components/FeaturesHero/styles.js | 19 ++ src/components/Footer/index.js | 116 +--------- src/components/Footer/styles.js | 104 +++++++++ src/components/GithubLine/index.js | 37 +-- src/components/GithubLine/styles.js | 35 +++ src/components/Hamburger/index.js | 45 +--- src/components/Hamburger/styles.js | 45 ++++ src/components/HamburgerMenu/index.js | 138 ++--------- src/components/HamburgerMenu/styles.js | 123 ++++++++++ src/components/Hero/index.js | 12 +- src/components/Hero/styles.js | 12 + src/components/Home/index.js | 11 +- src/components/Home/styles.js | 9 + src/components/LandingHero/index.js | 214 ++--------------- src/components/LandingHero/styles.js | 199 ++++++++++++++++ src/components/Layout/index.js | 32 +-- src/components/Layout/styles.js | 30 +++ src/components/LearnMore/index.js | 65 +----- src/components/LearnMore/styles.js | 63 +++++ src/components/Nav/index.js | 69 +----- src/components/Nav/styles.js | 67 ++++++ src/components/Page/index.js | 9 +- src/components/Popover/index.js | 23 +- src/components/Popover/styles.js | 17 ++ src/components/PromoSection/index.js | 126 +--------- src/components/PromoSection/styles.js | 124 ++++++++++ src/components/SearchForm/index.js | 28 +-- src/components/SearchForm/styles.js | 26 +++ src/components/Subscribe/index.js | 103 +-------- src/components/Subscribe/styles.js | 103 +++++++++ src/components/SubscribeForm/index.js | 53 +---- src/components/SubscribeForm/styles.js | 53 +++++ src/components/Support/index.js | 153 ++----------- src/components/Support/styles.js | 137 +++++++++++ src/components/TextCollapse/index.js | 20 +- src/components/TextCollapse/styles.js | 14 ++ src/components/TextRotate/index.js | 8 +- src/components/TextRotate/styles.js | 7 + .../{desktop-view.js => DesktopView/index.js} | 66 +----- src/components/Tooltip/DesktopView/styles.js | 58 +++++ .../{mobile-view.js => MobileView/index.js} | 69 +----- src/components/Tooltip/MobileView/styles.js | 54 +++++ src/components/Tooltip/index.js | 4 +- src/components/TopMenu/index.js | 61 +---- src/components/TopMenu/styles.js | 57 +++++ src/components/TrySection/index.js | 104 +-------- src/components/TrySection/styles.js | 104 +++++++++ src/components/UseCases/index.js | 116 ++-------- src/components/UseCases/styles.js | 101 ++++++++ src/components/Video/index.js | 120 +--------- src/components/Video/styles.js | 109 +++++++++ src/styles.js | 9 +- 70 files changed, 2842 insertions(+), 2650 deletions(-) create mode 100644 src/components/Diagram/styles.js delete mode 100644 src/components/Documentation/LightButton.js create mode 100644 src/components/Documentation/Markdown/styles.js create mode 100644 src/components/Documentation/RightPanel/styles.js create mode 100644 src/components/Documentation/SidebarMenu/styles.js rename src/components/Documentation/{Tutorials.js => Tutorials/index.js} (59%) create mode 100644 src/components/Documentation/Tutorials/styles.js create mode 100644 src/components/Documentation/styles.js create mode 100644 src/components/DownloadButton/styles.js create mode 100644 src/components/Features/styles.js create mode 100644 src/components/FeaturesHero/styles.js create mode 100644 src/components/Footer/styles.js create mode 100644 src/components/GithubLine/styles.js create mode 100644 src/components/Hamburger/styles.js create mode 100644 src/components/HamburgerMenu/styles.js create mode 100644 src/components/Hero/styles.js create mode 100644 src/components/Home/styles.js create mode 100644 src/components/LandingHero/styles.js create mode 100644 src/components/Layout/styles.js create mode 100644 src/components/LearnMore/styles.js create mode 100644 src/components/Nav/styles.js create mode 100644 src/components/Popover/styles.js create mode 100644 src/components/PromoSection/styles.js create mode 100644 src/components/SearchForm/styles.js create mode 100644 src/components/Subscribe/styles.js create mode 100644 src/components/SubscribeForm/styles.js create mode 100644 src/components/Support/styles.js create mode 100644 src/components/TextCollapse/styles.js create mode 100644 src/components/TextRotate/styles.js rename src/components/Tooltip/{desktop-view.js => DesktopView/index.js} (78%) create mode 100644 src/components/Tooltip/DesktopView/styles.js rename src/components/Tooltip/{mobile-view.js => MobileView/index.js} (56%) create mode 100644 src/components/Tooltip/MobileView/styles.js create mode 100644 src/components/TopMenu/styles.js create mode 100644 src/components/TrySection/styles.js create mode 100644 src/components/UseCases/styles.js create mode 100644 src/components/Video/styles.js diff --git a/src/components/Diagram/index.js b/src/components/Diagram/index.js index c699c71835..ea908f3cfd 100644 --- a/src/components/Diagram/index.js +++ b/src/components/Diagram/index.js @@ -2,19 +2,28 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' -import NextLink from 'next/link' -import styled from 'styled-components' import { Element } from 'react-scroll' import Slider from 'react-slick' +import NextLink from 'next/link' + +import { OnlyDesktop, OnlyMobile } from '../../styles' + import { - OnlyDesktop, - OnlyMobile, - column, - columns, - container, - media -} from '../../styles' + Abstract, + Caption, + Column, + Columns, + Container, + Description, + Diagram, + Graphic, + LearnMoreArea, + Slide, + SliderDots, + SliderWrapper, + Title +} from './styles' const LearnMore = ({ href }) => ( @@ -97,7 +106,7 @@ const ColumnThree = () => ( ) -export class DiagramSection extends Component { +export default class DiagramSection extends Component { render() { const imagesSliderProps = { slidesToShow: 1, @@ -164,189 +173,3 @@ export class DiagramSection extends Component { ) } } - -export default DiagramSection - -const Diagram = styled.section` - padding-top: 80px; - padding-bottom: 91px; -` - -const Container = styled.div` - ${container}; -` - -const Title = styled.div` - font-family: BrandonGrotesqueMed; - max-width: 550px; - min-height: 44px; - font-size: 30px; - font-weight: 500; - text-align: center; - color: #40364d; - margin: 0px auto; -` - -const Abstract = styled.div` - margin: 0px auto; - padding-top: 10px; - max-width: 590px; - min-height: 50px; - font-size: 16px; - text-align: center; - color: #5f6c72; - line-height: 1.5; -` - -const Graphic = styled.section` - width: 100%; - margin-top: 49px; - - img { - width: 100%; - max-width: 900px; - max-height: 445px; - } - - ${media.phablet` - overflow-x: scroll; - overflow-y: hidden; - `}; - - @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { - overflow-x: scroll; - overflow-y: hidden; - } -` - -const Columns = styled.div` - ${columns}; - margin-top: 10px; - flex-direction: row; - justify-content: center; - align-items: flex-start; - ${media.tablet`flex-direction: column;`}; -` - -const Column = styled.div` - ${column}; - max-width: 33.3%; - display: block; - margin-top: 49px; - padding: 0 10px; - box-sizing: border-box; - - ${media.tablet` - margin-right: 0px; - flex-basis: auto; - max-width: 100%; - `}; - - ${media.phablet` - margin-top: 20px; - flex-basis: auto; - max-width: 100%; - `}; -` - -const Caption = styled.h3` - font-family: BrandonGrotesqueMed; - margin-bottom: 12px; - font-size: 20px; - font-weight: 500; - color: ${props => props.text}; -` - -const Description = styled.div` - max-width: ${props => (props.fullWidth ? '100%' : '311px')}; - font-size: 16px; - color: #5f6c72; - - p { - margin-bottom: 24px; - - ${media.tablet` - margin-bottom: 12px; - `}; - } -` - -const LearnMoreArea = styled.div` - font-family: BrandonGrotesqueMed; - line-height: 28px; - font-size: 20px; - font-weight: 500; - color: #945dd6; - - img { - margin-left: 19px; - margin-top: 3px; - } - - a { - display: flex; - align-items: center; - text-decoration: none; - color: #945dd6; - } - - a:hover { - color: #745cb7; - } - - a:visited { - color: #945dd6; - } - - a:visited:hover { - color: #745cb7; - } -` - -const SliderWrapper = styled.div` - .slick-next, - .slick-prev { - height: 30px; - width: 30px; - z-index: 3; - } - - .slick-next { - right: -25px; - } - - .slick-prev { - left: -25px; - } - - .slick-next:before, - .slick-prev:before { - font-size: 30px; - line-height: 1; - opacity: 0.35; - color: #40364d; - } - - img { - pointer-events: none; - } -` - -const Slide = styled.div` - width: 100%; - img { - padding-top: 20px; - padding-bottom: 20px; - width: 100%; - max-width: 380px; - margin: 0 auto; - } -` - -const SliderDots = styled.ul` - margin-bottom: -20px; - - li button::before { - font-size: 8px; - } -` diff --git a/src/components/Diagram/styles.js b/src/components/Diagram/styles.js new file mode 100644 index 0000000000..3c26cead11 --- /dev/null +++ b/src/components/Diagram/styles.js @@ -0,0 +1,187 @@ +import styled from 'styled-components' + +import { column, columns, container, media } from '../../styles' + +export const Diagram = styled.section` + padding-top: 80px; + padding-bottom: 91px; +` + +export const Container = styled.div` + ${container}; +` + +export const Title = styled.div` + font-family: BrandonGrotesqueMed; + max-width: 550px; + min-height: 44px; + font-size: 30px; + font-weight: 500; + text-align: center; + color: #40364d; + margin: 0px auto; +` + +export const Abstract = styled.div` + margin: 0px auto; + padding-top: 10px; + max-width: 590px; + min-height: 50px; + font-size: 16px; + text-align: center; + color: #5f6c72; + line-height: 1.5; +` + +export const Graphic = styled.section` + width: 100%; + margin-top: 49px; + + img { + width: 100%; + max-width: 900px; + max-height: 445px; + } + + ${media.phablet` + overflow-x: scroll; + overflow-y: hidden; + `}; + + @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { + overflow-x: scroll; + overflow-y: hidden; + } +` + +export const Columns = styled.div` + ${columns}; + margin-top: 10px; + flex-direction: row; + justify-content: center; + align-items: flex-start; + ${media.tablet`flex-direction: column;`}; +` + +export const Column = styled.div` + ${column}; + max-width: 33.3%; + display: block; + margin-top: 49px; + padding: 0 10px; + box-sizing: border-box; + + ${media.tablet` + margin-right: 0px; + flex-basis: auto; + max-width: 100%; + `}; + + ${media.phablet` + margin-top: 20px; + flex-basis: auto; + max-width: 100%; + `}; +` + +export const Caption = styled.h3` + font-family: BrandonGrotesqueMed; + margin-bottom: 12px; + font-size: 20px; + font-weight: 500; + color: ${props => props.text}; +` + +export const Description = styled.div` + max-width: ${props => (props.fullWidth ? '100%' : '311px')}; + font-size: 16px; + color: #5f6c72; + + p { + margin-bottom: 24px; + + ${media.tablet` + margin-bottom: 12px; + `}; + } +` + +export const LearnMoreArea = styled.div` + font-family: BrandonGrotesqueMed; + line-height: 28px; + font-size: 20px; + font-weight: 500; + color: #945dd6; + + img { + margin-left: 19px; + margin-top: 3px; + } + + a { + display: flex; + align-items: center; + text-decoration: none; + color: #945dd6; + } + + a:hover { + color: #745cb7; + } + + a:visited { + color: #945dd6; + } + + a:visited:hover { + color: #745cb7; + } +` + +export const SliderWrapper = styled.div` + .slick-next, + .slick-prev { + height: 30px; + width: 30px; + z-index: 3; + } + + .slick-next { + right: -25px; + } + + .slick-prev { + left: -25px; + } + + .slick-next:before, + .slick-prev:before { + font-size: 30px; + line-height: 1; + opacity: 0.35; + color: #40364d; + } + + img { + pointer-events: none; + } +` + +export const Slide = styled.div` + width: 100%; + img { + padding-top: 20px; + padding-bottom: 20px; + width: 100%; + max-width: 380px; + margin: 0 auto; + } +` + +export const SliderDots = styled.ul` + margin-bottom: -20px; + + li button::before { + font-size: 8px; + } +` diff --git a/src/components/Documentation/LightButton.js b/src/components/Documentation/LightButton.js deleted file mode 100644 index 48213b3f65..0000000000 --- a/src/components/Documentation/LightButton.js +++ /dev/null @@ -1,31 +0,0 @@ -import styled from 'styled-components' - -export const LightButton = styled.a` - display: inline-flex; - justify-content: center; - align-items: center; - color: #575e64; - background-color: white; - border: 1px solid #575e64; - text-decoration: none; - font-weight: 600; - line-height: 30px; - padding: 2px 16px; - border-radius: 3px; - cursor: pointer; - transition: 0.2s background-color ease-out; - z-index: 1; - - &:hover { - background-color: #f5f7f9; - } - - i { - background-size: contain; - background-repeat: no-repeat; - background-position: center; - width: 1em; - height: 1em; - margin-right: 7px; - } -` diff --git a/src/components/Documentation/Markdown/index.js b/src/components/Documentation/Markdown/index.js index dda5ef15b2..9424cf1054 100644 --- a/src/components/Documentation/Markdown/index.js +++ b/src/components/Documentation/Markdown/index.js @@ -5,9 +5,7 @@ import Router from 'next/router' import ReactMarkdown from 'react-markdown' import Collapsible from 'react-collapsible' import kebabCase from 'lodash.kebabcase' -import styled from 'styled-components' -import { LightButton } from '../LightButton' import Tutorials from '../Tutorials' import Tooltip from '../../Tooltip' @@ -25,7 +23,14 @@ import linker from './utils/remark-linker' import { PAGE_DOC } from '../../../consts' -import { media } from '../../../styles' +import { + Button, + Content, + ExternalLink, + GithubLink, + NavigationButtons, + TutorialsWrapper +} from './styles' SyntaxHighlighter.registerLanguage('dvc', dvc) SyntaxHighlighter.registerLanguage('python', python) @@ -259,201 +264,3 @@ Markdown.propTypes = { prev: PropTypes.string, next: PropTypes.string } - -const Content = styled.article` - min-width: 200px; - margin: 30px; - flex: 1; - - ${media.phablet` - margin: 20px; - `}; - - ul { - list-style-type: disc; - } - - ol { - list-style-type: decimal; - } - - em { - font-style: italic; - } - - .markdown-body { - font-family: inherit; - font-size: 18px; - animation-duration: 1s; - animation-fill-mode: both; - animation-name: fadeIn; - } - - .Collapsible { - margin-bottom: 10px; - background-color: rgba(36, 173, 197, 0.2); - border-radius: 15px; - -moz-border-radius: 15px; - padding: 10px; - } - - .Collapsible__trigger { - font-family: BrandonGrotesqueMed; - display: block; - position: relative; - opacity: 0.9; - cursor: pointer; - - &:after { - position: absolute; - display: inline-block; - background-size: 20px 20px; - right: 0; - width: 20px; - height: 20px; - background-image: url('/static/img/click.png'); - content: ''; - font-family: monospace; - transition: transform 200ms; - } - - &.is-open { - &:after { - opacity: 0.5; - } - } - } - - .Collapsible__contentInner { - background-color: rgba(36, 173, 197, 0); - border-radius: 15px; - -moz-border-radius: 15px; - padding: 10px; - } - - @keyframes fadeIn { - from { - opacity: 0; - } - - to { - opacity: 1; - } - } - - details p { - font-size: 17px; - color: #454e53; - margin-left: 20px; - margin-right: 10px; - } - - details pre { - font-size: 14px; - color: #454e53; - margin-left: 20px; - margin-right: 10px; - } -` - -const NavigationButtons = styled.div` - display: flex; - justify-content: space-between; - align-items: center; - margin-top: 40px; - font-weight: 600; - font-size: 14px; -` - -const Button = styled.a` - text-decoration: none; - background: white; - padding: 10px 15px; - text-transform: uppercase; - color: #333; - border-bottom: 3px solid #13adc7; - display: inline-flex; - align-items: center; - transition: 0.2s border-color ease-out; - - &:hover { - border-bottom: 3px solid #11849b; - } - - i { - display: inline-block; - background-image: url(/static/img/arrow.svg); - background-size: contain; - background-position: center; - background-repeat: no-repeat; - width: 1em; - height: 1em; - line-height: 1; - transition: all 0.3s; - - &.next { - margin-left: 7px; - } - - &.prev { - margin-right: 7px; - mask-position: center; - transform: rotate(180deg); - margin-top: 2px; - } - } - - &[disabled] { - pointer-events: none; - opacity: 0.5; - } -` - -const TutorialsWrapper = styled.div` - position: relative; - z-index: 1; - float: right; - margin: 5px 0 0 10px; - - ${media.tablet` - margin: 0 0 15px 0; - `} - - @media only screen and (min-width: 1200px) { - display: none; - } -` - -export const GithubLink = styled(LightButton)` - display: none; - float: right; - margin: 5px 0 10px 10px; - z-index: 1; - position: relative; - - ${media.tablet` - float: none; - margin: 0 0 15px 0; - `}; - - @media only screen and (max-width: 1200px) { - display: inline-flex; - } - - i { - background-image: url(/static/img/github_icon.svg); - } -` - -const ExternalLink = styled.a` - &:after { - position: relative; - top: 1px; - right: 0; - width: 12px; - height: 12px; - margin-left: 1px; - /* Icon source https://en.wikipedia.org/w/skins/Vector/images/external-link-ltr-icon.svg */ - content: url(/static/img/external-link.svg); - } -` diff --git a/src/components/Documentation/Markdown/styles.js b/src/components/Documentation/Markdown/styles.js new file mode 100644 index 0000000000..09d9867f8d --- /dev/null +++ b/src/components/Documentation/Markdown/styles.js @@ -0,0 +1,203 @@ +import styled from 'styled-components' + +import { media } from '../../../styles' + +import { LightButton } from '../styles' + +export const Content = styled.article` + min-width: 200px; + margin: 30px; + flex: 1; + + ${media.phablet` + margin: 20px; + `}; + + ul { + list-style-type: disc; + } + + ol { + list-style-type: decimal; + } + + em { + font-style: italic; + } + + .markdown-body { + font-family: inherit; + font-size: 18px; + animation-duration: 1s; + animation-fill-mode: both; + animation-name: fadeIn; + } + + .Collapsible { + margin-bottom: 10px; + background-color: rgba(36, 173, 197, 0.2); + border-radius: 15px; + -moz-border-radius: 15px; + padding: 10px; + } + + .Collapsible__trigger { + font-family: BrandonGrotesqueMed; + display: block; + position: relative; + opacity: 0.9; + cursor: pointer; + + &:after { + position: absolute; + display: inline-block; + background-size: 20px 20px; + right: 0; + width: 20px; + height: 20px; + background-image: url('/static/img/click.png'); + content: ''; + font-family: monospace; + transition: transform 200ms; + } + + &.is-open { + &:after { + opacity: 0.5; + } + } + } + + .Collapsible__contentInner { + background-color: rgba(36, 173, 197, 0); + border-radius: 15px; + -moz-border-radius: 15px; + padding: 10px; + } + + @keyframes fadeIn { + from { + opacity: 0; + } + + to { + opacity: 1; + } + } + + details p { + font-size: 17px; + color: #454e53; + margin-left: 20px; + margin-right: 10px; + } + + details pre { + font-size: 14px; + color: #454e53; + margin-left: 20px; + margin-right: 10px; + } +` + +export const NavigationButtons = styled.div` + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 40px; + font-weight: 600; + font-size: 14px; +` + +export const Button = styled.a` + text-decoration: none; + background: white; + padding: 10px 15px; + text-transform: uppercase; + color: #333; + border-bottom: 3px solid #13adc7; + display: inline-flex; + align-items: center; + transition: 0.2s border-color ease-out; + + &:hover { + border-bottom: 3px solid #11849b; + } + + i { + display: inline-block; + background-image: url(/static/img/arrow.svg); + background-size: contain; + background-position: center; + background-repeat: no-repeat; + width: 1em; + height: 1em; + line-height: 1; + transition: all 0.3s; + + &.next { + margin-left: 7px; + } + + &.prev { + margin-right: 7px; + mask-position: center; + transform: rotate(180deg); + margin-top: 2px; + } + } + + &[disabled] { + pointer-events: none; + opacity: 0.5; + } +` + +export const TutorialsWrapper = styled.div` + position: relative; + z-index: 1; + float: right; + margin: 5px 0 0 10px; + + ${media.tablet` + margin: 0 0 15px 0; + `} + + @media only screen and (min-width: 1200px) { + display: none; + } +` + +export const GithubLink = styled(LightButton)` + display: none; + float: right; + margin: 5px 0 10px 10px; + z-index: 1; + position: relative; + + ${media.tablet` + float: none; + margin: 0 0 15px 0; + `}; + + @media only screen and (max-width: 1200px) { + display: inline-flex; + } + + i { + background-image: url(/static/img/github_icon.svg); + } +` + +export const ExternalLink = styled.a` + &:after { + position: relative; + top: 1px; + right: 0; + width: 12px; + height: 12px; + margin-left: 1px; + /* Icon source https://en.wikipedia.org/w/skins/Vector/images/external-link-ltr-icon.svg */ + content: url(/static/img/external-link.svg); + } +` diff --git a/src/components/Documentation/RightPanel/index.js b/src/components/Documentation/RightPanel/index.js index 74431d3c3b..804c868042 100644 --- a/src/components/Documentation/RightPanel/index.js +++ b/src/components/Documentation/RightPanel/index.js @@ -1,11 +1,19 @@ import React from 'react' import PropTypes from 'prop-types' -import styled from 'styled-components' import throttle from 'lodash.throttle' -import { LightButton } from '../LightButton' import Tutorials from '../Tutorials' +import { + Description, + DiscordButton, + GithubButton, + Header, + HeadingLink, + Spacer, + Wrapper +} from './styles' + const ROOT_ELEMENT = 'bodybag' const MARKDOWN_ROOT = '#markdown-root' @@ -185,79 +193,3 @@ RightPanel.propTypes = { tutorials: PropTypes.object, githubLink: PropTypes.string.isRequired } - -const Wrapper = styled.div` - width: 170px; - min-width: 170px; - font-size: 16px; - height: calc(100vh - 78px); - position: sticky; - top: 0; - - @media only screen and (max-width: 1200px) { - display: none; - } - - hr { - opacity: 0.5; - } -` - -const Header = styled.p` - color: #3c3937; - font-size: 14px; - text-transform: uppercase; - margin-top: 56px; -` - -const HeadingLink = styled.a` - display: block; - position: relative; - font-size: 16px; - font-weight: 500; - color: #a0a8a5; - text-decoration: none; - font-weight: 400; - line-height: 26px; - min-height: 26px; - margin-bottom: 3px; - cursor: pointer; - - ${props => - props.isCurrent && - ` - color: #000; - `} - - &:hover { - color: #3c3937; - } -` - -const ExternalButton = styled(LightButton)` - box-sizing: border-box; - min-width: 170px; - margin: 10px 0; -` - -const GithubButton = styled(ExternalButton)` - i { - background-image: url(/static/img/github_icon.svg); - } -` - -const DiscordButton = styled(ExternalButton)` - i { - background-image: url(/static/img/discord.svg); - width: 1.2em; - height: 1.2em; - } -` - -const Spacer = styled.div` - height: 65px; -` - -const Description = styled.p` - color: #3c3937; -` diff --git a/src/components/Documentation/RightPanel/styles.js b/src/components/Documentation/RightPanel/styles.js new file mode 100644 index 0000000000..bcebe20874 --- /dev/null +++ b/src/components/Documentation/RightPanel/styles.js @@ -0,0 +1,79 @@ +import styled from 'styled-components' + +import { LightButton } from '../styles' + +export const Wrapper = styled.div` + width: 170px; + min-width: 170px; + font-size: 16px; + height: calc(100vh - 78px); + position: sticky; + top: 0; + + @media only screen and (max-width: 1200px) { + display: none; + } + + hr { + opacity: 0.5; + } +` + +export const Header = styled.p` + color: #3c3937; + font-size: 14px; + text-transform: uppercase; + margin-top: 56px; +` + +export const HeadingLink = styled.a` + display: block; + position: relative; + font-size: 16px; + font-weight: 500; + color: #a0a8a5; + text-decoration: none; + font-weight: 400; + line-height: 26px; + min-height: 26px; + margin-bottom: 3px; + cursor: pointer; + + ${props => + props.isCurrent && + ` + color: #000; + `} + + &:hover { + color: #3c3937; + } +` + +export const ExternalButton = styled(LightButton)` + box-sizing: border-box; + min-width: 170px; + margin: 10px 0; +` + +export const GithubButton = styled(ExternalButton)` + i { + background-image: url(/static/img/github_icon.svg); + } +` + +export const DiscordButton = styled(ExternalButton)` + i { + background-image: url(/static/img/discord.svg); + width: 1.2em; + height: 1.2em; + } +` + +export const Spacer = styled.div` + height: 65px; +` + +export const Description = styled.p` + color: #3c3937; +` diff --git a/src/components/Documentation/SidebarMenu/index.js b/src/components/Documentation/SidebarMenu/index.js index 0c059fd0aa..79800da14d 100644 --- a/src/components/Documentation/SidebarMenu/index.js +++ b/src/components/Documentation/SidebarMenu/index.js @@ -4,16 +4,23 @@ import scrollIntoView from 'dom-scroll-into-view' import PropTypes from 'prop-types' import NextLink from 'next/link' import includes from 'lodash.includes' -import styled from 'styled-components' - -import { PAGE_DOC } from '../../../consts' import DownloadButton from '../../DownloadButton' -import { OnlyDesktop, media } from '../../../styles' - +import { PAGE_DOC } from '../../../consts' import { getParentsListFromPath } from '../../../utils/sidebar' +import { OnlyDesktop } from '../../../styles' + +import { + Collapse, + Menu, + SectionLink, + SectionLinks, + Sections, + SideFooter +} from './styles' + /** Height of each menu child items (to calc Element weight for animations) */ const heightMap = {} @@ -145,94 +152,3 @@ SidebarMenu.propTypes = { currentPath: PropTypes.string, onClick: PropTypes.func } - -const Menu = styled.div` - position: sticky; - top: 60px; - height: calc(100vh - 138px); - overflow-y: hidden; - -webkit-overflow-scrolling: touch; - - ${props => - props.isScrollHidden && - ` - .ps__rail-y { opacity: 0; overflow: hidden; } - `}; - - ${media.phablet` - position: relative; - top: 0; - height: calc(100% - 60px); - padding-left: 20px; - `}; -` - -const Sections = styled.div` - margin-bottom: 25px; - margin-top: 10px; - min-width: 280px; - - ${media.phablet` - min-width: auto; - `} -` - -const SectionLinks = styled.div` - @media (max-width: 768px) { - position: relative; - } -` - -const SectionLink = styled.a` - display: block; - position: relative; - font-size: 18px; - font-weight: 500; - color: #b0b8c5; - text-decoration: none; - font-weight: 400; - line-height: 26px; - min-height: 26px; - padding-bottom: 5px; - padding-left: 15px; - margin: 0 0 0 5px; - - ${props => - props.isActive && - ` - color: #40364d; - `}; - - &:hover { - color: #3c3937; - } - - &::before { - content: ''; - display: block; - position: absolute; - width: 8px; - height: 5px; - background: url('/static/img/triangle_dark.svg') no-repeat center center; - left: 0px; - top: 10px; - - ${props => - props.isActive && - ` - transform: rotate(-90deg); - `}; - } -` - -const Collapse = styled.div` - overflow: hidden; - height: 0; - transition: height 400ms; - padding-left: 20px; -` - -const SideFooter = styled.div` - margin-top: 30px; - padding-bottom: 30px; -` diff --git a/src/components/Documentation/SidebarMenu/styles.js b/src/components/Documentation/SidebarMenu/styles.js new file mode 100644 index 0000000000..37af07e603 --- /dev/null +++ b/src/components/Documentation/SidebarMenu/styles.js @@ -0,0 +1,94 @@ +import styled from 'styled-components' + +import { media } from '../../../styles' + +export const Menu = styled.div` + position: sticky; + top: 60px; + height: calc(100vh - 138px); + overflow-y: hidden; + -webkit-overflow-scrolling: touch; + + ${props => + props.isScrollHidden && + ` + .ps__rail-y { opacity: 0; overflow: hidden; } + `}; + + ${media.phablet` + position: relative; + top: 0; + height: calc(100% - 60px); + padding-left: 20px; + `}; +` + +export const Sections = styled.div` + margin-bottom: 25px; + margin-top: 10px; + min-width: 280px; + + ${media.phablet` + min-width: auto; + `} +` + +export const SectionLinks = styled.div` + @media (max-width: 768px) { + position: relative; + } +` + +export const SectionLink = styled.a` + display: block; + position: relative; + font-size: 18px; + font-weight: 500; + color: #b0b8c5; + text-decoration: none; + font-weight: 400; + line-height: 26px; + min-height: 26px; + padding-bottom: 5px; + padding-left: 15px; + margin: 0 0 0 5px; + + ${props => + props.isActive && + ` + color: #40364d; + `}; + + &:hover { + color: #3c3937; + } + + &::before { + content: ''; + display: block; + position: absolute; + width: 8px; + height: 5px; + background: url('/static/img/triangle_dark.svg') no-repeat center center; + left: 0px; + top: 10px; + + ${props => + props.isActive && + ` + transform: rotate(-90deg); + `}; + } +` + +export const Collapse = styled.div` + overflow: hidden; + height: 0; + transition: height 400ms; + padding-left: 20px; +` + +export const SideFooter = styled.div` + margin-top: 30px; + padding-bottom: 30px; +` diff --git a/src/components/Documentation/Tutorials.js b/src/components/Documentation/Tutorials/index.js similarity index 59% rename from src/components/Documentation/Tutorials.js rename to src/components/Documentation/Tutorials/index.js index fe588f3c3e..967f4a8b7d 100644 --- a/src/components/Documentation/Tutorials.js +++ b/src/components/Documentation/Tutorials/index.js @@ -2,9 +2,12 @@ import React from 'react' import PropTypes from 'prop-types' import topairs from 'lodash.topairs' import startCase from 'lodash.startcase' -import styled from 'styled-components' -import { LightButton } from './LightButton' +import { ExternalButton, KatacodaButton, Wrapper } from './styles' + +const icons = { + katacoda: KatacodaButton +} export default function Tutorials({ compact, tutorials }) { const tutorialsData = topairs(tutorials) @@ -35,40 +38,3 @@ Tutorials.propTypes = { compact: PropTypes.bool, tutorials: PropTypes.object } - -const Wrapper = styled.div`` - -const ExternalButton = styled(LightButton)` - box-sizing: border-box; - min-height: 36px; - - ${({ compact }) => - !compact && - ` - width: 100%; - margin: 10px 0; - `} - - ${({ compact }) => - compact && - ` - margin-left: 5px; - - i { - margin-right: 0; - } - `} -` - -const KatacodaButton = styled(ExternalButton)` - white-space: nowrap; - - i { - background-image: url(/static/img/katacoda_grey_small.png); - width: 24px; - height: 24px; - } -` -const icons = { - katacoda: KatacodaButton -} diff --git a/src/components/Documentation/Tutorials/styles.js b/src/components/Documentation/Tutorials/styles.js new file mode 100644 index 0000000000..1a92f74cc3 --- /dev/null +++ b/src/components/Documentation/Tutorials/styles.js @@ -0,0 +1,37 @@ +import styled from 'styled-components' + +import { LightButton } from '../styles' + +export const Wrapper = styled.div`` + +export const ExternalButton = styled(LightButton)` + box-sizing: border-box; + min-height: 36px; + + ${({ compact }) => + !compact && + ` + width: 100%; + margin: 10px 0; + `} + + ${({ compact }) => + compact && + ` + margin-left: 5px; + + i { + margin-right: 0; + } + `} +` + +export const KatacodaButton = styled(ExternalButton)` + white-space: nowrap; + + i { + background-image: url(/static/img/katacoda_grey_small.png); + width: 24px; + height: 24px; + } +` diff --git a/src/components/Documentation/index.js b/src/components/Documentation/index.js index b7190ad5c2..84e02e7e89 100644 --- a/src/components/Documentation/index.js +++ b/src/components/Documentation/index.js @@ -2,20 +2,18 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react' import PropTypes from 'prop-types' -import styled from 'styled-components' import Router from 'next/router' import Page from '../Page' import Hamburger from '../Hamburger' import SearchForm from '../SearchForm' - import SidebarMenu from './SidebarMenu' import Markdown, { extractSlugFromTitle } from './Markdown' import RightPanel from './RightPanel' import { structure } from '../../utils/sidebar' -import { media } from '../../styles' +import { Backdrop, Container, SearchArea, Side, SideToggle } from './styles' const ROOT_ELEMENT = 'bodybag' const SIDEBAR_MENU = 'sidebar-menu' @@ -137,128 +135,3 @@ Documentation.propTypes = { markdown: PropTypes.string, errorCode: PropTypes.number } - -const Container = styled.div` - display: flex; - flex-direction: row; - max-width: 1200px; - margin: 0 auto; - background: white; - z-index: 2; - - &:before { - content: ''; - display: block; - position: fixed; - top: 0; - left: 0; - bottom: 0; - width: 50%; - background-color: #eef4f8; - z-index: -1; - pointer-events: none; - } -` - -const Backdrop = styled.div` - display: none; - - ${media.phablet` - display: block; - opacity: 0; - pointer-events: none; - transition: opacity .3s linear; - - ${props => - props.visible && - ` - content: ''; - position: fixed; - top: 0; - left: 0; - bottom: 0; - right: 0; - background-color: rgba(0, 0, 0, 0.4); - z-index: 1; - opacity: 1; - pointer-events: all; - `} - `}; -` - -const Side = styled.div` - width: 280px; - background-color: #eef4f8; - - @media only screen and (max-width: 1200px) { - padding-left: 15px; - } - - ${media.phablet` - position: fixed; - display: block; - z-index: 2; - top: 78px; - bottom: 0; - left: 0; - right: 60px; - box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 4px, rgba(0, 0, 0, 0.28) 0px 4px 8px; - transform: translateX(-110%); - transition: transform .35s ease; - - ${props => - props.isOpen && - ` - transform: translateX(0); - `} - `}; -` - -const SearchArea = styled.div` - height: 60px; - display: flex; - align-items: center; - background-color: #eef4f8; - z-index: 10; - position: sticky; - top: 0; - - ${media.phablet` - position: relative; - padding: 0 20px; - `}; - - form { - height: 40px; - } -` - -const SideToggle = styled.div` - display: none; - position: fixed; - z-index: 2; - left: 8px; - bottom: 20px; - width: 45px; - height: 45px; - border-radius: 50%; - background-color: rgba(255, 255, 255, 0.9); - box-shadow: 0 0px 9px 0 rgba(0, 0, 0, 0.15); - transition: transform 0.3s ease; - justify-content: center; - align-items: center; - - ${media.phablet` - display: flex; - - > div { - transform: scale(0.75); - } - `}; - - ${({ isMenuOpen }) => - isMenuOpen && - ` - transform: translateX(calc(100vw - 60px)); - `}; -` diff --git a/src/components/Documentation/styles.js b/src/components/Documentation/styles.js new file mode 100644 index 0000000000..0332167b22 --- /dev/null +++ b/src/components/Documentation/styles.js @@ -0,0 +1,158 @@ +import styled from 'styled-components' + +import { media } from '../../styles' + +export const Container = styled.div` + display: flex; + flex-direction: row; + max-width: 1200px; + margin: 0 auto; + background: white; + z-index: 2; + + &:before { + content: ''; + display: block; + position: fixed; + top: 0; + left: 0; + bottom: 0; + width: 50%; + background-color: #eef4f8; + z-index: -1; + pointer-events: none; + } +` + +export const Backdrop = styled.div` + display: none; + + ${media.phablet` + display: block; + opacity: 0; + pointer-events: none; + transition: opacity .3s linear; + + ${props => + props.visible && + ` + content: ''; + position: fixed; + top: 0; + left: 0; + bottom: 0; + right: 0; + background-color: rgba(0, 0, 0, 0.4); + z-index: 1; + opacity: 1; + pointer-events: all; + `} + `}; +` + +export const Side = styled.div` + width: 280px; + background-color: #eef4f8; + + @media only screen and (max-width: 1200px) { + padding-left: 15px; + } + + ${media.phablet` + position: fixed; + display: block; + z-index: 2; + top: 78px; + bottom: 0; + left: 0; + right: 60px; + box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 4px, rgba(0, 0, 0, 0.28) 0px 4px 8px; + transform: translateX(-110%); + transition: transform .35s ease; + + ${props => + props.isOpen && + ` + transform: translateX(0); + `} + `}; +` + +export const SearchArea = styled.div` + height: 60px; + display: flex; + align-items: center; + background-color: #eef4f8; + z-index: 10; + position: sticky; + top: 0; + + ${media.phablet` + position: relative; + padding: 0 20px; + `}; + + form { + height: 40px; + } +` + +export const SideToggle = styled.div` + display: none; + position: fixed; + z-index: 2; + left: 8px; + bottom: 20px; + width: 45px; + height: 45px; + border-radius: 50%; + background-color: rgba(255, 255, 255, 0.9); + box-shadow: 0 0px 9px 0 rgba(0, 0, 0, 0.15); + transition: transform 0.3s ease; + justify-content: center; + align-items: center; + + ${media.phablet` + display: flex; + + > div { + transform: scale(0.75); + } + `}; + + ${({ isMenuOpen }) => + isMenuOpen && + ` + transform: translateX(calc(100vw - 60px)); + `}; +` + +export const LightButton = styled.a` + display: inline-flex; + justify-content: center; + align-items: center; + color: #575e64; + background-color: white; + border: 1px solid #575e64; + text-decoration: none; + font-weight: 600; + line-height: 30px; + padding: 2px 16px; + border-radius: 3px; + cursor: pointer; + transition: 0.2s background-color ease-out; + z-index: 1; + + &:hover { + background-color: #f5f7f9; + } + + i { + background-size: contain; + background-repeat: no-repeat; + background-position: center; + width: 1em; + height: 1em; + margin-right: 7px; + } +` diff --git a/src/components/DownloadButton/index.js b/src/components/DownloadButton/index.js index 7f3e157bf5..025a77b80a 100644 --- a/src/components/DownloadButton/index.js +++ b/src/components/DownloadButton/index.js @@ -1,10 +1,24 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' -import styled, { css } from 'styled-components' import isClient from '../../utils/isClient' import { logEvent } from '../../utils/ga' +import { + Action, + Button, + Delimiter, + Description, + DownloadInput, + DownloadLink, + Handler, + Icon, + Inner, + Links, + Popup, + Triangle +} from './styles' + const VERSION = `0.80.0` const OSX = `osx` const WINDOWS = `win` @@ -180,144 +194,3 @@ export default class DownloadButton extends Component { DownloadButton.propTypes = { openTop: PropTypes.bool } - -const Handler = styled.span` - position: relative; - display: inline-block; - width: 186px; - height: 60px; -` - -const Button = styled.button` - position: relative; - width: 186px; - height: 60px; - border: none; - border-radius: 4px; - background-color: #945dd6; - - padding: 0px; - color: #ffffff; - - cursor: pointer; - z-index: 9; - - display: flex; - flex-direction: row; - align-items: center; - transition: 0.2s background-color ease-out; - - ${props => - props.open && - ` - background-color: #885CCB; - `} &:hover { - background-color: #885ccb; - } -` - -const Icon = styled.div` - flex-basis: 48px; - - text-align: center; -` - -const Inner = styled.div` - display: flex; - justify-content: space-between; - flex: 1; -` - -const Action = styled.h6` - font-family: BrandonGrotesqueMed; - font-size: 20px; - line-height: 0.9; -` -const Description = styled.p` - font-family: BrandonGrotesque; - font-size: 14px; - text-align: left; -` - -const Triangle = styled.div` - margin-right: 19px; - align-items: center; - display: flex; - - transition: left 300ms linear; - - ${props => - props.open && - ` - transition: left 300ms linear; - transform: rotate(-180deg); - `}; -` - -const Popup = styled.div` - position: absolute; - left: 0px; - right: 0px; - top: calc(100% + 3px); - background-color: #ffffff; - box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15); - - ${props => - props.openTop && - ` - bottom: calc(100% + 3px); - top: auto; - `}; -` - -const Links = styled.div` - display: flex; - flex-direction: column; -` - -const item = css` - font-family: BrandonGrotesque; - display: block; - min-height: 36px; - line-height: 1.29; - padding: 0px 17px; - - display: flex; - align-items: center; - text-decoration: none; - - color: #b0b8c5; -` - -const Delimiter = styled.div` - background-color: rgba(0, 0, 0, 0.1); - height: 1px; -` - -const DownloadInput = styled.input` - ${item}; - border: none !important; - font-family: Monospace; - font-weight: bold; - - ${props => - props.active && - ` - color: #40364d; - `}; -` - -const DownloadLink = styled.a` - ${item}; - color: #b0b8c5; - - &:hover { - color: #40364d; - } - - ${props => - props.active && - ` - color: #40364d; - `}; -` diff --git a/src/components/DownloadButton/styles.js b/src/components/DownloadButton/styles.js new file mode 100644 index 0000000000..2cc9657f20 --- /dev/null +++ b/src/components/DownloadButton/styles.js @@ -0,0 +1,143 @@ +import styled, { css } from 'styled-components' + +export const Handler = styled.span` + position: relative; + display: inline-block; + width: 186px; + height: 60px; +` + +export const Button = styled.button` + position: relative; + width: 186px; + height: 60px; + border: none; + border-radius: 4px; + background-color: #945dd6; + + padding: 0px; + color: #ffffff; + + cursor: pointer; + z-index: 9; + + display: flex; + flex-direction: row; + align-items: center; + transition: 0.2s background-color ease-out; + + ${props => + props.open && + ` + background-color: #885CCB; + `} &:hover { + background-color: #885ccb; + } +` + +export const Icon = styled.div` + flex-basis: 48px; + + text-align: center; +` + +export const Inner = styled.div` + display: flex; + justify-content: space-between; + flex: 1; +` + +export const Action = styled.h6` + font-family: BrandonGrotesqueMed; + font-size: 20px; + line-height: 0.9; +` + +export const Description = styled.p` + font-family: BrandonGrotesque; + font-size: 14px; + text-align: left; +` + +export const Triangle = styled.div` + margin-right: 19px; + align-items: center; + display: flex; + + transition: left 300ms linear; + + ${props => + props.open && + ` + transition: left 300ms linear; + transform: rotate(-180deg); + `}; +` + +export const Popup = styled.div` + position: absolute; + left: 0px; + right: 0px; + top: calc(100% + 3px); + background-color: #ffffff; + box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15); + + ${props => + props.openTop && + ` + bottom: calc(100% + 3px); + top: auto; + `}; +` + +export const Links = styled.div` + display: flex; + flex-direction: column; +` + +const Item = css` + font-family: BrandonGrotesque; + display: block; + min-height: 36px; + line-height: 1.29; + padding: 0px 17px; + + display: flex; + align-items: center; + text-decoration: none; + + color: #b0b8c5; +` + +export const Delimiter = styled.div` + background-color: rgba(0, 0, 0, 0.1); + height: 1px; +` + +export const DownloadInput = styled.input` + ${Item}; + border: none !important; + font-family: Monospace; + font-weight: bold; + + ${props => + props.active && + ` + color: #40364d; + `}; +` + +export const DownloadLink = styled.a` + ${Item}; + color: #b0b8c5; + + &:hover { + color: #40364d; + } + + ${props => + props.active && + ` + color: #40364d; + `}; +` diff --git a/src/components/Features/index.js b/src/components/Features/index.js index 7be5a91657..e6f5221824 100644 --- a/src/components/Features/index.js +++ b/src/components/Features/index.js @@ -1,12 +1,11 @@ import React from 'react' -import styled from 'styled-components' import Page from '../Page' import Hero from '../Hero' import FeaturesHero from '../FeaturesHero' import TrySection from '../TrySection' -import { container, media } from '../../styles' +import { Container, Description, Feature, Features, Icon, Name } from './styles' export default function FeaturesPage() { return ( @@ -159,54 +158,3 @@ export default function FeaturesPage() { ) } - -const Container = styled.div` - ${container}; -` - -const Features = styled.div` - display: flex; - flex-flow: row; - flex-wrap: wrap; - padding-top: 110px; - padding-bottom: 90px; - - ${media.phablet` - padding-top: 70px; - padding-bottom: 50px; - `}; -` - -const Feature = styled.div` - flex: 33.3%; - flex-basis: 311px; - margin-bottom: 63px; -` - -const Icon = styled.div` - height: 48px; - - img { - width: 48px; - height: 48px; - } -` - -const Name = styled.h3` - font-family: BrandonGrotesqueMed; - margin-top: 10px; - margin-bottom: 10px; - - font-size: 20px; - font-weight: 500; - color: #40364d; - - min-height: 28px; -` - -const Description = styled.div` - max-width: 311px; - - font-size: 16px; - color: #5f6c72; -` diff --git a/src/components/Features/styles.js b/src/components/Features/styles.js new file mode 100644 index 0000000000..77300e9e65 --- /dev/null +++ b/src/components/Features/styles.js @@ -0,0 +1,54 @@ +import styled from 'styled-components' + +import { container, media } from '../../styles' + +export const Container = styled.div` + ${container}; +` + +export const Features = styled.div` + display: flex; + flex-flow: row; + flex-wrap: wrap; + padding-top: 110px; + padding-bottom: 90px; + + ${media.phablet` + padding-top: 70px; + padding-bottom: 50px; + `}; +` + +export const Feature = styled.div` + flex: 33.3%; + flex-basis: 311px; + margin-bottom: 63px; +` + +export const Icon = styled.div` + height: 48px; + + img { + width: 48px; + height: 48px; + } +` + +export const Name = styled.h3` + font-family: BrandonGrotesqueMed; + margin-top: 10px; + margin-bottom: 10px; + + font-size: 20px; + font-weight: 500; + color: #40364d; + + min-height: 28px; +` + +export const Description = styled.div` + max-width: 311px; + + font-size: 16px; + color: #5f6c72; +` diff --git a/src/components/FeaturesHero/index.js b/src/components/FeaturesHero/index.js index a6f6614a74..45dc328401 100644 --- a/src/components/FeaturesHero/index.js +++ b/src/components/FeaturesHero/index.js @@ -1,5 +1,6 @@ import React from 'react' -import styled from 'styled-components' + +import { Heading, Wrapper } from './styles' export default function FeaturesHero() { return ( @@ -11,21 +12,3 @@ export default function FeaturesHero() { ) } - -const Wrapper = styled.div` - padding-top: 87px; - padding-bottom: 58px; - overflow: hidden; -` - -const Heading = styled.h1` - font-family: BrandonGrotesqueMed; - margin: 0px auto; - max-width: 610px; - min-height: 185px; - font-size: 40px; - font-weight: 500; - line-height: 1.4; - text-align: center; - color: #40364d; -` diff --git a/src/components/FeaturesHero/styles.js b/src/components/FeaturesHero/styles.js new file mode 100644 index 0000000000..06b9a4d02a --- /dev/null +++ b/src/components/FeaturesHero/styles.js @@ -0,0 +1,19 @@ +import styled from 'styled-components' + +export const Wrapper = styled.div` + padding-top: 87px; + padding-bottom: 58px; + overflow: hidden; +` + +export const Heading = styled.h1` + font-family: BrandonGrotesqueMed; + margin: 0px auto; + max-width: 610px; + min-height: 185px; + font-size: 40px; + font-weight: 500; + line-height: 1.4; + text-align: center; + color: #40364d; +` diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js index e97789ed56..3bd1448a87 100644 --- a/src/components/Footer/index.js +++ b/src/components/Footer/index.js @@ -1,9 +1,19 @@ import React from 'react' import PropTypes from 'prop-types' -import styled from 'styled-components' import NextLink from 'next/link' -import { columns, container, media } from '../../styles' +import { + Column, + Columns, + Copyright, + Container, + Heading, + Link, + Links, + Logo, + Top, + Wrapper +} from './styles' const SocialLink = ({ src, href, children }) => ( @@ -104,105 +114,3 @@ export default function Footer(props) { Footer.propTypes = { isDocPage: PropTypes.bool } - -const Wrapper = styled.section` - min-height: 300px; - background-color: #40364d; - color: #fff; - - ${media.phablet` - min-height: auto; - `}; -` - -const Container = styled.div` - ${container}; - ${props => props.wide && `max-width: 1200px;`}; - padding-top: 64px !important; - padding-bottom: 44px; - - ${media.tablet` - padding: 64px 61px 44px 67px; - max-width: auto; - `} - - ${media.phablet` - padding: 30px 25px; - max-width: auto; - `}; -` - -const Top = styled.div` - height: 40px; - margin-bottom: 40.7px; -` - -const Logo = styled.a`` - -const Columns = styled.div` - ${columns}; - - ${media.phablet` - justify-content: space-between; - `}; -` - -const Column = styled.div` - display: flex; - flex-direction: column; - flex-basis: 150px; - margin-right: 66px; - - ${media.phablet` - margin-right: 0px; - `}; -` - -const Heading = styled.h2` - font-family: BrandonGrotesqueLight; - opacity: 0.61; - color: #ffffff; - font-size: 20px; - font-weight: 100; -` - -const Links = styled.div` - margin-top: 29px; - display: flex; - flex-direction: column; -` - -const Link = styled.a` - line-height: 23px; - font-size: 20px; - margin-bottom: 17px; - display: flex; - color: #fff; - text-decoration: none; - - &:hover { - color: #ccc; - } - - ${props => - props.src && - ` - &::before { - margin-right: 14px; - width: 26px; - height: 26px; - content: ' '; - display: block; - background-image: url(${props.src}); - background-repeat: no-repeat; - background-position: center center; - background-size: contain; - } - `}; -` - -const Copyright = styled.div` - padding-bottom: 18px; - padding-top: 18px; - font-size: 14px; -` diff --git a/src/components/Footer/styles.js b/src/components/Footer/styles.js new file mode 100644 index 0000000000..0b81e21af0 --- /dev/null +++ b/src/components/Footer/styles.js @@ -0,0 +1,104 @@ +import styled from 'styled-components' +import { columns, container, media } from '../../styles' + +export const Wrapper = styled.section` + min-height: 300px; + background-color: #40364d; + color: #fff; + + ${media.phablet` + min-height: auto; + `}; +` + +export const Container = styled.div` + ${container}; + ${props => props.wide && `max-width: 1200px;`}; + padding-top: 64px !important; + padding-bottom: 44px; + + ${media.tablet` + padding: 64px 61px 44px 67px; + max-width: auto; + `} + + ${media.phablet` + padding: 30px 25px; + max-width: auto; + `}; +` + +export const Top = styled.div` + height: 40px; + margin-bottom: 40.7px; +` + +export const Logo = styled.a`` + +export const Columns = styled.div` + ${columns}; + + ${media.phablet` + justify-content: space-between; + `}; +` + +export const Column = styled.div` + display: flex; + flex-direction: column; + flex-basis: 150px; + margin-right: 66px; + + ${media.phablet` + margin-right: 0px; + `}; +` + +export const Heading = styled.h2` + font-family: BrandonGrotesqueLight; + opacity: 0.61; + color: #ffffff; + font-size: 20px; + font-weight: 100; +` + +export const Links = styled.div` + margin-top: 29px; + display: flex; + flex-direction: column; +` + +export const Link = styled.a` + line-height: 23px; + font-size: 20px; + margin-bottom: 17px; + display: flex; + color: #fff; + text-decoration: none; + + &:hover { + color: #ccc; + } + + ${props => + props.src && + ` + &::before { + margin-right: 14px; + width: 26px; + height: 26px; + content: ' '; + display: block; + background-image: url(${props.src}); + background-repeat: no-repeat; + background-position: center center; + background-size: contain; + } + `}; +` + +export const Copyright = styled.div` + padding-bottom: 18px; + padding-top: 18px; + font-size: 14px; +` diff --git a/src/components/GithubLine/index.js b/src/components/GithubLine/index.js index 904105eb0b..8a9db20dba 100644 --- a/src/components/GithubLine/index.js +++ b/src/components/GithubLine/index.js @@ -1,5 +1,6 @@ import React, { useEffect, useState } from 'react' -import styled from 'styled-components' + +import { Count, Github, Link, Star, Wrapper } from './styles' const repo = `iterative/dvc` const gh = `https://github.com/${repo}` @@ -28,37 +29,3 @@ export default function GithubLine() { ) } - -const Wrapper = styled.div` - font-family: BrandonGrotesqueMed; - line-height: 20px; - height: 20px; - display: flex; - align-items: center; -` - -const Link = styled.a` - font-family: BrandonGrotesqueMed; - color: #40364d; - margin-left: 0.3em; - - &:focus, - &:hover, - &:visited { - color: #40364d; - } -` - -const Github = styled.img` - font-family: BrandonGrotesqueMed; - margin-right: 9px; -` - -const Star = styled.img` - margin-left: 7px; -` - -const Count = styled.span` - font-family: BrandonGrotesqueMed; - margin-left: 6.3px; -` diff --git a/src/components/GithubLine/styles.js b/src/components/GithubLine/styles.js new file mode 100644 index 0000000000..443b6c30d5 --- /dev/null +++ b/src/components/GithubLine/styles.js @@ -0,0 +1,35 @@ +import styled from 'styled-components' + +export const Wrapper = styled.div` + font-family: BrandonGrotesqueMed; + line-height: 20px; + height: 20px; + display: flex; + align-items: center; +` + +export const Link = styled.a` + font-family: BrandonGrotesqueMed; + color: #40364d; + margin-left: 0.3em; + + &:focus, + &:hover, + &:visited { + color: #40364d; + } +` + +export const Github = styled.img` + font-family: BrandonGrotesqueMed; + margin-right: 9px; +` + +export const Star = styled.img` + margin-left: 7px; +` + +export const Count = styled.span` + font-family: BrandonGrotesqueMed; + margin-left: 6.3px; +` diff --git a/src/components/Hamburger/index.js b/src/components/Hamburger/index.js index cba2f415c7..c56a964312 100644 --- a/src/components/Hamburger/index.js +++ b/src/components/Hamburger/index.js @@ -1,9 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' -import styled from 'styled-components' -const WIDTH = 30 -const HEIGHT = 3 +import { Line, Wrapper } from './styles' export default function Hamburger({ open }) { return ( @@ -18,44 +16,3 @@ export default function Hamburger({ open }) { Hamburger.propTypes = { open: PropTypes.bool } - -const Wrapper = styled.div` - display: inline-block; - cursor: pointer; -` - -const Line = styled.div` - width: ${WIDTH}px; - height: ${HEIGHT}px; - background-color: #173042; - margin: 5px 0; - transition: 0.4s; - - ${props => - props.open && - ` - background-color: #fff; - `} - - ${props => - props.open && - props.first && - ` - transform: rotate(-45deg) translate(-7px, 6px); - `}; - - ${props => - props.open && - props.second && - ` - opacity: 0; - `}; - - ${props => - props.open && - props.third && - ` - - transform: rotate(45deg) translate(-5px,-5px); - `}; -` diff --git a/src/components/Hamburger/styles.js b/src/components/Hamburger/styles.js new file mode 100644 index 0000000000..3d5ab86238 --- /dev/null +++ b/src/components/Hamburger/styles.js @@ -0,0 +1,45 @@ +import styled from 'styled-components' + +const WIDTH = 30 +const HEIGHT = 3 + +export const Wrapper = styled.div` + display: inline-block; + cursor: pointer; +` + +export const Line = styled.div` + width: ${WIDTH}px; + height: ${HEIGHT}px; + background-color: #173042; + margin: 5px 0; + transition: 0.4s; + + ${props => + props.open && + ` + background-color: #fff; + `} + + ${props => + props.open && + props.first && + ` + transform: rotate(-45deg) translate(-7px, 6px); + `}; + + ${props => + props.open && + props.second && + ` + opacity: 0; + `}; + + ${props => + props.open && + props.third && + ` + + transform: rotate(45deg) translate(-5px,-5px); + `}; +` diff --git a/src/components/HamburgerMenu/index.js b/src/components/HamburgerMenu/index.js index 4cbd3810fd..36409d321a 100644 --- a/src/components/HamburgerMenu/index.js +++ b/src/components/HamburgerMenu/index.js @@ -1,13 +1,25 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' -import styled from 'styled-components' import NextLink from 'next/link' -import { media } from '../../styles' - import Hamburger from '../Hamburger' + import { logEvent } from '../../utils/ga' +import { + Button, + Column, + Columns, + Heading, + Link, + Links, + Logo, + Menu, + Section, + Top, + Wrapper +} from './styles' + const SocialLink = ({ src, href, click, children }) => ( {children} @@ -162,123 +174,3 @@ export default class HamburgerMenu extends Component { ) } } - -const Wrapper = styled.div` - padding: 25px 31px 20px 31px; - display: none; - position: fixed; - z-index: 10; - transform: translateX(100%); - transition: transform 0.4s ease; - will-change: transform; - left: 0px; - right: 0px; - top: 0px; - bottom: 0px; - background-color: #40364d; - color: #fff; - - ${media.phablet` - display: block; - `}; - - ${props => - props.open && - ` - transform: translateX(0); - `}; -` - -const Button = styled.button` - position: fixed; - display: none; - z-index: 999; - - right: 15px; - top: 25px; - - width: 46px; - height: 36px; - - border: none; - background: transparent; - - ${media.phablet` - display: block; - `}; -` - -const Menu = styled.div` - display: flex; - height: 100%; - flex-direction: column; - justify-content: space-between; - color: #fff; -` - -const Section = styled.div`` - -const Top = styled.div` - height: 40px; - margin-bottom: 40.7px; -` - -const Logo = styled.a` - margin-top: 5px; - display: block; - -webkit-transform-style: preserve-3d; - transform-style: preserve-3d; - transform: translate3d(0, 0, 0); -` - -const Columns = styled.div` - display: flex; - flex-direction: row; - flex-flow: wrap; -` - -const Column = styled.div` - display: flex; - flex-direction: column; - margin-bottom: 24px; - flex-basis: 50%; -` - -const Links = styled.div` - display: flex; - flex-direction: column; -` - -const Heading = styled.h2` - opacity: 0.61; - color: #fff; - font-size: 20px; - font-weight: 100; -` - -const Link = styled.a` - font-size: 18px; - padding: 8px 0px; - display: flex; - color: #fff; - text-decoration: none; - - &:hover { - color: #fff; - } - - ${props => - props.src && - ` - &::before { - margin-right: 14px; - width: 26px; - height: 26px; - content: ''; - background-image: url(${props.src}); - background-repeat: no-repeat; - background-position: center center; - background-size: contain; - } - `}; -` diff --git a/src/components/HamburgerMenu/styles.js b/src/components/HamburgerMenu/styles.js new file mode 100644 index 0000000000..5696c90cda --- /dev/null +++ b/src/components/HamburgerMenu/styles.js @@ -0,0 +1,123 @@ +import styled from 'styled-components' + +import { media } from '../../styles' + +export const Wrapper = styled.div` + padding: 25px 31px 20px 31px; + display: none; + position: fixed; + z-index: 10; + transform: translateX(100%); + transition: transform 0.4s ease; + will-change: transform; + left: 0px; + right: 0px; + top: 0px; + bottom: 0px; + background-color: #40364d; + color: #fff; + + ${media.phablet` + display: block; + `}; + + ${props => + props.open && + ` + transform: translateX(0); + `}; +` + +export const Button = styled.button` + position: fixed; + display: none; + z-index: 999; + + right: 15px; + top: 25px; + + width: 46px; + height: 36px; + + border: none; + background: transparent; + + ${media.phablet` + display: block; + `}; +` + +export const Menu = styled.div` + display: flex; + height: 100%; + flex-direction: column; + justify-content: space-between; + color: #fff; +` + +export const Section = styled.div`` + +export const Top = styled.div` + height: 40px; + margin-bottom: 40.7px; +` + +export const Logo = styled.a` + margin-top: 5px; + display: block; + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; + transform: translate3d(0, 0, 0); +` + +export const Columns = styled.div` + display: flex; + flex-direction: row; + flex-flow: wrap; +` + +export const Column = styled.div` + display: flex; + flex-direction: column; + margin-bottom: 24px; + flex-basis: 50%; +` + +export const Links = styled.div` + display: flex; + flex-direction: column; +` + +export const Heading = styled.h2` + opacity: 0.61; + color: #fff; + font-size: 20px; + font-weight: 100; +` + +export const Link = styled.a` + font-size: 18px; + padding: 8px 0px; + display: flex; + color: #fff; + text-decoration: none; + + &:hover { + color: #fff; + } + + ${props => + props.src && + ` + &::before { + margin-right: 14px; + width: 26px; + height: 26px; + content: ''; + background-image: url(${props.src}); + background-repeat: no-repeat; + background-position: center center; + background-size: contain; + } + `}; +` diff --git a/src/components/Hero/index.js b/src/components/Hero/index.js index 7f8d47ffae..ba7ab7d285 100644 --- a/src/components/Hero/index.js +++ b/src/components/Hero/index.js @@ -1,8 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' -import styled from 'styled-components' -import { container } from '../../styles' +import { Container, Wrapper } from './styles' export default function Hero({ children }) { return ( @@ -15,12 +14,3 @@ export default function Hero({ children }) { Hero.propTypes = { children: PropTypes.node.isRequired } - -const Wrapper = styled.section` - position: relative; - background-color: #eef4f8; -` - -const Container = styled.div` - ${container}; -` diff --git a/src/components/Hero/styles.js b/src/components/Hero/styles.js new file mode 100644 index 0000000000..7751cffcd1 --- /dev/null +++ b/src/components/Hero/styles.js @@ -0,0 +1,12 @@ +import styled from 'styled-components' + +import { container } from '../../styles' + +export const Wrapper = styled.section` + position: relative; + background-color: #eef4f8; +` + +export const Container = styled.div` + ${container}; +` diff --git a/src/components/Home/index.js b/src/components/Home/index.js index 7a72604090..2593eabbc4 100644 --- a/src/components/Home/index.js +++ b/src/components/Home/index.js @@ -1,5 +1,4 @@ import React from 'react' -import styled from 'styled-components' import LearnMore from '../LearnMore' import Page from '../Page' @@ -10,6 +9,8 @@ import PromoSection from '../PromoSection' import UseCases from '../UseCases' import Subscribe from '../Subscribe' +import { LearnMoreSection } from './styles' + export default function HomePage() { return ( @@ -27,11 +28,3 @@ export default function HomePage() { ) } - -const LearnMoreSection = styled.div` - z-index: 2; - position: absolute; - transform: translate(-50%, 0%); - left: 50%; - bottom: 16px; -` diff --git a/src/components/Home/styles.js b/src/components/Home/styles.js new file mode 100644 index 0000000000..1904903dcc --- /dev/null +++ b/src/components/Home/styles.js @@ -0,0 +1,9 @@ +import styled from 'styled-components' + +export const LearnMoreSection = styled.div` + z-index: 2; + position: absolute; + transform: translate(-50%, 0%); + left: 50%; + bottom: 16px; +` diff --git a/src/components/LandingHero/index.js b/src/components/LandingHero/index.js index 13722ebdda..ef9ca7f04c 100644 --- a/src/components/LandingHero/index.js +++ b/src/components/LandingHero/index.js @@ -1,5 +1,4 @@ import React, { Component } from 'react' -import styled, { css } from 'styled-components' import { scroller } from 'react-scroll' import DownloadButton from '../DownloadButton' @@ -7,7 +6,23 @@ import GithubLine from '../GithubLine' import { logEvent } from '../../utils/ga' -import { OnlyDesktop, OnlyMobile, media } from '../../styles' +import { OnlyDesktop, OnlyMobile } from '../../styles' +import { + Wrapper, + About, + Title, + Buttons, + GetStartedButton, + WatchButton, + Action, + ActionIcon, + ActionInner, + Description, + Github, + Command, + Commands, + Line +} from './styles' export default class LandingHero extends Component { state = { @@ -104,198 +119,3 @@ export default class LandingHero extends Component { ) } } - -const Wrapper = styled.div` - padding-top: 136px; - padding-bottom: 146px; - - display: flex; - justify-content: space-between; - - ${media.tablet` - flex-direction: column; - padding-top: 46px; - padding-bottom: 86px; - `}; -` - -const About = styled.div` - ${media.tablet` - max-width: 412px; - width: 100%; - margin: 0px auto; - `}; -` - -const Title = styled.h1` - font-size: 40px; - font-weight: 500; - color: #40364d; - font-family: BrandonGrotesqueMed; - padding-right: 2em; - - ${media.tablet` - padding-right: 0; - font-size: 36px; - `}; - - ${media.phablet` - font-size: 32px; - padding: 0px; - `}; - - @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { - font-size: 34px; - padding: 0px; - } -` - -const Buttons = styled.div` - margin-top: 28px; - display: flex; - - ${media.phablet` - flex-direction: column; - `}; - - @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { - justify-content: flex-start; - } -` - -const actionButton = css` - cursor: pointer; - align-items: center; - min-width: 186px; - border-radius: 4px; - border: none; - - display: flex; - flex-direction: row; - padding: 0px; - - ${media.phablet` - margin: 0px; - margin-bottom: 12px; - max-width: none; - min-height: 60px; - `}; -` - -const ActionIcon = styled.div` - flex-basis: 48px; - - text-align: center; -` - -const ActionInner = styled.div`` -const Action = styled.h6` - font-family: BrandonGrotesqueMed; - font-size: 20px; - line-height: 0.9; -` -const Description = styled.p` - font-family: BrandonGrotesque; - font-weight: normal; - font-size: 14px; - text-align: left; -` - -const WatchButton = styled.a` - ${actionButton}; - height: 56px; - text-decoration: none; - color: #40364d; - background-color: #eef4f8; - margin-left: 15px; - border: solid 2px rgba(176, 184, 197, 0.47); - transition: 0.2s background-color ease-out; - - &:hover { - background-color: #e4eaee; - } - - ${ActionIcon} { - padding-top: 6px; - } -` - -const GetStartedButton = styled.a` - ${actionButton}; - text-decoration: none; - background-color: #13adc7; - display: flex; - padding: 0px 0px 0px 20px; - font-size: 20px; - font-weight: 500; - color: #fff; - line-height: 0.9; - border: solid 2px transparent; - transition: 0.2s background-color ease-out; - - &:hover { - background-color: #13a3bd; - } -` - -const Command = styled.div` - width: 100%; - height: 57px; - border-radius: 8px; - background-color: #ffffff; - border: solid 1px ${({ active }) => (active ? '#945dd6' : 'transparent')}; - margin-bottom: 13px; - color: ${({ active }) => (active ? '#40364d' : '#b4b9c4')}; - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08); - transform: translateZ(0); - display: flex; - align-items: center; - opacity: ${({ active }) => (active ? 1 : 0.3)}; - transition: opacity 3s, border 0.5s, color 1s; -` - -const Commands = styled.div` - flex: 1 1 auto; - max-width: 412px; - display: flex; - flex-direction: column; - align-items: flex-end; - padding-top: 10px; - font-family: monospace, monospace; - - ${media.tablet` - align-items: center; - padding-top: 24px; - margin: 30px auto 0; - `}; - - @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { - align-items: center; - padding-top: 24px; - } -` - -const Line = styled.span` - font-size: 15px; - font-weight: 700; - padding: 0px 10px 0px 12px; -` - -const Github = styled.div` - margin-top: 51px; - font-size: 14px; - font-weight: 500; - color: #b0b8c5; - - ${media.tablet` - align-items: center; - margin-top: 24px; - font-size: 18px; - `}; - - @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { - align-items: center; - margin-top: 24px; - font-size: 18px; - } -` diff --git a/src/components/LandingHero/styles.js b/src/components/LandingHero/styles.js new file mode 100644 index 0000000000..24f286051a --- /dev/null +++ b/src/components/LandingHero/styles.js @@ -0,0 +1,199 @@ +import styled, { css } from 'styled-components' + +import { media } from '../../styles' + +export const Wrapper = styled.div` + padding-top: 136px; + padding-bottom: 146px; + + display: flex; + justify-content: space-between; + + ${media.tablet` + flex-direction: column; + padding-top: 46px; + padding-bottom: 86px; + `}; +` + +export const About = styled.div` + ${media.tablet` + max-width: 412px; + width: 100%; + margin: 0px auto; + `}; +` + +export const Title = styled.h1` + font-size: 40px; + font-weight: 500; + color: #40364d; + font-family: BrandonGrotesqueMed; + padding-right: 2em; + + ${media.tablet` + padding-right: 0; + font-size: 36px; + `}; + + ${media.phablet` + font-size: 32px; + padding: 0px; + `}; + + @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { + font-size: 34px; + padding: 0px; + } +` + +export const Buttons = styled.div` + margin-top: 28px; + display: flex; + + ${media.phablet` + flex-direction: column; + `}; + + @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { + justify-content: flex-start; + } +` + +const ActionButton = css` + cursor: pointer; + align-items: center; + min-width: 186px; + border-radius: 4px; + border: none; + + display: flex; + flex-direction: row; + padding: 0px; + + ${media.phablet` + margin: 0px; + margin-bottom: 12px; + max-width: none; + min-height: 60px; + `}; +` + +export const ActionIcon = styled.div` + flex-basis: 48px; + + text-align: center; +` + +export const ActionInner = styled.div`` + +export const Action = styled.h6` + font-family: BrandonGrotesqueMed; + font-size: 20px; + line-height: 0.9; +` +export const Description = styled.p` + font-family: BrandonGrotesque; + font-weight: normal; + font-size: 14px; + text-align: left; +` + +export const WatchButton = styled.a` + ${ActionButton}; + height: 56px; + text-decoration: none; + color: #40364d; + background-color: #eef4f8; + margin-left: 15px; + border: solid 2px rgba(176, 184, 197, 0.47); + transition: 0.2s background-color ease-out; + + &:hover { + background-color: #e4eaee; + } + + ${ActionIcon} { + padding-top: 6px; + } +` + +export const GetStartedButton = styled.a` + ${ActionButton}; + text-decoration: none; + background-color: #13adc7; + display: flex; + padding: 0px 0px 0px 20px; + font-size: 20px; + font-weight: 500; + color: #fff; + line-height: 0.9; + border: solid 2px transparent; + transition: 0.2s background-color ease-out; + + &:hover { + background-color: #13a3bd; + } +` + +export const Command = styled.div` + width: 100%; + height: 57px; + border-radius: 8px; + background-color: #ffffff; + border: solid 1px ${({ active }) => (active ? '#945dd6' : 'transparent')}; + margin-bottom: 13px; + color: ${({ active }) => (active ? '#40364d' : '#b4b9c4')}; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08); + transform: translateZ(0); + display: flex; + align-items: center; + opacity: ${({ active }) => (active ? 1 : 0.3)}; + transition: opacity 3s, border 0.5s, color 1s; +` + +export const Commands = styled.div` + flex: 1 1 auto; + max-width: 412px; + display: flex; + flex-direction: column; + align-items: flex-end; + padding-top: 10px; + font-family: monospace, monospace; + + ${media.tablet` + align-items: center; + padding-top: 24px; + margin: 30px auto 0; + `}; + + @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { + align-items: center; + padding-top: 24px; + } +` + +export const Line = styled.span` + font-size: 15px; + font-weight: 700; + padding: 0px 10px 0px 12px; +` + +export const Github = styled.div` + margin-top: 51px; + font-size: 14px; + font-weight: 500; + color: #b0b8c5; + + ${media.tablet` + align-items: center; + margin-top: 24px; + font-size: 18px; + `}; + + @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { + align-items: center; + margin-top: 24px; + font-size: 18px; + } +` diff --git a/src/components/Layout/index.js b/src/components/Layout/index.js index a63941166a..d824f04bbe 100644 --- a/src/components/Layout/index.js +++ b/src/components/Layout/index.js @@ -1,6 +1,5 @@ import React, { useEffect } from 'react' import PropTypes from 'prop-types' -import styled from 'styled-components' import { useRouter } from 'next/router' import TopMenu from '../TopMenu' @@ -9,6 +8,8 @@ import HamburgerMenu from '../HamburgerMenu' import { initGA, logPageView } from '../../utils/ga' +import { Wrapper, Bodybag, ModalRoot } from './styles' + export default function Layout({ children, enableSmoothScroll }) { const router = useRouter() const isDocPage = router.pathname === '/doc' @@ -42,32 +43,3 @@ Layout.propTypes = { children: PropTypes.node.isRequired, enableSmoothScroll: PropTypes.bool } - -const Wrapper = styled.div` - overflow: hidden; -` - -const Bodybag = styled.div` - position: fixed; - top: 80px; - bottom: 0; - left: 0; - right: 0; - height: 100%; - overflow-x: hidden; - overflow-y: auto; - transition: top 0.2s linear; - -webkit-overflow-scrolling: touch; - - ${({ enableSmoothScroll }) => - enableSmoothScroll && - ` - scroll-behavior: smooth; - will-change: scroll-position; - `} -` - -const ModalRoot = styled.div` - position: fixed; - z-index: 100000; -` diff --git a/src/components/Layout/styles.js b/src/components/Layout/styles.js new file mode 100644 index 0000000000..a57ea30198 --- /dev/null +++ b/src/components/Layout/styles.js @@ -0,0 +1,30 @@ +import styled from 'styled-components' + +export const Wrapper = styled.div` + overflow: hidden; +` + +export const Bodybag = styled.div` + position: fixed; + top: 80px; + bottom: 0; + left: 0; + right: 0; + height: 100%; + overflow-x: hidden; + overflow-y: auto; + transition: top 0.2s linear; + -webkit-overflow-scrolling: touch; + + ${({ enableSmoothScroll }) => + enableSmoothScroll && + ` + scroll-behavior: smooth; + will-change: scroll-position; + `} +` + +export const ModalRoot = styled.div` + position: fixed; + z-index: 100000; +` diff --git a/src/components/LearnMore/index.js b/src/components/LearnMore/index.js index 90626fbc9b..541fee1e57 100644 --- a/src/components/LearnMore/index.js +++ b/src/components/LearnMore/index.js @@ -1,11 +1,10 @@ import React from 'react' -import styled, { keyframes } from 'styled-components' import { scroller } from 'react-scroll' -import { media } from '../../styles' - import { logEvent } from '../../utils/ga' +import { Wrapper, Icon, Caption } from './styles' + const scrollToDiagram = () => { logEvent('hero', 'learn-more') scroller.scrollTo('diagram-section', { @@ -27,63 +26,3 @@ export default function LearnMore() { ) } - -const Wrapper = styled.a` - display: flex; - flex-direction: column; - align-items: center; - text-decoration: none; - cursor: pointer; -` - -export const bounce = keyframes` - 0%, 30%, 45%, 65%, 100% { - transform: translateY(0); - } - - 40% { - transform: translateY(-13px); - } - - 60% { - transform: translateY(-5px); - } -` - -export const bounce_mobile = keyframes` - 0%, 30%, 50%, 70%, 100% { - transform: translateY(0); - } - - 40% { - transform: translateY(-13px); - } - - 60% { - transform: translateY(-5px); - } -` - -const Icon = styled.div` - width: 11px; - height: 19px; - will-change: transform; - animation: ${bounce} 3s infinite; - - ${media.phone`animation: ${bounce_mobile} 3s infinite;`}; - ${media.phablet`animation: ${bounce_mobile} 3s infinite;`}; -` - -const Caption = styled.p` - font-family: BrandonGrotesqueMed; - line-height: 23px; - font-size: 16px; - font-weight: 500; - color: #b0b8c5; - display: initial; - ${media.giant`display: initial;`}; - ${media.desktop`display: initial;`}; - ${media.tablet`display: initial;`}; - ${media.phablet`display: none;`}; - ${media.phone`display: none;`}; -` diff --git a/src/components/LearnMore/styles.js b/src/components/LearnMore/styles.js new file mode 100644 index 0000000000..b285633553 --- /dev/null +++ b/src/components/LearnMore/styles.js @@ -0,0 +1,63 @@ +import styled, { keyframes } from 'styled-components' + +import { media } from '../../styles' + +export const Wrapper = styled.a` + display: flex; + flex-direction: column; + align-items: center; + text-decoration: none; + cursor: pointer; +` + +export const bounce = keyframes` + 0%, 30%, 45%, 65%, 100% { + transform: translateY(0); + } + + 40% { + transform: translateY(-13px); + } + + 60% { + transform: translateY(-5px); + } +` + +export const bounce_mobile = keyframes` + 0%, 30%, 50%, 70%, 100% { + transform: translateY(0); + } + + 40% { + transform: translateY(-13px); + } + + 60% { + transform: translateY(-5px); + } +` + +export const Icon = styled.div` + width: 11px; + height: 19px; + will-change: transform; + animation: ${bounce} 3s infinite; + + ${media.phone`animation: ${bounce_mobile} 3s infinite;`}; + ${media.phablet`animation: ${bounce_mobile} 3s infinite;`}; +` + +export const Caption = styled.p` + font-family: BrandonGrotesqueMed; + line-height: 23px; + font-size: 16px; + font-weight: 500; + color: #b0b8c5; + display: initial; + ${media.giant`display: initial;`}; + ${media.desktop`display: initial;`}; + ${media.tablet`display: initial;`}; + ${media.phablet`display: none;`}; + ${media.phone`display: none;`}; +` diff --git a/src/components/Nav/index.js b/src/components/Nav/index.js index 17589040d2..56a70a6665 100644 --- a/src/components/Nav/index.js +++ b/src/components/Nav/index.js @@ -1,12 +1,13 @@ import React from 'react' import PropTypes from 'prop-types' -import styled from 'styled-components' + import NextLink from 'next/link' import Router from 'next/router' -import { media } from '../../styles' import { logEvent } from '../../utils/ga' +import { GetStartedButton, Link, Links, Wrapper } from './styles' + const getStarted = () => { logEvent('menu', 'get-started') @@ -77,67 +78,3 @@ export default function Nav({ mobile = false }) { Nav.propTypes = { mobile: PropTypes.bool } - -const Links = styled.div` - display: flex; - flex-direction: row; -` - -const Link = styled.a` - text-decoration: none; - text-transform: uppercase; - - font-family: BrandonGrotesqueBold, Tahoma, Arial; - font-size: 13px; - color: #838d93; - padding-top: 10px; - padding-bottom: 3px; - border-bottom: 1.5px solid #fff; - margin-left: 30px; - - &:hover { - color: #40364d; - border-bottom: 1.5px solid #40364d; - } -` - -const Wrapper = styled.div` - display: flex; - flex-shrink: 0; - flex-direction: row; - align-items: center; - - ${props => - props.mobile && - ` - display: none; - `} - - ${media.phablet` - ${props => - !props.mobile && - ` - display: none; - `} - `}; -` - -const GetStartedButton = styled.button` - text-decoration: none; - margin-left: 40px; - border-radius: 4px; - background-color: #13adc7; - font-family: BrandonGrotesqueMed, Tahoma, Arial; - color: #fff; - width: 113px; - height: 38px; - font-size: 16px; - border: none; - cursor: pointer; - transition: 0.2s background-color ease-out; - padding: 1px 7px 2px; - - &:hover { - background-color: #13a3bd; - } -` diff --git a/src/components/Nav/styles.js b/src/components/Nav/styles.js new file mode 100644 index 0000000000..9072813fdd --- /dev/null +++ b/src/components/Nav/styles.js @@ -0,0 +1,67 @@ +import styled from 'styled-components' + +import { media } from '../../styles' + +export const Links = styled.div` + display: flex; + flex-direction: row; +` + +export const Link = styled.a` + text-decoration: none; + text-transform: uppercase; + + font-family: BrandonGrotesqueBold, Tahoma, Arial; + font-size: 13px; + color: #838d93; + padding-top: 10px; + padding-bottom: 3px; + border-bottom: 1.5px solid #fff; + margin-left: 30px; + + &:hover { + color: #40364d; + border-bottom: 1.5px solid #40364d; + } +` + +export const Wrapper = styled.div` + display: flex; + flex-shrink: 0; + flex-direction: row; + align-items: center; + + ${props => + props.mobile && + ` + display: none; + `} + + ${media.phablet` + ${props => + !props.mobile && + ` + display: none; + `} + `}; +` + +export const GetStartedButton = styled.button` + text-decoration: none; + margin-left: 40px; + border-radius: 4px; + background-color: #13adc7; + font-family: BrandonGrotesqueMed, Tahoma, Arial; + color: #fff; + width: 113px; + height: 38px; + font-size: 16px; + border: none; + cursor: pointer; + transition: 0.2s background-color ease-out; + padding: 1px 7px 2px; + + &:hover { + background-color: #13a3bd; + } +` diff --git a/src/components/Page/index.js b/src/components/Page/index.js index 2259c07bbf..5142dce090 100644 --- a/src/components/Page/index.js +++ b/src/components/Page/index.js @@ -1,16 +1,9 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' -import { createGlobalStyle } from 'styled-components' -import reset from 'styled-reset' import Layout from '../Layout' -import { global } from '../../styles' - -const GlobalStyle = createGlobalStyle` - ${reset} - ${global} -` +import { GlobalStyle } from '../../styles' export default class Page extends Component { render() { diff --git a/src/components/Popover/index.js b/src/components/Popover/index.js index 26baa20243..de07d50cce 100644 --- a/src/components/Popover/index.js +++ b/src/components/Popover/index.js @@ -1,9 +1,10 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import ReactPopover from 'react-popover' -import { createGlobalStyle } from 'styled-components' -class Popover extends Component { +import { GlobalStyle } from './styles' + +export default class Popover extends Component { constructor() { super() this.state = { @@ -51,21 +52,3 @@ class Popover extends Component { Popover.propTypes = { children: PropTypes.node.isRequired } - -const GlobalStyle = createGlobalStyle` - .Popover { - - .Popover-body { - box-shadow: rgba(0,0,0,0.14) 0px 0px 4px, rgba(0,0,0,0.28) 0px 4px 8px; - padding: 5px 15px; - background: white; - color: black; - } - - .Popover-tip { - display: none; - } - } -` - -export default Popover diff --git a/src/components/Popover/styles.js b/src/components/Popover/styles.js new file mode 100644 index 0000000000..199d4e2c9c --- /dev/null +++ b/src/components/Popover/styles.js @@ -0,0 +1,17 @@ +import { createGlobalStyle } from 'styled-components' + +export const GlobalStyle = createGlobalStyle` + .Popover { + + .Popover-body { + box-shadow: rgba(0,0,0,0.14) 0px 0px 4px, rgba(0,0,0,0.28) 0px 4px 8px; + padding: 5px 15px; + background: white; + color: black; + } + + .Popover-tip { + display: none; + } + } +` diff --git a/src/components/PromoSection/index.js b/src/components/PromoSection/index.js index ace5e37078..f0eb0c9a71 100644 --- a/src/components/PromoSection/index.js +++ b/src/components/PromoSection/index.js @@ -1,13 +1,12 @@ import React from 'react' -import styled from 'styled-components' import Router from 'next/router' -import { media } from '../../styles' - import { logEvent } from '../../utils/ga' import { PAGE_DOC } from '../../consts' +import { Button, Buttons, Container, Glyph, Title, Wrapper } from './styles' + function goToDocGetStarted() { logEvent('promo', 'get-started') @@ -37,124 +36,3 @@ export default function PromoSection() { ) } - -const Wrapper = styled.section` - position: relative; - height: 278px; - background-color: #945dd6; - display: flex; - align-items: center; - justify-content: center; -` - -const Container = styled.div` - width: 100%; - max-width: 1035px; -` - -const Title = styled.h3` - font-family: BrandonGrotesqueMed; - max-width: 438px; - min-height: 44px; - font-size: 30px; - font-weight: 500; - text-align: center; - color: #ffffff; - margin: 0px auto; -` - -const Buttons = styled.div` - display: flex; - max-width: 386px; - margin: 0px auto; - margin-top: 20px; - align-items: center; - flex-direction: row; - ${media.phablet` - flex-direction: column; - `}; -` - -const Button = styled.button` - font-family: BrandonGrotesqueMed; - cursor: pointer; - min-width: 186px; - height: 60px; - border-radius: 4px; - background-color: #945dd6; - border: solid 2px rgba(255, 255, 255, 0.3); - - font-size: 20px; - font-weight: 500; - line-height: 0.9; - - text-align: left; - padding: 0px 21px; - - color: #ffffff; - - background: url('/static/img/arrow_right_white.svg') right center no-repeat; - background-position-x: 147px; - transition: 0.2s background-color ease-out; - - &:hover { - background-color: #885ccb; - } - - ${props => - props.first && - ` - color: #945dd6; - margin-right: 14px; - border-radius: 4px; - background-color: #ffffff; - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.21); - - background-image: url('/static/img/arrow_right_dark.svg'); - transition: 0.2s background-color ease-out; - - &:hover { - background-color: #F5F5F5 - } - - ${media.phablet` - margin-right: 0px; - `} - `}; - - ${media.phablet` - margin-bottom: 12px; - margin-right: 0px !important; - `}; -` - -const Glyph = styled.img` - position: absolute; - z-index: 0; - width: 158px; - height: auto; - - ${media.tablet` - width: 110px; - `}; - - object-fit: contain; - - ${props => - props.gid === 'topleft' && - ` - top: -25px; - left: 40px; - `} - - ${props => - props.gid === 'rigthbottom' && - ` - bottom: -60px; - right: 30px; - `}; - - ${media.phablet` - display: none; - `}; -` diff --git a/src/components/PromoSection/styles.js b/src/components/PromoSection/styles.js new file mode 100644 index 0000000000..8f809c1328 --- /dev/null +++ b/src/components/PromoSection/styles.js @@ -0,0 +1,124 @@ +import styled from 'styled-components' + +import { media } from '../../styles' + +export const Wrapper = styled.section` + position: relative; + height: 278px; + background-color: #945dd6; + display: flex; + align-items: center; + justify-content: center; +` + +export const Container = styled.div` + width: 100%; + max-width: 1035px; +` + +export const Title = styled.h3` + font-family: BrandonGrotesqueMed; + max-width: 438px; + min-height: 44px; + font-size: 30px; + font-weight: 500; + text-align: center; + color: #ffffff; + margin: 0px auto; +` + +export const Buttons = styled.div` + display: flex; + max-width: 386px; + margin: 0px auto; + margin-top: 20px; + align-items: center; + flex-direction: row; + ${media.phablet` + flex-direction: column; + `}; +` + +export const Button = styled.button` + font-family: BrandonGrotesqueMed; + cursor: pointer; + min-width: 186px; + height: 60px; + border-radius: 4px; + background-color: #945dd6; + border: solid 2px rgba(255, 255, 255, 0.3); + + font-size: 20px; + font-weight: 500; + line-height: 0.9; + + text-align: left; + padding: 0px 21px; + + color: #ffffff; + + background: url('/static/img/arrow_right_white.svg') right center no-repeat; + background-position-x: 147px; + transition: 0.2s background-color ease-out; + + &:hover { + background-color: #885ccb; + } + + ${props => + props.first && + ` + color: #945dd6; + margin-right: 14px; + border-radius: 4px; + background-color: #ffffff; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.21); + + background-image: url('/static/img/arrow_right_dark.svg'); + transition: 0.2s background-color ease-out; + + &:hover { + background-color: #F5F5F5 + } + + ${media.phablet` + margin-right: 0px; + `} + `}; + + ${media.phablet` + margin-bottom: 12px; + margin-right: 0px !important; + `}; +` + +export const Glyph = styled.img` + position: absolute; + z-index: 0; + width: 158px; + height: auto; + + ${media.tablet` + width: 110px; + `}; + + object-fit: contain; + + ${props => + props.gid === 'topleft' && + ` + top: -25px; + left: 40px; + `} + + ${props => + props.gid === 'rigthbottom' && + ` + bottom: -60px; + right: 30px; + `}; + + ${media.phablet` + display: none; + `}; +` diff --git a/src/components/SearchForm/index.js b/src/components/SearchForm/index.js index 6c47e5611c..69bcb809e7 100644 --- a/src/components/SearchForm/index.js +++ b/src/components/SearchForm/index.js @@ -1,5 +1,6 @@ import React from 'react' -import styled from 'styled-components' + +import { Input, Wrapper } from './styles' export default function SearchForm(props) { return ( @@ -13,28 +14,3 @@ export default function SearchForm(props) { ) } - -const Wrapper = styled.form` - width: 100%; - height: 100%; - display: flex; -` - -const Input = styled.input` - display: flex; - flex: 1; - height: 100%; - border-radius: 200px; - background-color: #ffffff; - border: solid 1px #dbe4ea; - padding-left: 48px; - padding-right: 24px; - background-image: url('/static/img/search.svg'); - background-repeat: no-repeat; - background-position: 15px center; - font-size: 16px; - font-weight: 500; - width: 240px; - box-sizing: border-box; - display: block; -` diff --git a/src/components/SearchForm/styles.js b/src/components/SearchForm/styles.js new file mode 100644 index 0000000000..6022840c28 --- /dev/null +++ b/src/components/SearchForm/styles.js @@ -0,0 +1,26 @@ +import styled from 'styled-components' + +export const Wrapper = styled.form` + width: 100%; + height: 100%; + display: flex; +` + +export const Input = styled.input` + display: flex; + flex: 1; + height: 100%; + border-radius: 200px; + background-color: #ffffff; + border: solid 1px #dbe4ea; + padding-left: 48px; + padding-right: 24px; + background-image: url('/static/img/search.svg'); + background-repeat: no-repeat; + background-position: 15px center; + font-size: 16px; + font-weight: 500; + width: 240px; + box-sizing: border-box; + display: block; +` diff --git a/src/components/Subscribe/index.js b/src/components/Subscribe/index.js index d4a036480b..a35b315921 100644 --- a/src/components/Subscribe/index.js +++ b/src/components/Subscribe/index.js @@ -1,9 +1,8 @@ import React from 'react' -import styled from 'styled-components' import SubscribeForm from '../SubscribeForm' -import { media } from '../../styles' +import { Container, Glyph, SubscribeContainer, Title, Wrapper } from './styles' export default function Subscribe() { return ( @@ -19,103 +18,3 @@ export default function Subscribe() { ) } - -const Wrapper = styled.section` - position: relative; - height: 300px; - background-color: #13adc7; - - ${media.phablet` - display: flex; - align-items: center; - `}; - - @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { - display: flex; - align-items: center; - } -` - -const Glyph = styled.img` - position: absolute; - z-index: 0; - - width: 158px; - height: auto; - - object-fit: contain; - - ${media.tablet` - width: 110px; - `}; - - ${props => - props.gid === 'topleft' && - ` - top: -32px; - left: 28px; - `} - - ${props => - props.gid === 'rigthbottom' && - ` - bottom: -60px; - right: 28px; - `} - - ${media.phablet` - display: none; - `} -` - -const Container = styled.div` - width: 100%; - margin: 0px auto; - max-width: 1035px; - padding-top: 90px; - - ${media.phablet` - padding: 0px 10px; - `}; - - @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { - padding: 0px 10px; - } -` - -const Title = styled.h3` - font-family: BrandonGrotesqueMed; - min-width: 550px; - min-height: 44px; - font-size: 30px; - font-weight: 500; - color: #ffffff; - margin: 0px auto; - text-align: center; - - ${media.phablet` - min-width: auto; - `}; -` - -const SubscribeContainer = styled.div` - margin: 0px auto; - margin-top: 15px; - max-width: 510px; - border-radius: 8px; - background-color: #ffffff; - - ${media.phablet` - width: 100%; - margin: 0px auto; - margin-top: 40px; - min-height: auto; - `} @media only screen - and (min-device-width : 768px) - and (max-device-width : 1024px) { - width: 100%; - margin: 0px auto; - margin-top: 40px; - min-height: auto; - } -` diff --git a/src/components/Subscribe/styles.js b/src/components/Subscribe/styles.js new file mode 100644 index 0000000000..7787307bdf --- /dev/null +++ b/src/components/Subscribe/styles.js @@ -0,0 +1,103 @@ +import styled from 'styled-components' + +import { media } from '../../styles' + +export const Wrapper = styled.section` + position: relative; + height: 300px; + background-color: #13adc7; + + ${media.phablet` + display: flex; + align-items: center; + `}; + + @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { + display: flex; + align-items: center; + } +` + +export const Glyph = styled.img` + position: absolute; + z-index: 0; + + width: 158px; + height: auto; + + object-fit: contain; + + ${media.tablet` + width: 110px; + `}; + + ${props => + props.gid === 'topleft' && + ` + top: -32px; + left: 28px; + `} + + ${props => + props.gid === 'rigthbottom' && + ` + bottom: -60px; + right: 28px; + `} + + ${media.phablet` + display: none; + `} +` + +export const Container = styled.div` + width: 100%; + margin: 0px auto; + max-width: 1035px; + padding-top: 90px; + + ${media.phablet` + padding: 0px 10px; + `}; + + @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { + padding: 0px 10px; + } +` + +export const Title = styled.h3` + font-family: BrandonGrotesqueMed; + min-width: 550px; + min-height: 44px; + font-size: 30px; + font-weight: 500; + color: #ffffff; + margin: 0px auto; + text-align: center; + + ${media.phablet` + min-width: auto; + `}; +` + +export const SubscribeContainer = styled.div` + margin: 0px auto; + margin-top: 15px; + max-width: 510px; + border-radius: 8px; + background-color: #ffffff; + + ${media.phablet` + width: 100%; + margin: 0px auto; + margin-top: 40px; + min-height: auto; + `} @media only screen + and (min-device-width : 768px) + and (max-device-width : 1024px) { + width: 100%; + margin: 0px auto; + margin-top: 40px; + min-height: auto; + } +` diff --git a/src/components/SubscribeForm/index.js b/src/components/SubscribeForm/index.js index 48e8a22671..cb7d28db3c 100644 --- a/src/components/SubscribeForm/index.js +++ b/src/components/SubscribeForm/index.js @@ -1,7 +1,6 @@ import React from 'react' -import styled from 'styled-components' -import { media } from '../../styles' +import { Button, Form, Input } from './styles' export default function SubscribeForm() { return ( @@ -41,53 +40,3 @@ export default function SubscribeForm() { ) } - -const Form = styled.form` - width: 100%; - height: 100%; - border-radius: 8px; - background-color: #ffffff; - display: flex; - - ${media.phablet` - flex-direction: column; - `}; -` - -const Input = styled.input` - font-family: BrandonGrotesqueMed; - display: flex; - flex: 1; - padding: 16px; - border: none; - border-radius: 8px 0px 0px 8px; - font-size: 20px; - font-weight: 500; - - ${media.phablet` - border-radius: 4px 4px 0px 0px; - `}; -` - -const Button = styled.button` - font-family: BrandonGrotesqueMed; - width: 115px; - border: none; - border-radius: 0px 8px 8px 0px; - background-color: #e4fbff; - font-size: 20px; - font-weight: 500; - color: #13adc7; - cursor: pointer; - - &:hover { - background-color: #daf1f5; - } - - ${media.phablet` - min-height: 60px; - width: 100%; - border-radius: 0px 0px 4px 4px; - justify-content: center; - `}; -` diff --git a/src/components/SubscribeForm/styles.js b/src/components/SubscribeForm/styles.js new file mode 100644 index 0000000000..c03c57a2e6 --- /dev/null +++ b/src/components/SubscribeForm/styles.js @@ -0,0 +1,53 @@ +import styled from 'styled-components' + +import { media } from '../../styles' + +export const Form = styled.form` + width: 100%; + height: 100%; + border-radius: 8px; + background-color: #ffffff; + display: flex; + + ${media.phablet` + flex-direction: column; + `}; +` + +export const Input = styled.input` + font-family: BrandonGrotesqueMed; + display: flex; + flex: 1; + padding: 16px; + border: none; + border-radius: 8px 0px 0px 8px; + font-size: 20px; + font-weight: 500; + + ${media.phablet` + border-radius: 4px 4px 0px 0px; + `}; +` + +export const Button = styled.button` + font-family: BrandonGrotesqueMed; + width: 115px; + border: none; + border-radius: 0px 8px 8px 0px; + background-color: #e4fbff; + font-size: 20px; + font-weight: 500; + color: #13adc7; + cursor: pointer; + + &:hover { + background-color: #daf1f5; + } + + ${media.phablet` + min-height: 60px; + width: 100%; + border-radius: 0px 0px 4px 4px; + justify-content: center; + `}; +` diff --git a/src/components/Support/index.js b/src/components/Support/index.js index 9224e32013..73b5c48e08 100644 --- a/src/components/Support/index.js +++ b/src/components/Support/index.js @@ -1,13 +1,27 @@ import React from 'react' -import styled from 'styled-components' -import color from 'color' import Page from '../Page' import Hero from '../Hero' import TrySection from '../TrySection' import Popover from '../Popover' -import { Mark, OnlyDesktop, container, media } from '../../styles' +import { Mark, OnlyDesktop } from '../../styles' + +import { + Button, + Container, + Description, + DiscrodWidget, + Feature, + Features, + FeatureHeading, + FlexRow, + Heading, + Icon, + Link, + Name, + SupportHero +} from './styles' export default function SupportPage() { return ( @@ -113,136 +127,3 @@ export default function SupportPage() { ) } - -const SupportHero = styled.div` - padding-top: 90px; - padding-bottom: 80px; - overflow: hidden; -` - -const Heading = styled.h1` - font-family: BrandonGrotesqueMed; - margin: 0px auto; - max-width: 610px; - font-size: 40px; - font-weight: 500; - line-height: 1.4; - text-align: center; - color: #40364d; -` - -const Container = styled.div` - ${container}; -` - -const Features = styled.div` - display: flex; - flex-flow: row; - flex-wrap: wrap; - padding-top: 80px; - padding-bottom: 70px; - max-width: 800px; - margin: 0 auto; - - ${media.phablet` - padding-top: 70px; - padding-bottom: 50px; - `}; -` - -const Feature = styled.div` - flex: 1 0 300px; - margin: 0 20px 60px; - padding: 10px; -` - -const FeatureHeading = styled.div` - display: flex; - align-items: center; - margin-bottom: 10px; -` - -const Icon = styled.div` - height: 50px; - width: 50px; - border-radius: 50%; - background-color: ${props => - color(props.color) - .alpha(0.15) - .string()}; - margin-right: 10px; - - &::after { - content: ' '; - display: block; - width: 50px; - height: 50px; - opacity: 1; - mask-image: url(${props => props.url}); - mask-repeat: no-repeat; - mask-position: center; - background-color: ${props => props.color}; - transform: translate(-10px, 0); - } -` - -const Name = styled.h3` - font-family: BrandonGrotesqueMed; - margin-top: 10px; - margin-bottom: 10px; - font-size: 22px; - font-weight: 500; - color: #40364d; - min-height: 28px; -` - -const Description = styled.div` - font-size: 20px; - color: #5f6c72; -` - -const FlexRow = styled.div` - display: flex; - align-items: center; -` - -const Link = styled.a` - text-decoration: none; -` - -const Button = styled.button` - text-decoration: none; - margin-top: 20px; - border-radius: 4px; - background-color: white; - border: 2px solid ${props => props.color}; - color: ${props => props.color}; - font-family: BrandonGrotesqueMed, Tahoma, Arial; - height: 42px; - font-size: 18px; - cursor: pointer; - transition: 0.2s background-color ease-out; - padding: 5px 20px; - - &:hover { - background-color: ${props => props.color}; - color: white; - } -` - -const DiscrodWidget = styled.img` - display: block; - margin-top: 20px; - margin-left: 20px; - width: 50px; - height: 50px; - cursor: pointer; - mask-image: url('/static/img/support/discord.svg'); - mask-repeat: no-repeat; - mask-position: center; - background-color: #b88eeb; - - &:hover { - opacity: 0.7; - } -` diff --git a/src/components/Support/styles.js b/src/components/Support/styles.js new file mode 100644 index 0000000000..62e275ec38 --- /dev/null +++ b/src/components/Support/styles.js @@ -0,0 +1,137 @@ +import styled from 'styled-components' +import color from 'color' + +import { container, media } from '../../styles' + +export const SupportHero = styled.div` + padding-top: 90px; + padding-bottom: 80px; + overflow: hidden; +` + +export const Heading = styled.h1` + font-family: BrandonGrotesqueMed; + margin: 0px auto; + max-width: 610px; + font-size: 40px; + font-weight: 500; + line-height: 1.4; + text-align: center; + color: #40364d; +` + +export const Container = styled.div` + ${container}; +` + +export const Features = styled.div` + display: flex; + flex-flow: row; + flex-wrap: wrap; + padding-top: 80px; + padding-bottom: 70px; + max-width: 800px; + margin: 0 auto; + + ${media.phablet` + padding-top: 70px; + padding-bottom: 50px; + `}; +` + +export const Feature = styled.div` + flex: 1 0 300px; + margin: 0 20px 60px; + padding: 10px; +` + +export const FeatureHeading = styled.div` + display: flex; + align-items: center; + margin-bottom: 10px; +` + +export const Icon = styled.div` + height: 50px; + width: 50px; + border-radius: 50%; + background-color: ${props => + color(props.color) + .alpha(0.15) + .string()}; + margin-right: 10px; + + &::after { + content: ' '; + display: block; + width: 50px; + height: 50px; + opacity: 1; + mask-image: url(${props => props.url}); + mask-repeat: no-repeat; + mask-position: center; + background-color: ${props => props.color}; + transform: translate(-10px, 0); + } +` + +export const Name = styled.h3` + font-family: BrandonGrotesqueMed; + margin-top: 10px; + margin-bottom: 10px; + font-size: 22px; + font-weight: 500; + color: #40364d; + min-height: 28px; +` + +export const Description = styled.div` + font-size: 20px; + color: #5f6c72; +` + +export const FlexRow = styled.div` + display: flex; + align-items: center; +` + +export const Link = styled.a` + text-decoration: none; +` + +export const Button = styled.button` + text-decoration: none; + margin-top: 20px; + border-radius: 4px; + background-color: white; + border: 2px solid ${props => props.color}; + color: ${props => props.color}; + font-family: BrandonGrotesqueMed, Tahoma, Arial; + height: 42px; + font-size: 18px; + cursor: pointer; + transition: 0.2s background-color ease-out; + padding: 5px 20px; + + &:hover { + background-color: ${props => props.color}; + color: white; + } +` + +export const DiscrodWidget = styled.img` + display: block; + margin-top: 20px; + margin-left: 20px; + width: 50px; + height: 50px; + cursor: pointer; + mask-image: url('/static/img/support/discord.svg'); + mask-repeat: no-repeat; + mask-position: center; + background-color: #b88eeb; + + &:hover { + opacity: 0.7; + } +` diff --git a/src/components/TextCollapse/index.js b/src/components/TextCollapse/index.js index fe908b7752..348ad0405d 100644 --- a/src/components/TextCollapse/index.js +++ b/src/components/TextCollapse/index.js @@ -1,10 +1,11 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' -import styled from 'styled-components' import Collapse from 'react-collapse' import { presets } from 'react-motion' -class TextCollapse extends Component { +import { MoreText, Wrapper } from './styles' + +export default class TextCollapse extends Component { state = { isOpened: false } @@ -35,18 +36,3 @@ TextCollapse.propTypes = { children: PropTypes.node.isRequired, header: PropTypes.node.isRequired } - -export default TextCollapse - -const Wrapper = styled.button` - text-align: left; - border: none; - appearance: none; - background: none; - font-family: BrandonGrotesque, Tahoma, Arial; -` - -const MoreText = styled.div` - color: #13adc7; - font-size: 16px; -` diff --git a/src/components/TextCollapse/styles.js b/src/components/TextCollapse/styles.js new file mode 100644 index 0000000000..671fea5a3a --- /dev/null +++ b/src/components/TextCollapse/styles.js @@ -0,0 +1,14 @@ +import styled from 'styled-components' + +export const Wrapper = styled.button` + text-align: left; + border: none; + appearance: none; + background: none; + font-family: BrandonGrotesque, Tahoma, Arial; +` + +export const MoreText = styled.div` + color: #13adc7; + font-size: 16px; +` diff --git a/src/components/TextRotate/index.js b/src/components/TextRotate/index.js index 72075956a2..a4c4f1a50b 100644 --- a/src/components/TextRotate/index.js +++ b/src/components/TextRotate/index.js @@ -1,6 +1,7 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' -import styled from 'styled-components' + +import { Cursor, Wrapper } from './styles' export default class TextRotate extends Component { static defaultProps = { @@ -129,8 +130,3 @@ TextRotate.propTypes = { words: PropTypes.arrayOf(PropTypes.string).isRequired, wordDelay: PropTypes.number.isRequired } - -const Wrapper = styled.span`` -const Cursor = styled.span` - vertical-align: 4px; -` diff --git a/src/components/TextRotate/styles.js b/src/components/TextRotate/styles.js new file mode 100644 index 0000000000..a2f9d74350 --- /dev/null +++ b/src/components/TextRotate/styles.js @@ -0,0 +1,7 @@ +import styled from 'styled-components' + +export const Wrapper = styled.span`` + +export const Cursor = styled.span` + vertical-align: 4px; +` diff --git a/src/components/Tooltip/desktop-view.js b/src/components/Tooltip/DesktopView/index.js similarity index 78% rename from src/components/Tooltip/desktop-view.js rename to src/components/Tooltip/DesktopView/index.js index e2bd40e3f9..8866268cc1 100644 --- a/src/components/Tooltip/desktop-view.js +++ b/src/components/Tooltip/DesktopView/index.js @@ -1,11 +1,12 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import ReactMarkdown from 'react-markdown' -import styled from 'styled-components' -import { HEADER } from '../../consts' +import { HEADER } from '../../../consts' -class DesktopView extends Component { +import { HighlightedText, TooltipContainer, TooltipText } from './styles' + +export default class DesktopView extends Component { state = { hover: false, margin: -70, @@ -161,68 +162,9 @@ class DesktopView extends Component { } } -const HighlightedText = styled.span` - border-bottom: 1px black dotted; -` - -const TooltipContainer = styled.div` - position: absolute; - display: inline-block; - z-index: 300000000; - background-color: white; -` - -const TooltipText = styled.div` - color: black; - padding: 8px 10px; - border: 1px solid #d1d5da; - border-radius: 3px; - background-color: white; - position: absolute; - z-index: 1; - top: ${props => { - if (props.top === 'unset') { - return 'unset' - } else { - return `${props.top}px` - } - }}; - margin-left: ${props => props.margin || -70}px; - width: ${props => props.width || 400}px; - - &:after, - &:before { - content: ''; - position: absolute; - top: ${props => props.pointTop}%; - border-style: solid; - margin-left: ${props => props.pointMargin || -15}px; - } - - &:after { - top: ${props => props.pointTopAfter}px; - left: 10%; - border-width: 10px; - border-color: ${props => props.pointBorderAfter}; - } - &:before { - top: ${props => props.pointTopBefore}px; - left: 10%; - border-width: 11px; - border-color: ${props => props.pointBorderBefore}; - } - - .header { - font-size: 1.3em; - font-weight: bold; - } -` - DesktopView.propTypes = { description: PropTypes.string.isRequired, header: PropTypes.string.isRequired, id: PropTypes.string.isRequired, text: PropTypes.node.isRequired } - -export default DesktopView diff --git a/src/components/Tooltip/DesktopView/styles.js b/src/components/Tooltip/DesktopView/styles.js new file mode 100644 index 0000000000..1de03c0c8e --- /dev/null +++ b/src/components/Tooltip/DesktopView/styles.js @@ -0,0 +1,58 @@ +import styled from 'styled-components' + +export const HighlightedText = styled.span` + border-bottom: 1px black dotted; +` + +export const TooltipContainer = styled.div` + position: absolute; + display: inline-block; + z-index: 300000000; + background-color: white; +` + +export const TooltipText = styled.div` + color: black; + padding: 8px 10px; + border: 1px solid #d1d5da; + border-radius: 3px; + background-color: white; + position: absolute; + z-index: 1; + top: ${props => { + if (props.top === 'unset') { + return 'unset' + } else { + return `${props.top}px` + } + }}; + margin-left: ${props => props.margin || -70}px; + width: ${props => props.width || 400}px; + + &:after, + &:before { + content: ''; + position: absolute; + top: ${props => props.pointTop}%; + border-style: solid; + margin-left: ${props => props.pointMargin || -15}px; + } + + &:after { + top: ${props => props.pointTopAfter}px; + left: 10%; + border-width: 10px; + border-color: ${props => props.pointBorderAfter}; + } + &:before { + top: ${props => props.pointTopBefore}px; + left: 10%; + border-width: 11px; + border-color: ${props => props.pointBorderBefore}; + } + + .header { + font-size: 1.3em; + font-weight: bold; + } +` diff --git a/src/components/Tooltip/mobile-view.js b/src/components/Tooltip/MobileView/index.js similarity index 56% rename from src/components/Tooltip/mobile-view.js rename to src/components/Tooltip/MobileView/index.js index 2696d46537..37f106b407 100644 --- a/src/components/Tooltip/mobile-view.js +++ b/src/components/Tooltip/MobileView/index.js @@ -1,11 +1,19 @@ import React, { Component } from 'react' import ReactMarkdown from 'react-markdown' import PropTypes from 'prop-types' -import styled from 'styled-components' -import Modal from '../Modal' +import Modal from '../../Modal' -class MobileView extends Component { +import { + CloseContainer, + Header, + HighlightedText, + Line, + ModalBackground, + ModalContent +} from './styles' + +export default class MobileView extends Component { state = { visible: false } @@ -57,58 +65,3 @@ MobileView.propTypes = { header: PropTypes.string.isRequired, text: PropTypes.node.isRequired } - -const HighlightedText = styled.span` - border-bottom: 1px black dotted; -` - -const ModalBackground = styled.div` - height: 100vh; - width: 100%; - display: flex; - align-items: center; - justify-content: center; - background-color: rgba(0, 0, 0, 0.4); -` - -const CloseContainer = styled.div` - float: right; - margin: 2px 10px 0 0; -` -const Line = styled.div` - position: absolute; - height: 23px; - width: 2px; - background-color: black; - - ${props => - props.first && - ` - transform: rotate(-45deg); - `} - - ${props => - props.second && - ` - transform: rotate(45deg); - `} -` - -const ModalContent = styled.div` - width: 80%; - background-color: #ffffff; - padding: 8px 10px; - border: 1px solid #d1d5da; - border-radius: 3px; - - .portal-font { - font-family: BrandonGrotesque; - } -` - -const Header = styled.div` - font-size: 1.3em; - font-weight: bold; -` - -export default MobileView diff --git a/src/components/Tooltip/MobileView/styles.js b/src/components/Tooltip/MobileView/styles.js new file mode 100644 index 0000000000..72b342d310 --- /dev/null +++ b/src/components/Tooltip/MobileView/styles.js @@ -0,0 +1,54 @@ +import styled from 'styled-components' + +export const HighlightedText = styled.span` + border-bottom: 1px black dotted; +` + +export const ModalBackground = styled.div` + height: 100vh; + width: 100%; + display: flex; + align-items: center; + justify-content: center; + background-color: rgba(0, 0, 0, 0.4); +` + +export const CloseContainer = styled.div` + float: right; + margin: 2px 10px 0 0; +` +export const Line = styled.div` + position: absolute; + height: 23px; + width: 2px; + background-color: black; + + ${props => + props.first && + ` + transform: rotate(-45deg); + `} + + ${props => + props.second && + ` + transform: rotate(45deg); + `} +` + +export const ModalContent = styled.div` + width: 80%; + background-color: #ffffff; + padding: 8px 10px; + border: 1px solid #d1d5da; + border-radius: 3px; + + .portal-font { + font-family: BrandonGrotesque; + } +` + +export const Header = styled.div` + font-size: 1.3em; + font-weight: bold; +` diff --git a/src/components/Tooltip/index.js b/src/components/Tooltip/index.js index 7b755a205d..a8398fb3fb 100644 --- a/src/components/Tooltip/index.js +++ b/src/components/Tooltip/index.js @@ -2,8 +2,8 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import includes from 'lodash.includes' -import DesktopView from './desktop-view' -import MobileView from './mobile-view' +import DesktopView from './DesktopView' +import MobileView from './MobileView' import glossary from '../../../public/static/docs/glossary' diff --git a/src/components/TopMenu/index.js b/src/components/TopMenu/index.js index b53cf6c5e6..b27697d27b 100644 --- a/src/components/TopMenu/index.js +++ b/src/components/TopMenu/index.js @@ -2,17 +2,14 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import NextLink from 'next/link' import throttle from 'lodash.throttle' -import styled from 'styled-components' import Nav from '../Nav' -import { media } from '../../styles' - import { HEADER } from '../../consts' -const MIN_HEIGHT = 78 +import { Container, Logo, Wrapper } from './styles' -class TopMenu extends Component { +export default class TopMenu extends Component { constructor() { super() this.state = { @@ -76,57 +73,3 @@ class TopMenu extends Component { TopMenu.propTypes = { isDocPage: PropTypes.bool } - -export default TopMenu - -const Wrapper = styled.div` - position: fixed; - z-index: 10; - top: 0px; - left: 0px; - right: 0px; - - background-color: #ffffff; - box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15); - overflow-y: scroll; -` - -const Container = styled.section` - margin: 0 auto; - padding: 0px 15px; - max-width: ${props => (props.wide ? '1200px' : '1005px')}; - min-height: ${MIN_HEIGHT}px; - width: auto; - - ${props => ` - height: ${MIN_HEIGHT + (props.scrolled ? 0 : 20)}px; - `}; - - z-index: 3; - position: relative; - color: #ffffff; - display: flex; - flex-shrink: 0; - justify-content: space-between; - align-items: center; - transition: height 0.2s linear; - will-change: height; - - ${media.phablet` - flex-direction: column; - justify-content: center; - align-items: start; - height: auto; - `}; -` - -const Logo = styled.a` - display: block; - padding-top: 10px; - z-index: 999; - - ${media.phablet` - padding-top: 10px; - padding-bottom: 0px; - `}; -` diff --git a/src/components/TopMenu/styles.js b/src/components/TopMenu/styles.js new file mode 100644 index 0000000000..c7c9fd862d --- /dev/null +++ b/src/components/TopMenu/styles.js @@ -0,0 +1,57 @@ +import styled from 'styled-components' + +import { media } from '../../styles' + +const MIN_HEIGHT = 78 + +export const Wrapper = styled.div` + position: fixed; + z-index: 10; + top: 0px; + left: 0px; + right: 0px; + + background-color: #ffffff; + box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15); + overflow-y: scroll; +` + +export const Container = styled.section` + margin: 0 auto; + padding: 0px 15px; + max-width: ${props => (props.wide ? '1200px' : '1005px')}; + min-height: ${MIN_HEIGHT}px; + width: auto; + + ${props => ` + height: ${MIN_HEIGHT + (props.scrolled ? 0 : 20)}px; + `}; + + z-index: 3; + position: relative; + color: #ffffff; + display: flex; + flex-shrink: 0; + justify-content: space-between; + align-items: center; + transition: height 0.2s linear; + will-change: height; + + ${media.phablet` + flex-direction: column; + justify-content: center; + align-items: start; + height: auto; + `}; +` + +export const Logo = styled.a` + display: block; + padding-top: 10px; + z-index: 999; + + ${media.phablet` + padding-top: 10px; + padding-bottom: 0px; + `}; +` diff --git a/src/components/TrySection/index.js b/src/components/TrySection/index.js index 0f4eb1b65b..1329630a51 100644 --- a/src/components/TrySection/index.js +++ b/src/components/TrySection/index.js @@ -1,9 +1,8 @@ import React from 'react' import PropTypes from 'prop-types' -import styled from 'styled-components' import NextLink from 'next/link' -import { container, media } from '../../styles' +import { Button, Buttons, Container, Glyph, Title, Wrapper } from './styles' export default function TrySection({ title, buttonText = 'Get Started' }) { return ( @@ -26,104 +25,3 @@ TrySection.propTypes = { title: PropTypes.string.isRequired, buttonText: PropTypes.string } - -const Wrapper = styled.section` - position: relative; - height: 278px; - background-color: #945dd6; - display: flex; - align-items: center; - justify-content: center; -` - -const Container = styled.div` - ${container}; - width: 100%; -` - -const Glyph = styled.img` - position: absolute; - z-index: 0; - - width: 158px; - height: 192px; - - object-fit: contain; - - ${props => - props.gid === 'topleft' && - ` - top: -25px; - left: 40px; - `} - - ${props => - props.gid === 'rigthbottom' && - ` - bottom: -60px; - right: 30px; - `}; - - ${media.phablet` - display: none; - `}; -` - -const Title = styled.h3` - font-family: BrandonGrotesqueMed; - max-width: 600px; - min-height: 44px; - font-size: 30px; - font-weight: 500; - text-align: center; - color: #ffffff; - margin: 0px auto; -` - -const Buttons = styled.div` - max-width: 386px; - margin: 0px auto; - margin-top: 20px; - align-items: center; - display: flex; - justify-content: center; -` - -const Button = styled.button` - font-family: BrandonGrotesqueMed; - cursor: pointer; - min-width: 186px; - height: 60px; - border-radius: 4px; - background-color: #945dd6; - border: solid 2px rgba(255, 255, 255, 0.3); - - font-size: 20px; - - line-height: 0.9; - - text-align: left; - padding: 0px 50px 0 20px; - - color: #ffffff; - - background: url('/static/img/arrow_right_white.svg') right center no-repeat; - background-position-x: calc(100% - 15px); - transition: 0.2s background-color ease-out; - - &:hover { - background-color: #f5f5f5; - } - - ${props => - props.first && - ` - color: #945dd6; - margin-right: 14px; - border-radius: 4px; - background-color: #ffffff; - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.21); - - background-image: url('/static/img/arrow_right_dark.svg'); - `}; -` diff --git a/src/components/TrySection/styles.js b/src/components/TrySection/styles.js new file mode 100644 index 0000000000..6c4f28eed0 --- /dev/null +++ b/src/components/TrySection/styles.js @@ -0,0 +1,104 @@ +import styled from 'styled-components' + +import { container, media } from '../../styles' + +export const Wrapper = styled.section` + position: relative; + height: 278px; + background-color: #945dd6; + display: flex; + align-items: center; + justify-content: center; +` + +export const Container = styled.div` + ${container}; + width: 100%; +` + +export const Glyph = styled.img` + position: absolute; + z-index: 0; + + width: 158px; + height: 192px; + + object-fit: contain; + + ${props => + props.gid === 'topleft' && + ` + top: -25px; + left: 40px; + `} + + ${props => + props.gid === 'rigthbottom' && + ` + bottom: -60px; + right: 30px; + `}; + + ${media.phablet` + display: none; + `}; +` + +export const Title = styled.h3` + font-family: BrandonGrotesqueMed; + max-width: 600px; + min-height: 44px; + font-size: 30px; + font-weight: 500; + text-align: center; + color: #ffffff; + margin: 0px auto; +` + +export const Buttons = styled.div` + max-width: 386px; + margin: 0px auto; + margin-top: 20px; + align-items: center; + display: flex; + justify-content: center; +` + +export const Button = styled.button` + font-family: BrandonGrotesqueMed; + cursor: pointer; + min-width: 186px; + height: 60px; + border-radius: 4px; + background-color: #945dd6; + border: solid 2px rgba(255, 255, 255, 0.3); + + font-size: 20px; + + line-height: 0.9; + + text-align: left; + padding: 0px 50px 0 20px; + + color: #ffffff; + + background: url('/static/img/arrow_right_white.svg') right center no-repeat; + background-position-x: calc(100% - 15px); + transition: 0.2s background-color ease-out; + + &:hover { + background-color: #f5f5f5; + } + + ${props => + props.first && + ` + color: #945dd6; + margin-right: 14px; + border-radius: 4px; + background-color: #ffffff; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.21); + + background-image: url('/static/img/arrow_right_dark.svg'); + `}; +` diff --git a/src/components/UseCases/index.js b/src/components/UseCases/index.js index 1a4be75fe6..e714f76365 100644 --- a/src/components/UseCases/index.js +++ b/src/components/UseCases/index.js @@ -1,11 +1,25 @@ import React from 'react' -import styled from 'styled-components' import { Element } from 'react-scroll' import { default as YoutubeVideo } from '../Video' import TextCollapse from '../TextCollapse' -import { OnlyDesktop, OnlyMobile, container, media } from '../../styles' +import { OnlyDesktop, OnlyMobile } from '../../styles' + +import { + Case, + Cases, + Container, + Description, + FlexWrap, + Heading, + Icon, + Right, + Title, + Top, + Video, + Wrapper +} from './styles' const Heading1 = () => ( @@ -114,101 +128,3 @@ export default function UseCases() { ) } - -const Wrapper = styled.section` - padding-top: 80px; - padding-bottom: 57px; -` - -const Container = styled.div` - ${container}; -` - -const FlexWrap = styled.div` - display: flex; - justify-content: space-between; - - ${media.tablet` - flex-direction: column; - `}; - - ${media.phablet` - flex-direction: column-reverse; - `}; -` - -const Video = styled.div` - display: flex; - flex: 1 2 60%; - flex-direction: column; - width: 100%; - align-self: center; - margin-right: 10%; - - ${media.tablet` - margin-bottom: 20px; - margin-right: 0; - flex: auto; - `}; - - ${media.phablet` - margin: 0; - `}; -` - -const Right = styled.div` - flex: 1 1 40%; - - ${media.tablet` - flex: auto; - `}; - - ${media.phablet` - flex: auto; - `}; -` - -const Heading = styled.div` - font-family: BrandonGrotesqueMed; - min-height: 50px; - font-size: 30px; - font-weight: 500; - text-align: center; - color: #40364d; - - ${media.tablet` - text-align: left; - `}; -` - -const Cases = styled.div` - margin-top: 15px; -` - -const Case = styled.div` - margin-bottom: 18px; -` - -const Top = styled.div` - height: 32px; - display: flex; - flex-direction: row; - align-items: center; -` - -const Icon = styled.div` - margin-right: 8px; -` - -const Title = styled.h3` - font-family: BrandonGrotesqueMed; - font-size: 16px; - font-weight: 500; - color: #40364d; -` - -const Description = styled.div` - padding-top: 15px; - font-size: 16px; - color: #5f6c72; -` diff --git a/src/components/UseCases/styles.js b/src/components/UseCases/styles.js new file mode 100644 index 0000000000..6ce9be19c6 --- /dev/null +++ b/src/components/UseCases/styles.js @@ -0,0 +1,101 @@ +import styled from 'styled-components' + +import { container, media } from '../../styles' + +export const Wrapper = styled.section` + padding-top: 80px; + padding-bottom: 57px; +` + +export const Container = styled.div` + ${container}; +` + +export const FlexWrap = styled.div` + display: flex; + justify-content: space-between; + + ${media.tablet` + flex-direction: column; + `}; + + ${media.phablet` + flex-direction: column-reverse; + `}; +` + +export const Video = styled.div` + display: flex; + flex: 1 2 60%; + flex-direction: column; + width: 100%; + align-self: center; + margin-right: 10%; + + ${media.tablet` + margin-bottom: 20px; + margin-right: 0; + flex: auto; + `}; + + ${media.phablet` + margin: 0; + `}; +` + +export const Right = styled.div` + flex: 1 1 40%; + + ${media.tablet` + flex: auto; + `}; + + ${media.phablet` + flex: auto; + `}; +` + +export const Heading = styled.div` + font-family: BrandonGrotesqueMed; + min-height: 50px; + font-size: 30px; + font-weight: 500; + text-align: center; + color: #40364d; + + ${media.tablet` + text-align: left; + `}; +` + +export const Cases = styled.div` + margin-top: 15px; +` + +export const Case = styled.div` + margin-bottom: 18px; +` + +export const Top = styled.div` + height: 32px; + display: flex; + flex-direction: row; + align-items: center; +` + +export const Icon = styled.div` + margin-right: 8px; +` + +export const Title = styled.h3` + font-family: BrandonGrotesqueMed; + font-size: 16px; + font-weight: 500; + color: #40364d; +` + +export const Description = styled.div` + padding-top: 15px; + font-size: 16px; + color: #5f6c72; +` diff --git a/src/components/Video/index.js b/src/components/Video/index.js index fc394c89f7..203a2e8088 100644 --- a/src/components/Video/index.js +++ b/src/components/Video/index.js @@ -1,9 +1,20 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' -import styled from 'styled-components' import { logEvent } from '../../utils/ga' +import { + Button, + ButtonIcon, + ButtonInner, + Action, + Description, + Overflow, + Box, + Wrapper, + Handler +} from './styles' + const WatchButton = ({ onClick, disabled }) => ( - - - - + )} ) diff --git a/src/components/Documentation/SidebarMenu/index.js b/src/components/Documentation/SidebarMenu/index.js index 79800da14d..fb62b40a94 100644 --- a/src/components/Documentation/SidebarMenu/index.js +++ b/src/components/Documentation/SidebarMenu/index.js @@ -2,12 +2,11 @@ import React, { useEffect, useRef, useState } from 'react' import PerfectScrollbar from 'perfect-scrollbar' import scrollIntoView from 'dom-scroll-into-view' import PropTypes from 'prop-types' -import NextLink from 'next/link' import includes from 'lodash.includes' import DownloadButton from '../../DownloadButton' +import LocalLink from '../../LocalLink' -import { PAGE_DOC } from '../../../consts' import { getParentsListFromPath } from '../../../utils/sidebar' import { OnlyDesktop } from '../../../styles' @@ -52,16 +51,16 @@ function SidebarMenuItem({ children, label, path, activePaths, onClick }) { return ( <> - - - {label} - - + + {label} + {children && ( + diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js index 3bd1448a87..c0853afd9e 100644 --- a/src/components/Footer/index.js +++ b/src/components/Footer/index.js @@ -1,6 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' -import NextLink from 'next/link' + +import LocalLink from '../LocalLink' import { Column, @@ -32,44 +33,42 @@ export default function Footer(props) { - - - site logo - - + + site logo + Product - - Overview - - - Features - + + Overview + + + Features + Help - - Support - - - Get started - + + Support + + + Get started + Chat - - Documentation - + + Documentation + diff --git a/src/components/HamburgerMenu/index.js b/src/components/HamburgerMenu/index.js index 36409d321a..d2f81b9cda 100644 --- a/src/components/HamburgerMenu/index.js +++ b/src/components/HamburgerMenu/index.js @@ -1,8 +1,8 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' -import NextLink from 'next/link' import Hamburger from '../Hamburger' +import LocalLink from '../LocalLink' import { logEvent } from '../../utils/ga' @@ -76,40 +76,48 @@ export default class HamburgerMenu extends Component {
- - - dvc.org - - + + dvc.org + Product - - Overview - - - Features - + + Overview + + + Features + Help - - Support - - - - Get started - - + + Support + + + Get started + Chat - - Documentation - + + Documentation + diff --git a/src/components/Layout/index.js b/src/components/Layout/index.js index d824f04bbe..d9d5e0b0ae 100644 --- a/src/components/Layout/index.js +++ b/src/components/Layout/index.js @@ -10,9 +10,8 @@ import { initGA, logPageView } from '../../utils/ga' import { Wrapper, Bodybag, ModalRoot } from './styles' -export default function Layout({ children, enableSmoothScroll }) { +export default function Layout({ children, enableSmoothScroll, isDocPage }) { const router = useRouter() - const isDocPage = router.pathname === '/doc' useEffect(() => { if (!window.GA_INITIALIZED) { @@ -41,5 +40,6 @@ export default function Layout({ children, enableSmoothScroll }) { Layout.propTypes = { children: PropTypes.node.isRequired, - enableSmoothScroll: PropTypes.bool + enableSmoothScroll: PropTypes.bool, + isDocPage: PropTypes.bool } diff --git a/src/components/LocalLink/index.js b/src/components/LocalLink/index.js new file mode 100644 index 0000000000..b3badcae7e --- /dev/null +++ b/src/components/LocalLink/index.js @@ -0,0 +1,33 @@ +import React from 'react' +import PropTypes from 'prop-types' + +import NextLink from 'next/link' + +import { PAGE_DOC } from '../../consts' + +export default function LocalLink({ + children, + as: Component, + href, + ...restProps +}) { + const nextProps = href.match(/^\/doc/) + ? { href: PAGE_DOC, as: href } + : { href } + + return ( + + {Component ? ( + {children} + ) : ( + {children} + )} + + ) +} + +LocalLink.propTypes = { + children: PropTypes.node, + as: PropTypes.object, + href: PropTypes.string +} diff --git a/src/components/Nav/index.js b/src/components/Nav/index.js index 56a70a6665..951584e894 100644 --- a/src/components/Nav/index.js +++ b/src/components/Nav/index.js @@ -1,76 +1,60 @@ import React from 'react' import PropTypes from 'prop-types' -import NextLink from 'next/link' -import Router from 'next/router' +import LocalLink from '../LocalLink' import { logEvent } from '../../utils/ga' import { GetStartedButton, Link, Links, Wrapper } from './styles' -const getStarted = () => { - logEvent('menu', 'get-started') - - Router.push('/doc/get-started') -} - export default function Nav({ mobile = false }) { return ( - - { - logEvent('menu', 'features') - }} - > - Features - - - - { - logEvent('menu', 'doc') - }} - > - Doc - - + logEvent('menu', 'features')} + > + Features + + logEvent('menu', 'doc')} + > + Doc + { - logEvent('menu', 'blog') - }} + onClick={() => logEvent('menu', 'blog')} > Blog - { - logEvent('menu', 'chat') - }} - > + logEvent('menu', 'chat')}> Chat { - logEvent('menu', 'github') - }} + onClick={() => logEvent('menu', 'github')} > GitHub - - { - logEvent('menu', 'support') - }} - > - Support - - + logEvent('menu', 'support')} + > + Support + - Get Started + logEvent('menu', 'get-started')} + > + Get Started + ) } diff --git a/src/components/Nav/styles.js b/src/components/Nav/styles.js index 9072813fdd..e8d4090705 100644 --- a/src/components/Nav/styles.js +++ b/src/components/Nav/styles.js @@ -46,20 +46,25 @@ export const Wrapper = styled.div` `}; ` -export const GetStartedButton = styled.button` - text-decoration: none; +export const GetStartedButton = styled.a` + box-sizing: border-box; + + width: 113px; + height: 38px; margin-left: 40px; + padding: 1px 7px 2px; border-radius: 4px; - background-color: #13adc7; + border: none; + font-family: BrandonGrotesqueMed, Tahoma, Arial; - color: #fff; - width: 113px; - height: 38px; font-size: 16px; - border: none; - cursor: pointer; + line-height: 35px; + text-decoration: none; + text-align: center; + color: #fff; + + background-color: #13adc7; transition: 0.2s background-color ease-out; - padding: 1px 7px 2px; &:hover { background-color: #13a3bd; diff --git a/src/components/PromoSection/index.js b/src/components/PromoSection/index.js index f0eb0c9a71..76e21f6767 100644 --- a/src/components/PromoSection/index.js +++ b/src/components/PromoSection/index.js @@ -1,23 +1,12 @@ import React from 'react' -import Router from 'next/router' +import LocalLink from '../LocalLink' import { logEvent } from '../../utils/ga' -import { PAGE_DOC } from '../../consts' - import { Button, Buttons, Container, Glyph, Title, Wrapper } from './styles' -function goToDocGetStarted() { - logEvent('promo', 'get-started') - - Router.push({ pathname: '/doc/get-started', asPath: PAGE_DOC }) -} - -function goToFeatures() { - logEvent('promo', 'features') - - Router.push('/features') -} +const goToDocGetStarted = () => logEvent('promo', 'get-started') +const goToFeatures = () => logEvent('promo', 'features') export default function PromoSection() { return ( @@ -26,10 +15,17 @@ export default function PromoSection() { For data scientists, by data scientists - - + + + Full Features + diff --git a/src/components/PromoSection/styles.js b/src/components/PromoSection/styles.js index 8f809c1328..2908bd06fb 100644 --- a/src/components/PromoSection/styles.js +++ b/src/components/PromoSection/styles.js @@ -39,24 +39,26 @@ export const Buttons = styled.div` `}; ` -export const Button = styled.button` - font-family: BrandonGrotesqueMed; - cursor: pointer; +export const Button = styled.a` + box-sizing: border-box; + display: inline-flex; + align-items: center; + min-width: 186px; height: 60px; + padding: 0px 21px; border-radius: 4px; - background-color: #945dd6; border: solid 2px rgba(255, 255, 255, 0.3); + font-family: BrandonGrotesqueMed; font-size: 20px; font-weight: 500; line-height: 0.9; - + text-decoration: none; text-align: left; - padding: 0px 21px; - color: #ffffff; + background-color: #945dd6; background: url('/static/img/arrow_right_white.svg') right center no-repeat; background-position-x: 147px; transition: 0.2s background-color ease-out; diff --git a/src/components/TopMenu/index.js b/src/components/TopMenu/index.js index b27697d27b..c4bfe432c8 100644 --- a/src/components/TopMenu/index.js +++ b/src/components/TopMenu/index.js @@ -1,8 +1,8 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' -import NextLink from 'next/link' import throttle from 'lodash.throttle' +import LocalLink from '../LocalLink' import Nav from '../Nav' import { HEADER } from '../../consts' @@ -53,16 +53,14 @@ export default class TopMenu extends Component { scrolled={isDocPage || scrolled} wide={isDocPage} > - - - dvc.org - - + + dvc.org +