bitshares#1580 Integrate bitshares-ui-style-guide

Author: gibbsfromncis

app/App.jsx

@@ -26,6 +26,7 @@ import Incognito from "./components/Layout/Incognito";
 import {isIncognito} from "feature_detect";
 import {updateGatewayBackers} from "common/gatewayUtils";
 import titleUtils from "common/titleUtils";
+import {BodyClassName} from "bitshares-ui-style-guide";
 import PropTypes from "prop-types";
 
 class App extends React.Component {
@@ -258,31 +259,33 @@ class App extends React.Component {
                 style={{backgroundColor: !this.state.theme ? "#2a2a2a" : null}}
                 className={this.state.theme}
             >
-                {walletMode && incognito && !incognitoWarningDismissed ? (
-                    <Incognito
-                        onClickIgnore={this._onIgnoreIncognitoWarning.bind(
-                            this
-                        )}
-                    />
-                ) : null}
-                <div id="content-wrapper">
-                    {content}
-                    <NotificationSystem
-                        ref="notificationSystem"
-                        allowHTML={true}
-                        style={{
-                            Containers: {
-                                DefaultStyle: {
-                                    width: "425px"
+                <BodyClassName className={this.state.theme}>
+                    {walletMode && incognito && !incognitoWarningDismissed ? (
+                        <Incognito
+                            onClickIgnore={this._onIgnoreIncognitoWarning.bind(
+                                this
+                            )}
+                        />
+                    ) : null}
+                    <div id="content-wrapper">
+                        {content}
+                        <NotificationSystem
+                            ref="notificationSystem"
+                            allowHTML={true}
+                            style={{
+                                Containers: {
+                                    DefaultStyle: {
+                                        width: "425px"
+                                    }
                                 }
-                            }
-                        }}
-                    />
-                    <TransactionConfirm />
-                    <BrowserNotifications />
-                    <WalletUnlockModal />
-                    <BrowserSupportModal ref="browser_modal" />
-                </div>
+                            }}
+                        />
+                        <TransactionConfirm />
+                        <BrowserNotifications />
+                        <WalletUnlockModal />
+                        <BrowserSupportModal ref="browser_modal" />
+                    </div>
+                </BodyClassName>
             </div>
         );
     }

app/assets/stylesheets/vendors/_all.scss

@@ -7,3 +7,4 @@
 @import "introjs-midnight-theme";
 @import "~react-datepicker2/dist/react-datepicker2.css";
 @import "~react-sticky-table/dist/react-sticky-table.css";
+@import "~bitshares-ui-style-guide/dist/styles/style.css";

package.json

@@ -132,6 +132,7 @@
         "alt-container": "^1.0.0",
         "alt-react": "git+https://github.com/bitshares/react.git",
         "bignumber.js": "^4.0.0",
+        "bitshares-ui-style-guide": "git+ssh://[email protected]/bitshares/bitshares-ui-style-guide.git",
         "bitsharesjs": "^1.7.6",
         "browser-locale": "^1.0.3",
         "classnames": "^2.2.1",