Styling for app perms

atst/forms/application_member.py

@@ -29,13 +29,19 @@ class EnvironmentForm(FlaskForm):
 
 class PermissionsForm(FlaskForm):
     perms_env_mgmt = BooleanField(
-        translate("portfolios.applications.members.new.manage_envs"), default=False
+        label="Manage Environments",
+        default=False,
+        description="Add and rename project environments, assign environment access roles to team members."
     )
     perms_team_mgmt = BooleanField(
-        translate("portfolios.applications.members.new.manage_team"), default=False
+        label="Edit Team",
+        default=False,
+        description="Add and remove team members."
     )
     perms_del_env = BooleanField(
-        translate("portfolios.applications.members.new.delete_envs"), default=False
+        label="Delete Application",
+        default=False,
+        description="Delete this application."
     )
 
     @property

styles/sections/_application_edit.scss

@@ -35,6 +35,24 @@
     text-align: left;
   }
 
+  .input__inline-fields {
+    padding: $gap * 2;
+    border: 1px solid $color-gray-lighter;
+
+    &.checked {
+      border: 1px solid $color-blue;
+    }
+
+    label {
+      font-weight: $font-bold;
+    }
+
+    p.usa-input__help {
+      margin-bottom: 0;
+      padding-left: 3rem;
+    }
+  }
+
   .form-row {
     margin-top: 0;
 

templates/components/checkbox_input.html

@@ -10,7 +10,7 @@
     v-bind:initial-checked='{{ field.data|string|lower }}'
     >
     <div>
-      <div class='usa-input {{ classes }} {% if field.errors %}usa-input--error{% endif %}'>
+      <div class='usa-input {{ classes }} {% if field.errors %}usa-input--error{% endif %}' v-bind:class="[{ 'checked': isChecked }]">
 
         <fieldset data-ally-disabled="true" v-on:change="onInput" class="usa-input__choices {% if inline %}usa-input__choices--inline{% endif %}">
           <legend>

templates/fragments/applications/new_member_modal_content.html

@@ -40,10 +40,11 @@
   </div>
 
   <h4>Project Permissions</h4>
+  <div class="application-perms">
     {{ CheckboxInput(new_member_form.permission_sets.perms_team_mgmt, classes="input__inline-fields") }}
     {{ CheckboxInput(new_member_form.permission_sets.perms_env_mgmt, classes="input__inline-fields") }}
     {{ CheckboxInput(new_member_form.permission_sets.perms_del_env, classes="input__inline-fields") }}
-
+  </div>
   <div class="environment-roles-new">
     <h4>Environment Access</h4>
     <hr>