Refactor to improve css maintainability, moving from js objects to pl…

…ain css
raelmax · Nov 17, 2016 · 3904274 · 3904274
1 parent 9448cf8
commit 3904274
Show file tree

Hide file tree

Showing 9 changed files with 106 additions and 145 deletions.
diff --git a/README.md b/README.md
@@ -25,29 +25,3 @@ It correctly bundles React in production mode and optimizes the build for the be
 
 The build is minified and the filenames include the hashes.<br>
 Your app is ready to be deployed!
-
-# Components
-
-<ShoppingLists>
-  <AddForm />
-  <List>
-    <ListItem />
-    ...
-  </List>
-</ShoppingLists>
-
-<ItemLists>
-  <AddItemFormAttributes />
-  <AddForm />
-  <List>
-    <ListItem />
-    ...
-  </List>
-  <Result />
-</ItemLists>
-
-<Provider>
-  <Mercadin>
-    <ShoppingLists /> || <ItemLists />
-  </Mercadin>
-</Provider>
diff --git a/src/app.css b/src/app.css
@@ -0,0 +1,86 @@
+.add-form-wrapper {
+  background: #4B698B;
+  padding: 10px;
+}
+.add-form-input {
+  padding: 5px 10px;
+  width: 100%;
+  color: #444;
+}
+
+.buy-item-form {
+  background-color: #D4DDE7;
+  border: 1px solid #133253;
+  margin: -75px 0 0 -125px;
+  position: absolute;
+  max-width: 250px;
+  height: 150px;
+  padding: 20px;
+  left: 50%;
+  top: 50%;
+}
+.buy-item-input {
+  border: 1px solid #f9f9f9;
+  margin-bottom: 2px;
+  text-align: right;
+  padding: 10px;
+  width: 100%;
+}
+.buy-item-button {
+  background-color: #2B4C6F;
+  border: none;
+  padding: 5px;
+  color: #fff;
+  width: 50%;
+}
+.buy-item-button-cancel {
+  background-color: #A5B7CA;
+}
+
+.header {
+  background-color: #133253;
+  padding: 15px 10px;
+  position: relative;
+}
+.header-text {
+  text-transform: uppercase;
+  text-align: center;
+  font-size: 1em;
+  color: #fff;
+  margin: 0;
+}
+.header-back-button {
+  text-decoration: none;
+  position: absolute;
+  line-height: 40px;
+  font-size: 50px;
+  color: #fff;
+  top: 0;
+}
+
+.list-default {
+  padding: 15px 10px;
+  margin: 0 0 40px 0;
+  list-style: none;
+}
+.list-default-item {
+  border-bottom: 1px solid #D4DDE7;
+  padding: 10px 5px;
+  cursor: pointer;
+  color: #2B4C6F;
+}
+.list-default-item-bought {
+  text-decoration: line-through;
+}
+
+.total-info {
+  background-color: #133253;
+  text-align: right;
+  position: fixed;
+  padding: 10px;
+  height: 40px;
+  color: #fff;
+  width: 100%;
+  bottom: 0;
+  margin: 0;
+}
diff --git a/src/components/AddForm.jsx b/src/components/AddForm.jsx
@@ -1,24 +1,14 @@
 import React, { PropTypes } from 'react';
 
