Merge pull request #12836 from edx/renzo/switch-cert-icon

Use SVG cert icon for program detail page certificate section

lms/static/js/learner_dashboard/views/certificate_status_view.js

@@ -5,7 +5,8 @@
             'underscore',
             'gettext',
             'edx-ui-toolkit/js/utils/html-utils',
-            'text!../../../templates/learner_dashboard/certificate_status.underscore'
+            'text!../../../templates/learner_dashboard/certificate_status.underscore',
+            'text!../../../templates/learner_dashboard/certificate_icon.underscore'
            ],
          function(
              Backbone,
@@ -13,10 +14,12 @@
              _,
              gettext,
              HtmlUtils,
-             certificateStatusTpl
+             certificateStatusTpl,
+             certificateIconTpl
          ) {
             return Backbone.View.extend({
-                tpl: HtmlUtils.template(certificateStatusTpl),
+                statusTpl: HtmlUtils.template(certificateStatusTpl),
+                iconTpl: HtmlUtils.template(certificateIconTpl),
 
                 initialize: function(options) {
                     this.$el = options.$el;
@@ -24,8 +27,13 @@
                 },
 
                 render: function() {
-                    var data = this.model.toJSON();
-                    HtmlUtils.setHtml(this.$el, this.tpl(data));
+                    var data = this.model.toJSON(),
+                        $icons;
+
+                    HtmlUtils.setHtml(this.$el, this.statusTpl(data));
+
+                    $icons = this.$('.certificate-icon');
+                    HtmlUtils.setHtml($icons, this.iconTpl());
                 }
             });
         }

lms/static/sass/elements/_icons.scss

-.verified-cert-icon {
+.certificate-icon .certificate-body {
   @include float(left);
   @include margin-right($baseline*0.4);
 
-  margin-top: ($baseline/4);
-  background: url('#{$static-path}/images/icon-sm-verified.png') no-repeat;
-  background-position: -4px -5px;
+  margin-top: ($baseline/10);
+  width: 23px;
+  height: 20px;
+  padding: 2px;
   background-color: palette(grayscale, white-t);
-  width: 20px;
-  height: 18px;
+  border-style: solid;
+  border-width: 2px;
+}
+
+.green-certificate-icon .certificate-body {
+  fill: palette(success, dark);
+  border-color: palette(success, dark);
+}
+
+.blue-certificate-icon .certificate-body {
+  fill: palette(primary, dark);
+  border-color: palette(primary, dark);
 }

lms/templates/learner_dashboard/certificate_icon.underscore

+<svg class="certificate-body" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12.9 9.2">
+  <rect y="5.8" width="12.9" height="1.1" rx="0.5" ry="0.5"/>
+  <rect y="8.1" width="12.9" height="1.1" rx="0.5" ry="0.5"/>
+  <rect y="1.5" width="6.3" height="1.1" rx="0.5" ry="0.5"/>
+  <circle cx="10.5" cy="2" r="2"/>
+</svg>

lms/templates/learner_dashboard/certificate_status.underscore

 <div class="message col-12 md-col-8">
-    <span class="verified-cert-icon" aria-hidden="true"></span>
+    <span class="certificate-icon green-certificate-icon" aria-hidden="true"></span>
     <span class="card-msg"><%- gettext('Congratulations! You have earned a certificate for this course.') %></span>
 </div>
 <div class="action col-12 md-col-4"> 
     <a href="<%- certificate_url %>" class="btn-brand cta-secondary">
-        <span class="verified-cert-icon" aria-hidden="true"></span>
+        <span class="certificate-icon blue-certificate-icon" aria-hidden="true"></span>
         <%- gettext('View/Share Certificate') %>
     </a>
 </div>