Style lables and adjust list

scss/elements/_block_lists.scss

@@ -59,7 +59,8 @@
     margin: -$gap 0;
   }
 
-  .icon-link {
+  .icon-link,
+  .label {
     &:first-child {
       margin-left: -$gap;
     }

scss/elements/_typography.scss

@@ -4,7 +4,7 @@
  * @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/elements/_typography.scss
  */
 
-* {
+ * {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -56,8 +56,4 @@ dl {
   > div {
     margin-bottom: $gap * 2;
   }
-}
-
-.subtitle {
-  color: $color-gray;
-}
+}

scss/sections/_member_edit.scss

@@ -33,5 +33,9 @@
 
   .member-card__details {
    text-align: right;
+
+   .icon-link {
+    margin: 0 -$gap;
+   }
  }
 }

templates/member_edit.html.to

@@ -19,7 +19,7 @@
   <div class='panel member-card'>
     <div class='member-card__header'>
       <h1 class='member-card__heading'>{{ member_name }}</h1>
-      <dl><dt>Workspace Role</dt> <dd class='label'>{{member_workspace_role}}</dd></dl>
+      <dl><dt>Workspace Role</dt> <dd><span class='label label--info'>{{member_workspace_role}}</span></dd></dl>
     </div>
     <div class='member-card__details'>
       <dl>
@@ -57,7 +57,7 @@
           Development
         </span>
         <div class='project-list-item__environment__actions'>
-          <span>no access </span><a href="#" class="icon-link">set role</a>
+          <span class="label">no access </span><a href="#" class="icon-link">set role</a>
         </div>
       </li>
       <li class='block-list__item project-list-item__environment'>
@@ -65,7 +65,7 @@
           Sandbox
         </span>
         <div class='project-list-item__environment__actions'>
-          <span>no access</span><a href="#" class="icon-link">set role</a>
+          <span class="label">no access</span><a href="#" class="icon-link">set role</a>
         </div>
       </li>
       <li class='block-list__item project-list-item__environment'>
@@ -73,7 +73,7 @@
           Production
         </span>
         <div class='project-list-item__environment__actions'>
-          <span>Billing</span><a href="#" class="icon-link">set role</a>
+        <span class="label label--success">Billing</span><a href="#" class="icon-link">set role</a>
         </div>
       </li>
     </ul>
@@ -82,7 +82,7 @@
   <div class='block-list project-list-item'>
     <header class='block-list__header'>
       <h2 class='block-list__title'>{% module Icon('arrow-right') %} Digital Dojo</h2>
-      <span>no access</span>
+      <span class="label">no access</span>
     </header>
   </div>