From b727d2cbec6f376375beac9a3dcf86c01113345f Mon Sep 17 00:00:00 2001
From: Ryan Lerch <rlerch@redhat.com>
Date: Jan 23 2018 10:36:07 +0000
Subject: tweak buttons in the hubheader


---

diff --git a/hubs/static/client/app/components/HubConfig/HubConfig.css b/hubs/static/client/app/components/HubConfig/HubConfig.css
index 571bc3a..17cc35f 100644
--- a/hubs/static/client/app/components/HubConfig/HubConfig.css
+++ b/hubs/static/client/app/components/HubConfig/HubConfig.css
@@ -1,8 +1,3 @@
-.HubConfig {
-    display: inline-block;
-    margin: 0.25rem 0.5rem;
-    text-align: left;
-}
 .HubConfigDialog .modal-title {
   line-height: 1;
 }
diff --git a/hubs/static/client/app/components/HubConfig/index.js b/hubs/static/client/app/components/HubConfig/index.js
index 6c173d6..5491548 100644
--- a/hubs/static/client/app/components/HubConfig/index.js
+++ b/hubs/static/client/app/components/HubConfig/index.js
@@ -106,15 +106,18 @@ class HubConfig extends React.Component {
   render() {
     const openButton = (
       <button
-        className="open-button btn btn-sm btn-secondary"
+        className="open-button btn btn-sm btn-outline-primary ml-1"
         onClick={this.handleOpenClicked}
         >
-        <i className="fa fa-cog mr-2" aria-hidden="true"></i>
-        <FormattedMessage {...messages.button} />
+        <i className="fa fa-cog" aria-hidden="true"></i>
+        {/*<FormattedMessage {...messages.button} />*/}
       </button>
     );
+    if (this.props.editMode){
+      return null;
+    }
     return (
-      <div className="HubConfig">
+      <span className="HubConfig">
         {openButton}
         {this.props.isDialogOpen &&
           <HubConfigDialog
@@ -133,7 +136,7 @@ class HubConfig extends React.Component {
             usingFas={this.props.usingFas}
             />
         }
-      </div>
+      </span>
     );
   }
 
@@ -149,6 +152,7 @@ const mapStateToProps = (state) => {
     isDialogOpen: state.ui.hubConfigDialogOpen,
     isLoading: state.ui.hubConfigDialogLoading,
     usingFas: state.globalConfig.membership_in_fas,
+    editMode: state.ui.widgetsEditMode,
   }
 };
 
diff --git a/hubs/static/client/app/components/HubHeader/EditModeButton.css b/hubs/static/client/app/components/HubHeader/EditModeButton.css
deleted file mode 100644
index 69930aa..0000000
--- a/hubs/static/client/app/components/HubHeader/EditModeButton.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.EditModeButton {
-    margin: 0.25rem 0.5rem
-}
diff --git a/hubs/static/client/app/components/HubHeader/EditModeButton.js b/hubs/static/client/app/components/HubHeader/EditModeButton.js
index 11a0426..8c3fa70 100644
--- a/hubs/static/client/app/components/HubHeader/EditModeButton.js
+++ b/hubs/static/client/app/components/HubHeader/EditModeButton.js
@@ -6,7 +6,6 @@ import {
   FormattedMessage,
   } from 'react-intl';
 import { setEditMode } from "../../core/actions/widgets";
-import "./EditModeButton.css";
 
 
 const messages = defineMessages({
@@ -40,18 +39,18 @@ class EditModeButton extends React.Component {
           className="EditModeButton btn btn-sm btn-primary"
           onClick={this.handleClicked}
           >
-          <i className="fa fa-download mr-2" aria-hidden="true"></i>
+          <i className="fa fa-download" aria-hidden="true"></i>
           <FormattedMessage {...messages.save} />
         </button>
       );
     } else {
       return (
         <button
-          className="EditModeButton btn btn-sm btn-secondary"
+          className="EditModeButton btn btn-sm btn-outline-primary ml-1"
           onClick={this.handleClicked}
           >
-          <i className="fa fa-pencil mr-2" aria-hidden="true"></i>
-          <FormattedMessage {...messages.edit} />
+          <i className="fa fa-pencil" aria-hidden="true"></i>
+          {/*<FormattedMessage {...messages.edit} />*/}
         </button>
       );
     }
diff --git a/hubs/static/client/app/components/HubHeader/HubHeader.css b/hubs/static/client/app/components/HubHeader/HubHeader.css
index 5647cd0..3df0856 100644
--- a/hubs/static/client/app/components/HubHeader/HubHeader.css
+++ b/hubs/static/client/app/components/HubHeader/HubHeader.css
@@ -23,3 +23,12 @@
     left: 1rem;
 }
 
+.HubHeaderRight .btn{
+    cursor:pointer;
+}
+
+.HubHeaderRight .btn:disabled{
+    cursor: default;
+    border: none;
+    color:#444;
+}
diff --git a/hubs/static/client/app/components/HubHeader/HubHeaderRight.js b/hubs/static/client/app/components/HubHeader/HubHeaderRight.js
index 6b250a9..c0f2e2a 100644
--- a/hubs/static/client/app/components/HubHeader/HubHeaderRight.js
+++ b/hubs/static/client/app/components/HubHeader/HubHeaderRight.js
@@ -12,10 +12,10 @@ export default class HubHeaderRight extends React.Component {
       <div className="HubHeaderRight mt-2">
         <HubMembership />
         { this.props.hub.perms.config &&
-          <div>
+          <span>
             <HubConfig />
             <EditModeButton />
-          </div>
+          </span>
         }
       </div>
     );
diff --git a/hubs/static/client/app/components/HubHeader/HubMembership.js b/hubs/static/client/app/components/HubHeader/HubMembership.js
index dff6316..0fa9c71 100644
--- a/hubs/static/client/app/components/HubHeader/HubMembership.js
+++ b/hubs/static/client/app/components/HubHeader/HubMembership.js
@@ -58,6 +58,9 @@ class HubMembership extends React.Component {
     if (this.props.hub.type === "user" && this.props.hub.perms.config) {
       return null;  // The user's own hub.
     }
+    if (this.props.editMode) {
+      return null;
+    }
     let commonProps = {disabled: false, title: ""}
     if (!this.props.currentUser.logged_in) {
       commonProps.disabled = true;
@@ -112,15 +115,15 @@ class HubMembership extends React.Component {
       }
     }
     return (
-      <div className="HubMembership">
+      <span className="HubMembership">
+        {secondButton}
         <HubSubscribeButton
           isSubscriber={this.userHasRole("subscriber")}
           onSubscribe={this.onSubscribe}
           onUnsubscribe={this.onUnsubscribe}
           {...commonProps}
           />
-        {secondButton}
-      </div>
+      </span>
     );
   }
 }
