update new sandbox menu into a modal (codesandbox#201)

* update new sandbox menu into a modal

* fix lint issues

* Add background hover effect

* remove unused files

Author: Tushar Sonawane

src/app/components/MenuItem.js

@@ -0,0 +1,37 @@
+import React from 'react';
+
+export default ({
+  width = 35,
+  height = 35,
+  className,
+}: {
+  width: number,
+  height: number,
+  className: ?string,
+}) => (
+  <svg
+    className={className}
+    width={`${width}px`}
+    height={`${height}px`}
+    viewBox="0 0 256 296"
+  >
+    <g>
+      <polygon
+        fill="#673AB8"
+        points="128 0 256 73.8999491 256 221.699847 128 295.599796 0 221.699847 0 73.8999491"
+      />
+      <path
+        d="M34.8647584,220.478469 C51.8814262,242.25881 105.959701,225.662965 157.014868,185.774297 C208.070035,145.885628 237.255632,97.428608 220.238964,75.6482664 C203.222296,53.8679249 149.144022,70.4637701 98.0888543,110.352439 C47.0336869,150.241107 17.8480906,198.698127 34.8647584,220.478469 Z M42.1343351,214.798853 C36.4908625,207.575537 38.9565723,193.395881 49.7081913,175.544904 C61.0297348,156.747677 80.2490923,135.997367 103.76847,117.622015 C127.287848,99.2466634 152.071368,85.6181573 173.049166,79.1803727 C192.970945,73.066665 207.325915,74.1045667 212.969387,81.3278822 C218.61286,88.5511977 216.14715,102.730854 205.395531,120.581832 C194.073987,139.379058 174.85463,160.129368 151.335252,178.50472 C127.815874,196.880072 103.032354,210.508578 82.054556,216.946362 C62.1327769,223.06007 47.7778077,222.022168 42.1343351,214.798853 Z"
+        fill="#FFFFFF"
+      />
+      <path
+        d="M220.238964,220.478469 C237.255632,198.698127 208.070035,150.241107 157.014868,110.352439 C105.959701,70.4637701 51.8814262,53.8679249 34.8647584,75.6482664 C17.8480906,97.428608 47.0336869,145.885628 98.0888543,185.774297 C149.144022,225.662965 203.222296,242.25881 220.238964,220.478469 Z M212.969387,214.798853 C207.325915,222.022168 192.970945,223.06007 173.049166,216.946362 C152.071368,210.508578 127.287848,196.880072 103.76847,178.50472 C80.2490923,160.129368 61.0297348,139.379058 49.7081913,120.581832 C38.9565723,102.730854 36.4908625,88.5511977 42.1343351,81.3278822 C47.7778077,74.1045667 62.1327769,73.066665 82.054556,79.1803727 C103.032354,85.6181573 127.815874,99.2466634 151.335252,117.622015 C174.85463,135.997367 194.073987,156.747677 205.395531,175.544904 C216.14715,193.395881 218.61286,207.575537 212.969387,214.798853 Z"
+        fill="#FFFFFF"
+      />
+      <path
+        d="M127.551861,167.666971 C138.378632,167.666971 147.155465,158.890139 147.155465,148.063368 C147.155465,137.236596 138.378632,128.459764 127.551861,128.459764 C116.72509,128.459764 107.948257,137.236596 107.948257,148.063368 C107.948257,158.890139 116.72509,167.666971 127.551861,167.666971 L127.551861,167.666971 Z"
+        fill="#FFFFFF"
+      />
+    </g>
+  </svg>
+);

src/app/components/logos/Preact.js

@@ -0,0 +1,23 @@
+import React from 'react';
+
+export default ({
+  width = 35,
+  height = 35,
+  className,
+}: {
+  width: number,
+  height: number,
+  className: ?string,
+}) => (
+  <svg
+    className={className}
+    width={`${width}px`}
+    height={`${height}px`}
+    viewBox="0 0 200 200"
+  >
+    <path
+      d="M0 100v100h200V0H0v100zm140.9-71.6c.7.9 1.1 4.2.9 8.8l-.3 7.3-27 .5c-23.2.5-27.5.8-30.6 2.3-6.4 3.1-8.3 6-8.7 13.1-.5 7.5 1.4 12.4 6.2 16.1 1.8 1.3 13.5 7 26.1 12.6 24.7 11 29.6 13.8 34.5 19.6 6.8 8.3 9.7 30.1 5.6 42.3-2.7 7.8-10.1 14.9-18.6 18-6.2 2.2-8.1 2.3-39.1 2.8-38 .5-35.9 1-35.9-9.2 0-3.9.5-6.8 1.3-7.4.8-.7 11.9-1.2 30.2-1.4 32.3-.4 35.3-.9 39.8-7.2 1.9-2.7 2.2-4.4 2.2-12.1-.1-15-2.7-17.8-24.9-27-33.6-14-41.2-18.8-46.1-29.1-4.5-9.4-4.4-24.5.2-34.2 2.3-4.8 8.3-10.7 13-12.8 7.8-3.5 15.3-4.2 42.9-4.3 22.2-.1 27.4.2 28.3 1.3z"
+      fill="#A82022"
+    />
+  </svg>
+);

src/app/components/logos/React.js

@@ -0,0 +1,33 @@
+import React from 'react';
+
+export default ({
+  width = 35,
+  height = 35,
+  className,
+}: {
+  width: number,
+  height: number,
+  className: ?string,
+}) => (
+  <svg
+    className={className}
+    width={`${width}px`}
+    height={`${height}px`}
+    viewBox="0 0 256 221"
+  >
+    <g>
+      <path
+        d="M204.8,0 L256,0 L128,220.8 L0,0 L50.56,0 L97.92,0 L128,51.2 L157.44,0 L204.8,0 Z"
+        fill="#41B883"
+      />
+      <path
+        d="M0,0 L128,220.8 L256,0 L204.8,0 L128,132.48 L50.56,0 L0,0 Z"
+        fill="#41B883"
+      />
+      <path
+        d="M50.56,0 L128,133.12 L204.8,0 L157.44,0 L128,51.2 L97.92,0 L50.56,0 Z"
+        fill="#35495E"
+      />
+    </g>
+  </svg>
+);

src/app/components/logos/Svelte.js

@@ -1,23 +1,25 @@
 // @flow
 import * as React from 'react';
 import styled from 'styled-components';
-import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
 
 import SignInButton from 'app/containers/SignInButton';
+import NewSandbox from 'app/containers/modals/NewSandbox';
 
+import PlusIcon from 'react-icons/lib/go/plus';
 import Logo from 'app/components/Logo';
 import Row from 'app/components/flex/Row';
 import Tooltip from 'app/components/Tooltip';
 import HeaderSearchBar from 'app/components/HeaderSearchBar';
 
 import { jwtSelector, isPatronSelector } from 'app/store/user/selectors';
+import modalActionCreators from 'app/store/modal/actions';
 import { patronUrl } from 'app/utils/url-generator';
 // $FlowIssue
 import PatronBadge from '-!svg-react-loader!app/utils/badges/svg/patron-4.svg'; // eslint-disable-line import/no-webpack-loader-syntax
 
-import NewSandboxAction from '../../pages/Sandbox/Editor/Content/Header/NewSandboxAction';
-
 import UserMenu from '../UserMenu';
 
 const LogoWithBorder = styled(Logo)`padding-right: 1rem;`;
@@ -48,23 +50,35 @@ const Action = styled.div`
   margin: 0 1rem;
   cursor: pointer;
   color: white;
+  opacity: 0.8;
 
   &:hover {
-    color: white;
+    opacity: 1;
   }
 `;
 
 type Props = {
   title: string,
   hasLogin: boolean,
   isPatron: boolean,
+  modalActions: typeof modalActionCreators,
 };
 
 const mapStateToProps = state => ({
   hasLogin: !!jwtSelector(state),
   isPatron: isPatronSelector(state),
 });
+const mapDispatchToProps = dispatch => ({
+  modalActions: bindActionCreators(modalActionCreators, dispatch),
+});
 class Navigation extends React.PureComponent<Props> {
+  openNewSandbox = () => {
+    this.props.modalActions.openModal({
+      width: 900,
+      Body: <NewSandbox />,
+    });
+  };
+
   render() {
     const { title, hasLogin, isPatron } = this.props;
 
@@ -91,7 +105,11 @@ class Navigation extends React.PureComponent<Props> {
                 </Tooltip>
               </Action>
             )}
-            <NewSandboxAction />
+            <Action onClick={this.openNewSandbox}>
+              <Tooltip position="bottom" title="New Sandbox">
+                <PlusIcon height={35} />
+              </Tooltip>
+            </Action>
           </Actions>
           {hasLogin ? <UserMenu /> : <SignInButton />}
         </Row>
@@ -100,4 +118,4 @@ class Navigation extends React.PureComponent<Props> {
   }
 }
 
-export default connect(mapStateToProps)(Navigation);
+export default connect(mapStateToProps, mapDispatchToProps)(Navigation);

src/app/components/logos/Vue.js

@@ -0,0 +1,157 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+import GithubIcon from 'react-icons/lib/go/mark-github';
+import TerminalIcon from 'react-icons/lib/go/terminal';
+
+import modalActionCreators from 'app/store/modal/actions';
+import {
+  newSandboxUrl,
+  newReactTypeScriptSandboxUrl,
+  newPreactSandboxUrl,
+  newVueSandboxUrl,
+  newSvelteSandboxUrl,
+  importFromGitHubUrl,
+  uploadFromCliUrl,
+} from 'app/utils/url-generator';
+
+import ReactIcon from '../../components/logos/React';
+import PreactIcon from '../../components/logos/Preact';
+import VueIcon from '../../components/logos/Vue';
+import SvelteIcon from '../../components/logos/Svelte';
+
+import Row from '../../components/flex/Row';
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${props => props.theme.background};
+`;
+
+const RowContainer = styled(Row)`
+  justify-content: center;
+  color: rgba(255, 255, 255, 0.8);
+  padding-top: 1.5rem;
+  &:last-of-type {
+    padding-bottom: 1.5rem;
+  }
+`;
+
+const LogoContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+  transition: 0.3s ease all;
+  opacity: 0.8;
+
+  padding: 1.5rem 0;
+
+  &:hover {
+    opacity: 1;
+    background-color: rgba(0, 0, 0, 0.2);
+  }
+`;
+
+const Text = styled.div`margin-top: 1rem;`;
+
+const LogoLink = styled(Link)`
+  text-decoration: none;
+  color: rgba(255, 255, 255, 0.8);
+  width: 140px;
+  margin: 0 1rem;
+`;
+type LogoProps = {
+  Icon: any,
+  width: number,
+  height: number,
+  text: string,
+  href: string,
+  onClick: () => {},
+};
+
+const Logo = ({ Icon, width, height, text, href, onClick }: LogoProps) => (
+  <LogoLink to={href} onClick={onClick}>
+    <LogoContainer>
+      <Icon width={width} height={height} />
+      <Text>{text}</Text>
+    </LogoContainer>
+  </LogoLink>
+);
+
+const mapDispatchToProps = dispatch => ({
+  modalActions: bindActionCreators(modalActionCreators, dispatch),
+});
+const NewSandbox = ({
+  modalActions,
+}: {
+  modalActions: typeof modalActionCreators,
+}) => (
+  <Container>
+    <RowContainer>
+      <Logo
+        Icon={ReactIcon}
+        width={50}
+        height={50}
+        text="React"
+        href={newSandboxUrl()}
+        onClick={modalActions.closeModal}
+      />
+      <Logo
+        Icon={ReactIcon}
+        width={50}
+        height={50}
+        text="React TypeScript"
+        href={newReactTypeScriptSandboxUrl()}
+        onClick={modalActions.closeModal}
+      />
+      <Logo
+        Icon={PreactIcon}
+        width={50}
+        height={50}
+        text="Preact"
+        href={newPreactSandboxUrl()}
+        onClick={modalActions.closeModal}
+      />
+      <Logo
+        Icon={VueIcon}
+        width={50}
+        height={50}
+        text="Vue"
+        href={newVueSandboxUrl()}
+        onClick={modalActions.closeModal}
+      />
+      <Logo
+        Icon={SvelteIcon}
+        width={50}
+        height={50}
+        text="Svelte"
+        href={newSvelteSandboxUrl()}
+        onClick={modalActions.closeModal}
+      />
+    </RowContainer>
+    <RowContainer>
+      <Logo
+        Icon={GithubIcon}
+        width={50}
+        height={50}
+        text="Import from Github"
+        href={importFromGitHubUrl()}
+        onClick={modalActions.closeModal}
+      />
+      <Logo
+        Icon={TerminalIcon}
+        width={50}
+        height={50}
+        text="Upload from CLI"
+        href={uploadFromCliUrl()}
+        onClick={modalActions.closeModal}
+      />
+    </RowContainer>
+  </Container>
+);
+
+export default connect(null, mapDispatchToProps)(NewSandbox);