From 5def0d7fadd5bb0f3ecc008e0bb0fb1455a269cc Mon Sep 17 00:00:00 2001
From: Ryan Lerch <rlerch@redhat.com>
Date: Jan 19 2018 11:04:37 +0000
Subject: [PATCH 1/3] fix populate.py group description strings


---

diff --git a/populate.py b/populate.py
index 4b7c21d..6c69b55 100755
--- a/populate.py
+++ b/populate.py
@@ -151,15 +151,16 @@ def create_teams():
     hub = hubs.models.Hub(name='marketing', hub_type="team")
     db.add(hub)
     hub.config["summary"] = 'The Fedora Marketing Team'
-    hub.config["description"] = ''
-    'The Fedora Marketing Team develops and executes marketing strategies to'
-    ' promote the usage and support of Fedora worldwide. Through the'
-    ' development of processes and content, this project aims to support'
-    ' the efforts of other Fedora projects to spread Fedora and to provide a'
-    ' central repository of ideas and information that can be used to deliver'
-    ' Fedora to new audiences. We work closely with the Fedora Ambassadors who'
-    ' spread the word about Fedora at events and allow the Fedora Project to'
-    ' interact directly with its existing and prospective users.'
+    hub.config["description"] = (
+        'The Fedora Marketing Team develops and executes marketing strategies'
+        ' to promote the usage and support of Fedora worldwide. Through the'
+        ' development of processes and content, this project aims to support'
+        ' the efforts of other Fedora projects to spread Fedora and to'
+        ' provide a central repository of ideas and information that can be'
+        ' used to deliver Fedora to new audiences. We work closely with the'
+        ' Fedora Ambassadors who spread the word about Fedora at events'
+        ' and allow the Fedora Project to interact directly with its'
+        ' existing and prospective users.')
 
     hub.config["rules_url"] = 'https://fedoraproject.org/wiki/Marketing'
     hub.config["mailing_list"] = 'marketing@lists.fedoraproject.org'
@@ -183,10 +184,11 @@ def create_teams():
     hub = hubs.models.Hub(name='designteam', hub_type="team")
     db.add(hub)
     hub.config["summary"] = 'The Fedora Design Team'
-    hub.config["description"] = ''
-    'The Design Team is the design group of the Fedora project. Our interests '
-    'are not only in creating graphics for use by the Fedora community, but '
-    'also advocating the use of the creative tools that are a part of Fedora.'
+    hub.config["description"] = (
+        'The Design Team is the design group of the Fedora project. Our'
+        ' interests are not only in creating graphics for use by the'
+        ' Fedora community, but also advocating the use of the'
+        ' creative tools that are a part of Fedora.')
 
     hub.config["rules_url"] = 'https://fedoraproject.org/wiki/Design'
     hub.config["meetings_text"] = 'Meetings are every 2nd Tuesday at 16:00 UTC'

From 6919ddb7ba0fd1df03df7da93dd4ffc3a7b52a80 Mon Sep 17 00:00:00 2001
From: Ryan Lerch <rlerch@redhat.com>
Date: Jan 19 2018 11:28:28 +0000
Subject: [PATCH 2/3] make the community rules box look as per mockups(ish)


---

