Make all dashcards the same height

Fixes: CNVS-38740

Test plan:
- Make sure one of your courses has a Term set for it
  (Course > Settings)
- Make sure some of your other courses do not have
  Terms set
- Your dashcards should now all be the same height,
  regardless of whether or not the course has a Term.

  Before: https://www.screencast.com/t/hVQADinnRQVv
  After: https://www.screencast.com/t/vE06qyrzM

Change-Id: I68b36cc140349854a09ea7defcf5b321423268ce
Reviewed-on: https://gerrit.instructure.com/123435
Tested-by: Jenkins
Reviewed-by: Pam Hiett <phiett@instructure.com>
QA-Review: Dan Sasaki <dsasaki@instructure.com>
Product-Review: Kyle Follett <kfollett@instructure.com>

app/jsx/dashboard_card/DashboardCard.js

@@ -291,29 +291,29 @@ export default class DashboardCard extends Component {
             {
               this.props.imagesEnabled && this.props.image ?
                 I18n.t('Course image for %{course}', {course: this.state.nicknameInfo.nickname})
-              :
-                I18n.t('Course card color region for %{course}', {course: this.state.nicknameInfo.nickname})
+                : I18n.t('Course card color region for %{course}', {course: this.state.nicknameInfo.nickname})
             }
           </span>
           {this.renderHeaderHero()}
           <a href={this.props.href} className="ic-DashboardCard__link">
-            <div
-              className="ic-DashboardCard__header_content"
-              style={{height: (this.props.term ? '75px' : '65px')}}
-            >
+            <div className="ic-DashboardCard__header_content">
               <h2 className="ic-DashboardCard__header-title ellipsis" title={this.props.originalName}>
                 <span style={{color: this.props.backgroundColor}}>
                   {this.state.nicknameInfo.nickname}
                 </span>
               </h2>
-              <p className="ic-DashboardCard__header-subtitle ellipsis" title={this.props.courseCode}>{this.props.courseCode}</p>
-              {
-                this.props.term ? (
-                  <p className="ic-DashboardCard__header-term ellipsis" title={this.props.term}>
-                    {this.props.term}
-                  </p>
-                ) : null
-              }
+              <div
+                className="ic-DashboardCard__header-subtitle ellipsis"
+                title={this.props.courseCode}
+              >
+                {this.props.courseCode}
+              </div>
+              <div
+                className="ic-DashboardCard__header-term ellipsis"
+                title={this.props.term}
+              >
+                {(this.props.term) ? this.props.term : null}
+              </div>
             </div>
           </a>
           {this.props.reorderingEnabled && (

app/stylesheets/bundles/dashboard_card.scss

@@ -23,10 +23,7 @@
 
 
 $ic-DashboardCard-width: 262px;
-$ic-DashboardCard-action-height: 40px;
-$ic-DashboardCard-action-width: floor($ic-DashboardCard-width / 4);
 $ic-DashboardCard-icon-size: 24px;
-$ic-DashboardCard-icon-padding: floor(($ic-DashboardCard-action-width - $ic-DashboardCard-icon-size) / 2);
 $ic-DashboardCard-icon-color: $ic-icon-link-color;
 
 // Optional parent container padding
@@ -96,7 +93,7 @@ $ic-DashboardCard-icon-color: $ic-icon-link-color;
 
 .ic-DashboardCard__header_content {
   box-sizing: border-box;
-  padding: $ic-sp*1.5 $ic-sp*1.5 0;
+  padding: $ic-sp $ic-sp*1.5 0;
   background: $ic-color-light;
 }
 
@@ -135,13 +132,13 @@ $ic-DashboardCard-icon-color: $ic-icon-link-color;
 .ic-DashboardCard__header-subtitle {
   line-height: 1.3;
   padding: 0;
-  margin: $ic-sp/3 0 0;
+  margin-top: $ic-sp/3;
 }
 
 .ic-DashboardCard__header-term {
-  margin: 0;
   line-height: 1.3;
   font-size: $baseFontSize - 2;
+  height: 1rem;
 }
 
 @if $use_high_contrast == false {
@@ -153,9 +150,6 @@ $ic-DashboardCard-icon-color: $ic-icon-link-color;
 
 .ic-DashboardCard__action-layout {
   position: relative;
-  display: inline-block;
-  width: $ic-sp*3;
-  line-height: 1;
 }
 
 .ic-DashboardCard__action-badge {
@@ -163,37 +157,32 @@ $ic-DashboardCard-icon-color: $ic-icon-link-color;
   box-shadow: 0 0 0 1px $ic-color-light;
   transition: all 0.2s;
   position: absolute;
-  top: -0.75em; right: -0.5em;
+  top: -0.5rem; right: -0.875rem;
   z-index: 1; // when dashcard links get squished, don't cut off badges
 }
 
-
-
 .ic-DashboardCard__action-container {
-  background: $ic-color-light;
   box-sizing: border-box;
   display: flex;
-  justify-content: flex-start;
-  flex-wrap: wrap;
-  align-items: center;
-  min-height: $ic-DashboardCard-action-height;
-  margin-bottom: $ic-sp*1.5;
+  padding: 0 0 $ic-sp;
+  margin-top: $ic-sp * 0.75;
 }
 
 .ic-DashboardCard__action {
   transition: color 0.2s;
-  display: block; // fix for IE10
-  position: relative; // for :after alignment
-  padding: 0 $ic-DashboardCard-icon-padding;
-  line-height: $ic-DashboardCard-action-height;
   box-sizing: border-box;
   color: $ic-DashboardCard-icon-color;
-  width: $ic-DashboardCard-action-width;
+  flex: 0 0 25%;
+  display: flex;
+  justify-content: center;
   @include overwrite-default-icon-size($ic-DashboardCard-icon-size);
 
   .no-touch & {
     &:focus {
-      @if $use_high_contrast { outline: 1px solid var(--ic-link-color); }
+      @if $use_high_contrast {
+        outline: 1px solid var(--ic-link-color);
+        outline-offset: 0.125rem;
+      }
       @else { outline: none; }
     }
     &:hover { color: var(--ic-brand-primary); }