Header CSS tweaks, move to own file

resources/frontend_client/app/css/edit.css → resources/frontend_client/app/components/Header.css

+
+.Header-title {
+    width: 455px;
+}
+
+.Header-buttonSection {
+    padding-right: 1em;
+    margin-right: 1em;
+    border-right: 1px solid rgba(0,0,0,0.2);
+}
+
+.Header-buttonSection:last-child {
+    padding-right: 0;
+    margin-right: 0;
+    border-right: none;
+}
+
 .EditHeader {
     background-color: #6CAFED;
 }
@@ -10,11 +27,6 @@
     color: rgba(255,255,255,0.5);
 }
 
-.EditHeader .Button {
-    margin-left: 0.75em;
-}
-
-
 .EditHeader .Button {
     color: var(--brand-color);
     border: none;
@@ -22,6 +34,7 @@
     font-size: 0.75rem;
     background-color: rgba(255,255,255,0.5);
     font-weight: normal;
+    margin-left: 0.75em;
 }
 
 .EditHeader .Button--primary {
@@ -32,11 +45,6 @@
     background-color: white;
 }
 
-
 .EditHeader .Button.Button--primary:hover {
     background-color: var(--brand-color);
 }
-
-.EditTitle {
-    width: 455px;
-}

resources/frontend_client/app/components/Header.react.js

@@ -11,7 +11,7 @@ export default class Header extends React.Component {
     renderEditHeader() {
         if (this.props.isEditing) {
             return (
-                <div className="EditHeader p1 px3 flex align-center">
+                <div className="EditHeader wrapper py1 flex align-center">
                     <span className="EditHeader-title">{this.props.editingTitle}</span>
                     <span className="EditHeader-subtitle mx1">{this.props.editingSubtitle}</span>
                     <span className="flex-align-right">
@@ -26,7 +26,7 @@ export default class Header extends React.Component {
         var titleAndDescription;
         if (this.props.isEditingInfo) {
             titleAndDescription = (
-                <div className="EditTitle flex flex-column flex-full bordered rounded mt1 mb2">
+                <div className="Header-title flex flex-column flex-full bordered rounded my1">
                     <Input className="AdminInput text-bold border-bottom rounded-top h3" type="text" value={this.props.item.name} onChange={this.setItemAttribute.bind(this, "name")}/>
                     <Input className="AdminInput rounded-bottom h4" type="text" value={this.props.item.description} onChange={this.setItemAttribute.bind(this, "description")} placeholder="No description yet" />
                 </div>
@@ -34,7 +34,7 @@ export default class Header extends React.Component {
         } else {
             if (this.props.item && this.props.item.id != null) {
                 titleAndDescription = (
-                    <div className="EditTitle flex flex-column flex-full mt1 mb2">
+                    <div className="Header-title flex flex-column flex-full my1">
                         <div className="text-bold h3 p1">{this.props.item.name}</div>
                         <div className="h4 p1">{this.props.item.description || "No description yet"}</div>
                     </div>
@@ -42,7 +42,7 @@ export default class Header extends React.Component {
             } else {
                 titleAndDescription = (
                     <div className="flex align-center">
-                        <h1 className="Entity-title">New {this.props.objectType}</h1>
+                        <h1 className="Entity-title my1">{"New " + this.props.objectType}</h1>
                     </div>
                 );
             }
@@ -59,7 +59,7 @@ export default class Header extends React.Component {
 
         var headerButtons = this.props.headerButtons.map((section, sectionIndex) => {
             return (
-                <span key={sectionIndex} className="QueryHeader-section">
+                <span key={sectionIndex} className="Header-buttonSection">
                     {section.map((button, buttonIndex) => {
                         return <span key={buttonIndex}>{button}</span>;
                     })}
@@ -70,7 +70,7 @@ export default class Header extends React.Component {
         return (
             <div>
                 {this.renderEditHeader()}
-                <div className="py1 lg-py2 xl-py3 QueryBuilder-section wrapper flex align-center">
+                <div className={"QueryBuilder-section flex align-center " + this.props.headerClassName}>
                     <div className="Entity">
                         {titleAndDescription}
                         {attribution}
@@ -90,5 +90,6 @@ Header.defaultProps = {
     headerButtons: [],
     editingTitle: "",
     editingSubtitle: "",
-    editingButtons: []
+    editingButtons: [],
+    headerClassName: "py1 lg-py2 xl-py3 wrapper"
 };

resources/frontend_client/app/components/LoadingAndErrorWrapper.react.js

@@ -31,7 +31,7 @@ export default class LoadingAndErrorWrapper extends Component {
         return (
             <div className="Dashboard full-height flex flex-row flex-full">
                 { this.props.error ?
-                    <div className="Dash-wrapper wrapper py4 text-brand text-centered flex-full bg-white">
+                    <div className="wrapper py4 text-brand text-centered flex-full bg-white">
                         <h2 className="text-normal text-grey-2">{this.getErrorMessage()}</h2>
                     </div>
                 : this.props.loading ?

resources/frontend_client/app/dashboard/components/Dashboard.react.js

@@ -35,7 +35,9 @@ export default class Dashboard extends Component {
             <LoadingAndErrorWrapper loading={!dashboard} error={error}>
             {() =>
                 <div className="full">
-                    <DashboardHeader {...this.props} />
+                    <header className="bg-white border-bottom">
+                        <DashboardHeader {...this.props} />
+                    </header>
                     <div className="Dash-wrapper wrapper full-height">
                         { dashboard.ordered_cards.length === 0 ?
                             <div className="flex flex-column layout-centered">

resources/frontend_client/app/dashboard/components/DashboardGrid.react.js

@@ -79,8 +79,9 @@ export default class DashboardGrid extends React.Component {
 
     render() {
         var { dashboard } = this.props;
+        // margin-left and margin-right offsets the 10px padding inserted by RGL
         return (
-            <div>
+            <div style={{marginLeft: "-10px", marginRight: "-10px"}}>
                 <ReactGridLayout
                     className={cx("DashboardGrid", { "Dash--editing": this.props.isEditing })}
                     cols={6}

resources/frontend_client/app/dashboard/components/DashboardHeader.react.js

@@ -170,6 +170,7 @@ export default class DashboardHeader extends Component {
 
         return (
             <Header
+                headerClassName="Dash-wrapper wrapper"
                 objectType="dashboard"
                 item={dashboard}
                 isEditing={this.props.isEditing}