diff --git a/hubs/static/client/app/components/HubCommunity.css b/hubs/static/client/app/components/HubCommunity.css
new file mode 100644
index 0000000..17d04bc
--- /dev/null
+++ b/hubs/static/client/app/components/HubCommunity.css
@@ -0,0 +1,13 @@
+.HubCommunity h6 {
+  font-family: 'Open Sans', sans-serif;
+  text-transform: capitalize;
+  font-size: normal;
+  font-weight: 700;
+  color: #808080;
+  margin-bottom: 5px;
+}
+.HubCommunity .img-circle-lg {
+  height: 4em;
+  width: 4em;
+  padding: 10px;
+}
diff --git a/hubs/static/client/app/components/HubCommunity.js b/hubs/static/client/app/components/HubCommunity.js
new file mode 100644
index 0000000..767f115
--- /dev/null
+++ b/hubs/static/client/app/components/HubCommunity.js
@@ -0,0 +1,216 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Modal from './Modal';
+import "./HubCommunity.css";
+
+
+export default class HubCommunity extends React.Component {
+
+  render() {
+    return (
+      <div className="card HubCommunity mb-2">
+        <div className="card-block p-2">
+        <HubCommunityRules hub={this.props.hub} />
+        <HubCommunityOwners hub={this.props.hub} />
+        <HubCommunityMeetings hub={this.props.hub} />
+        <HubCommunityCommunication hub={this.props.hub} />
+        </div>
+      </div>
+    );
+  }
+}
+HubCommunity.propTypes = {
+  hub: PropTypes.object.isRequired,
+}
+
+
+class HubCommunityRules extends React.Component {
+
+  render() {
+    if (!this.props.hub.config.rules_url) {
+      return null;
+    }
+    return (
+      <div className="mb-2">
+        <h6>community rules</h6>
+        <p>
+          <a href={this.props.hub.config.rules_url}>
+            Community Rules and Guidelines
+          </a>
+        </p>
+      </div>
+    );
+  }
+}
+
+
+class HubCommunityOwners extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {moreOpen: false};
+    this.handleClickMore = this.handleClickMore.bind(this);
+    this.handleCloseMore = this.handleCloseMore.bind(this);
+  }
+
+  handleClickMore(e) {
+    e.preventDefault();
+    this.setState((prevState, props) => ({
+      moreOpen: !prevState.moreOpen
+    }))
+  }
+
+  handleCloseMore(e) {
+    e.preventDefault();
+    this.setState({moreOpen: false});
+  }
+
+  render() {
+    const ellipsis_limit = 5;
+    let owners = [...this.props.hub.users.owner];
+    //for (const owner in this.props.hub.users.owner) {
+    //  owners.push(this.props.hub.users.owner[owner]);
+    //}
+    const compare = (a, b) => {
+      if (a < b) { return -1; }
+      if (a > b) { return 1; }
+      return 0;
+    }
+    if (owners.length <= ellipsis_limit) {
+      owners.sort((o1, o2) => (compare(o1.username, o2.username)));
+    } else {
+      owners.sort((o1, o2) => {
+        const d1 = Date.parse(o1.created_on);
+        const d2 = Date.parse(o2.created_on);
+        return compare(d1, d2);
+      })
+    }
+    return (
+      <div className="mb-2">
+        <h6>Group Owners ({owners.length})</h6>
+        <div className="row no-gutters">
+        { owners.slice(0, ellipsis_limit).map((owner) => (
+            <div className="col-sm-6 mb-2" key={owner.username}>
+              <img className="img-circle mr-2" src={owner.avatar} />
+              <a href={owner.hub_url}>{owner.username}</a>
+            </div>
+          ))
+        }
+        { owners.length > ellipsis_limit &&
+          <button
+            className="btn btn-secondary"
+            onClick={this.handleClickMore}
+            >
+            View All
+          </button>
+        }
+        </div>
+        { this.state.moreOpen &&
+          <Modal
+            onCloseClicked={this.props.handleCloseMore}
+            title="All group owners"
+            footer={
+              <button
+                className="btn btn-secondary"
+                onClick={this.props.handleCloseMore}
+                >
+                Close
+              </button>
+            }
+            >
+            { owners.map((owner) => (
+                <div className="col-sm-6 mb-2" key={owner.username}>
+                  <img className="img-circle img-circle-lg mr-2" src={owner.avatar} />
+                  <a href={owner.hub_url}>{owner.username}</a>
+                </div>
+              ))
+            }
+          </Modal>
+        }
+      </div>
+    );
+  }
+}
+
+
+class HubCommunityMeetings extends React.Component {
+
+  render() {
+    const config = this.props.hub.config;
+    if (!config.meetings_text &&
+        !config.calendar) {
+      return null;
+    }
+    const calendar_url = `https://apps.fedoraproject.org/calendar/${config.calendar}/`;
+    const minutes_url = `https://meetbot.fedoraproject.org/sresults?group_id=${this.props.hub.name}&type=team`
+    return (
+      <div className="mb-2">
+        <h6>Meetings</h6>
+        { config.meetings_text &&
+          <p className="mb-1">{config.meetings_text}</p>
+        }
+        <p>
+          { config.calendar &&
+            <a
+              className="small"
+              target="_blank"
+              href={calendar_url}
+              >
+              Meeting Schedule
+            </a>
+          }
+          { config.calendar && minutes_url &&
+            "|"
+          }
+          { minutes_url &&
+            <a
+              className="small"
+              target="_blank"
+              href={minutes_url}
+              >
+              Past Meeting Minutes
+            </a>
+          }
+        </p>
+      </div>
+    );
+  }
+}
+
+
+class HubCommunityCommunication extends React.Component {
+
+  render() {
+    const config = this.props.hub.config;
+    if (!config.mailing_list &&
+        !config.chat_channel) {
+      return null;
+    }
+    const mailing_list_url = `https://lists.fedoraproject.org/archives/list/${config.mailing_list}/`;
+    return (
+      <div>
+        <h6>Communication</h6>
+        <ul className="list-unstyled mb-0">
+          { config.mailing_list &&
+            <li>
+              <i className="fa fa-envelope-o" aria-hidden="true"></i>
+              <span className="ml-2">
+                <a href={mailing_list_url}>
+                  {config.mailing_list}
+                </a>
+              </span>
+            </li>
+          }
+          { config.chat_channel &&
+            <li>
+              <i className="fa fa-comment-o" aria-hidden="true"></i>
+              <span className="ml-2">
+                { config.chat_channel } on { config.chat_domain }
+              </span>
+            </li>
+          }
+        </ul>
+      </div>
+    );
+  }
+}
diff --git a/hubs/static/client/app/components/HubDetails.css b/hubs/static/client/app/components/HubDetails.css
new file mode 100644
index 0000000..fc24cca
--- /dev/null
+++ b/hubs/static/client/app/components/HubDetails.css
@@ -0,0 +1,4 @@
+.HubDetails {
+    background-color: #e7e7e7;
+    text-align: left;
+}
diff --git a/hubs/static/client/app/components/HubDetails.js b/hubs/static/client/app/components/HubDetails.js
new file mode 100644
index 0000000..5a0e19a
--- /dev/null
+++ b/hubs/static/client/app/components/HubDetails.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import UserContact from './UserContact';
+import HubCommunity from './HubCommunity';
+import "./HubDetails.css";
+
+
+export default class HubDetails extends React.Component {
+
+  render() {
+    return (
+      <div>
+        { this.props.hub.type === "user" &&
+          <UserContact hub={this.props.hub} />
+        }
+        { this.props.hub.type === "team" &&
+          <HubCommunity hub={this.props.hub} />
+        }
+      </div>
+    );
+  }
+}
+HubDetails.propTypes = {
+  hub: PropTypes.object.isRequired,
+}
+
diff --git a/hubs/static/client/app/components/HubHeader/HubCommunity.css b/hubs/static/client/app/components/HubHeader/HubCommunity.css
deleted file mode 100644
index 17d04bc..0000000
--- a/hubs/static/client/app/components/HubHeader/HubCommunity.css
+++ /dev/null
@@ -1,13 +0,0 @@
-.HubCommunity h6 {
-  font-family: 'Open Sans', sans-serif;
-  text-transform: capitalize;
-  font-size: normal;
-  font-weight: 700;
-  color: #808080;
-  margin-bottom: 5px;
-}
-.HubCommunity .img-circle-lg {
-  height: 4em;
-  width: 4em;
-  padding: 10px;
-}
diff --git a/hubs/static/client/app/components/HubHeader/HubCommunity.js b/hubs/static/client/app/components/HubHeader/HubCommunity.js
deleted file mode 100644
index 04683b1..0000000
--- a/hubs/static/client/app/components/HubHeader/HubCommunity.js
+++ /dev/null
@@ -1,214 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Modal from '../Modal';
-import "./HubCommunity.css";
-
-
-export default class HubCommunity extends React.Component {
-
-  render() {
-    return (
-      <div className="HubCommunity p-2 mt-2 rounded">
-        <HubCommunityRules hub={this.props.hub} />
-        <HubCommunityOwners hub={this.props.hub} />
-        <HubCommunityMeetings hub={this.props.hub} />
-        <HubCommunityCommunication hub={this.props.hub} />
-      </div>
-    );
-  }
-}
-HubCommunity.propTypes = {
-  hub: PropTypes.object.isRequired,
-}
-
-
-class HubCommunityRules extends React.Component {
-
-  render() {
-    if (!this.props.hub.config.rules_url) {
-      return null;
-    }
-    return (
-      <div className="mb-2">
-        <h6>community rules</h6>
-        <p>
-          <a href={this.props.hub.config.rules_url}>
-            Community Rules and Guidelines
-          </a>
-        </p>
-      </div>
-    );
-  }
-}
-
-
-class HubCommunityOwners extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {moreOpen: false};
-    this.handleClickMore = this.handleClickMore.bind(this);
-    this.handleCloseMore = this.handleCloseMore.bind(this);
-  }
-
-  handleClickMore(e) {
-    e.preventDefault();
-    this.setState((prevState, props) => ({
-      moreOpen: !prevState.moreOpen
-    }))
-  }
-
-  handleCloseMore(e) {
-    e.preventDefault();
-    this.setState({moreOpen: false});
-  }
-
-  render() {
-    const ellipsis_limit = 5;
-    let owners = [...this.props.hub.users.owner];
-    //for (const owner in this.props.hub.users.owner) {
-    //  owners.push(this.props.hub.users.owner[owner]);
-    //}
-    const compare = (a, b) => {
-      if (a < b) { return -1; }
-      if (a > b) { return 1; }
-      return 0;
-    }
-    if (owners.length <= ellipsis_limit) {
-      owners.sort((o1, o2) => (compare(o1.username, o2.username)));
-    } else {
-      owners.sort((o1, o2) => {
-        const d1 = Date.parse(o1.created_on);
-        const d2 = Date.parse(o2.created_on);
-        return compare(d1, d2);
-      })
-    }
-    return (
-      <div className="mb-2">
-        <h6>Group Owners ({owners.length})</h6>
-        <div className="row no-gutters">
-        { owners.slice(0, ellipsis_limit).map((owner) => (
-            <div className="col-sm-6 mb-2" key={owner.username}>
-              <img className="img-circle mr-2" src={owner.avatar} />
-              <a href={owner.hub_url}>{owner.username}</a>
-            </div>
-          ))
-        }
-        { owners.length > ellipsis_limit &&
-          <button
-            className="btn btn-secondary"
-            onClick={this.handleClickMore}
-            >
-            View All
-          </button>
-        }
-        </div>
-        { this.state.moreOpen &&
-          <Modal
-            onCloseClicked={this.props.handleCloseMore}
-            title="All group owners"
-            footer={
-              <button
-                className="btn btn-secondary"
-                onClick={this.props.handleCloseMore}
-                >
-                Close
-              </button>
-            }
-            >
-            { owners.map((owner) => (
-                <div className="col-sm-6 mb-2" key={owner.username}>
-                  <img className="img-circle img-circle-lg mr-2" src={owner.avatar} />
-                  <a href={owner.hub_url}>{owner.username}</a>
-                </div>
-              ))
-            }
-          </Modal>
-        }
-      </div>
-    );
-  }
-}
-
-
-class HubCommunityMeetings extends React.Component {
-
-  render() {
-    const config = this.props.hub.config;
-    if (!config.meetings_text &&
-        !config.calendar) {
-      return null;
-    }
-    const calendar_url = `https://apps.fedoraproject.org/calendar/${config.calendar}/`;
-    const minutes_url = `https://meetbot.fedoraproject.org/sresults?group_id=${this.props.hub.name}&type=team`
-    return (
-      <div className="mb-2">
-        <h6>Meetings</h6>
-        { config.meetings_text &&
-          <p className="mb-1">{config.meetings_text}</p>
-        }
-        <p>
-          { config.calendar &&
-            <a
-              className="small"
-              target="_blank"
-              href={calendar_url}
-              >
-              Meeting Schedule
-            </a>
-          }
-          { config.calendar && minutes_url &&
-            "|"
-          }
-          { minutes_url &&
-            <a
-              className="small"
-              target="_blank"
-              href={minutes_url}
-              >
-              Past Meeting Minutes
-            </a>
-          }
-        </p>
-      </div>
-    );
-  }
-}
-
-
-class HubCommunityCommunication extends React.Component {
-
-  render() {
-    const config = this.props.hub.config;
-    if (!config.mailing_list &&
-        !config.chat_channel) {
-      return null;
-    }
-    const mailing_list_url = `https://lists.fedoraproject.org/archives/list/${config.mailing_list}/`;
-    return (
-      <div>
-        <h6>Communication</h6>
-        <ul className="list-unstyled mb-0">
-          { config.mailing_list &&
-            <li>
-              <i className="fa fa-envelope-o" aria-hidden="true"></i>
-              <span className="ml-2">
-                <a href={mailing_list_url}>
-                  {config.mailing_list}
-                </a>
-              </span>
-            </li>
-          }
-          { config.chat_channel &&
-            <li>
-              <i className="fa fa-comment-o" aria-hidden="true"></i>
-              <span className="ml-2">
-                { config.chat_channel } on { config.chat_domain }
-              </span>
-            </li>
-          }
-        </ul>
-      </div>
-    );
-  }
-}
diff --git a/hubs/static/client/app/components/HubHeader/HubDetails.css b/hubs/static/client/app/components/HubHeader/HubDetails.css
deleted file mode 100644
index fc24cca..0000000
--- a/hubs/static/client/app/components/HubHeader/HubDetails.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.HubDetails {
-    background-color: #e7e7e7;
-    text-align: left;
-}
diff --git a/hubs/static/client/app/components/HubHeader/HubDetails.js b/hubs/static/client/app/components/HubHeader/HubDetails.js
deleted file mode 100644
index cf3c713..0000000
--- a/hubs/static/client/app/components/HubHeader/HubDetails.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import UserContact from './UserContact';
-import HubCommunity from './HubCommunity';
-import "./HubDetails.css";
-
-
-export default class HubDetails extends React.Component {
-
-  render() {
-    return (
-      <div className="HubDetails p-2 mt-2 rounded">
-        { this.props.hub.type === "user" &&
-          <UserContact hub={this.props.hub} />
-        }
-        { this.props.hub.type === "team" &&
-          <HubCommunity hub={this.props.hub} />
-        }
-      </div>
-    );
-  }
-}
-HubDetails.propTypes = {
-  hub: PropTypes.object.isRequired,
-}
-
diff --git a/hubs/static/client/app/components/HubHeader/HubHeader.css b/hubs/static/client/app/components/HubHeader/HubHeader.css
index 344b3c9..5647cd0 100644
--- a/hubs/static/client/app/components/HubHeader/HubHeader.css
+++ b/hubs/static/client/app/components/HubHeader/HubHeader.css
@@ -23,9 +23,3 @@
     left: 1rem;
 }
 
