Update ContextMenu styles

Author: CompuIves

packages/app/src/app/components/ContextMenu/elements.js

@@ -4,20 +4,23 @@ import theme from 'common/theme';
 export const Container = styled.div`
   position: fixed;
 
-  font-size: 0.875rem;
-  background-color: ${() => theme.background2.lighten(0.2)()};
-  color: ${() => theme.background2.lighten(3)()};
+  font-size: 0.75rem;
+  background-color: ${() => theme.background4()};
+  color: rgba(255, 255, 255, 0.6);
   box-shadow: -1px 3px 4px rgba(0, 0, 0, 0.3);
   border-radius: 3px;
   z-index: 20;
   overflow: hidden;
 
   transform-origin: 0% 0%;
+  font-weight: 600;
 `;
 
 export const Item = styled.div`
-  transition: 0.3s ease all;
-  padding: 0.75rem 1rem;
+  transition: 0.2s ease all;
+  display: flex;
+  align-items: center;
+  padding: 0.6rem 1rem;
 
   border-bottom: 1px solid ${() => theme.background2()};
   border-left: 2px solid transparent;
@@ -26,7 +29,8 @@ export const Item = styled.div`
   min-width: 10rem;
 
   svg {
-    margin-right: 0.5rem;
+    margin-right: 0.75rem;
+    font-size: 0.75rem;
   }
 
   &:last-child {

packages/app/src/app/components/ContextMenu/index.js

@@ -63,18 +63,14 @@ class ContextMenu extends React.Component {
           >
             {show && (
               <Motion
-                defaultStyle={{ size: 0.75, opacity: 0.6 }}
-                style={{
-                  size: spring(1, { stiffness: 200, damping: 26 }),
-                  opacity: spring(1),
-                }}
+                defaultStyle={{ opacity: 0.6 }}
+                style={{ opacity: spring(1) }}
               >
-                {({ size, opacity }) => (
+                {({ opacity }) => (
                   <Container
                     style={{
                       left: x,
                       top: y,
-                      transform: `scale(${size}, ${size})`,
                       opacity,
                     }}
                   >

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

@@ -2,8 +2,8 @@ import * as React from 'react';
 import { DragSource } from 'react-dnd';
 import ContextMenu from 'app/components/ContextMenu';
 
-import FileIcon from 'react-icons/lib/fa/file';
-import FolderIcon from 'react-icons/lib/fa/folder';
+import AddFileIcon from 'react-icons/lib/md/insert-drive-file';
+import AddDirectoryIcon from 'react-icons/lib/md/create-new-folder';
 import EditIcon from 'react-icons/lib/go/pencil';
 import DeleteIcon from 'react-icons/lib/go/trashcan';
 import UploadFileIcon from 'react-icons/lib/md/file-upload';
@@ -95,14 +95,14 @@ class Entry extends React.PureComponent {
 
     const items = [
       onCreateModuleClick && {
-        title: 'New Module',
+        title: 'Create File',
         action: onCreateModuleClick,
-        icon: FileIcon,
+        icon: AddFileIcon,
       },
       onCreateDirectoryClick && {
-        title: 'New Directory',
+        title: 'Create Directory',
         action: onCreateDirectoryClick,
-        icon: FolderIcon,
+        icon: AddDirectoryIcon,
       },
       onUploadFileClick && {
         title: 'Upload File',