Marker style

stockingly-frontend/src/components/BalanceSheet.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card color="blue-grey-lighten-4">
+  <v-card variant="outlined">
     <v-card-item>
       <v-card-title>Balance sheet</v-card-title>
     </v-card-item>

stockingly-frontend/src/components/EmployeesChart.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card color="blue-grey-lighten-4">
+  <v-card variant="outlined">
     <v-card-item>
       <v-card-title>Employees over time</v-card-title>
     </v-card-item>

stockingly-frontend/src/components/EpsChart.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card color="blue-grey-lighten-4">
+  <v-card variant="outlined">
     <v-card-item>
       <v-card-title>Earnings per Share (EPS)</v-card-title>
     </v-card-item>

stockingly-frontend/src/components/EpsComparisonChart.vue

@@ -1,7 +1,5 @@
 <template>
-    <v-row>
-      <v-col cols="12">
-        <v-card>
+  <v-card variant="outlined">
     <v-card-item>
       <v-card-title>Past Performance</v-card-title>
     </v-card-item>
@@ -10,8 +8,6 @@
       <ag-charts-vue class="chart" v-else :options="options" />
     </v-card-text>
   </v-card>
-      </v-col>
-    </v-row>
 </template>
    
 <script setup lang="ts">
@@ -48,8 +44,11 @@
       type: 'line',
       yKey: t,
       yName: t,
-        fill: getTickerColor(t),
       stroke: getTickerColor(t),
+      marker: {
+        fill: getTickerColor(t),
+        stroke: getTickerColor(t)
+      },
       tooltip: { renderer: renderer },
       highlightStyle: {
         item: { fillOpacity: 0 },

stockingly-frontend/src/components/StockPrice.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card color="blue-grey-lighten-4">
+  <v-card variant="outlined">
     <v-card-item>
       <v-card-title>Stock price over time</v-card-title>
     </v-card-item>