PCD-1309 Fix/css refactor 2

src/DataModelGraph/DataModelGraph.jsx

@@ -1,9 +1,7 @@
 import React from 'react';
-
 import { createNodesAndEdges } from './utils';
 import SvgGraph from './SvgGraph';
-import ToggleButton from './ToggleButton';
-
+import './DataModelGraph.less';
 
 /**
  * Wraps SVG graph in a toggle button that toggles between 'full' and 'compact' view
@@ -36,15 +34,13 @@ class DataModelGraph extends React.Component {
 
     if (graph.nodes.length !== 0 && 'count' in graph.nodes[graph.nodes.length - 1]) {
       return (
-        <div style={{ position: 'relative' }}>
-          <ToggleButton>
-            <button
-              id="cd-dmg__toggle"
-              className="button-primary-white"
-              onClick={this.handleToggleClick}
-            >Toggle view
-            </button>
-          </ToggleButton>
+        <div className="data-model-graph">
+          <button
+            id="cd-dmg__toggle"
+            className="button-primary-white"
+            onClick={this.handleToggleClick}
+          >Toggle view
+          </button>
           <SvgGraph nodes={graph.nodes} edges={graph.edges} />
         </div>
       );

src/DataModelGraph/DataModelGraph.less

@@ -0,0 +1,3 @@
+.data-model-graph {
+  position: relative;
+}

src/Explorer/ExplorerComponent.jsx

@@ -5,6 +5,7 @@ import { computeLastPageSizes } from '../utils';
 import { GQLHelper } from '../gqlHelper';
 import getReduxStore from '../reduxStore';
 import { ReduxExplorerTabPanel, ReduxSideBar } from './ReduxExplorer';
+import './ExplorerComponent.less';
 
 const gqlHelper = GQLHelper.getGQLHelper();
 
@@ -146,12 +147,8 @@ class ExplorerComponent extends Component {
 
   render() {
     this.updateFilesMap();
-    const style = {
-      display: 'flex',
-      padding: '40px 0px',
-    };
     return (
-      <div style={style}>
+      <div className="explorer-component">
         <ReduxSideBar />
         <ReduxExplorerTabPanel />
       </div>

src/Explorer/ExplorerComponent.less

@@ -0,0 +1,5 @@
+.explorer-component {      
+  display: flex;
+  padding: 40px 0;
+  background-color: #ecebeb;
+}

src/Index/page.jsx

@@ -1,15 +1,10 @@
 import React from 'react';
-import styled from 'styled-components';
 import Introduction from '../components/Introduction';
 import { ReduxIndexButtonBar, ReduxIndexBarChart } from './reduxer';
 import dictIcons from '../img/icons';
 import { components } from '../params';
 import getProjectsList from './relayer';
-
-const IndexTop = styled.div`
-  width: 100%;
-  display: inline-flex;
-`;
+import './page.less';
 
 class IndexPageComponent extends React.Component {
   constructor(props) {
@@ -19,11 +14,11 @@ class IndexPageComponent extends React.Component {
 
   render() {
     return (
-      <div style={{ width: '1220px', padding: '75px 0px 40px 0px' }}>
-        <IndexTop>
+      <div className="index-page">
+        <div className="index-page__top">
           <Introduction data={components.index.introduction} dictIcons={dictIcons} />
           <ReduxIndexBarChart />
-        </IndexTop>
+        </div>
         <ReduxIndexButtonBar />
       </div>
     );

src/Index/page.less

@@ -0,0 +1,9 @@
+.index-page {
+  width: 1220px;
+  padding: 75px 0px 40px 0px;
+}
+
+.index-page__top {
+  width: 100%;
+  display: inline-flex;
+}

src/Login/Login.jsx

@@ -1,54 +1,9 @@
 import React from 'react';
-import styled from 'styled-components';
 import querystring from 'querystring';
 import PropTypes from 'prop-types'; // see https://github.com/facebook/prop-types#prop-types
-
 import { basename, appname } from '../localconf';
 import SlidingWindow from '../components/SlidingWindow';
-
-const CentralBox = styled.div`
-  text-align: center;
-  width: 756px;
-  margin: auto 0px;
-  padding: 0px 100px;
-  vertical-align: middle;
-  display: table-cell;
-  color: #000000;
-`;
-
-const LoginFrame = styled.div`
-  display: table;
-`;
-
-const LeftBox = styled.div`
-  width: 257px;
-  text-align: center;
-  padding: 0px;
-  float: left;
-  min-height: 100%;
-`;
-
-const RightBox = styled.div`
-  width: 257px;
-  text-align: center;
-  padding: 0px;
-  float: right;
-  min-height: 100%;
-`;
-
-const Line = styled.hr`
-  width: 30px;
-  height: 5px;
-  text-align: center;
-  color: #9b9b9b;
-  background-color: #9b9b9b;
-  text-align: center;
-  margin: 17px auto;
-`;
-
-export const LoginButton = styled.a`
-  font-size: 1em;
-`;
+import './Login.less';
 
 const getInitialState = height => ({ height });
 
@@ -93,29 +48,33 @@ class Login extends React.Component {
       next = basename === '/' ? queryParams.next : basename + queryParams.next;
     }
     return (
-      <LoginFrame>
-        <LeftBox style={{ height: `${this.state.height}px` }}>
+      <div className="login-page">
+        <div className="login-page__side-box">
           <SlidingWindow
             iconName={'gene'}
             dictIcons={this.props.dictIcons}
             height={this.state.height}
             scrollY={window.scrollY}
           />
-        </LeftBox>
-        <CentralBox>
-          <div className="h1-typo" style={{ marginBottom: '11px', lineHeight: '40px' }}>{this.props.data.title}</div>
-          <div className="high-light" style={{ textTransform: 'uppercase' }}>{this.props.data.subTitle}</div>
-          <Line />
+        </div>
+        <div className="login-page__central-content">
+          <div className="h1-typo login-page__title">
+            {this.props.data.title}
+          </div>
+          <div className="high-light login-page__sub-title">
+            {this.props.data.subTitle}
+          </div>
+          <hr className="login-page__separator" />
           <div className="body-typo">{this.props.data.text}</div>
           {
             this.props.providers.map(
               p => (
-                <div key={p.id} style={{ margin: '25px 0px' }}>
-                  <LoginButton href={`${p.url}?redirect=${window.location.origin}${next}`}>
+                <div key={p.id} className="login-page__entries">
+                  <a href={`${p.url}?redirect=${window.location.origin}${next}`}>
                     <button className="button-primary-orange">
                       {p.name}
                     </button>
-                  </LoginButton>
+                  </a>
                 </div>
               ),
             )
@@ -126,16 +85,16 @@ class Login extends React.Component {
               {this.props.data.email}
             </a>{'.'}
           </div>
-        </CentralBox>
-        <RightBox style={{ height: `${this.state.height}px` }}>
+        </div>
+        <div className="login-page__side-box">
           <SlidingWindow
             iconName={'gene'}
             dictIcons={this.props.dictIcons}
             height={this.state.height}
             scrollY={window.scrollY}
           />
-        </RightBox>
-      </LoginFrame>
+        </div>
+      </div>
     );
   }
 }

src/Login/Login.less

@@ -0,0 +1,45 @@
+.login-page {
+  display: flex;
+  justify-content: space-between;
+}
+
+.login-page__side-box {
+  width: 257px;
+  min-width: 257px;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+}
+
+.login-page__side-box svg {
+  display: block;
+}
+
+.login-page__central-content {
+  text-align: center;
+  width: 756px;
+  margin: auto;
+  padding: 0 100px;
+  color: #000000;
+}
+
+.login-page__title {
+  margin-bottom: 11px;
+  line-height: 40px;
+}
+
+.login-page__sub-title {
+  text-transform: uppercase;
+}
+
+.login-page__separator {
+  width: 30px;
+  height: 5px;
+  text-align: center;
+  background-color: #9b9b9b;
+  margin: 17px auto;
+}
+
+.login-page__entries {
+  margin: 25px 0;
+}

src/Login/Login.test.jsx

@@ -33,6 +33,6 @@ describe('the Login component', () => {
         />
       </StaticRouter>,
     );
-    expect($vdom.find(LoginButton)).toHaveLength(testProps.providers.length);
+    expect($vdom.find('.login-page__entries')).toHaveLength(testProps.providers.length);
   });
 });

src/Login/ProtectedContent.jsx

@@ -1,8 +1,6 @@
 import React from 'react';
 import { Redirect } from 'react-router-dom';
-import styled from 'styled-components';
 import PropTypes from 'prop-types';
-
 import { fetchUser, fetchOAuthURL, fetchWithCreds, fetchProjects } from '../actions';
 import Spinner from '../components/Spinner';
 import getReduxStore from '../reduxStore';
@@ -12,13 +10,6 @@ import ReduxAuthTimeoutPopup from '../Popup/ReduxAuthTimeoutPopup';
 let lastAuthMs = 0;
 let lastTokenRefreshMs = 0;
 
-const Body = styled.div`
-  background: ${props => props.background};
-  margin-left: auto;
-  margin-right: auto;
-  width: 1220px;
-`;
-
 /**
  * Redux listener - just clears auth-cache on logout
  */
