Add progress bar

Author: Stigmatoz

src/assets/css/main.css

@@ -1,3 +1,6 @@
+:root {
+    --main-color: #6ebf5d;
+}
 ::-webkit-scrollbar-track {
     border-radius: 10px;
     background-color: #F5F5F5;

src/components/Favicon.vue

@@ -1,21 +1,26 @@
 <template>
   <img
-    v-if="favicon == undefined"
+    v-if="favicon == undefined || favicon == ''"
     class="favicon"
     height="22"
     :src="NO_FAVICON_URL"
   />
-  <img v-else class="favicon" height="30" :src="favicon" />
+  <img
+    v-else
+    class="favicon"
+    height="30"
+    :src="favicon"
+  />
 </template>
 
 <script lang="ts">
 export default {
-  name: "Favicon",
+  name: 'Favicon',
 };
 </script>
 
 <script lang="ts" setup>
-import { NO_FAVICON_URL } from "../utils/consts";
+import { NO_FAVICON_URL } from '../utils/consts';
 
 const props = defineProps<{
   favicon: string | undefined;

src/components/TabItem.vue

@@ -6,8 +6,11 @@
       <p>{{ sessions }}</p>
     </div>
     <div class="display-inline-block float-right">
-      <p class="time">{{ summaryTimeForTab }}</p>
-      <p class="text-right">{{ percent }}</p>
+      <p class="text-right time">{{ summaryTimeForTab }}</p>
+      <p class="text-right">{{ percent }} %</p>
+    </div>
+    <div class="progress-bar">
+      <div :style="styleForProgressBar"></div>
     </div>
   </div>
 </template>
@@ -40,15 +43,17 @@ const sessions = computed(() => {
 });
 
 const summaryTimeForTab = convertSummaryTimeToString(currentDayValue?.summary);
-const percent = `${getPercentage(currentDayValue?.summary, props.summaryTime)} %`;
+const percent = getPercentage(currentDayValue?.summary, props.summaryTime);
+
+const styleForProgressBar = computed(() => `width: ${percent}%`);
 </script>
 
 <style scoped>
 .tab-item {
   padding: 7px;
   border: 1px transparent solid;
   border-radius: 10px;
-  margin: 7px;
+  margin: 10px;
 }
 .tab-item:hover {
   border: 1px rgb(202, 202, 202) solid;
@@ -68,4 +73,13 @@ const percent = `${getPercentage(currentDayValue?.summary, props.summaryTime)} %
   font-size: 14px;
   font-weight: 600;
 }
+.tab-item .progress-bar {
+  margin: 5px 0 0 45px;
+  border-radius: 10px;
+  border: 1px rgb(225 224 224) solid;
+}
+.tab-item .progress-bar div {
+  height: 6px;
+  background-color: var(--main-color);
+}
 </style>

src/pages/Popup.vue

@@ -2,15 +2,21 @@
   <div class="headerBlock">
     <p class="header">Web Activity Time Tracker</p>
     <div class="float-right">
-      <img height="20" src="../assets/icons/dark-mode.svg" />
-      <img height="20" src="../assets/icons/settings.svg" />
+      <img
+        height="20"
+        src="../assets/icons/dark-mode.svg"
+      />
+      <img
+        height="20"
+        src="../assets/icons/settings.svg"
+      />
     </div>
   </div>
   <TabList />
 </template>
 
 <script lang="ts" setup>
-import TabList from "../components/TabList.vue";
+import TabList from '../components/TabList.vue';
 </script>
 
 <style>
@@ -24,7 +30,7 @@ body {
 
 .headerBlock {
   height: 50px;
-  background-color: #6ebf5d;
+  background-color: var(--main-color);
 }
 
 .headerBlock .header {