Assorted Fixes (codesandbox#2681)

Author: SaraVieira

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Files/index.js

@@ -1,12 +1,17 @@
 import React, { useState } from 'react';
 
+import { useOvermind } from 'app/overmind';
 import Files from '../../Files';
 import Dependencies from '../../Dependencies';
 import { WorkspaceItem } from '../../WorkspaceItem';
 import { ItemTitle } from '../../elements';
 
 export default () => {
   const [editActions, setEditActions] = useState(null);
+  const {
+    state: { editor },
+  } = useOvermind();
+  const staticTemplate = editor.currentSandbox.template === 'static';
 
   return (
     <div>
@@ -15,9 +20,11 @@ export default () => {
         {editActions}
       </ItemTitle>
       <Files setEditActions={setEditActions} />
-      <WorkspaceItem defaultOpen title="Dependencies">
-        <Dependencies />
-      </WorkspaceItem>
+      {!staticTemplate ? (
+        <WorkspaceItem defaultOpen title="Dependencies">
+          <Dependencies />
+        </WorkspaceItem>
+      ) : null}
     </div>
   );
 };

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

@@ -1,11 +1,16 @@
 import React, { useState } from 'react';
+import { useOvermind } from 'app/overmind';
 import Dependencies from '../../Dependencies';
 import Files from '../../Files';
 import { Project } from '../../Project';
 import { WorkspaceItem } from '../../WorkspaceItem';
 
 export const NotOwnedSandboxInfo = () => {
   const [editActions, setEditActions] = useState(null);
+  const {
+    state: { editor },
+  } = useOvermind();
+  const staticTemplate = editor.currentSandbox.template === 'static';
 
   return (
     <div style={{ marginTop: '1rem' }}>
@@ -18,13 +23,15 @@ export const NotOwnedSandboxInfo = () => {
       >
         <Files setEditActions={setEditActions} />
       </WorkspaceItem>
-      <WorkspaceItem
-        defaultOpen
-        style={{ marginTop: '.5rem' }}
-        title="Dependencies"
-      >
-        <Dependencies />
-      </WorkspaceItem>
+      {!staticTemplate ? (
+        <WorkspaceItem
+          defaultOpen
+          style={{ marginTop: '.5rem' }}
+          title="Dependencies"
+        >
+          <Dependencies />
+        </WorkspaceItem>
+      ) : null}
     </div>
   );
 };

packages/app/src/app/pages/Search/Filters/index.js

@@ -20,7 +20,7 @@ const Filters = () => (
     <Filter
       attributeName="template"
       operator="or"
-      title="Templates"
+      title="Enviroment"
       transformItems={items =>
         items.map(({ label, ...item }) => {
           const { name, niceName } = getTemplate(label);

packages/common/src/templates/icons.ts

@@ -22,7 +22,7 @@ import {
   GridsomeIcon,
   QuasarIcon,
   SapperIcon,
-  ParcelIcon,
+  JavaScriptIcon,
   VuePressIcon,
   UnibitIcon,
 } from '@codesandbox/template-icons';
@@ -82,7 +82,7 @@ export default function getIcon(theme: TemplateType): ReturnedIcon {
     case angular.name:
       return AngularIcon;
     case parcel.name:
-      return ParcelIcon;
+      return JavaScriptIcon;
     case dojo.name:
       return DojoIcon;
     case ember.name:

packages/common/src/templates/iconsDark.ts

@@ -22,7 +22,7 @@ import {
   GridsomeIconDark,
   QuasarIconDark,
   SapperIconDark,
-  ParcelIconDark,
+  JavaScriptIconDark,
   VuePressIconDark,
   UnibitIconDark,
 } from '@codesandbox/template-icons';
@@ -82,7 +82,7 @@ export default function getIcon(theme: TemplateType): ReturnedIcon {
     case angular.name:
       return AngularIconDark;
     case parcel.name:
-      return ParcelIconDark;
+      return JavaScriptIconDark;
     case dojo.name:
       return DojoIconDark;
     case ember.name:

packages/common/src/templates/iconsLight.ts

@@ -22,7 +22,7 @@ import {
   GridsomeIconLight,
   QuasarIconLight,
   SapperIconLight,
-  ParcelIconLight,
+  JavaScriptIconLight,
   VuePressIconLight,
   UnibitIconLight,
 } from '@codesandbox/template-icons';
@@ -82,7 +82,7 @@ export default function getIcon(theme: TemplateType): ReturnedIcon {
     case angular.name:
       return AngularIconLight;
     case parcel.name:
-      return ParcelIconLight;
+      return JavaScriptIconLight;
     case dojo.name:
       return DojoIconLight;
     case ember.name: