feat: #72 menu items redesign

wilsson · Feb 1, 2020 · 0f2ab60 · 0f2ab60
1 parent 79f40a7
commit 0f2ab60
Show file tree

Hide file tree

Showing 8 changed files with 19 additions and 8 deletions.
diff --git a/examples/basic/papyrum.config.js b/examples/basic/papyrum.config.js
@@ -9,5 +9,4 @@ export default {
     'Components'
   ],
   template: './static/index.html',
-  disableShortcuts: false
 };
diff --git a/packages/papyrum-cli/src/components/Panel.tsx b/packages/papyrum-cli/src/components/Panel.tsx
@@ -13,7 +13,7 @@ import {
   BoxProvider,
 } from './styled';
 
-const shortcuts = {
+const shorcodes = {
   Components,
   Playground,
   Fonts,
@@ -55,10 +55,10 @@ const Panel = ({ componentsAsync }) => {
     ...providerComponents
   };
 
-  if(!db.config.disableShortcuts) {
+  if(db.config.shorcodes) {
     map = {
       ...map,
-      ...shortcuts
+      ...shorcodes
     };
   }
 

diff --git a/packages/papyrum-core/src/utils/fs.ts b/packages/papyrum-core/src/utils/fs.ts
@@ -9,6 +9,10 @@ export const tplCompile = (filepath: string, opts = {}) => {
   return compile(file, opts);
 };
 
+const configDefault = {
+  shorcodes: true
+};
+
 export const loadFileConfig = (nameConfig: string) => {
   require('@babel/register')({
     cache: false,
@@ -22,7 +26,11 @@ export const loadFileConfig = (nameConfig: string) => {
       const isJS = path.extname(file) === '.js';
       if (isJS) {
         const required = require(file);
-        return required.default || required;
+        const config = required.default || required;
+        return {
+          ...configDefault,
+          ...config
+        };
       } else {
         const json = fsExtra.readJsonSync(file, { throws: false }) || {};
         return json;

diff --git a/packages/papyrum-ui/src/components/Header/styled.ts b/packages/papyrum-ui/src/components/Header/styled.ts
@@ -4,7 +4,7 @@ import { AStyled } from '../A';
 import { Menu } from 'react-feather';
 
 export const Wrapper = styled.div`
-  background-color: ${props => props.theme.colors.grayLight};
+  background-color: ${props => props.theme.colors.backgroundHeader};
   border-bottom: 1px solid ${props => props.theme.colors.gray};
   color: ${props => props.theme.colors.darkGray};
   font-size: 20px;

diff --git a/packages/papyrum-ui/src/components/Menu/styled.ts b/packages/papyrum-ui/src/components/Menu/styled.ts
@@ -10,6 +10,8 @@ const Item = styled.li`
   list-style: none;
   padding-left: 24px;
   line-height: 32px;
+  margin: 0 15px 5px;
+  border-radius: 5px;
   &:hover {
     background-color: ${(props) => !props.active && 'rgba(0,0,0,0.1)'};
   }
@@ -39,7 +41,7 @@ export const SubListItemStyled = styled(Item)`
   font-size: 14px;
   font-weight: 400;
   a {
-    padding-left: 24px;
+    padding-left: 20px;
   }
 `;
 

diff --git a/packages/papyrum-ui/src/components/Sidebar/styled.tsx b/packages/papyrum-ui/src/components/Sidebar/styled.tsx
@@ -8,7 +8,7 @@ export const CustomResizable = styled(Resizable)`
 `;
 
 export const Wrapper = styled.div`
-  background-color: ${props => props.theme.colors.grayLight};
+  background-color: ${props => props.theme.colors.backgroundHeader};
   border-right: 1px solid ${props => props.theme.colors.gray};
   color: ${props => props.theme.colors.text};
   display: flex;

diff --git a/packages/papyrum-ui/src/themes/dark.ts b/packages/papyrum-ui/src/themes/dark.ts
@@ -1,5 +1,6 @@
 export default {
   colors: {
+    backgroundHeader: '#181A1B',
     backgroundArea: '#141414',
     grayLight: '#181A1B',
     gray: '#1E2325',

diff --git a/packages/papyrum-ui/src/themes/light.ts b/packages/papyrum-ui/src/themes/light.ts
@@ -1,5 +1,6 @@
 export default {
   colors: {
+    backgroundHeader: '#FFFFFF',
     backgroundArea: '#FFF',
     grayLight: '#F5F7F9',
     gray: '#E6ECF1',