-.HubHeader.hub-user .description {
-    background-color: white;
-}
-.HubHeader.hub-team .description {
-    background-color: #dfedf3;
-}
diff --git a/hubs/static/client/app/components/HubHeader/HubHeaderLeft.js b/hubs/static/client/app/components/HubHeader/HubHeaderLeft.js
index dd8dcea..9e76ad6 100644
--- a/hubs/static/client/app/components/HubHeader/HubHeaderLeft.js
+++ b/hubs/static/client/app/components/HubHeader/HubHeaderLeft.js
@@ -27,11 +27,6 @@ export default class HubHeaderLeft extends React.Component {
           </h5>
           <div className="clearfix"></div>
         </div>
-        { this.props.hub.config.description &&
-          <div className="description p-2 mt-2 rounded">
-            {this.props.hub.config.description}
-          </div>
-        }
       </div>
     );
   }
diff --git a/hubs/static/client/app/components/HubHeader/HubHeaderRight.js b/hubs/static/client/app/components/HubHeader/HubHeaderRight.js
index 2cc2734..6b250a9 100644
--- a/hubs/static/client/app/components/HubHeader/HubHeaderRight.js
+++ b/hubs/static/client/app/components/HubHeader/HubHeaderRight.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import HubConfig from '../HubConfig';
 import EditModeButton from './EditModeButton';
 import HubMembership from './HubMembership';