-const wrapperStyles = {
-  backgroundColor: '#4B698B',
-  padding: 10,
-}
-const inputStyles = {
-  padding: '5px 10px',
-  width: '100%',
-  color: '#444'
-}
-
 const AddForm = ({ onAddFormSubmit, placeholderText }) => {
   let input;
   return (
-    <div style={wrapperStyles}>
+    <div className="add-form-wrapper">
       <form onSubmit={e => {
           e.preventDefault();
           onAddFormSubmit(input);
         }}>
-        <input ref={node => {input = node}} type={"text"} placeholder={placeholderText} style={inputStyles} />
+        <input className="add-form-input" ref={node => {input = node}} type={"text"} placeholder={placeholderText} />
       </form>
     </div>
   )

diff --git a/src/components/BuyItemForm.jsx b/src/components/BuyItemForm.jsx
@@ -1,53 +1,20 @@
 import React, { PropTypes } from 'react';
 
-const formStyles = {
-  position: 'absolute',
-  backgroundColor: '#D4DDE7',
-  border: '1px solid #133253',
-  margin: '-75px 0 0 -125px',
-  maxWidth: '250px',
-  height: '150px',
-  padding: '20px',
-  left: '50%',
-  top: '50%',
-}
-
-const inputStyles = {
-  border: '1px solid #f9f9f9',
-  padding: '10px',
-  width: '100%',
-  textAlign: 'right',
-  marginBottom: '2px'
-}
-
-let buttonStyles = {
-  backgroundColor: '#2B4C6F',
-  border: 'none',
-  padding: '5px',
-  color: '#fff',
-  width: '50%',
-}
-
-let cancelButtonStyles = Object.assign({}, buttonStyles, {
-  backgroundColor: '#A5B7CA'
-})
-
-
 const BuyItemForm = ({ openDialog, listId, id, onCloseDialog, onSubmit }) => {
   let price;
   let quantity;
 
   return (
     <div>
       {openDialog ? (
-      <form style={formStyles} onSubmit={e => {
+      <form className="buy-item-form" onSubmit={e => {
           e.preventDefault();
           onSubmit(listId, id, quantity.value, price.value);
         }}>
-        <input ref={node => {quantity = node}} type={"number"} placeholder={"quantidade"} style={inputStyles} />
-        <input ref={node => {price = node}} type={"number"} step={"any"} min={0} placeholder={"preço"} style={inputStyles} />
-        <button type={"submit"} style={buttonStyles}>comprar</button>
-        <button type={"button"} onClick={onCloseDialog} style={cancelButtonStyles}>cancelar</button>
+        <input className="buy-item-input" ref={node => {quantity = node}} type={"number"} placeholder={"quantidade"} />
+        <input className="buy-item-input" ref={node => {price = node}} type={"number"} step={"any"} min={0} placeholder={"preço"} />
+        <button className="buy-item-button" type={"submit"}>comprar</button>
+        <button className="buy-item-button buy-item-button-cancel" type={"button"} onClick={onCloseDialog}>cancelar</button>
       </form> ) : null }
     </div>
   )

diff --git a/src/components/Header.js b/src/components/Header.js
@@ -1,34 +1,11 @@
 import React from 'react';
 import { Link } from 'react-router';
 
-const headerStyles = {
-  backgroundColor: '#133253',
-  padding: '15px 10px',
-  position: 'relative'
-}
-
-const textStyles = {
-  textTransform: 'uppercase',
-  textAlign: 'center',
-  fontSize: '1em',
-  color: '#fff',
-  margin: 0,
-}
-
-const linkStyles = {
-  textDecoration: 'none',
-  position: 'absolute',
-  lineHeight: '40px',
-  fontSize: '50px',
-  color: '#fff',
-  top: 0
-}
-
 const Header = ({text, backButton}) => {
   return (
-    <header style={headerStyles}>
-      {backButton ? <Link to={'/'} style={linkStyles}>&lsaquo;</Link> : null}
-      <h1 style={textStyles}>{text}</h1>
+    <header className="header">
+      {backButton ? <Link className="header-back-button" to={'/'}>&lsaquo;</Link> : null}
+      <h1 className="header-text">{text}</h1>
     </header>
   )
 }

diff --git a/src/components/List.jsx b/src/components/List.jsx
@@ -1,14 +1,8 @@
 import React, { PropTypes } from 'react';
 import ListItem from './ListItem';
 
-const listStyles = {
-  padding: '15px 10px',
-  listStyle: 'none',
-  margin: '0 0 40px 0',
-}
-
 const List = ({ listItems, listId, onListItemClick }) => (
-  <ul style={listStyles}>
+  <ul className="list-default">
     {listItems.map(listItem =>
       <ListItem
         key={listItem.id}

diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx
@@ -1,27 +1,9 @@
 import React, { PropTypes } from 'react';
 
-const itemStyles = {
-  borderBottom: '1px solid #D4DDE7',
-  padding: '10px 5px',
-  color: '#2B4C6F',
-  cursor: 'pointer',
-}
-
-const ListItem = ({ onClick, text, id, bought }) => {
-  let styles;
-
-  if (bought) {
-    styles = Object.assign({}, itemStyles, {
-      textDecoration: 'line-through'
-    })
-  } else {
-    styles = itemStyles;
-  }
-
-  return (
-    <li onClick={onClick} style={styles}>{text}</li>
-  )
-}
+const ListItem = ({ onClick, text, id, bought }) => (
+  <li className={"list-default-item" + (bought ? " list-default-item-bought" : "")}
+    onClick={onClick}>{text}</li>
+)
 
 ListItem.propTypes = {
   onClick: PropTypes.func.isRequired,

diff --git a/src/components/Total.js b/src/components/Total.js
@@ -1,19 +1,7 @@
 import React from 'react';
 
-const totalStyles = {
-  backgroundColor: '#133253',
-  textAlign: 'right',
-  position: 'fixed',
-  padding: '10px',
-  color: '#fff',
-  width: '100%',
-  height: '40px',
-  bottom: 0,
-  margin: 0,
-}
-
 const Total = ({ total = 0 }) => (
-    <p style={totalStyles}>Total: R$ {total}</p>
+    <p className="total-info">Total: R$ {total}</p>
 )
 
 export default Total;
diff --git a/src/index.js b/src/index.js
@@ -2,8 +2,11 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { createStore, applyMiddleware } from 'redux';
 import { Provider } from 'react-redux';
-import { syncHistoryWithStore, routerMiddleware } from 'react-router-redux';
 import { Router, Route, hashHistory } from 'react-router';
+import { syncHistoryWithStore, routerMiddleware } from 'react-router-redux';
+
+import './app.css';
+
 import ShoppingList from './components/ShoppingList';
 import ShoppingListDetail from './components/ShoppingListDetail';
 import shoppingListApp from './reducers/Index';