@@ -61,7 +52,6 @@ export function intersection(aList, bList) {
  * @param history from react-router
  * @param match from react-router.match
  * @param public default false - set true to disable auth-guard
- * @param background passed through to <Box background> wrapper for page.jsx-level background
  * @param filter {() => Promise} optional filter to apply before rendering the child component
  */
 class ProtectedContent extends React.Component {
@@ -76,13 +66,11 @@ class ProtectedContent extends React.Component {
       },
     ).isRequired,
     public: PropTypes.bool,
-    background: PropTypes.string,
     filter: PropTypes.func,
   };
 
   static defaultProps = {
     public: false,
-    background: null,
     filter: null,
   };
 
@@ -302,32 +290,29 @@ class ProtectedContent extends React.Component {
       params = this.props.match.params || {};
     }
     window.scrollTo(0, 0);
-    const styleProps = {
-      background: this.props.background,
-    };
     if (this.state.redirectTo) {
       return (<Redirect to={this.state.redirectTo} />);
     } else if (this.props.public && (!this.props.filter || typeof this.props.filter !== 'function')) {
       return (
-        <Body {...styleProps}>
+        <div>
           <Component params={params} location={this.props.location} history={this.props.history} />
-        </Body>
+        </div>
       );
     } else if (!this.props.public && this.state.authenticated) {
       return (
-        <Body {...styleProps}>
+        <div>
           <ReduxAuthTimeoutPopup />
           <Component params={params} location={this.props.location} history={this.props.history} />
-        </Body>
+        </div>
       );
     } else if (this.props.public && this.state.dataLoaded) {
       return (
-        <Body {...styleProps}>
+        <div>
           <Component params={params} location={this.props.location} history={this.props.history} />
-        </Body>
+        </div>
       );
     }
-    return (<Body {...styleProps}><Spinner /></Body>);
+    return (<div><Spinner /></div>);
   }
 }