Create individual styles for each component, add no tags messsage

static/css/directives/components/pages/repo-page/body.scss

@@ -0,0 +1,44 @@
+.rp-description {
+  font-size: 16px;
+}
+
+.rp-panelBody {
+  padding: 15px 30px;
+}
+
+.rp-tabs {
+  border-bottom: 1px solid #DDD;
+}
+.rp-tabs > li.active > a,
+.rp-tabs > li.active > a:focus,
+.rp-tabs > li.active > a:hover {
+  border-width: 0;
+}
+
+.rp-tabs {
+  padding: 0 15px;
+  font-size: 20px;
+
+  li.active a {
+    color: #51a3d9;
+    border: none;
+    border-bottom: 1px solid #51a3d9;
+
+    &:hover {
+      color: #51a3d9;
+      border: none;
+      border-bottom: 1px solid #51a3d9;
+    }
+  }
+
+  li a {
+    color: #333;
+    
+    &:focus,
+    &:hover {
+      border: none;
+      background-color: #fff;
+    }
+  }
+}
+

static/css/directives/components/pages/repo-page/header.scss

@@ -0,0 +1,30 @@
+.rp-button {
+  float: right;
+  margin-right: 30px;
+}
+
+.rp-button__dropdown {
+  background-color: #fff;
+  border-radius: 4px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25), 0 0 1px 0 rgba(0, 0, 0, 0.5), inset 0 1px 0 0 rgba(255, 255, 255, 0.2);
+}
+
+.rp-button__text {
+  margin-right: 10px;
+}
+
+.rp-button__text--bold {
+  font-weight: 600;
+}
+
+
+.rp-header__row {
+  margin: 0;
+}
+
+.rp-title {
+  font-size: 24px;
+  color: #333;
+  float: left;
+}
+

static/css/directives/components/pages/repo-page/repo-page.scss

@@ -1,64 +1,13 @@
 // Repo Page specific styles here
 @import "../mixins";
-
+@import "body";
-.rp-badge {
+@import "header";
-  float: left;
+@import "sidebar";
-  width: 100%;
-  margin-bottom: 20px;
-}
-
-.rp-badge__icon {
-  float: left;
-  height: 25px;
-  font-size: 16px;
-  padding: 0 12px;
-  color: #ffffff;
-}
-
-.rp-badge__icon--private {
-  @extend .rp-badge__icon;
-  background-color: #d64456;
-}
-
-.rp-badge__icon--public {
-  @extend .rp-badge__icon;
-  background-color: #2fc98e;
-}
-
-.rp-description {
-  font-size: 16px;
-}
 
 .rp-header {
   padding: 30px;
 }
 
-.rp-header__row {
-  margin: 0;
-}
-
-.rp-imagesHeader {
-  font-size: 18px;
-  margin-bottom: 30px;
-}
-
-.rp-imagesTable {
-  margin-bottom: 30px;
-}
-
-.rp-imagesTable__headerCell {
-  font-size: 13px;
-  font-weight: 300;
-	font-style: normal;
-  color: #999;
-  padding: 10px;
-  border-bottom: 1px solid #ddd;  
-}
-
-.rp-imagesTable__tagIcon {
-  padding-right: 4px; 
-}
-
 .rp-mainPanel {
   margin-bottom: 20px;
   background-color: #fff;
@@ -71,78 +20,8 @@
   border-right: 1px solid #ddd;  
 }
 
-.rp-panelBody {
-  padding: 15px 30px;
-}
-
-.rp-sharing {
-  font-size: 16px;
-  color: #333;
-  margin-bottom: 30px;
-}
-
 .rp-sidebar {
   padding: 30px 30px 0 30px;
   border-left: 1px solid #DDD;
 }
 
-.rp-tabs {
-  border-bottom: 1px solid #DDD;
-}
-.rp-tabs > li.active > a,
-.rp-tabs > li.active > a:focus,
-.rp-tabs > li.active > a:hover {
-  border-width: 0;
-}
-
-.rp-tabs {
-  padding: 0 15px;
-  font-size: 20px;
-
-  li.active a {
-    color: #51a3d9;
-    border: none;
-    border-bottom: 1px solid #51a3d9;
-
-    &:hover {
-      color: #51a3d9;
-      border: none;
-      border-bottom: 1px solid #51a3d9;
-    }
-  }
-
-  li a {
-    color: #333;
-    
-    &:focus,
-    &:hover {
-      border: none;
-      background-color: #fff;
-    }
-  }
-}
-
-.rp-title {
-  font-size: 24px;
-  color: #333;
-  float: left;
-}
-
-.rp-button {
-  float: right;
-  margin-right: 30px;
-}
-
-.rp-button__dropdown {
-  background-color: #fff;
-  border-radius: 4px;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25), 0 0 1px 0 rgba(0, 0, 0, 0.5), inset 0 1px 0 0 rgba(255, 255, 255, 0.2);
-}
-
-.rp-button__text {
-  margin-right: 10px;
-}
-
-.rp-button__text--bold {
-  font-weight: 600;
-}

static/css/directives/components/pages/repo-page/sidebar.scss

@@ -0,0 +1,52 @@
+.rp-badge {
+  float: left;
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+.rp-badge__icon {
+  float: left;
+  height: 25px;
+  font-size: 16px;
+  padding: 0 12px;
+  color: #ffffff;
+}
+
+.rp-badge__icon--private {
+  @extend .rp-badge__icon;
+  background-color: #d64456;
+}
+
+.rp-badge__icon--public {
+  @extend .rp-badge__icon;
+  background-color: #2fc98e;
+}
+
+.rp-imagesHeader {
+  font-size: 18px;
+  margin-bottom: 30px;
+}
+
+.rp-imagesTable {
+  margin-bottom: 30px;
+}
+
+.rp-imagesTable__headerCell {
+  font-size: 13px;
+  font-weight: 300;
+	font-style: normal;
+  color: #999;
+  padding: 10px;
+  border-bottom: 1px solid #ddd;  
+}
+
+.rp-imagesTable__tagIcon {
+  padding-right: 4px; 
+}
+
+.rp-sharing {
+  font-size: 16px;
+  color: #333;
+  margin-bottom: 30px;
+}
+

static/js/directives/components/pages/repo-page/sidebar.tsx

@@ -34,6 +34,7 @@ class repoSidebar extends React.Component<ISidebar, {}> {
     let repository: any = this.props.repository;
     let sharing: string = repository.company || repository.namespace;
 
+    if (Object.keys(this.props.tags).length > 0) {
       for (let tagObject in this.props.tags) {
         sortedTags.push({
             name: this.props.tags[tagObject].name,
@@ -58,6 +59,18 @@ class repoSidebar extends React.Component<ISidebar, {}> {
           </tr>
         );
       });
+    }
+    else {
+      tagRows.push(
+        <tr>
+          <td>
+            No Tags Available
+          </td>
+          <td>
+          </td>
+        </tr>
+      )
+    }
 
     return(
       <div>