Add private badge to repos list

vladgogo · Jun 23, 2017 · e640ebb · e640ebb
1 parent 2daf44a
commit e640ebb
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 16 deletions.
diff --git a/app/assets/javascripts/components/repo.jsx b/app/assets/javascripts/components/repo.jsx
@@ -28,8 +28,7 @@ class Repo extends React.Component {
   render() {
     const { isProcessingId, repo } = this.props;
     const { active, id, name, price_in_cents } = repo;
-
-    const showPrivate = !active && price_in_cents > 0;
+    const showPrivate = price_in_cents > 0;
 
     return (
       <li
@@ -44,10 +43,13 @@ class Repo extends React.Component {
           {name}
         </div>
 
-        <div className={classNames(
-          "repo-activation-toggle",
-          {"repo-activation-toggle--private": showPrivate}
-        )}>
+        { showPrivate &&
+          <span className="badge margin-left-small">
+            Private
+          </span>
+        }
+
+        <div className="repo-activation-toggle">
           {this.renderButton()}
         </div>
       </li>

diff --git a/app/assets/stylesheets/components/_badge.scss b/app/assets/stylesheets/components/_badge.scss
@@ -0,0 +1,10 @@
+.badge {
+  border: 1px solid $light-gray;
+  border-radius: 3px;
+  color: $base-font-color;
+  display: inline-block;
+  font-size: $font-size-small;
+  line-height: 1;
+  margin: 0;
+  padding: 0.125em 0.25em;
+}
diff --git a/app/assets/stylesheets/components/_components.scss b/app/assets/stylesheets/components/_components.scss
@@ -1,6 +1,7 @@
 @import "allowance";
 @import "app-nav";
 @import "avatar";
+@import "badge";
 @import "button";
 @import "code";
 @import "footer";

diff --git a/app/assets/stylesheets/pages/repos/_index.scss b/app/assets/stylesheets/pages/repos/_index.scss
@@ -1,12 +1,9 @@
 .repo {
   @include clearfix;
+  align-items: center;
   border-top: 1px solid $base-border-color;
   display: flex;
-  flex-direction: row;
-  justify-content: space-between;
   padding: 1em;
-  position: relative;
-  width: 100%;
 
   @include media($small-screen-only) {
     display: block;
@@ -32,7 +29,7 @@
   color: $medium-font-color;
   font-size: 1.5em;
   font-weight: $font-weight-light;
-  height: 100%;
+  line-height: 1;
   padding-bottom: 2px;
   transition: $base-transition;
 
@@ -60,10 +57,6 @@
   }
 }
 
-.repo-activation-toggle--private {
-  min-width: 250px;
-}
-
 .repo-toggle {
   background: rgba($purple, 0.1);
   border: 2px solid $purple;

diff --git a/app/assets/stylesheets/utilities/_margin.scss b/app/assets/stylesheets/utilities/_margin.scss
@@ -1,3 +1,7 @@
 .margin-right-x-small {
-  margin-right: $xsmall-spacing;
+  margin-right: $xsmall-spacing !important;
+}
+
+.margin-left-small {
+  margin-left: $small-spacing !important;
 }