auto scroll aside

Author: iamvijaydev

.babelrc

@@ -15,7 +15,13 @@
   "plugins": [
     "react-hot-loader/babel",
     "@babel/plugin-syntax-dynamic-import",
-    "@babel/plugin-proposal-class-properties"
+    "@babel/plugin-proposal-class-properties",
+    [
+      "babel-plugin-styled-components",
+      {
+        "displayName": true
+      }
+    ]
   ],
   "env": {
     "test": {

TODO.md

@@ -6,8 +6,7 @@
 - [*] Add Rematch the Redux framework
 - [*] Add Redux dev tools
 - [*] Add Prettier
-- [ ] Add a new section for layouts
-- [ ] Proper demo components with styles that can be removed quickly
+- [*] Proper demo components with styles that can be removed quickly
 - [ ] Create a protected route component
 - [ ] Add new component for showing the notifications
 - [ ] Add table component that can recive data like these `<Table header={object[]} body={any[][]} minWidth={number} />`

config/theme/fonts.js

@@ -1,7 +1,7 @@
 const fonts = {
-  sans: '\'Open Sans\', sans-serif',
-  serif: '\'Slabo 27px\', serif',
-  mono: '\'Roboto Mono\', monospace',
+  sans: '\'PT Sans\', sans-serif',
+  serif: '\'PT Serif\', serif',
+  mono: 'monospace',
   bold: 700,
   medium: 400,
   light: 100,

package.json

@@ -47,6 +47,7 @@
     "babel-loader": "^8.0.6",
     "babel-plugin-dynamic-import-node": "^1.2.0",
     "babel-plugin-import-inspector": "^2.0.0",
+    "babel-plugin-styled-components": "^1.10.6",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",

src/App/AppGlobalStyles/index.js

@@ -48,6 +48,15 @@ const GlobalStyles = ({ theme }) => {
         margin: 0;
       }
 
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        font-family: ${theme.secondaryFont}
+      }
+
       ::-webkit-input-placeholder {
         color: ${theme.colors.gray400};
       }

src/App/DemoToBeDeleted/components/DemoHeader/index.js

@@ -7,7 +7,7 @@ const DemoHeader = () => (
   <Styled>
     <Styled.Heading>React Base Code</Styled.Heading>
     <div>
-      <Styled.Link href="https://github.com/iamvijaydev/react-base-code">
+      <Styled.Link target="_blank" href="https://github.com/iamvijaydev/react-base-code">
         Github
       </Styled.Link>
     </div>

src/App/DemoToBeDeleted/components/DemoHeader/styled.js

@@ -2,23 +2,24 @@ import styled from 'styled-components';
 
 const Styled = styled.header`
   background: ${props => props.theme.colors.red500};
-  padding: 2rem 1rem;
+  padding: 2rem;
 `;
 
 const Heading = styled.h1`
-  color: ${props => props.theme.colors.white}
+  color: ${props => props.theme.colors.white};
+  margin: 0 0 2rem 0;
 `;
 
 const Link = styled.a`
-  color: ${props => props.theme.colors.white}
+  color: ${props => props.theme.colors.white};
 
   &:visited {
-    color: ${props => props.theme.colors.white}
+    color: ${props => props.theme.colors.white};
   }
 
   &:active,
   &:hover {
-    color: ${props => props.theme.colors.white}
+    color: ${props => props.theme.colors.white};
   }
 `;
 

src/App/DemoToBeDeleted/styled.js

@@ -6,23 +6,31 @@ const Styled = styled.aside`
   top: 0;
   bottom: 0;
   width: 30rem;
-  background: ${props => props.theme.colors.gray100};
+  background-color: ${props => props.theme.colors.gray100};
+  display: flex;
+  flex-direction: column;
 `;
 
 const List = styled.ul`
   margin: 0;
   padding: 0;
   display: block;
+  padding: 1rem;
+  height: 74px;
+  height: calc(100% - 112px);
+  overflow: auto;
 `;
 
 export const ListItem = styled.li`
-  padding: 1rem 2rem;
-  border-bottom: ${props => '1px solid' + props.theme.colors.gray300};
+  padding: 1rem;
+  background-color: ${props => props.theme.colors.gray300};
   color: ${props => props.theme.colors.gray900};
 `;
 
 export const ListSubItem = styled(ListItem)`
-  padding-left: 4rem;
+  background-color: ${props => props.theme.colors.gray100};
+  border-bottom: ${props => '1px solid' + props.theme.colors.gray300};
+  padding: 1.5rem 1rem 1.5rem 3rem;
 `;
 
 Styled.List = List;

src/components/Modal/styled.js

@@ -27,7 +27,7 @@ const ModalWrap = styled(Base)`
 const Modal = styled.div`
   margin: 3rem;
   background: ${props => props.theme.colors.white};
-  color: ${props => props.theme.colors.gray400};
+  color: ${props => props.theme.colors.gray900};
   border-radius: 4px;
   padding: 3rem 1rem;
   position: relative;

src/index.html

@@ -6,7 +6,7 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>React base code</title>
     <style data-styled-components="true"></style>
-    <link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto+Mono|Slabo+27px" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700|PT+Serif:700&display=swap" rel="stylesheet">
 </head>
 <body>
     <div id="root"></div>

yarn.lock

@@ -1707,7 +1707,7 @@ babel-plugin-jest-hoist@^24.6.0:
   dependencies:
     "@types/babel__traverse" "^7.0.6"
 
-"babel-plugin-styled-components@>= 1":
+"babel-plugin-styled-components@>= 1", babel-plugin-styled-components@^1.10.6:
   version "1.10.6"
   resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.6.tgz#f8782953751115faf09a9f92431436912c34006b"
   integrity sha512-gyQj/Zf1kQti66100PhrCRjI5ldjaze9O0M3emXRPAN80Zsf8+e1thpTpaXJXVHXtaM4/+dJEgZHyS9Its+8SA==