Add subscriptions button and new color variables

app/coffee/modules/admin/memberships.coffee

@@ -90,6 +90,11 @@ class MembershipsController extends mixOf(taiga.Controller, taiga.PageMixin, tai
             @scope.memberships = _.filter(data.models, (membership) ->
                                     membership.user == null or membership.is_user_active)
 
+            _.map(@scope.memberships, (member) =>
+                if member.is_owner
+                    @scope.projectOwnerEmail = member.user_email
+            )
+
             @scope.page = data.current
             @scope.count = data.count
             @scope.paginatedBy = data.paginatedBy
@@ -502,7 +507,8 @@ NoMoreMembershipsExplanationDirective = () ->
     return {
           templateUrl: "admin/no-more-memberships-explanation.html"
           scope: {
-              project: "="
+              project: "=",
+              ownerEmail: "="
           }
     }
 

app/locales/taiga/locale-en.json

@@ -459,6 +459,7 @@
             "PAGE_TITLE": "Memberships - {{projectName}}",
             "ADD_BUTTON": "+ New member",
             "ADD_BUTTON_TITLE": "Add new member",
+            "UPGRADE_BUTTON": "Upgrade your plan",
             "LIMIT_USERS_WARNING_MESSAGE_FOR_ADMIN": "If you would like to <strong>add more members</strong>, please contact the project owner <a href='mailto:{{ owner_email }}' title='{{ owner_email }}'>{{ owner_email }}</a>",
             "LIMIT_USERS_WARNING_MESSAGE_FOR_OWNER": "This project has reached its limit of <strong>({{members}})</strong> allowed members. If you would like to increase that limit please contact the administrator."
         },

app/partials/admin/admin-memberships.jade

@@ -14,18 +14,18 @@ div.wrapper.memberships(
         .header-with-actions
             header
                 include ../includes/components/mainTitle
-                .header-message 
-                    tg-no-more-memberships-explanation(ng-if="canAddUsers == false", project="project")
+                .header-message
+                    tg-no-more-memberships-explanation(ng-if="canAddUsers == false", project="project", owner-email="projectOwnerEmail")
 
-                    .action-buttons
+                    .action-buttons(
+                            ng-if="canAddUsers == true"
+                        )
                         button.button-green(
                             translate="ADMIN.MEMBERSHIPS.ADD_BUTTON"
                             title="{{ ADMIN.MEMBERSHIPS.ADD_BUTTON_TITLE | translate }}",
                             ng-click="ctrl.addNewMembers()"
-                            ng-if="canAddUsers == true"
                         )
 
-
         include ../includes/modules/admin/admin-membership-table
 
         div.paginator.memberships-paginator

app/partials/admin/no-more-memberships-explanation.jade

@@ -7,5 +7,5 @@ p.admin-subtitle(
 p.admin-subtitle(
     ng-if="project.i_am_owner == false"
     translate="ADMIN.MEMBERSHIPS.LIMIT_USERS_WARNING_MESSAGE_FOR_ADMIN"
-    translate-values="{members: project.total_memberships, owner_email: project.owner.username }"
+    translate-values="{owner_email: project.owner.username}"
 )

app/styles/layout/admin-memberships.scss

@@ -1,8 +1,27 @@
 .admin-membership {
 
     .header-message {
-        background: lighten($primary, 65%);
+        background: $primary-background;
+        margin-top: 1rem;
         padding: 1rem;
+
+        .no-more-membership {
+            align-items: center;
+            color: $grayer;
+            display: flex;
+
+            strong,
+            a {
+                @include font-type(bold)
+            }
+            p {
+                color: $grayer;
+                flex-grow: 1;
+                margin: 0;
+                padding-left: 2rem;
+                padding-right: 1rem;
+            }
+        }
     }
     .limit-users-warning {
         @include font-size(small);

app/themes/high-contrast/variables.scss

@@ -16,6 +16,7 @@ $white: #fff;
 $primary-light: #212121;
 $primary: #000;
 $primary-dark: #000;
+$primary-background: #dfdfdf;
 
 // Mass white
 $mass-white: #f5f5f5;

app/themes/material-design/variables.scss

@@ -19,6 +19,7 @@ $mass-white: #f5f5f5;
 $primary-light: #8c9eff;
 $primary: #3f51b5;
 $primary-dark: #1a237e;
+$primary-background: #929dd8;
 
 // Status colors
 $red-light: #ff5252;

app/themes/taiga/variables.scss

@@ -19,6 +19,7 @@ $mass-white: #f5f5f5;
 $primary-light: #9dce0a;
 $primary: #5b8200;
 $primary-dark: #879b89;
+$primary-background: #E8F5E3;
 
 //Status colors
 $red-light: #ff8282;