Skip to content

Commit

Permalink
Resolve "Use Styled Components for CSS"
Browse files Browse the repository at this point in the history
  • Loading branch information
@hql287
hql287 committed Aug 27, 2017
1 parent a2500dc commit 637511c
Show file tree
Hide file tree
Showing 23 changed files with 662 additions and 572 deletions.
53 changes: 28 additions & 25 deletions app/components/contacts/Contact.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,21 @@ const _ = require('lodash');
const openDialog = require('../../renderers/dialog.js');
import sounds from '../../../libs/sounds.js';

// Custom Components
import Button from '../shared/Button';
import {
Card,
CardBody,
CardTitle,
CardSubtitle,
CardText,
CardButton,
} from '../shared/Card.jsx';


// Component
class Contact extends Component {

componentDidMount() {
const deleteContact = this.props.deleteContact;
ipc.on('confirmed-delete-contact', (event, index, contactId) => {
Expand Down Expand Up @@ -42,31 +55,21 @@ class Contact extends Component {
render = () => {
const contact = this.props.data;
return (
<div className="col-md-6">
<div className="contact card">
<div className="card-body">
<h4 className="card-title">{contact.fullname}</h4>
<h6 className="card-subtitle mb-2 text-muted">{contact.company}</h6>
<p className="card-text">
{contact.email}
<br/>
{contact.phone}
</p>

<a
href="#"
className="card-link">
Edit
</a>
<a
href="#"
className="card-link text-danger"
onClick={() => this.openDeleteDialog(contact._id)}>
Delete
</a>
</div>
</div>
</div>
<Card>
<CardBody>
<CardTitle>{contact.fullname}</CardTitle>
<CardSubtitle>{contact.company}</CardSubtitle>
<CardText>
{contact.email}
<br/>
{contact.phone}
</CardText>
<Button primary>Edit</Button>
<Button danger onClick={() => this.openDeleteDialog(contact._id)}>
Delete
</Button>
</CardBody>
</Card>
);
};
}
Expand Down
3 changes: 2 additions & 1 deletion app/components/form/Currency.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import * as ActionCreators from '../../actions/form.jsx';

// 3rd Party Libs
import _ from 'lodash';
import currencies from '../../../libs/currencies.json';

Expand Down Expand Up @@ -38,7 +39,7 @@ class Currency extends Component {
const {currency} = this.props.currentReceipt;

return (
<div className="currencyWrapper formSection">
<div className="formSection">
<label className="itemLabel">Currency</label>
<select
value={currency}
Expand Down
44 changes: 32 additions & 12 deletions app/components/form/Discount.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,31 @@ import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import * as ActionCreators from '../../actions/form.jsx';

// Styles
import styled from 'styled-components';
const DiscountWrapper = styled.div`
display: flex;
flex-direction: column;
margin-bottom: 30px;
`;

const DiscountContent = styled.div`
display: flex;
flex-direction: column;
`;

const DiscountAmount = styled.div`
flex: 1;
width: 50%;
`;

const DiscountType = styled.div`
flex: 1;
margin-top: 10px;
`;

// Component
class Discount extends Component {

// Update Discount Amount
updateAmount = event => {
const amount = parseInt(event.target.value, 10);
Expand All @@ -35,20 +57,18 @@ class Discount extends Component {
const amount = discount.amount ? discount.amount : 0;
const type = discount.type ? discount.type : 'percentage';
return (
<div className="discountWrapper formSection">
<label className="itemLabel ">Discount</label>

<div className="discountContent">
<div className="discountAmount">
<DiscountWrapper>
<label className="itemLabel">Discount</label>
<DiscountContent>
<DiscountAmount>
<input
type="number"
value={amount}
onChange={this.updateAmount.bind(this)}
placeholder="Amount"
/>
</div>

<div className="discountType">
</DiscountAmount>
<DiscountType>
<div className="radio">
<label>
<input
Expand All @@ -69,9 +89,9 @@ class Discount extends Component {
/>Flat Rate
</label>
</div>
</div>
</div>
</div>
</DiscountType>
</DiscountContent>
</DiscountWrapper>
);
};
}
Expand Down
15 changes: 8 additions & 7 deletions app/components/form/DueDate.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,11 @@ import * as ActionCreators from '../../actions/form.jsx';
import {SingleDatePicker} from 'react-dates';
import moment from 'moment';

const clearDateBtn = () =>
<div>
<a href="#">Clear</a>
</div>;
// Styles
import styled from 'styled-components';
const DueDateContent = styled.div`
display: flex;
`;

// Component
class DueDate extends Component {
Expand Down Expand Up @@ -44,9 +45,9 @@ class DueDate extends Component {
const {dueDate} = this.props.currentInvoice;
const date = dueDate ? moment(dueDate) : null;
return (
<div className="dueDateWrapper formSection">
<div className="formSection">
<label className="itemLabel">Due Date</label>
<div className="dueDateContent">
<DueDateContent>
<SingleDatePicker
id="invoice-duedate"
placeholder="Select A Date"
Expand All @@ -63,7 +64,7 @@ class DueDate extends Component {
onClick={() => this.onDateChange(null)}>
<i className="ion-close-circled"></i>
</a>
</div>
</DueDateContent>
</div>
);
};
Expand Down
91 changes: 68 additions & 23 deletions app/components/form/ItemRow.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,55 @@
import React, {Component} from 'react';
import PropTypes from 'prop-types';

// Styles
import styled from 'styled-components';
const ItemDiv = styled.div`
position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 14px;
flex: 1;
& > div {
display: flex;
flex-direction: row;
margin-right: 10px;
&:last-child {
margin-right: 0px;
}
}
`;

const ItemDivInput = styled.input`
min-height: 36px;
border-radius: 4px;
padding: 0 10px;
font-size: 16px;
display: block;
width: 100%;
border: 1px solid #f2f3f4;
color: #3a3e42;
font-size: 14px;
`;

const ItemActions = styled.div`
display: flex !important;
align-items: center;
justify-content: center;
width: 40px;
margin: 0 !important;
margin-left: 10px;
`;

const ItemRemoveBtn = styled.a`
> i {
color: #ec476e;
}
`;

// Component
class ItemsRow extends Component {

componentWillMount = () => {
const {id, description, quantity, price, subtotal} = this.props.item;
this.setState({
Expand Down Expand Up @@ -39,11 +85,11 @@ class ItemsRow extends Component {
};

render = () => {
const { actions, hasHandler } = this.props;
const {actions, hasHandler} = this.props;
return (
<div className="itemDiv">
<div className="itemDescription">
<input
<ItemDiv>
<div className="flex2">
<ItemDivInput
name="description"
type="text"
value={this.state.description}
Expand All @@ -52,8 +98,8 @@ class ItemsRow extends Component {
/>
</div>

<div className="itemPrice">
<input
<div className="flex1">
<ItemDivInput
name="price"
type="number"
value={this.state.price}
Expand All @@ -62,8 +108,8 @@ class ItemsRow extends Component {
/>
</div>

<div className="itemQuantity">
<input
<div className="flex1">
<ItemDivInput
name="quantity"
type="number"
value={this.state.quantity}
Expand All @@ -72,29 +118,28 @@ class ItemsRow extends Component {
/>
</div>

{ (actions||hasHandler) &&
<div className="itemActions">
{ actions &&
<a
{(actions || hasHandler) &&
<ItemActions>
{actions &&
<ItemRemoveBtn
href="#"
className="itemRemoveBtn"
onClick={() => this.props.removeRow(this.state.id)}>
<i className="ion-close-circled" />
</a>}
</div>}
</div>
</ItemRemoveBtn>}
</ItemActions>}
</ItemDiv>
);
};
}

ItemsRow.propTypes = {
item: PropTypes.object.isRequired,
index: PropTypes.number.isRequired,
item: PropTypes.object.isRequired,
index: PropTypes.number.isRequired,
hasHandler: PropTypes.bool.isRequired,
actions: PropTypes.bool.isRequired,
updateRow: PropTypes.func.isRequired,
removeRow: PropTypes.func.isRequired,
moveRow: PropTypes.func.isRequired,
actions: PropTypes.bool.isRequired,
updateRow: PropTypes.func.isRequired,
removeRow: PropTypes.func.isRequired,
moveRow: PropTypes.func.isRequired,
};

export default ItemsRow;
Loading

0 comments on commit 637511c

Please sign in to comment.