Font and button styling adjustments (#1104)

blackbaud · Sep 25, 2017 · a1e281a · a1e281a
1 parent 2c971a7
commit a1e281a
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 29 deletions.
diff --git a/src/locales/resources_en_US.json b/src/locales/resources_en_US.json
@@ -541,7 +541,7 @@
   },
   "link_records_item_footer_search": {
     "_description": "",
-    "message": "Add or search for a record"
+    "message": "Add or search for record"
   },
   "link_records_item_footer_unlink": {
     "_description": "",

diff --git a/src/modules/link-records/link-records-item-diff.component.scss b/src/modules/link-records/link-records-item-diff.component.scss
@@ -15,10 +15,7 @@
 
     th,
     td {
-      font-family: $sky-font-family;
-      font-weight: normal;
-      line-height: 22px;
-      padding: 10px 10px 10px 0;
+      padding: $sky-padding $sky-padding $sky-padding 0;
       text-align: left;
 
       &.link-records-item-diff-update {
@@ -27,13 +24,12 @@
       }
 
       &.link-records-item-diff-value {
-        font-family: $sky-font-family;
         word-break: break-all;
         white-space: pre-line;
       }
 
       &.item-deemphasized {
-        color: $sky-text-color-deemphasized;
+        @include sky-deemphasized;
       }
 
       &.item-highlighted {
@@ -51,11 +47,6 @@
   }
 
   /deep/ sky-checkbox {
-    label {
-      font-size: 13px;
-      line-height: 20px;
-    }
-
     .sky-checkbox {
       display: flex;
       align-items: center;

diff --git a/src/modules/link-records/link-records-item.component.html b/src/modules/link-records/link-records-item.component.html
@@ -50,13 +50,13 @@
       <button *ngIf="record.status == STATUSES.Suggested || record.status == STATUSES.Selected" (click)="edit()" class="sky-btn sky-btn-primary">
           {{'link_records_item_footer_link' | skyResources}}
       </button>
-      <button *ngIf="record.status == STATUSES.Suggested || record.status == STATUSES.Selected" (click)="unlink()" class="sky-btn sky-btn-link">
+      <button *ngIf="record.status == STATUSES.Suggested || record.status == STATUSES.Selected" (click)="unlink()" class="sky-btn sky-btn-default">
           {{'link_records_item_footer_search' | skyResources}}
       </button>
       <button *ngIf="record.status == STATUSES.Linked || record.status == STATUSES.Created" (click)="unlink()" class="sky-btn sky-btn-link">
           {{'link_records_item_footer_unlink' | skyResources}}
       </button>
-      <button *ngIf="record.status == STATUSES.NoMatch" (click)="create()" class="sky-btn sky-btn-link">
+      <button *ngIf="record.status == STATUSES.NoMatch" (click)="create()" class="sky-btn sky-btn-default">
           {{'link_records_item_footer_create' | skyResources}}
       </button>
       <button *ngIf="record.status == STATUSES.Edit" (click)="link()" class="sky-btn sky-btn-primary">

diff --git a/src/modules/link-records/link-records-item.component.scss b/src/modules/link-records/link-records-item.component.scss
@@ -10,9 +10,7 @@
   width: 710px;
 
   .link-records-item-info {
-    font-family: $sky-font-family;
-    font-size: 14px;
-    font-weight: 600;
+    @include sky-emphasized;
     text-align: center;
   }
 
@@ -36,8 +34,7 @@
 
     .link-records-item-content {
       flex-grow: 1;
-      font-size: 13px;
-      padding: 10px 20px 10px 25px;
+      padding: $sky-padding $sky-padding-double $sky-padding 25px;
     }
 
     .link-records-item-header,
@@ -49,19 +46,24 @@
 
     .link-records-item-header {
       @include sky-border(light, bottom);
-      font-family: $sky-font-family-condensed;
-      font-size: 22px;
-      font-weight: 300;
-      font-style: normal;
-      padding: 10px 20px 10px 25px;
+      @include sky-subsection-heading;
+      padding: $sky-padding;
     }
 
     .link-records-item-footer {
       @include sky-border(light, top);
-      padding: 7px 20px 7px 25px;
+      padding: $sky-padding-3_4 $sky-padding;
 
-      .sky-btn {
-        font-size: 14px;
+      & button.sky-btn:not(:first-child) {
+        margin-left: $sky-margin;
+      }
+
+      & button.sky-btn.sky-btn-link {
+        margin-left: 0;
+
+        &:first-child {
+          margin-left: -$sky-margin;
+        }
       }
     }
   }
@@ -87,8 +89,8 @@
         font-size: 29px;
         margin: 7px 0 0;
 
-        &.fa-question-circle {
-          color: $sky-color-black;
+        &.fa-question-circle, &.fa-pencil {
+          color: $sky-highlight-color-warning;
         }
       }
     }