Small changes dasboard UI

Stigmatoz · Stigmatoz · commit edec43323992 · 2024-02-13T14:07:33.000+03:00
diff --git a/src/assets/icons/by-hours.svg b/src/assets/icons/by-hours.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="800px" height="800px" viewBox="0 0 24 24" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg">
+<path d="M23,11a1,1,0,0,0-1,1,10.034,10.034,0,1,1-2.9-7.021A.862.862,0,0,1,19,5H16a1,1,0,0,0,0,2h3a3,3,0,0,0,3-3V1a1,1,0,0,0-2,0V3.065A11.994,11.994,0,1,0,24,12,1,1,0,0,0,23,11Z
+M12,6a1,1,0,0,0-1,1v5a1,1,0,0,0,.293.707l3,3a1,1,0,0,0,1.414-1.414L13,11.586V7A1,1,0,0,0,12,6Z"/></svg>
diff --git a/src/assets/icons/by-intervals.svg b/src/assets/icons/by-intervals.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20,3a1,1,0,0,0,0-2H4A1,1,0,0,0,4,3H5.049c.146,1.836.743,5.75,3.194,8-2.585,2.511-3.111,7.734-3.216,10H4a1,1,0,0,0,0,2H20a1,1,0,0,0,0-2H18.973c-.105-2.264-.631-7.487-3.216-10,2.451-2.252,3.048-6.166,3.194-8Zm-6.42,7.126a1,1,0,0,0,.035,1.767c2.437,1.228,3.2,6.311,3.355,9.107H7.03c.151-2.8.918-7.879,3.355-9.107a1,1,0,0,0,.035-1.767C7.881,8.717,7.227,4.844,7.058,3h9.884C16.773,4.844,16.119,8.717,13.58,10.126ZM12,13s3,2.4,3,3.6V20H9V16.6C9,15.4,12,13,12,13Z"/></svg>
diff --git a/src/components/Dashboad.vue b/src/components/Dashboad.vue
@@ -4,18 +4,20 @@
   </div>
   <div class="chart chartByHours">
     <div class="mt-10 mb-20">
-      <input
-        type="button"
+      <button
         :class="['chart-btn', chart == TypeOfChart.Horly ? 'active' : '']"
-        :value="t('byHours.message')"
         @click="openChart(TypeOfChart.Horly)"
-      />
-      <input
-        type="button"
+      >
+        <img class="ml-5" src="../assets/icons/by-hours.svg" height="22" />
+        {{ t('byHours.message') }}
+      </button>
+      <button
         :class="['ml-10', 'chart-btn', chart == TypeOfChart.Interval ? 'active' : '']"
-        :value="t('intervals.message')"
         @click="openChart(TypeOfChart.Interval)"
-      />
+      >
+        <img class="ml-5" src="../assets/icons/by-intervals.svg" height="22" />
+        {{ t('intervals.message') }}
+      </button>
     </div>
     <HourlyChart v-if="chart == TypeOfChart.Horly" />
     <TimeIntervalChart v-if="chart == TypeOfChart.Interval" />
@@ -73,6 +75,7 @@ function openChart(type: TypeOfChart) {
 }
 
 .chart-btn.active {
-  background-color: #428bff;
+  background-color: #428bff !important;
+  color: white;
 }
 </style>
