loading and header

Author: lucassabreu

src/Components/ProjectListApplyer.js

@@ -29,7 +29,6 @@ const LabelList = ({ header, labels, className, applyedLabels }) => (
 
 const ProjectListApplyer = ({
   className,
-  loading,
   projects,
   selectedPreject,
   applying,
@@ -40,52 +39,45 @@ const ProjectListApplyer = ({
   alert
 }) => (
     <div className={`ProjectListApplyer ${className}`}>
-      {loading ?
-        <section>
-          <h2>Loading...</h2>
-          <Loading />
-        </section>
-        :
-        <section>
-          <ProjectListSelector className="select-group"
-            disabled={applying}
-            selected={selectedPreject}
-            projects={projects}
-            onApply={(selected) => onApply(selected)}
+      <section>
+        <ProjectListSelector className="select-group"
+          disabled={applying}
+          selected={selectedPreject}
+          projects={projects}
+          onApply={(selected) => onApply(selected)}
+        />
+
+        {!alert ? null :
+          <Alert
+            color={alert.type}
+            children={alert.message}
           />
-          {!alert ? null :
-            <Alert
-              color={alert.type}
-              children={alert.message}
-            />
-          }
-          {!applying ? null :
-            <div className="row applying-status">
-              <div className="col-md-12"><Loading status={applyingStatus} /></div>
-            </div>
-          }
+        }
+        {!applying ? null :
+          <div className="row applying-status">
+            <div className="col-md-12"><Loading status={applyingStatus} /></div>
+          </div>
+        }
+        <LabelList
+          header="Labels to Add:"
+          className="labels-to-add"
+          labels={LABELS_TO_ADD}
+          applyedLabels={applyedLabels}
+        />
+        {labelsToRemove.length === 0 ? null :
           <LabelList
-            header="Labels to Add:"
-            className="labels-to-add"
-            labels={LABELS_TO_ADD}
+            header="Labels to Remove:"
+            className="labels-to-remove"
+            labels={labelsToRemove}
             applyedLabels={applyedLabels}
           />
-          {labelsToRemove.length === 0 ? null :
-            <LabelList
-              header="Labels to Remove:"
-              className="labels-to-remove"
-              labels={labelsToRemove}
-              applyedLabels={applyedLabels}
-            />
-          }
-        </section>
-      }
+        }
+      </section>
     </div>
   );
 
 ProjectListApplyer.propTypes = {
   className: PropTypes.string,
-  loading: PropTypes.bool,
 
   applying: PropTypes.bool,
   applyingStatus: PropTypes.string,
@@ -108,7 +100,6 @@ ProjectListApplyer.propTypes = {
 ProjectListApplyer.defaultProps = {
   className: "",
   applying: false,
-  loading: false,
   applyedLabels: [],
   labelsToRemove: [],
 }

src/Home.css

@@ -27,6 +27,10 @@
     margin: auto;
 }
 
+.CWSPApp .Home .project-handlers-buttons .btn .icon path {
+    fill: var(--primary)
+}
+
 .CWSPApp .Home .project-handlers-buttons .btn:active .icon path,
 .CWSPApp .Home .project-handlers-buttons .btn:hover .icon path {
     fill: white;

src/Origins/GitHub.js

@@ -1,6 +1,10 @@
 import React from 'react'
 import LABELS_TO_ADD from '../Labels';
 import ProjectListApplyer from '../Components/ProjectListApplyer';
+import Loading from '../Components/Loading'
+import GitHubLogo from '../assets/images/github.svg'
+
+import './helper.css';
 
 const LABELS_TO_REMOVE = [
   { name: "bug", color: "d73a4a" },
@@ -123,23 +127,39 @@ class GitHub extends React.Component {
   render() {
     const { loading, repositories, selectedOption, applyedLabels, applying, applyingStatus, alert } = this.state;
 
-    return <ProjectListApplyer
-      loading={loading}
-      projects={repositories.map(r => Object.assign(r, {
-        value: r.full_name,
-        label: r.full_name,
-      }))}
-      selectedPreject={selectedOption}
-
-      labelsToRemove={LABELS_TO_REMOVE}
-
-      onApply={(selected) => this.handleApply(selected)}
+    if (loading) {
+      return <section>
+        <h2>Loading GitHub...</h2>
+        <Loading />
+      </section>
+    }
 
-      applyedLabels={applyedLabels}
-      applying={applying}
-      applyingStatus={applyingStatus}
-      alert={alert}
-    />
+    return (
+      <div className="GitHub">
+        <section className="origin-header">
+          <h1>
+            <span className="origin-logo"><GitHubLogo /></span>
+            <span className="origin-name">GitHub</span>
+          </h1>
+        </section>
+        <ProjectListApplyer
+          projects={repositories.map(r => Object.assign(r, {
+            value: r.full_name,
+            label: r.full_name,
+          }))}
+          selectedPreject={selectedOption}
+
+          labelsToRemove={LABELS_TO_REMOVE}
+
+          onApply={(selected) => this.handleApply(selected)}
+
+          applyedLabels={applyedLabels}
+          applying={applying}
+          applyingStatus={applyingStatus}
+          alert={alert}
+        />
+      </div>
+    )
   }
 }
 

src/Origins/helper.css

@@ -0,0 +1,13 @@
+.origin-header {
+    padding-bottom: 0;
+}
+
+.origin-logo {
+    vertical-align: middle;
+    display: inline-block;
+    margin-right: .5ex;
+}
+
+.origin-logo svg {
+    height: 1em;
+}