ECOM-3731 update browser new course area

lms/static/sass/multicourse/_dashboard.scss

@@ -23,12 +23,42 @@
     border-top: 3px solid $blue;
     padding: $baseline 0;
 
-    .copy {
-      @extend %t-copy-sub1;
-    }
-
-    .btn-find-courses {
-      @extend %btn-pl-elevated-alt;
+    .course-advertise {
+      @include clearfix();
+      box-sizing: border-box;
+      padding: $baseline;
+      background-color: $body-bg;
+      border: 1px solid $border-color-l3;
+      .advertise-message {
+        @include font-size(12);
+        color: $gray-d4;
+        margin-bottom: $baseline;
+      }
+      .ad-link {
+        @include text-align(center);
+        .btn-find-courses {
+          padding-bottom: 12px;
+          padding-top: 12px;
+        }
+        a {
+          @include font-size(16);
+          @include line-height(1.2);
+          padding: $baseline * 0.5;
+          border: 1px solid $blue;
+          color: $blue;
+          text-decoration: none;
+          display: block;
+          &:hover,
+          &:focus,
+          &:active {
+            color: $white;
+            background-color: $blue;
+          }
+          span {
+            @include margin-left($baseline*0.25);
+          }
+        }
+      }
     }
   }
 

themes/edx.org/lms/templates/dashboard.html

@@ -157,10 +157,19 @@ from openedx.core.djangolib.markup import Text, HTML
   % endif
 
   % if settings.FEATURES.get('COURSES_ARE_BROWSABLE'):
-    <div class="wrapper-find-courses">
-      <p class="copy">${_("Check out our recently launched courses and what's new in your favorite subjects")}</p>
-      <p><a class="btn-find-courses" href="${marketing_link('COURSES')}">${_("Find New Courses")}</a></p>
-    </div>
+      <div class="wrapper-find-courses">
+          <div class="course-advertise">
+              <div class="advertise-message">
+                  ${_("Browse recently launched courses and see what's new in your favorite subjects.")}
+              </div>
+              <div class="ad-link">
+                  <a class="btn-find-courses" href="${marketing_link('COURSES')}">
+                      <span class="icon fa fa-search" aria-hidden="true"></span>
+                      ${_("Explore New Courses")}
+                  </a>
+              </div>
+          </div>
+      </div>
   % endif
 
   <section class="profile-sidebar" id="profile-sidebar" role="region" aria-label="Account Status Info">