Improve styling of organization profile

sleepycat · Jun 30, 2016 · d48a904 · d48a904
1 parent 1f1e0e7
commit d48a904
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 5 deletions.
diff --git a/public/javascripts/components/OrganizationProfile.js b/public/javascripts/components/OrganizationProfile.js
@@ -3,12 +3,26 @@ import React from 'react'
 export default class OrganizationProfile extends React.Component {
 
   listElements(technologies) {
-    return  technologies.map((tech) => <li key={ btoa(this.props.name + tech.name) } className="technology" >{ tech.name }</li>)
+    return(
+      <p>
+        <h5 className="profile_section_heading" >Technologies used</h5>
+	<ul>
+        {technologies.map((tech) => <li key={ btoa(this.props.name + tech.name) } className="technology" >{ tech.name }</li>)}
+	</ul>
+      </p>
+    )
   }
 
   publicRepos() {
     if(typeof this.props.code == 'string'){
-      return  <p><a key={ btoa(this.props.name + this.props.code) } href={this.props.code} className="repo" >{ this.props.code }</a></p>
+      return(
+        <p>
+          <h5 className="profile_section_heading">Public repos</h5>
+          <a key={ btoa(this.props.name + this.props.code) }
+            href={this.props.code}
+            className="repo_link" >{ this.props.code }</a>
+        </p>
+      )
     }
   }
 
@@ -19,9 +33,7 @@ export default class OrganizationProfile extends React.Component {
 	  <a href={ this.props.url } target="_blank">{ this.props.name }</a>
 	</h3>
         { this.publicRepos() }
-	<ul>
-           { this.listElements(this.props.technologies) }
-	</ul>
+        { this.listElements(this.props.technologies) }
       </div>
     )
   }

diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
@@ -1,5 +1,17 @@
 @import url(http://fonts.googleapis.com/css?family=Ubuntu);
 
+.repo_link {
+  margin-left: 1em;
+}
+
+.organization-detail a, .profile_section_heading {
+  color: #4682B4;
+}
+
+
+.profile_section_heading {
+}
+
 body {
  width: 100%;
  overflow: hidden;