Fix profile page

Author: CompuIves

package.json

@@ -15,7 +15,7 @@
     "build:deps": "lerna run build:dev --scope codesandbox-api --scope @codesandbox/notifications --scope @codesandbox/executors && lerna run build:dev --scope @codesandbox/common && lerna run build:dev --scope vscode-textmate --scope codesandbox-browserfs --scope node-services && lerna run build:dev --scope sse-hooks && lerna run build --scope codesandbox-deps",
     "build:common": "lerna run build:dev --scope @codesandbox/common --stream",
     "build:dynamic": "lerna run build --scope dynamic-pages --stream",
-    "start": "yarn build:deps && yarn start:fast",
+    "start": "yarn build:deps && lerna run start --scope @codesandbox/common --scope app",
     "start:overmind": "yarn build:deps && concurrently \"lerna run start --scope app --stream\" \"overmind-devtools\"",
     "start:fast": "cd packages/app && yarn start",
     "start:vscode": "cross-env VSCODE=1 yarn start:fast & cd standalone-packages/monaco-editor && yarn simpleserver & cd standalone-packages/vscode && yarn watch",

packages/app/src/app/components/DeleteSandboxButton/DeleteSandboxButton.tsx

@@ -1,20 +1,15 @@
 import * as React from 'react';
-import DeleteIcon from 'react-icons/lib/md/delete';
-import { Container } from './elements';
+import { DeleteSandboxButtonContainer } from './elements';
 
-interface IDeleteSandboxButtonProps {
+interface Props {
   id: string;
   onDelete: (id: string) => void;
 }
 
-export const DeleteSandboxButton: React.FC<IDeleteSandboxButtonProps> = ({
-  id,
-  onDelete,
-  ...props
-}) => (
-  <Container content="Delete Sandbox" onClick={() => onDelete(id)}>
-    <button type="button" {...props}>
-      <DeleteIcon />
-    </button>
-  </Container>
-);
+export const DeleteSandboxButton = ({ id, onDelete }: Props) => {
+  const deleteSandbox = () => {
+    onDelete(id);
+  };
+
+  return <DeleteSandboxButtonContainer onClick={deleteSandbox} />;
+};

…mponents/DeleteSandboxButton/elements.ts …ponents/DeleteSandboxButton/elements.tsxpackages/app/src/app/components/DeleteSandboxButton/elements.ts renamed to packages/app/src/app/components/DeleteSandboxButton/elements.tsx packages/app/src/app/components/DeleteSandboxButton/elements.ts renamed to packages/app/src/app/components/DeleteSandboxButton/elements.tsx

@@ -1,18 +1,24 @@
+import React from 'react';
 import styled from 'styled-components';
+import DeleteIcon from 'react-icons/lib/md/delete';
 import Tooltip from '@codesandbox/common/lib/components/Tooltip';
 
-export const Container = styled(Tooltip)`
-  padding: 5px 6px 9px 6px;
-  border: none;
+export const DeleteSandboxButtonContainer = styled(props => (
+  <Tooltip content="Delete Sandbox">
+    <button {...props}>
+      <DeleteIcon />
+    </button>
+  </Tooltip>
+))`
+  font-size: 1.2em;
   background-color: inherit;
+  border: none;
+  padding: 5px 6px 9px 6px;
   color: rgba(255, 255, 255, 0.5);
-  font-size: 1.2em;
   cursor: pointer;
-
   &:hover {
     color: rgba(255, 255, 255, 1);
   }
-
   &[disabled] {
     opacity: 0.5;
     cursor: default;

packages/common/package.json

@@ -13,6 +13,7 @@
   "scripts": {
     "test": "jest",
     "clean": "rimraf lib && yarn rimraf node_modules/@types/react-native",
+    "install": "cd ../../ && yarn && yarn build:deps",
     "start": "(yarn tsc --watch & yarn babel src --out-dir lib --watch & yarn cpx \"src/**/*.{css,svg,png,jpg}\" lib --watch)",
     "start:storybook": "start-storybook",
     "build:storybook": "build-storybook -c .storybook -o public",