Merge pull request #1112 from dod-ccpo/app-settings-styling

App settings styling (part 1)

styles/components/_portfolio_layout.scss

@@ -29,9 +29,15 @@
   &__name {
     @include h1;
     h1 {
-      margin: ($gap * 2) $gap ($gap * 2) $gap;
+      margin: 0 $gap ($gap * 2) 0;
       font-size: 3.5rem;
     }
+
+    p {
+      font-size: $small-font-size;
+      margin: 0 0 (-$gap * 0.5);
+      color: $color-gray-medium;
+    }
   }
 
   &__budget {
@@ -69,17 +75,26 @@
     font-size: $small-font-size;
 
     .icon-link {
-      padding: 0.8rem 1.6rem;
+      padding: $gap;
+      border-radius: 0;
+      color: $color-blue-darkest;
+
+      &:hover {
+        background-color: $color-aqua-lightest;
+      }
 
-      color: $color-gray;
-      opacity: 0.3;
       .icon {
-        @include icon-color($color-gray);
+        @include icon-color($color-blue-darkest);
       }
 
       &.active {
-        opacity: 1;
         color: $color-blue;
+        background-color: $color-gray-lightest;
+
+        &:hover {
+          background-color: $color-aqua-lightest;
+        }
+
         .icon {
           @include icon-color($color-blue);
         }
@@ -121,7 +136,7 @@
 }
 
 .portfolio-content {
-  margin: 1 * $gap $gap 0 $gap;
+  margin: (4 * $gap) $gap 0 $gap;
 
   .panel {
     @include shadow-panel;
@@ -133,11 +148,6 @@
       padding-bottom: 0;
     }
 
-    .subheading {
-      font-size: 1.4rem;
-      color: $color-gray;
-    }
-
     .responsive-table-wrapper {
       padding-bottom: $gap * 3;
       margin-bottom: 0;
@@ -249,7 +259,6 @@
 
     textarea {
       max-height: 9rem;
-      max-width: none;
     }
 
     .panel__footer {