updated styles

emaildano · Feb 22, 2018 · d653d42 · d653d42
1 parent a5832fb
commit d653d42
Show file tree

Hide file tree

Showing 20 changed files with 1,422 additions and 544 deletions.
diff --git a/build/asset-manifest.json b/build/asset-manifest.json
diff --git a/build/index.html b/build/index.html
diff --git a/build/service-worker.js b/build/service-worker.js
diff --git a/build/static/css/main.33c75c77.css b/build/static/css/main.33c75c77.css
diff --git a/build/static/css/main.33c75c77.css.map b/build/static/css/main.33c75c77.css.map
diff --git a/build/static/js/main.839c5137.js b/build/static/js/main.839c5137.js
diff --git a/build/static/js/main.839c5137.js.map b/build/static/js/main.839c5137.js.map
diff --git a/src/App.js b/src/App.js
@@ -1,23 +1,10 @@
 import React, { Component } from 'react';
-import {
-  Navbar,
-  NavItem,
-  Nav,
-  MenuItem,
-  NavDropdown,
-  Tooltip,
-  ButtonToolbar,
-  OverlayTrigger,
-  Button,
-  Grid,
-  Row,
-  Col,
-  PageHeader,
-} from 'react-bootstrap';
 
 import Indicators from './components/indicators';
-import Navbars from './components/navbars';
 import Panels from './components/panels';
+import Buttons from './components/buttons';
+import Modals from './components/modals';
+import Forms from './components/forms';
 
 class App extends Component {
 
@@ -27,16 +14,9 @@ class App extends Component {
       <div className="App">
         <Indicators />
         <Panels />
-        <Grid>
-          <Row>
-            <Col>
-              <PageHeader>
-                Navbar
-              </PageHeader>
-              <Navbars />
-            </Col>
-          </Row>
-        </Grid>
+        <Buttons />
+        <Modals />
+        <Forms />
       </div>
     );
   }

diff --git a/src/components/buttons.jsx b/src/components/buttons.jsx
@@ -0,0 +1,58 @@
+import React, {Component} from 'react';
+import {
+  Button,
+  ButtonToolbar,
+  PageHeader,
+  Grid,
+  Row,
+  Col
+} from 'react-bootstrap';
+
+class Buttons extends Component {
+
+  render() {
+
+    return (<div>
+      <div className="_gradient-purple section-padding">
+        <Grid>
+          <PageHeader className="white">
+            Buttons <small>Inverse</small>
+          </PageHeader>
+          <Row>
+            <Col sm={12}>
+              <ButtonToolbar>
+                <Button>Default</Button>
+                <Button className="btn-outline">Default Outline</Button>
+                <Button bsStyle="primary">Primary</Button>
+                <Button bsStyle="info">Info</Button>
+                <Button bsStyle="warning">Warning</Button>
+                <Button bsStyle="danger">Danger</Button>
+              </ButtonToolbar>
+            </Col>
+          </Row>
+        </Grid>
+      </div>
+      <Grid>
+        <PageHeader>
+          Buttons
+        </PageHeader>
+        <Row>
+          <Col sm={12}>
+            <ButtonToolbar>
+              <Button>Default</Button>
+              <Button className="btn-outline-success">Default Outline</Button>
+              <Button className="btn-outline-primary">Primary Outline</Button>
+              <Button bsStyle="success">Success</Button>
+              <Button bsStyle="warning">Warning</Button>
+              <Button bsStyle="danger">Danger</Button>
+              <Button bsStyle="link">Link</Button>
+            </ButtonToolbar>
+          </Col>
+        </Row>
+      </Grid>
+      <div className="section-padding"></div>
+    </div>)
+  }
+}
+
+export default Buttons;
diff --git a/src/components/forms.jsx b/src/components/forms.jsx
@@ -0,0 +1,128 @@
+import React, {Component} from 'react';
+import {
+  Panel,
+  PageHeader,
+  Col,
+  Grid,
+  Row,
+  FormGroup,
+  Checkbox,
+  FormControl,
+  Radio,
+  ControlLabel,
+  Button,
+  HelpBlock
+} from 'react-bootstrap';
+
+class Forms extends Component {
+
+  render() {
+
+    function FieldGroup({ id, label, help, ...props }) {
+      return (
+        <FormGroup controlId={id}>
+          <ControlLabel>{label}</ControlLabel>
+          <FormControl {...props} />
+          {help && <HelpBlock>{help}</HelpBlock>}
+        </FormGroup>
+      );
+    }
+
+    const formInstance = (
+      <form>
+        <FieldGroup
+          id="formControlsText"
+          type="text"
+          label="Text"
+          placeholder="Enter text"
+        />
+        <FieldGroup
+          id="formControlsEmail"
+          type="email"
+          label="Email address"
+          placeholder="Enter email"
+        />
+        <FieldGroup id="formControlsPassword" label="Password" type="password" />
+        <FieldGroup
+          id="formControlsFile"
+          type="file"
+          label="File"
+          help="Example block-level help text here."
+        />
+
+        <Checkbox checked readOnly>
+          Checkbox
+        </Checkbox>
+        <Radio checked readOnly>
+          Radio
+        </Radio>
+
+        <FormGroup>
+          <Checkbox inline>1</Checkbox> <Checkbox inline>2</Checkbox>{' '}
+          <Checkbox inline>3</Checkbox>
+        </FormGroup>
+        <FormGroup>
+          <Radio name="radioGroup" inline>
+            1
+          </Radio>{' '}
+          <Radio name="radioGroup" inline>
+            2
+          </Radio>{' '}
+          <Radio name="radioGroup" inline>
+            3
+          </Radio>
+        </FormGroup>
+
+        <FormGroup controlId="formControlsSelect">
+          <ControlLabel>Select</ControlLabel>
+          <FormControl componentClass="select" placeholder="select">
+            <option value="select">select</option>
+            <option value="other">...</option>
+          </FormControl>
+        </FormGroup>
+        <FormGroup controlId="formControlsSelectMultiple">
+          <ControlLabel>Multiple select</ControlLabel>
+          <FormControl componentClass="select" multiple>
+            <option value="select">select (multiple)</option>
+            <option value="other">...</option>
+          </FormControl>
+        </FormGroup>
+
+        <FormGroup controlId="formControlsTextarea">
+          <ControlLabel>Textarea</ControlLabel>
+          <FormControl componentClass="textarea" placeholder="textarea" />
+        </FormGroup>
+
+        <Button type="submit">Submit</Button>
+      </form>
+    );
+
+    return (<div>
+      <div className="_gradient-purple section-padding">
+        <Grid>
+          <PageHeader className="white">
+            Forms <small>Inverse</small>
+          </PageHeader>
+          <Row className="white">
+            <Col sm={12}>
+              {formInstance}
+            </Col>
+          </Row>
+        </Grid>
+      </div>
+      <Grid>
+        <PageHeader>
+          Forms
+        </PageHeader>
+        <Row>
+          <Col sm={12}>
+            {formInstance}
+          </Col>
+        </Row>
+      </Grid>
+      <div className="section-padding"></div>
+    </div>);
+  }
+}
+
+export default Forms;