@@ -128,9 +131,11 @@ HubMembership.propTypes = {
   hub: PropTypes.object.isRequired,
   currentUser: PropTypes.object,
   usingFas: PropTypes.bool,
+  editMode: PropTypes.bool,  
 }
 HubMembership.defaultProps = {
   usingFas: false,
+  editMode: false  
 }
 
 
@@ -139,6 +144,7 @@ const mapStateToProps = (state) => {
     hub: state.entities.hub,
     currentUser: state.currentUser,
     usingFas: state.globalConfig.membership_in_fas,
+    editMode: state.ui.widgetsEditMode,
   }
 };
 
@@ -156,7 +162,7 @@ class HubSubscribeButton extends React.Component {
         turnedOnIcon="check"
         onTurnOn={this.props.onSubscribe}
         onTurnOff={this.props.onUnsubscribe}
-        className="btn-sm mr-2"
+        className="btn-sm ml-1"
         disabled={this.props.disabled}
         title={this.props.title}
         />
@@ -177,7 +183,7 @@ class HubJoinButton extends React.Component {
         turnedOffIcon="user"
         onTurnOn={this.props.onJoin}
         onTurnOff={this.props.onLeave}
-        className="btn-sm"
+        className="btn-sm ml-1"
         disabled={this.props.disabled}
         title={this.props.title}
         />
@@ -198,7 +204,7 @@ class HubJoinRequestButton extends React.Component {
         turnedOffIcon="user"
         onTurnOn={this.props.onRequest}
         onTurnOff={this.props.onCancel}
-        className="btn-sm"
+        className="btn-sm ml-1"
         disabled={this.props.disabled}
         title={this.props.title}
         />
@@ -216,7 +222,7 @@ class HubGiveUpAdminButton extends React.Component {
         turnedOnText="Admin"
         turnedOnIcon="key"
         onTurnOff={this.props.onGiveUpAdmin}
-        className="btn-sm"
+        className="btn-sm ml-1"
         disabled={this.props.disabled}
         title={this.props.title}
         />
@@ -230,11 +236,11 @@ class HubFixedAdminButton extends React.Component {
     return (
       <StateButton
         isOn={true}
-        turnedOnText="Admin"
+        turnedOnText="Owner"
         turnedOnIcon="key"
-        className="btn-sm"
+        className="btn-sm btn-link ml-1"
         disabled={true}
-        title={this.props.title}
+        title="You are an owner of this hub"
         />
     );
   }
@@ -248,9 +254,9 @@ class HubFixedMemberButton extends React.Component {
         isOn={true}
         turnedOnText="Member"
         turnedOnIcon="user"
-        className="btn-sm"
+        className="btn-sm btn-link"
         disabled={true}
-        title={this.props.title}
+        title="you are a member of this hub"
         />
     );
   }
diff --git a/hubs/static/client/app/components/HubHeader/index.js b/hubs/static/client/app/components/HubHeader/index.js
index a2fb361..5841b95 100644
--- a/hubs/static/client/app/components/HubHeader/index.js
+++ b/hubs/static/client/app/components/HubHeader/index.js
@@ -43,7 +43,7 @@ class HubHeader extends React.Component {
                 hub={this.props.hub}
                 />
             </div>
-            <div className={`col-md-${right_width} text-center align-self-start`}>
+            <div className={`col-md-${right_width} text-right`}>
               <HeaderRight
                 hub={this.props.hub}
                 />
diff --git a/hubs/static/client/app/components/StateButton.css b/hubs/static/client/app/components/StateButton.css
index e631f4b..216aaa6 100644
--- a/hubs/static/client/app/components/StateButton.css
+++ b/hubs/static/client/app/components/StateButton.css
@@ -1,7 +1,7 @@
 /* By default "outline" buttons turn into "regular" buttons on hover */
 .StateButton.btn-outline-primary.nohover:hover {
-    color: #007bff;
+    color: #3c6eb4;;
     background-color: transparent;
     background-image: none;
-    border-color: #007bff;
+    border-color: #3c6eb4;;
 }