Fix TypeScript errors

Author: MichaelDeBoey

packages/app/src/app/pages/Sandbox/Editor/Workspace/index.tsx

@@ -1,20 +1,22 @@
 import VERSION from '@codesandbox/common/lib/version';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
+//  Fix css prop types in styled-components (see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31245#issuecomment-463640878)
+import * as CSSProps from 'styled-components/cssprop'; // eslint-disable-line
 
 import SocialInfo from 'app/components/SocialInfo';
 import { useStore } from 'app/store';
 import getWorkspaceItems from 'app/store/modules/workspace/items';
 
+import ConfigurationFiles from './items/ConfigurationFiles';
+import { Deployment } from './items/Deployment';
 import Files from './items/Files';
-import ProjectInfo from './items/ProjectInfo';
 import { GitHub } from './items/GitHub';
-import Server from './items/Server';
 import Live from './items/Live';
 import { More } from './items/More';
-import { Deployment } from './items/Deployment';
-import ConfigurationFiles from './items/ConfigurationFiles';
 import { NotOwnedSandboxInfo } from './items/NotOwnedSandboxInfo';
+import ProjectInfo from './items/ProjectInfo';
+import Server from './items/Server';
 
 import { Advertisement } from './Advertisement';
 import Chat from './Chat';

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

@@ -1,3 +1,4 @@
+import { observer } from 'mobx-react-lite';
 import React, { useEffect } from 'react';
 
 import { useSignals } from 'app/store';
@@ -7,7 +8,7 @@ import { Description } from '../../elements';
 import { Netlify } from './Netlify';
 import { Zeit } from './Zeit';
 
-export const Deployment = () => {
+export const Deployment = observer(() => {
   const {
     deployment: { getDeploys },
   } = useSignals();
@@ -28,4 +29,4 @@ export const Deployment = () => {
       <Netlify />
     </div>
   );
-};
+});

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

@@ -32,7 +32,7 @@ const getFunctionDir = sandbox => {
       sandbox.directories
     );
   } catch (e) {
-    return [];
+    return null;
   }
 };
 

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

@@ -55,8 +55,12 @@ export const Deploy = styled.li`
   flex-direction: column;
 `;
 
+type NameProps = {
+  light?: boolean;
+  theme: any;
+};
 export const Name = styled.span`
-  ${({ light, theme }: { light: boolean; theme: any }) => css`
+  ${({ light, theme }: NameProps) => css`
     font-weight: 600;
     color: ${theme.light || light
       ? css`rgba(0, 0, 0, 0.8)`
@@ -75,8 +79,12 @@ export const Name = styled.span`
   `};
 `;
 
+type LinkProps = {
+  disabled?: boolean;
+  theme: any;
+};
 export const Link = styled.a`
-  ${({ disabled, theme }: { disabled: boolean; theme: any }) => css`
+  ${({ disabled, theme }: LinkProps) => css`
     padding: 0.25rem 0.4rem;
     background-color: ${theme.secondary};
     text-decoration: none;
@@ -111,22 +119,21 @@ export const Action = Link.withComponent('button');
 
 export const ButtonContainer = styled.section`
   display: flex;
+
   > *:not(:last-child) {
     margin-right: 0.5rem;
   }
 `;
 
 export const DeploysWrapper = styled.div`
-  background: rgb(0, 0, 0);
+  background-color: #000000;
   border-radius: 4px;
   font-size: 0.875rem;
   color: rgba(255, 255, 255, 0.8);
-  padding: 0.75rem 1rem;
-  padding: 0.75rem 0rem;
+  padding: 0.75rem 0;
   border-top-right-radius: 0;
   border-top-left-radius: 0;
-  margin: 0.5rem 0.75rem;
-  margin-top: 0;
+  margin: 0 0.75rem 0.5rem;
 `;
 
 export const Wrapper = styled.div`