Merge pull request #8 from Codebrahma/CSS-Fixes

Css fixes

Author: Kameshwaran

docs/client/components/ComponentsPage/index.js

@@ -1,12 +1,14 @@
 import React from 'react';
 
 import CardReadme from '../../../../src/card/readMe.md';
+import ButtonReadme from '../../../../src/button/readMe.md';
 
 import styles from './styles.scss';
 
 const ComponentsPage = () => (
   <div className={styles.usage}>
     <div dangerouslySetInnerHTML={{ __html: CardReadme }} />
+    <div dangerouslySetInnerHTML={{ __html: ButtonReadme }} />
     <div style={{ height: '300px' }} />
   </div>
 );

docs/client/components/ComponentsPage/styles.scss

@@ -1,16 +1,22 @@
 :local(.usage) {
   overflow: scroll;
   height: 800px;
-  padding: 5%;
+  padding: 0 5%;
 
   table, td, th {
+    padding: 10px;
     border: 1px solid #d2d2d2;
     border-collapse: collapse;
   }
   td {
-    padding: 5px;
-    font-size: 12px;
+    font-size: 14px;
     height: 40px;
+
+    code {
+      color: #c7254e;
+      background-color: #f9f2f4;
+      border-radius: 4px;
+    }
   }
   .hljs {
     padding: 15px 0px;

docs/client/components/GettingStartedPage/index.js

@@ -5,9 +5,9 @@ import styles from './styles.scss';
 
 const GettingStartedPage = () => (
   <div className={styles.code}>
-    <div className="header">
-      GettingStarted Page
-    </div>
+    <h2 className="header">
+      Getting Started
+    </h2>
     <div className="sub-header">
       Installation
     </div>

docs/client/components/GettingStartedPage/styles.scss

@@ -1,17 +1,21 @@
 :local(.code) {
   width: 50%;
-  padding-bottom: 200px;
+  padding: 1px;
   margin: 0 auto;
+
   .header {
     font-size: 24px;
     font-weight: bold;
+    text-align: center;
   }
   .sub-header {
     font-size: 18px;
     font-weight: bold;
+    margin-bottom: 10px;
   }
+
   .js-code {
-    padding: 20px;
+    padding: 15px;
     background: #e2e2e2;
     margin-bottom: 20px;
     min-width: 300px;
@@ -20,5 +24,4 @@
   .empty-div {
     height: 200px;
   }
-  
 }

docs/client/components/PlaygroundPage/PlaygroundWithPreview/Preview.js

@@ -2,7 +2,8 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import { transform } from 'babel-standalone';
-import Card from '../../../../../src/Card';
+import Card from '../../../../../src/card';
+import Button from '../../../../../src/button';
 import theme from '../../../components/common/DefaultCode/theme.scss';
 import styles from './styles.scss';
 
@@ -75,6 +76,7 @@ class Preview extends React.Component {
   }
 
   render () {
+    console.log('theme ', theme);
     return (
       <div className={styles.preview}>
         <div ref="mount" />
@@ -89,7 +91,7 @@ Preview.propTypes = {
 };
 
 Preview.defaultProps = {
-  scope: { React, Card, theme },
+  scope: { React, Card, Button, theme },
 };
 
 export default Preview;

docs/client/components/PlaygroundPage/index.js

@@ -22,7 +22,6 @@ class PlaygroundPage extends React.Component {
   }
 
   handleClickComponent(activeComponent, defaultCode, activeDocs) {
-    console.log('activeDocs ', activeDocs);
     this.setState({
       activeComponent,
       defaultCode,

docs/client/components/common/DefaultCode/Button/index.js

@@ -0,0 +1,37 @@
+export const defaultCode =   `
+class Demo extends React.Component {
+  render() {
+    return (
+      <div>
+        <div>
+          <h4>Buttons with diffent styles</h4>
+          <Button>Default</Button>
+          <Button type="primary">Primary</Button>
+          <Button type="secondary">Secondary</Button>
+          <Button type="success">Success</Button>
+          <Button type="danger">Danger</Button>
+          <Button type="warning">Warning</Button>
+          <Button type="info">Info</Button>
+          <Button type="light">Light</Button>
+          <Button type="dark">Dark</Button>
+        </div>
+      
+        <div>
+          <h4>Buttons with diffent sizes</h4>
+          <Button type="primary" size="small">Small</Button>
+          <Button type="primary" size="medium">Medium</Button>
+          <Button type="primary" size="large">Large</Button>
+        </div>
+      
+        <div>
+          <h4>Buttons with Icon</h4>
+          <Button type="success" icon="done">Left Icon</Button>
+          <Button type="success" icon="done" iconAlignment="right">Right Icon</Button>
+        </div>
+      </div>
+    )
+  }
+}
+
+return <Demo />;
+`;

docs/client/components/common/DefaultCode/Button/style.scss

@@ -1,2 +1,3 @@
 
-export { defaultCode as CardDefaultCode } from './Card';
+export { defaultCode as CardDefaultCode } from './card';
+export { defaultCode as ButtonDefaultCode } from './button';

docs/client/components/common/DefaultCode/index.js

@@ -1 +1,2 @@
-@import './Card/style.scss';
+@import './Card/style.scss';
+@import './Button/style.scss';