Adjust styling of files entry containers (codesandbox#322)

* Adjust styling of files

* Different folder icon for open and closed

* Update snapshots

Author: CompuIves

packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/__snapshots__/ExternalResource.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`ExternalResource renders file if there is an extension 1`] = `
 <span
-  className="sc-bdVaJa jEUgPD"
+  className="sc-bdVaJa dllDpZ"
 >
   <a
     href="https://ivesvh.com/ives.js"
@@ -44,7 +44,7 @@ exports[`ExternalResource renders file if there is an extension 1`] = `
 
 exports[`ExternalResource renders url if there is no extension 1`] = `
 <span
-  className="sc-bdVaJa jEUgPD"
+  className="sc-bdVaJa dllDpZ"
 >
   <a
     href="https://ivesvh.com/"
@@ -86,7 +86,7 @@ exports[`ExternalResource renders url if there is no extension 1`] = `
 
 exports[`ExternalResource renders url if there is no extension 2`] = `
 <span
-  className="sc-bdVaJa jEUgPD"
+  className="sc-bdVaJa dllDpZ"
 >
   <a
     href="https://ivesvh.com"

packages/app/src/app/pages/Sandbox/Editor/Workspace/EntryContainer.js

@@ -12,12 +12,12 @@ export const getContainerStyles = props => {
     position: relative;
     display: flex;
     font-size: 14px;
-    padding: 0.6rem;
-    padding-left: ${props.depth != null
-      ? `${props.depth + 1.5}rem`
-      : 'calc(1rem - 2px)'};
+    padding: 0.4rem;
+    padding-left: ${
+      props.depth != null ? `${props.depth + 1.5}rem` : 'calc(1rem - 2px)'
+    };
     padding-right: 3rem;
-    color: ${theme.background.lighten(2)()};
+    color: rgba(255, 255, 255, 0.5);
     text-decoration: none;
     font-weight: 400;
     min-width: 100px;
@@ -26,13 +26,15 @@ export const getContainerStyles = props => {
     user-select: none;
 
     &:hover {
-      ${props.active || props.editing
-        ? ''
-        : `
+      ${
+        props.active || props.editing
+          ? ''
+          : `
         background-color: ${color.clearer(0.9)()};
         color: ${theme.background.lighten(5)()};
         border-color: ${color.darken(0.4)()};
-      `}
+      `
+      }
 
       > div {
         opacity: 1 !important;

packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons.js

@@ -4,7 +4,8 @@ import styled from 'styled-components';
 import ProjectIcon from 'react-icons/lib/go/file-code';
 import FunctionIcon from 'react-icons/lib/fa/code';
 import FolderIcon from 'react-icons/lib/md/keyboard-arrow-down';
-import DirectoryIcon from 'react-icons/lib/go/file-directory';
+import DirectoryIcon from 'react-icons/lib/md/folder';
+import DirectoryOpenIcon from 'react-icons/lib/md/folder-open';
 import NotSyncedIcon from 'react-icons/lib/go/primitive-dot';
 import CSSIcon from 'react-icons/lib/fa/css3';
 import HTMLIcon from 'react-icons/lib/fa/html5';
@@ -19,7 +20,9 @@ const NotSyncedIconWithMargin = styled(NotSyncedIcon)`
   color: ${props => props.theme.templateColor || props.theme.secondary};
 `;
 
-const RedIcon = styled.span`color: ${props => props.theme.red};`;
+const RedIcon = styled.span`
+  color: ${props => props.theme.red};
+`;
 
 const StyledFolderIcon = styled.span`
   svg {
@@ -31,7 +34,7 @@ const StyledFolderIcon = styled.span`
   }
 `;
 
-const getIcon = (type, error, root) => {
+const getIcon = (type, error, root, open) => {
   if (root) {
     return <ProjectIcon />;
   }
@@ -51,7 +54,7 @@ const getIcon = (type, error, root) => {
     case 'function':
       return <FunctionIcon />;
     case 'directory':
-      return <DirectoryIcon />;
+      return open ? <DirectoryOpenIcon /> : <DirectoryIcon />;
     case 'css':
       return <CSSIcon />;
     case 'ts':
@@ -85,12 +88,12 @@ export default function EntryIcon({
     <div style={{ display: 'inline-block', verticalAlign: 'middle' }}>
       {isNotSynced && <NotSyncedIconWithMargin />}
       {type === 'directory' &&
-      hasChildren && (
-        <StyledFolderIcon isOpen={isOpen} onClick={onOpen}>
-          <FolderIcon />
-        </StyledFolderIcon>
-      )}
-      {getIcon(type, error, root)}
+        hasChildren && (
+          <StyledFolderIcon isOpen={isOpen} onClick={onOpen}>
+            <FolderIcon />
+          </StyledFolderIcon>
+        )}
+      {getIcon(type, error, root, isOpen)}
     </div>
   );
 }

packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryTitleInput.js

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 
 const InputContainer = styled.div`
   display: inline-block;
-  overflow: visible;
+  overflow: auto;
   input {
     transition: 0.3s ease all;
     font-family: inherit;

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

@@ -47,8 +47,8 @@ const Container = styled.div`
   background-color: ${props => props.theme.background};
   height: 100%;
   width: 100%;
-  overflow: auto;
   overflow-y: overlay;
+  overflow-x: auto;
 
   > div {
     ${fadeIn(0)};

packages/app/src/embed/components/__snapshots__/File.test.js.snap

@@ -8,10 +8,10 @@ exports[`File renders 1`] = `
   display: -ms-flexbox;
   display: flex;
   font-size: 14px;
-  padding: 0.6rem;
+  padding: 0.4rem;
   padding-left: calc(1rem - 2px);
   padding-right: 3rem;
-  color: rgb(106,118,124);
+  color: rgba(255,255,255,0.5);
   text-decoration: none;
   font-weight: 400;
   min-width: 100px;
@@ -89,10 +89,10 @@ exports[`File renders alternative 1`] = `
   display: -ms-flexbox;
   display: flex;
   font-size: 14px;
-  padding: 0.6rem;
+  padding: 0.4rem;
   padding-left: calc(1rem - 2px);
   padding-right: 3rem;
-  color: rgb(106,118,124);
+  color: rgba(255,255,255,0.5);
   text-decoration: none;
   font-weight: 400;
   min-width: 100px;
@@ -170,10 +170,10 @@ exports[`File renders as active 1`] = `
   display: -ms-flexbox;
   display: flex;
   font-size: 14px;
-  padding: 0.6rem;
+  padding: 0.4rem;
   padding-left: calc(1rem - 2px);
   padding-right: 3rem;
-  color: rgb(106,118,124);
+  color: rgba(255,255,255,0.5);
   text-decoration: none;
   font-weight: 400;
   min-width: 100px;
@@ -248,10 +248,10 @@ exports[`File renders directory 1`] = `
   display: -ms-flexbox;
   display: flex;
   font-size: 14px;
-  padding: 0.6rem;
+  padding: 0.4rem;
   padding-left: calc(1rem - 2px);
   padding-right: 3rem;
-  color: rgb(106,118,124);
+  color: rgba(255,255,255,0.5);
   text-decoration: none;
   font-weight: 400;
   min-width: 100px;