Add favicon for lists

Author: Stigmatoz

src/assets/css/dashboard.css

@@ -12,12 +12,12 @@ body {
 
 .title {
   font-size: 18px;
-  font-weight: 650;
+  font-weight: 600;
 }
 
 .setting-header {
-  font-weight: 550;
-  font-size: 15px;
+  font-weight: 600;
+  font-size: 16px;
 }
 
 .description {
@@ -44,6 +44,10 @@ body {
   font-size: 14px;
 }
 
+.url-list li span{
+  font-weight: 600;
+}
+
 input[type='text'] {
   height: 36px;
   padding: 0 0 0 5px;
@@ -315,5 +319,5 @@ label {
 
 .url-list .time-value {
   margin-top: 5px;
-  margin-left: 30px;
+  margin-left: 55px;
 }

src/assets/css/general.css

@@ -23,6 +23,9 @@
 .mt-20 {
   margin-top: 20px;
 }
+.mt-30 {
+  margin-top: 30px;
+}
 .mb-20 {
   margin-bottom: 20px;
 }

src/components/Dashboad.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="main">
     <div class="settings-item">
-      <label class="setting-header"> {{ t('dashboard.message') }} </label>
+      <label class="title"> {{ t('dashboard.message') }} </label>
     </div>
     <div class="chart chartByHours">
       <div class="mt-10 mb-20">

src/components/Limits.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <p class="setting-header mt-0">{{ t('limits.message') }}</p>
+    <p class="title mt-0">{{ t('limits.message') }}</p>
     <p class="description">
       {{ t('limits.description') }}
     </p>

src/components/ListWithTime.vue

@@ -8,8 +8,8 @@
           height="16"
           @click="editItemFromList(limit.domain, limit.time)"
         />
-        {{ limit.domain }}
-        <p class="time-value">{{ getTime(limit.time) }}</p>
+        <Favicon :url="limit.domain" :type="TypeOfUrl.WebSite" /> <span>{{ limit.domain }}</span>
+        <p class="time-value">{{ t('limit.message') }} : {{ getTime(limit.time) }}</p>
       </div>
     </li>
   </ul>
@@ -39,12 +39,13 @@ export default {
 </script>
 
 <script lang="ts" setup>
+import Favicon from './Favicon.vue';
 import { useNotification } from '@kyvg/vue3-notification';
 import { useI18n } from 'vue-i18n';
 import { injecStorage } from '../storage/inject-storage';
 import { Time } from '../utils/time';
 import { computed, onMounted, ref } from 'vue';
-import { ListWithTime } from '../utils/enums';
+import { ListWithTime, TypeOfUrl } from '../utils/enums';
 import { StorageParams } from '../storage/storage-params';
 import { isDomainEquals } from '../utils/common';
 import { extractHostname } from '../compositions/extract-hostname';

src/components/WhiteList.vue

@@ -1,11 +1,11 @@
 <template>
   <div>
-    <p class="setting-header mt-0">{{ t('whiteList.message') }}</p>
+    <p class="title mt-0">{{ t('whiteList.message') }}</p>
     <ul readonly class="url-list">
       <li v-for="(url, i) of whiteList" :key="i">
         <div>
           <img src="../assets/icons/delete.png" height="16" @click="deleteFromWhiteList(url)" />
-          {{ url }}
+          <Favicon :url="url" :type="TypeOfUrl.WebSite" /> <span>{{ url }}</span>
         </div>
       </li>
     </ul>
@@ -34,8 +34,10 @@ export default {
 </script>
 
 <script lang="ts" setup>
+import Favicon from './Favicon.vue';
 import { onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { TypeOfUrl } from '../utils/enums';
 import { useNotification } from '@kyvg/vue3-notification';
 import { injecStorage } from '../storage/inject-storage';
 import { StorageParams } from '../storage/storage-params';

src/pages/Dashboard.vue

@@ -20,21 +20,6 @@
         <Dashboad v-if="selectedTab == SettingsTab.Dashboard" />
       </div>
     </div>
-    <!-- <p class="tab-separator">Settings</p> -->
-    <div class="settings-tab">
-      <input
-        type="radio"
-        id="general-tab"
-        name="settings-group"
-        :checked="selectedTab == SettingsTab.GeneralSettings"
-        v-on:change="selectTab(SettingsTab.GeneralSettings)"
-      />
-      <label name="tabName" for="general-tab">{{ t('generalSettings.message') }}</label>
-
-      <div class="settings-content">
-        <GeneralSettings v-if="selectedTab == SettingsTab.GeneralSettings" />
-      </div>
-    </div>
 
     <div class="settings-tab">
       <input
@@ -81,6 +66,21 @@
     </div>
 
     <div class="settings-tab">
+      <input
+        type="radio"
+        id="general-tab"
+        name="settings-group"
+        :checked="selectedTab == SettingsTab.GeneralSettings"
+        v-on:change="selectTab(SettingsTab.GeneralSettings)"
+      />
+      <label name="tabName" for="general-tab">{{ t('generalSettings.message') }}</label>
+
+      <div class="settings-content">
+        <GeneralSettings v-if="selectedTab == SettingsTab.GeneralSettings" />
+      </div>
+    </div>
+
+    <div class="settings-tab mt-30">
       <input
         type="radio"
         id="about-tab"

src/pages/Popup.vue

@@ -138,9 +138,14 @@ function selectTab(type: TypeOfList) {
   margin: 7px 10px 0 0;
 }
 
+.headerBlock .icons-block a:hover {
+  color: rgb(99, 99, 243);
+}
+
 .headerBlock .icons-block a {
   font-size: 12px;
   cursor: pointer;
+  font-weight: 600;
 }
 
 .headerBlock .icons-block a img {