add zeit warning (codesandbox#2165)

* add zeit warning

* add link to docs

* add warning back

Author: SaraVieira

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/DeployButton/DeployButton.tsx

@@ -2,14 +2,30 @@ import React from 'react';
 
 import { DeploymentIntegration } from 'app/components/DeploymentIntegration';
 import NowLogo from 'app/components/NowLogo';
-import { useSignals } from 'app/store';
+import { useSignals, useStore } from 'app/store';
 
 import { DeployButtonContainer } from '../../elements';
 
+import { Overlay, CreateFile } from './elements';
+
 export const DeployButton = ({ isOpen, toggle }) => {
   const {
+    files,
     deployment: { deploySandboxClicked },
   } = useSignals();
+  const { editor } = useStore();
+  const nowFile = editor.currentSandbox.modules
+    .toJSON()
+    .filter(file => file.title === 'now.json');
+
+  const createFile = () => {
+    files.moduleCreated({
+      title: 'now.json',
+      code: JSON.stringify({
+        version: 2,
+      }),
+    });
+  };
 
   return (
     <DeployButtonContainer>
@@ -21,6 +37,29 @@ export const DeployButton = ({ isOpen, toggle }) => {
         open={isOpen}
         toggle={toggle}
       >
+        {!nowFile.length && (
+          <Overlay>
+            It seems you don{"'"}t have{' '}
+            <a
+              href="https://zeit.co/docs/v2/deployments/configuration"
+              target="_blank"
+              rel="noreferrer noopener"
+            >
+              now.json
+            </a>{' '}
+            file. Please create{' '}
+            <CreateFile onClick={createFile}>one</CreateFile> to be able to
+            deploy to{' '}
+            <a
+              href="https://zeit.co/now"
+              target="_blank"
+              rel="noreferrer noopener"
+            >
+              <span>ZEIT Now</span>
+            </a>
+            .
+          </Overlay>
+        )}
         Deploy your sandbox on{' '}
         <a href="https://zeit.co/now" rel="noreferrer noopener" target="_blank">
           <span>ZEIT Now</span>

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/DeployButton/elements.ts

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+
+export const Overlay = styled.div`
+  position: absolute;
+  background: rgba(0, 0, 0, 1);
+  max-width: 80%;
+`;
+
+export const CreateFile = styled.button`
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  color: ${props => props.theme.link};
+  border: none;
+`;

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Zeit.tsx

@@ -17,7 +17,6 @@ export const Zeit = observer(() => {
   } = useStore();
 
   const [isVisible, setVisible] = useState(false);
-
   return integrations.zeit ? (
     <Wrapper loading={deploying}>
       <DeployButton

packages/common/src/__snapshots__/theme.test.js.snap

@@ -17,6 +17,7 @@ Object {
   "gray": [Function],
   "green": [Function],
   "lightText": [Function],
+  "link": [Function],
   "new": Object {
     "bg": [Function],
     "description": [Function],

packages/common/src/theme.ts

@@ -80,6 +80,7 @@ const theme = {
     dangerBackground: '#DC3545',
     sidebar: '#191d1f',
     placeholder: '#B8B9BA',
+    link: '#40a9f3',
   }),
   vscodeTheme: codesandbox,
 

packages/dynamic-pages/pages/user-sandboxes/_elements.js

@@ -27,7 +27,7 @@ export const NavigationLink = styled.a`
     content: '';
     margin-top: 8px;
     display: block;
-    background: #40a9f3;
+    background: ${props => props.theme.link};
     height: 2px;
     box-sizing: border-box;
     width: 0%;

packages/homepage/src/pages/legal/_elements.js

@@ -30,7 +30,7 @@ export const NavigationLink = styled(Link)`
     content: '';
     margin-top: 8px;
     display: block;
-    background: #40a9f3;
+    background: ${props => props.theme.link};
     height: 2px;
     box-sizing: border-box;
     width: 0%;