Remove hover effects and adjust style to fit branding

client/src/components/JobMetrics/CarbonEmissions/BarChart.vue

@@ -51,18 +51,8 @@ onMounted(() => {
         .attr("y", (d) => y(d.value))
         .attr("width", x.bandwidth())
         .attr("height", (d) => height - y(d.value))
-        .attr("fill", "#41B883")
-        .on("mouseover", mouseOver)
-        .on("mouseout", mouseOut);
+        .attr("fill", "#41B883");
 });
-
-function mouseOver(this: any) {
-    d3.select(this).transition().duration(300).attr("opacity", ".5").attr("fill", "red");
-}
-
-function mouseOut(this: any) {
-    d3.select(this).transition().duration(300).attr("fill", "#41B883").attr("opacity", "1");
-}
 </script>
 
 <template>

client/src/components/JobMetrics/CarbonEmissions/CarbonEmissionCard.vue

@@ -22,7 +22,9 @@ const props = defineProps<CarbonEmissionsCardProps>();
     </div>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
+@import "scss/theme/blue.scss";
+
 .usage {
     display: flex;
     flex-direction: column;
@@ -31,13 +33,11 @@ const props = defineProps<CarbonEmissionsCardProps>();
     gap: 0.5rem;
     height: 7rem;
     border-radius: 12px;
-    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
-    transition: all 0.3s ease-in-out;
+    border: 1px solid $brand-secondary;
 }
 
 .usage:hover {
-    background-color: rgba(0, 0, 0, 0.09);
-    box-shadow: none;
+    cursor: help;
 }
 
 .value {
@@ -47,10 +47,10 @@ const props = defineProps<CarbonEmissionsCardProps>();
 }
 
 #heading {
-    font-size: 1.25rem;
+    font-size: 1rem;
 }
 
 #total-emissions {
-    font-size: 1.5rem;
+    font-size: 1.25rem;
 }
 </style>