Merge pull request #53 from andymikulski/39-remove-normandy-styles

Fix #39: remove normandy styles

.gitignore

@@ -1,5 +1,8 @@
 # See https://help.github.com/ignore-files/ for more about ignoring files.
 
+# nodeenv
+/env
+
 # dependencies
 /node_modules
 

src/console/App.less

@@ -10,15 +10,22 @@
   padding: 2em;
 }
 
-.app-header {
+.ant-layout-header.app-header {
   align-items: center;
+  background: @blue-60;
+  color: @white;
   display: flex;
+  position: relative;
+  z-index: 5;
 
   h1 {
+    color: @white;
     margin: 0 1em 0 0;
   }
 
   a {
+    background: @blue-60;
+    color: @white;
     padding: 0 2em;
 
     &,
@@ -28,8 +35,8 @@
     }
 
     &.active {
-      background: @blue-60;
-      color: @white;
+      background: @white;
+      color: @blue-60;
     }
   }
 }

src/normandy/App.css

@@ -1,24 +1,20 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
+.app-logo {
   animation: App-logo-spin infinite 20s linear;
   height: 80px;
 }
 
-.App-header {
+.app-header {
   background-color: #222;
   height: 150px;
   padding: 20px;
   color: white;
 }
 
-.App-title {
+.app-title {
   font-size: 1.5em;
 }
 
-.App-intro {
+.app-intro {
   font-size: large;
 }
 

src/normandy/components/App.js

@@ -2,15 +2,12 @@ import { Layout, LocaleProvider } from 'antd';
 import enUS from 'antd/lib/locale-provider/en_US';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { NormandyLink as Link } from 'normandy/Router';
 
-import NavigationCrumbs from 'normandy/components/common/NavigationCrumbs';
 import NavigationMenu from 'normandy/components/common/NavigationMenu';
-import EnvAlert from 'normandy/components/common/EnvAlert';
 import QueryActions from 'normandy/components/data/QueryActions';
 import QueryServiceInfo from 'normandy/components/data/QueryServiceInfo';
 
-const { Content, Header, Sider } = Layout;
+const { Content, Header } = Layout;
 
 export default class App extends React.PureComponent {
   static propTypes = {
@@ -27,29 +24,19 @@ export default class App extends React.PureComponent {
     return (
       <LocaleProvider locale={enUS}>
         <Layout id="normandy-app">
-          <EnvAlert />
-
           {/*
            Global query components; add any queries for data needed across the
            entire app that we only need to fetch once.
            */}
           <QueryActions />
           <QueryServiceInfo />
 
-          <Header>
-            <div className="logo">
-              <Link to="/">SHIELD Control Panel</Link>
-            </div>
-          </Header>
-
           <Layout>
-            <Sider className="sidebar" breakpoint="sm" collapsedWidth="0">
+            <Header className="sidebar">
               <NavigationMenu />
-            </Sider>
+            </Header>
 
             <Layout className="content-wrapper">
-              <NavigationCrumbs />
-
               <Content className="content">{children}</Content>
             </Layout>
           </Layout>

src/normandy/components/common/NavigationMenu.js

@@ -1,79 +1,30 @@
 import { Menu } from 'antd';
-import { List } from 'immutable';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { connect } from 'react-redux';
 import { NormandyLink as Link } from 'normandy/Router';
 import { withRouter } from 'react-router';
 
-import QuerySessionInfo from 'normandy/components/data/QuerySessionInfo';
-import { getSessionHistory } from 'normandy/state/app/session/selectors';
-import ShieldIdenticon from 'normandy/components/common/ShieldIdenticon';
-
-const { Divider, Item, SubMenu } = Menu;
+const { Item } = Menu;
 
 @withRouter
-@connect(state => ({
-  recipeSessionHistory: getSessionHistory(state, 'recipe'),
-  extensionSessionHistory: getSessionHistory(state, 'extension'),
-}))
 export default class NavigationMenu extends React.PureComponent {
   static propTypes = {
-    recipeSessionHistory: PropTypes.instanceOf(List).isRequired,
-    extensionSessionHistory: PropTypes.instanceOf(List).isRequired,
     history: PropTypes.object.isRequired,
   };
 
   render() {
-    const {
-      recipeSessionHistory,
-      extensionSessionHistory,
-      history,
-    } = this.props;
-    const { pathname, search } = history;
+    const { history } = this.props;
+    const { pathname } = history.location;
 
     return (
       <div className="nav-menu">
-        <QuerySessionInfo />
-        <Menu
-          defaultOpenKeys={['Recipes', 'Extensions']}
-          selectedKeys={[`${pathname}${search}`]}
-          mode="inline"
-        >
-          <Item key="/">
-            <Link to="/">Home</Link>
+        <Menu selectedKeys={[`${pathname}`]} mode="horizontal">
+          <Item key={`${Link.PREFIX}/recipe/`}>
+            <Link to="/recipe/">Recipes</Link>
+          </Item>
+          <Item key={`${Link.PREFIX}/extension/`}>
+            <Link to="/extension/">Extensions</Link>
           </Item>
-
-          <SubMenu title="Recipes" key="Recipes">
-            <Item key="/recipe/">
-              <Link to="/recipe/">View All</Link>
-            </Item>
-
-            {recipeSessionHistory.size > 0 && <Divider />}
-
-            {recipeSessionHistory.map(item => (
-              <Item key={item.get('url')}>
-                <Link to={item.get('url')}>
-                  <ShieldIdenticon seed={item.get('identicon')} size={20} />
-                  {item.get('caption')}
-                </Link>
-              </Item>
-            ))}
-          </SubMenu>
-
-          <SubMenu title="Extensions" key="Extensions">
-            <Item key="/extension/">
-              <Link to="/extension/">View All</Link>
-            </Item>
-
-            {extensionSessionHistory.size > 0 && <Divider />}
-
-            {extensionSessionHistory.map(item => (
-              <Item key={item.get('url')}>
-                <Link to={item.get('url')}>{item.get('caption')}</Link>
-              </Item>
-            ))}
-          </SubMenu>
         </Menu>
       </div>
     );

src/normandy/components/pages/Gateway.js

@@ -1,36 +1,49 @@
 import React from 'react';
 import { NormandyLink as Link } from 'normandy/Router';
-
-import { Row, Col, Icon, Card } from 'antd';
+import { Row, Col, Card } from 'antd';
 
 export default class Gateway extends React.PureComponent {
   render() {
     return (
-      <Row
-        className="page-gateway"
-        type="flex"
-        justify="space-around"
-        align="top"
-      >
-        <Col className="gw-col" xs={24} sm={10} md={8}>
-          <Card title="Recipes" id="gw-recipes-card">
-            <Icon type="book" />
-            <p>Basic SHIELD recipes</p>
-            <Link to="/recipe/" id="gw-recipes-link">
-              Go to Recipes
-            </Link>
-          </Card>
-        </Col>
-        <Col className="gw-col" xs={24} sm={10} md={8}>
-          <Card title="Extensions" id="gw-extensions-card">
-            <Icon type="code" />
-            <p>SHIELD WebExtensions</p>
-            <Link to="/extension/" id="gw-extensions-card">
-              Go to Extensions
-            </Link>
-          </Card>
-        </Col>
-      </Row>
+      <div>
+        <Row gutter={16} type="flex" justify="space-around" align="top">
+          <Col span={24}>
+            <h2>I want to...</h2>
+            <hr />
+          </Col>
+
+          <Col xs={24} sm={8}>
+            <Card>
+              <ul>
+                <li>...log something to remote consoles.</li>
+                <li>...temporarily flip a remote Firefox preference.</li>
+                <li>
+                  ...permanently roll out a remote Firefox preference change.
+                </li>
+              </ul>
+
+              <Link to="/recipe/">
+                Go to the Recipe Listing to start a new study.
+              </Link>
+            </Card>
+          </Col>
+
+          <Col xs={24} sm={8}>
+            <Card>
+              <ul>
+                <li>
+                  ...manage system addons used in conjunction with opt-out
+                  studies.
+                </li>
+              </ul>
+
+              <Link to="/extension/">
+                Go to Extension Listing to upload or edit existing study addons.
+              </Link>
+            </Card>
+          </Col>
+        </Row>
+      </div>
     );
   }
 }