-import HubDetails from './HubDetails';
 
 
 export default class HubHeaderRight extends React.Component {
@@ -18,7 +17,6 @@ export default class HubHeaderRight extends React.Component {
             <EditModeButton />
           </div>
         }
-        <HubDetails hub={this.props.hub} />
       </div>
     );
   }
diff --git a/hubs/static/client/app/components/HubHeader/UserContact.js b/hubs/static/client/app/components/HubHeader/UserContact.js
deleted file mode 100644
index 59769d0..0000000
--- a/hubs/static/client/app/components/HubHeader/UserContact.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {
-  FormattedDate
-} from "react-intl";
-import CurrentTime from "../CurrentTime";
-
-
-export default class UserContact extends React.Component {
-
-  render() {
-    return (
-      <div className="UserContact">
-        <ul className="fa-ul">
-          <li>
-            <i className="fa fa-li fa-map-marker" aria-hidden="true"></i>
-            <span className="ml-2">
-                {this.props.hub.config.country}
-            </span>
-          </li>
-          <li>
-            <i className="fa fa-li fa-clock-o" aria-hidden="true"></i>
-            <span className="ml-2 mr-1">Current Time:</span>
-            <CurrentTime offset={this.props.hub.config.timezone_offset} />
-          </li>
-          <li>
-            <i className="fa fa-li fa-envelope-o" aria-hidden="true"></i>
-            <span className="ml-2">
-              {this.props.hub.config.email}
-            </span>
-          </li>
-          <li>
-            <i className="fa fa-li fa-comment-o" aria-hidden="true"></i>
-            <span className="ml-2">
-              {this.props.hub.config.chat_nickname}
-            </span>
-          </li>
-        </ul>
-        <div className="text-center">
-          <i className="fa fa-certificate" aria-hidden="true"></i>
-          <span className="ml-2 mr-1">
-            Member Since
-          </span>
-          <FormattedDate
-            value={Date.parse(this.props.hub.config.creation_date)}
-            month="short"
-            year="numeric"
-            />
-        </div>
-      </div>
-    );
-  }
-}
-UserContact.propTypes = {
-  hub: PropTypes.object.isRequired,
-};
diff --git a/hubs/static/client/app/components/UserContact.js b/hubs/static/client/app/components/UserContact.js
new file mode 100644
index 0000000..748c7e9
--- /dev/null
+++ b/hubs/static/client/app/components/UserContact.js
@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  FormattedDate
+} from "react-intl";
+import CurrentTime from "./CurrentTime";
+
+
+export default class UserContact extends React.Component {
+
+  render() {
+    return (
+      <div className="card UserContact mb-2">
+        <div className="card-block p-2">
+          <ul className="fa-ul">
+            <li>
+              <i className="fa fa-li fa-map-marker" aria-hidden="true"></i>
+              <span className="ml-2">
+                  {this.props.hub.config.country}
+              </span>
+            </li>
+            <li>
+              <i className="fa fa-li fa-clock-o" aria-hidden="true"></i>
+              <span className="ml-2 mr-1">Current Time:</span>
+              <CurrentTime offset={this.props.hub.config.timezone_offset} />
+            </li>
+            <li>
+              <i className="fa fa-li fa-envelope-o" aria-hidden="true"></i>
+              <span className="ml-2">
+                {this.props.hub.config.email}
+              </span>
+            </li>
+            <li>
+              <i className="fa fa-li fa-comment-o" aria-hidden="true"></i>
+              <span className="ml-2">
+                {this.props.hub.config.chat_nickname}
+              </span>
+            </li>
+          </ul>
+          <div className="text-center">
+            <i className="fa fa-certificate" aria-hidden="true"></i>
+            <span className="ml-2 mr-1">
+              Member Since
+            </span>
+            <FormattedDate
+              value={Date.parse(this.props.hub.config.creation_date)}
+              month="short"
+              year="numeric"
+              />
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+UserContact.propTypes = {
+  hub: PropTypes.object.isRequired,
+};
diff --git a/hubs/static/client/app/components/WidgetsArea.css b/hubs/static/client/app/components/WidgetsArea.css
index 2cd1368..33da962 100644
--- a/hubs/static/client/app/components/WidgetsArea.css
+++ b/hubs/static/client/app/components/WidgetsArea.css
@@ -3,3 +3,38 @@
     left: 1rem;
     z-index: 1;
 }
+
+.WidgetsArea.hub-user .hub-description{
+    background:white;
+    color: black;
+    border: none;
+}
+
+.WidgetsArea.hub-user .hub-description:after{
+    content: ''; 
+    position: absolute; 
+    top: 0; 
+    left: 35px; 
+    width: 0; 
+    height: 0; 
+    border: 12px solid transparent; 
+    border-bottom-color: white; 
+    border-top: 0; 
+    margin-left: -12px; 
+    margin-top: -12px;
+}
+
+.WidgetsArea .hub-description{
+    position: relative;
+}
+
+.WidgetsArea .hub-description .hackybackground{
+    background: #e7e7e7;
+    width: 5000px;
+    position: absolute;
+    bottom: -10px;
+    height: 100%;
+    left: -1000px;
+    z-index: -3000;   
+    padding-top: 1500px;
+}
diff --git a/hubs/static/client/app/components/WidgetsArea.js b/hubs/static/client/app/components/WidgetsArea.js
index 0bc6df4..71341d8 100644
--- a/hubs/static/client/app/components/WidgetsArea.js
+++ b/hubs/static/client/app/components/WidgetsArea.js
@@ -7,6 +7,10 @@ import WidgetConfigDialog from './WidgetConfigDialog';
 import SSESource from "./SSESource";
 import NotifIcon from "./NotifIcon";
 import Spinner from "./Spinner";
+import HubCommunity from "./HubCommunity";
+import HubDetails from './HubDetails';
+
+
 import { fetchWidgets } from '../core/actions/widgets';
 import "./WidgetsArea.css";
 
@@ -21,9 +25,10 @@ class WidgetsArea extends React.PureComponent {
     if (!this.props.hub.name) {
       return null;
     }
+    let hubTypeCss = `hub-${this.props.hub.type}`;
     const right_width = this.props.hub.config ? 12 - this.props.hub.config.left_width : 4;
     return (
-      <div className="WidgetsArea">
+      <div className={`WidgetsArea ${hubTypeCss}`}>
         { this.props.widgets.isLoading &&
           <Spinner />
         }
@@ -38,6 +43,13 @@ class WidgetsArea extends React.PureComponent {
               <CobWeb hub={this.props.hub} />
             }
 
+            { (this.props.hub.config.description && !this.props.editMode) &&
+              <div className="alert alert-info hub-description">
+                {this.props.hub.config.description}
+                <div className="hackybackground"></div>
+              </div>
+            }
+
             <WidgetsColumn
               position="left"
               widgets={
@@ -50,6 +62,7 @@ class WidgetsArea extends React.PureComponent {
           </div>
 
           <div className={`col-md-${right_width}`}>
+            <HubDetails hub={this.props.hub} />
             <WidgetsColumn
               position="right"
               widgets={
diff --git a/hubs/static/css/style.css b/hubs/static/css/style.css
index 0c2306b..5485835 100644
--- a/hubs/static/css/style.css
+++ b/hubs/static/css/style.css
@@ -5,6 +5,7 @@ body {
 #navbar-top {
   background-image: linear-gradient(to bottom,#eee 0%,#ddd 100%);
   background-repeat: repeat-x;
+  border-bottom: 1px solid #ccc;
 }
 
 #navbar-top img.chaticon,
@@ -44,10 +45,9 @@ body {
 
 header {
   color: #373a3c;
-  background: #f3f3f3 none repeat scroll 0 0;
+  background: #e7e7e7 none repeat scroll 0 0;
   width: 100%;
   font-family: 'Open Sans', sans-serif;
-  border-bottom: 1px solid #ddd;
   padding-bottom: .5rem;
 }
 

From f7307193afe4c876814bb8cc85f3cd650320c31b Mon Sep 17 00:00:00 2001
From: Ryan Lerch <rlerch@redhat.com>
Date: Jan 19 2018 11:36:21 +0000
Subject: [PATCH 3/3] Make the HUbDetails not show in editmode


---

diff --git a/hubs/static/client/app/components/WidgetsArea.js b/hubs/static/client/app/components/WidgetsArea.js
index 71341d8..3b383dc 100644
--- a/hubs/static/client/app/components/WidgetsArea.js
+++ b/hubs/static/client/app/components/WidgetsArea.js
@@ -62,7 +62,9 @@ class WidgetsArea extends React.PureComponent {
           </div>
 
           <div className={`col-md-${right_width}`}>
-            <HubDetails hub={this.props.hub} />
+            {!this.props.editMode &&
+              <HubDetails hub={this.props.hub} />
+            }
             <WidgetsColumn
               position="right"
               widgets={