BULL-1705 Changed to use DownloadButton

src/components/Base/DownloadButton.vue

@@ -15,6 +15,7 @@
     >
       <v-icon
         left
+        :class="iconClass"
         :size="iconSize"
         :style="{
           fill: iconFillColor,
@@ -34,7 +35,7 @@
           right
           size="24"
           :style="{ color: downloadColor + ' !important' }"
-          class="mt-1 "
+          :class="downloadIconClass"
         >
           mdi-download
         </v-icon>
@@ -113,6 +114,14 @@ export default {
     iconSize: {
       type: Number,
       default: 24
+    },
+    iconClass: {
+      type: String,
+      default: ""
+    },
+    downloadIconClass: {
+      type: String,
+      default: "mt-1"
     }
   }
 };

src/views/Cybersecurity.vue

@@ -170,29 +170,19 @@
           </v-card>
         </div>
         <div class="row justify-content-center mb-6">
-          <v-btn
-            :class="
-              $vuetify.breakpoint.smAndDown
-                ? 'my-3 mx-3 py-3 white--text'
-                : 'my-6 mr-6 py-3 white--text'
-            "
-            style="background-color: #002743"
+          <DownloadButton
+            text="*DORA Accelerate State of DevOps Report"
             href="https://services.google.com/fh/files/misc/state-of-devops-2019.pdf"
-            target="_blank"
-          >
-            <img
-              class="img-fluid ma-3 ml-n1"
-              src="@/assets/images/CyberSecurity/CS_PDF_Icon.png"
-              alt="PDF_Icon"
-              width="25"
-            />
-            *DORA Accelerate State of DevOps Report
-            <img
-              class="img-fluid my-3 ml-3 py-3"
-              src="@/assets/images/CyberSecurity/CS_GET_APP.png"
-              alt="Download PDF"
-            />
-          </v-btn>
+            icon="$vuetify.icons.picture-as-pdf"
+            iconFillColor="#FFFFFF"
+            :iconSize="$vuetify.breakpoint.smAndUp ? '36' : '26'"
+            :btnClass="'my-3 mx-3'"
+            :btnWidth="$vuetify.breakpoint.smAndUp ? '450' : '350'"
+            :textSize="$vuetify.breakpoint.smAndUp ? '16' : '14'"
+            :btnSpanTextClass="'ml-2 ml-sm-auto'"
+            :iconClass="'mr-n1 mr-sm-auto'"
+            :downloadIconClass="'ml-2 ml-sm-5'"
+          />
         </div>
         <div class="content-justify-center">
           <h2>DEVSECOPS LIFECYCLE FOR CtF AND cATO PROCESSES</h2>
@@ -314,6 +304,7 @@ import CyberSecurityTraditionalCollapsible from "@/components/CyberSecurityTradi
 import CyberSecurityContinuousCollapsible from "@/components/CyberSecurityContinuousCollapsible";
 import VueEasyLightbox from "vue-easy-lightbox";
 import { PageMeta } from "@/constants/PageMeta";
+import DownloadButton from "@/components/Base/DownloadButton";
 
 export default {
   name: "Cybersecurity",
@@ -323,7 +314,8 @@ export default {
     VueEasyLightbox,
     Lifecycle,
     CyberSecurityTraditionalCollapsible,
-    CyberSecurityContinuousCollapsible
+    CyberSecurityContinuousCollapsible,
+    DownloadButton
   },
   methods: {
     showImg(index) {