Update several properties and docs

Author: CompuIves

packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/elements.js

@@ -88,15 +88,14 @@ export const CheckBox = styled.span`
   ${props =>
     props.selected
       ? css`
-          background: ${props.color}
-            url("data:image/svg+xml;utf8,<svg viewBox='0 0 10 9' xmlns='http://www.w3.org/2000/svg'><path d='M1 4.88l2.378 2.435L9.046 1.6' stroke-width='1.6' stroke='%23FFF' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'/></svg>")
-            no-repeat 50%/10px;
+          background: ${props.color} url('') no-repeat 50%/10px;
+          background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 10 9' xmlns='http://www.w3.org/2000/svg'><path d='M1 4.88l2.378 2.435L9.046 1.6' stroke-width='1.6' stroke='%23FFF' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'/></svg>");
         `
       : css`
-          background: rgba(0, 0, 0, 0.3)
-            url("data:image/svg+xml;utf8,<svg viewBox='0 0 10 9' xmlns='http://www.w3.org/2000/svg'><path fill='rgba(255, 255, 255, 0.2)/></svg>")
-            no-repeat 50%/10px;
-        `} border: 2px solid transparent;
+          background: rgba(0, 0, 0, 0.3) url('') no-repeat 50%/10px;
+          background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 10 9' xmlns='http://www.w3.org/2000/svg'><path fill='rgba(255, 255, 255, 0.2)/></svg>");
+        `};
+  border: 2px solid transparent;
 
   ${props =>
     props.selected &&

packages/app/src/app/pages/Dashboard/Content/routes/CreateTeam/Plan/elements.js

@@ -44,15 +44,14 @@ export const CheckBox = styled.span`
   ${props =>
     props.selected
       ? css`
-          background: ${props.color}
-            url("data:image/svg+xml;utf8,<svg viewBox='0 0 10 9' xmlns='http://www.w3.org/2000/svg'><path d='M1 4.88l2.378 2.435L9.046 1.6' stroke-width='1.6' stroke='%23FFF' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'/></svg>")
-            no-repeat 50%/10px;
+          background: ${props.color} url('') no-repeat 50%/10px;
+          background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 10 9' xmlns='http://www.w3.org/2000/svg'><path d='M1 4.88l2.378 2.435L9.046 1.6' stroke-width='1.6' stroke='%23FFF' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'/></svg>");
         `
       : css`
-          background: rgba(0, 0, 0, 0.3)
-            url("data:image/svg+xml;utf8,<svg viewBox='0 0 10 9' xmlns='http://www.w3.org/2000/svg'><path fill='rgba(255, 255, 255, 0.2)/></svg>")
-            no-repeat 50%/10px;
-        `} border: 2px solid transparent;
+          background: rgba(0, 0, 0, 0.3) url('') no-repeat 50%/10px;
+          background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 10 9' xmlns='http://www.w3.org/2000/svg'><path fill='rgba(255, 255, 255, 0.2)/></svg>");
+        `};
+  border: 2px solid transparent;
 
   ${props =>
     props.selected &&

packages/app/src/app/pages/common/Navigation/Notifications/elements.js

@@ -79,6 +79,8 @@ export const NotificationImage = styled.img`
   border-radius: 4px;
   width: 24px;
   height: 24px;
+  min-width: 24px;
+  min-height: 24px;
   margin-right: 1rem;
   margin-top: 0.25rem;
 `;

packages/homepage/content/docs/2-importing.md

@@ -22,18 +22,14 @@ The imported repository will always stay up to date with your latest commits. Th
 
 We infer sandbox settings based on several files in a repository.
 
-| Sandbox Setting             | Inferred from                                               |
-| --------------------------- | ----------------------------------------------------------- |
-| Title                       | `name` field in `package.json`                              |
-| Description                 | `description` field in `package.json`                       |
-| Tags                        | `keywords` field in `package.json`                          |
-| Template - Vue              | If there are `.vue` files.                                  |
-| Template - Preact           | If `package.json` dependencies contains `preact-cli`.       |
-| Template - React            | If `package.json` dependencies contains `react-scripts`.    |
-| Template - React-Typescript | If `package.json` dependencies contains `react-scripts-ts`. |
-| Template - Svelte           | If `package.json` dependencies contains `svelte`.           |
-
-Additionally, you may specify a `template` property in your `./sandbox.config.json` file.
+| Sandbox Setting | Inferred from                                                                                                                                         |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Title           | `name` field in `package.json`                                                                                                                        |
+| Description     | `description` field in `package.json`                                                                                                                 |
+| Tags            | `keywords` field in `package.json`                                                                                                                    |
+| Template        | Based on [this](https://github.com/codesandbox-app/codesandbox-importers/blob/master/packages/import-utils/src/create-sandbox/templates.ts#L63) logic |
+
+Additionally, you may specify a `template` property in your `./sandbox.config.json` file to override the detected template..
 
 ```json
 {

packages/homepage/content/docs/2-live.md

@@ -39,7 +39,3 @@ You can make give someone editor rights by pressing the '+' icon next to their n
 And you can make someone a spectator by clicking the '-' icon next to their name.
 
 ![Going Live](./images/live-make-spectator.png)
-
-## Patron
-
-Creating a new Live Room is only available as a [Patron](/patron) currently. Everyone without Patron can always join a live session.

packages/homepage/content/docs/3-deployment.md

@@ -0,0 +1,19 @@
+---
+title: "Deploying your Sandbox"
+authors: ["arthurdenner", "CompuIves"]
+description: "It's possible to deploy your app directly from CodeSandbox with ZEIT Now."
+---
+
+## Integrations
+
+In order to be able to deploy your app, you need to access the Preferences menu and select the Integrations tab. Log into your ZEIT account and it's all set.
+
+## Deployment
+
+Go to any of your sandboxes, click in the Deployment menu (the rocket icon in the sidebar) and click in "Deploy Sandbox". You'll need to sign in to [Now](https://zeit.co/now) when you're deploying for the first time. After you've signed in you will be able to click "Deploy Now". It will deploy the sandbox and give you a URL afterwards.
+
+## Deployment Overview
+
+You can see an overview of all deployments you made previously, you can use this overview to delete your previous deploys or to visit the website.
+
+![Deployment Sidebar](./images/deployment-sidebar.png)

packages/homepage/content/docs/3-teams.md

@@ -0,0 +1,33 @@
+---
+title: "Teams"
+authors: ["CompuIves"]
+description: "A team makes it easier to collaborate on sandboxes with others. As a team you share the ownership of the sandboxes in that team, every sandbox automatically has a live session open."
+---
+
+## Creating a Team
+
+You can create and manage teams from the dashboard.
+
+![Create Team](./images/team-create.png)
+
+As soon as you've created a team you will be greeted with the team overview.
+
+![Team Overview](./images/team-overview.png)
+
+## Inviting Team Members
+
+There's no limit on how many team members a team can have. You can invite others by entering their username in the bottom left corner. Others will get a notification (the bell icon in the header) when they are invited to a new team. From there they can accept or refuse the invitation.
+
+![Team Notifications](./images/team-invite.png)
+
+## Sharing Sandboxes
+
+As a team you have a sidebar item called "Our Sandboxes" with directories, just like your personal sandboxes. You can create new sandboxes directly from here, or you can drag your own sandboxes from 'My Sandboxes' to 'Our Sandboxes'. All sandboxes in a team can be seen and edited by all team member. We still keep track of who originally created the sandbox though, this means that only the original creator of the sandbox can actually delete it.
+
+![Team Sandboxes](./images/team-sandboxes.png)
+
+## Collaborating on Sandboxes
+
+Whenever you open a team sandbox, you also automatically open a live session. Other team members will join this live session if they open the sandbox as well. You can still share the live session with others.
+
+![A Team Live Session](./images/team-live.png)