Refactor inline styles to css classes. Remove radium. (decred#654)

matheusd · Sep 11, 2017 · c3a15af · c3a15af
1 parent 7dfbfda
commit c3a15af
Show file tree

Hide file tree

Showing 122 changed files with 2,120 additions and 2,188 deletions.
diff --git a/app/app.html b/app/app.html
@@ -2,7 +2,8 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <link rel="stylesheet" href="./components/react-select.global.css">
+    <link rel="stylesheet" href="./style/Global.less">
+    <link rel="stylesheet" href="./style/ReactSelectGlobal.less">
     <title>Decrediton</title>
     <script>
       (function() {
@@ -15,7 +16,7 @@
       }());
     </script>
   </head>
-  <body style="font-family: 'Source Sans Pro', sans-serif;color: #333;font-size: 14px;line-height: 20px;font-weight: 400;margin: 0px;min-height: 100%;background-color: #FFF;box-sizing: border-box;">
+  <body class="decrediton">
     <div id="root"></div>
     <script>
       {

diff --git a/app/components/Balance.js b/app/components/Balance.js
@@ -1,27 +1,14 @@
 // @flow
-import Radium from "radium";
 import React from "react";
 import { connect } from "react-redux";
+import "../style/Balance.less";
 
 function mapStateToProps(state) {
   return {
     currentSettings: state.settings.currentSettings,
   };
 }
 
-var styles = {
-  base: {
-    fontSize: "1em",
-    fontFamily: "Inconsolata, monospace",
-  },
-  small: {
-    fontSize: "0.8em",
-  },
-
-  block: {
-    display: "block",
-  },
-};
 
 class Balance extends React.Component {
   render() {
@@ -35,25 +22,25 @@ class Balance extends React.Component {
       }
       return (
         <span
-        style={styles.base}
+        className="balance-base"
         onClick={this.props.onClick}
         >
           {numberFormatPart[0]}.{numberFormatPart[1].toString().slice(0,2)}
-          <span style={styles.small}>{numberFormatPart[1].toString().slice(2)}</span>
-          <span style={styles.small}> DCR</span>
+          <span className="balance-small">{numberFormatPart[1].toString().slice(2)}</span>
+          <span className="balance-small"> DCR</span>
         </span>
       );
     } else if (currentSettings.currencyDisplay === "atoms") {
       return (
         <span
-        style={styles.base}
+        className="balance-base"
         onClick={this.props.onClick}
         >
           {this.props.amount}
-          <span style={styles.small}> atoms</span>
+          <span className="balance-small"> atoms</span>
         </span>
       );
     }
   }
 }
-export default connect(mapStateToProps)(Radium(Balance));
+export default connect(mapStateToProps)(Balance);
diff --git a/app/components/CreateWalletForm/ConfirmSeed/SeedEntry.js b/app/components/CreateWalletForm/ConfirmSeed/SeedEntry.js
@@ -1,7 +1,7 @@
 import React from "react";
 import { autobind } from "core-decorators";
 import Select from "react-select";
-import "../../react-select.global.css";
+import "../../../style/ReactSelectGlobal.less";
 import { SEED_LENGTH, SEED_WORDS } from "../../../wallet/seed";
 
 const SEED_WORD_OPTIONS = SEED_WORDS.map(name => ({ name }));

diff --git a/app/components/CreateWalletForm/CreateWallet.js b/app/components/CreateWalletForm/CreateWallet.js
@@ -1,7 +1,7 @@
 // @flow
 import React from "react";
 import KeyBlueButton from "../KeyBlueButton";
-import "../react-select.global.css";
+import "../../style/ReactSelectGlobal.less";
 import "../../style/CreateWalletForm.less";
 
 const CreateWallet = ({

diff --git a/app/components/Header/Header.js b/app/components/Header/Header.js
@@ -3,58 +3,16 @@ import React from "react";
 import Snackbar from "material-ui/Snackbar";
 import Notification from "./Notification";
 import "../../style/Header.less";
-import WalletGray from "../icons/wallet-gray.svg";
-import TicketSmall from "../icons/tickets-ticket.svg";
-import PlusBig from "../icons/plus-big.svg";
-import MinusBig from "../icons/minus-big.svg";
+import "../../style/Snackbar.less";
 
-const snackbarStyles = {
-  stake: {
-    height: "78px",
-    padding: "0px 50px",
-    backgroundColor: "rgba(12, 30, 62, 0.5)",
-    backgroundImage: `url(${TicketSmall})`,
-    backgroundPosition: "15px 50%",
-    backgroundSize: "20px",
-    backgroundRepeat: "no-repeat",
-  },
-  receive: {
-    height: "78px",
-    padding: "0px 50px",
-    backgroundColor: "rgba(12, 30, 62, 0.5)",
-    backgroundImage: `url(${PlusBig})`,
-    backgroundPosition: "15px 50%",
-    backgroundSize: "20px",
-    backgroundRepeat: "no-repeat",
-  },
-  send: {
-    height: "78px",
-    padding: "0px 50px",
-    backgroundColor: "rgba(12, 30, 62, 0.5)",
-    backgroundImage: `url(${MinusBig})`,
-    backgroundPosition: "15px 50%",
-    backgroundSize: "20px",
-    backgroundRepeat: "no-repeat",
-  },
-  transfer: {
-    height: "78px",
-    padding: "0px 50px",
-    backgroundColor: "rgba(12, 30, 62, 0.5)",
-    backgroundImage: `url(${WalletGray})`,
-    backgroundPosition: "15px 50%",
-    backgroundSize: "20px",
-    backgroundRepeat: "no-repeat",
-  }
-};
-
-const snackbarBodyStyle = ({ type }) => ({
-  "Ticket": snackbarStyles.stake,
-  "Vote": snackbarStyles.stake,
-  "Revoke": snackbarStyles.stake,
-  "Receive": snackbarStyles.receive,
-  "Send": snackbarStyles.send,
-  "Transfer": snackbarStyles.transfer
-})[type] || {};
+const snackbarClasses = ({ type }) => ({
+  "Ticket": "snackbar snackbar-stake",
+  "Vote": "snackbar snackbar-stake",
+  "Revoke": "snackbar snackbar-stake",
+  "Receive": "snackbar snackbar-receive",
+  "Send": "snackbar snackbar-send",
+  "Transfer": "snackbar snackbar-transfer"
+})[type] || "snackbar ";
 
 const Header = ({
   headerTop,
@@ -66,11 +24,11 @@ const Header = ({
 }) => (
   <div>
     <Snackbar
-      className="snackbar"
+      className={snackbarClasses(message || "")}
       open={!!message}
       message={message ? <Notification {...message} /> : ""}
       autoHideDuration={4000}
-      bodyStyle={snackbarBodyStyle(message || {})}
+      bodyStyle={{backgroundColor: "inherited"}}
       onRequestClose={reason => reason !== "clickaway" ? onDismissMessage() : null}
     />
     <div className="header">