changed download button UI

certificates/lib.ftd

@@ -16,6 +16,9 @@ spacing.fixed.px: 24
 width.fixed.px: 1250
 align-content: right
 
+-- download-button:
+certificate-id: $display-certificate.certificate-id
+
 -- ftd.column:
 width: fill-container
 id: $display-certificate.certificate-id
@@ -33,20 +36,49 @@ open-in-new-tab: true
 
 -- end: ftd.column
 
--- ftd.column:
-spacing.fixed.px: 12
-align-content: center
+-- end: ftd.row
+
+-- end: display-certificate
+
+
+
+
+
+-- component download-button:
+boolean $mouse-in: false
+string certificate-id:
+string filename: certificate.jpg
+
+-- ftd.row:
+width: hug-content
+align-self: end
+padding-horizontal.px: 12
+padding-vertical.px: 10
+border-width.px: 1
+border-color: $inherited.colors.border
+border-radius.px: 48
+color: $inherited.colors.text-strong
+role: $inherited.types.copy-small
+spacing.fixed.px: 8
+margin-left.px if { ftd.device == "desktop"  }: 20
+background.solid: $inherited.colors.background.base
+background.solid if { download-button.mouse-in }: $inherited.colors.cta-primary.hover
+$on-mouse-enter$: $ftd.set-bool($a = $download-button.mouse-in, v = true)
+$on-mouse-leave$: $ftd.set-bool($a = $download-button.mouse-in, v = false)
+$on-click$: $utils.download-as-image(element_id = $download-button.certificate-id, filename = $download-button.filename)
 
 -- ftd.image:
 src: $assets.files.assets.certificate.download.svg
-src if { display-certificate.mouse-over }: $assets.files.assets.certificate.download-hover.svg
-width.fixed.px: 30
-$on-click$: $utils.download-as-image(element_id = $display-certificate.certificate-id, filename = certificate.jpg)
-$on-mouse-enter$: $ftd.set-bool($a = $display-certificate.mouse-over, v = true)
-$on-mouse-leave$: $ftd.set-bool($a = $display-certificate.mouse-over, v = false)
+src if { download-button.mouse-in }: $assets.files.assets.certificate.download-hover.svg
+width.fixed.px: 16
+height.fixed.px: 16
+align-self: center
 
--- end: ftd.column
+-- ftd.text: Download Certificate
+align-self: center
+color: $inherited.colors.text
+color if { download-button.mouse-in }: white
 
 -- end: ftd.row
 
--- end: display-certificate
+-- end: download-button