Icons for menu

Author: Stigmatoz

src/assets/css/dashboard.css

@@ -30,12 +30,12 @@ body {
 .url-list {
   border-radius: 3px;
   border: 1px solid #ccc;
-  width: 515px;
-  min-height: 150px;
+  width: 655px;
+  min-height: 300px;
   cursor: pointer;
   list-style: none;
   padding: 10px;
-  max-height: 300px;
+  max-height: 600px;
   overflow: auto;
 }
 
@@ -283,6 +283,10 @@ label {
 .settings-tab [type='radio'] {
   display: none;
 }
+.settings-tab img{
+  vertical-align: middle;
+  margin-right: 10px;
+}
 .settings-content {
   position: absolute;
   top: 0;
@@ -313,9 +317,6 @@ label {
   margin-right: 10px;
   cursor: pointer;
 }
-.url-list {
-  width: 655px !important;
-}
 
 .url-list .time-value {
   margin-top: 5px;

src/assets/icons/s-about.svg

@@ -1,6 +1,8 @@
 <template>
-  <img v-if="faviconValid" class="favicon no-favicon" height="22" :src="NO_FAVICON" />
-  <img v-else class="favicon" height="30" :src="faviconUrl" />
+  <div class="container">
+    <img v-if="faviconValid" class="favicon no-favicon" height="22" :src="NO_FAVICON" />
+    <img v-else class="favicon" height="30" :src="faviconUrl" />
+  </div>
 </template>
 
 <script lang="ts">
@@ -27,6 +29,11 @@ const faviconUrl = computed(() => `https://www.google.com/s2/favicons?domain=${p
 </script>
 
 <style scoped>
+.container {
+  display: inline-block;
+  height: 30px;
+  width: 40px;
+}
 .favicon {
   padding: 5px;
 }

src/assets/icons/s-dashboard.svg

@@ -100,7 +100,7 @@ const showWarningMessage = ref<boolean>();
   display: inline-block;
 }
 .tab-item .url:hover {
-  color: #1a0dab;
+  color: rgb(99, 99, 243);
 }
 .tab-item p {
   margin: 5px;

src/assets/icons/s-limits.svg

@@ -5,16 +5,19 @@
       <img class="d-inline-block logo" height="30" src="../assets/icons/48x48.png" />
       <p class="d-inline-block title">Web Activity Time Tracker</p>
     </div>
-    <!-- <p class="tab-separator">Dashboard</p> -->
-    <div class="settings-tab">
+    <div class="settings-tab mt-20">
       <input
         type="radio"
         id="timeIntervalChart-tab"
         name="settings-group"
         :checked="selectedTab == SettingsTab.Dashboard"
         v-on:change="selectTab(SettingsTab.Dashboard)"
       />
-      <label name="tabName" for="timeIntervalChart-tab">{{ t('dashboard.message') }}</label>
+      <label name="tabName" for="timeIntervalChart-tab"
+        ><img src="../assets/icons/s-dashboard.svg" height="30" />{{
+          t('dashboard.message')
+        }}</label
+      >
 
       <div class="settings-content">
         <Dashboad v-if="selectedTab == SettingsTab.Dashboard" />
@@ -29,7 +32,11 @@
         :checked="selectedTab == SettingsTab.WhiteList"
         v-on:change="selectTab(SettingsTab.WhiteList)"
       />
-      <label name="tabName" for="white-list-tab">{{ t('whiteListSettings.message') }}</label>
+      <label name="tabName" for="white-list-tab"
+        ><img src="../assets/icons/s-whitelist.svg" height="30" />{{
+          t('whiteListSettings.message')
+        }}</label
+      >
 
       <div class="settings-content">
         <WhiteList v-if="selectedTab == SettingsTab.WhiteList" />
@@ -44,7 +51,11 @@
         :checked="selectedTab == SettingsTab.Limits"
         v-on:change="selectTab(SettingsTab.Limits)"
       />
-      <label name="tabName" for="limits-tab">{{ t('limitsSettings.message') }}</label>
+      <label name="tabName" for="limits-tab"
+        ><img src="../assets/icons/s-limits.svg" height="30" />{{
+          t('limitsSettings.message')
+        }}</label
+      >
 
       <div class="settings-content">
         <Limits v-if="selectedTab == SettingsTab.Limits" />
@@ -58,7 +69,11 @@
         :checked="selectedTab == SettingsTab.Notifications"
         v-on:change="selectTab(SettingsTab.Notifications)"
       />
-      <label name="tabName" for="notification-tab">{{ t('notificationsSettings.message') }}</label>
+      <label name="tabName" for="notification-tab"
+        ><img src="../assets/icons/s-notifications.svg" height="30" />{{
+          t('notificationsSettings.message')
+        }}</label
+      >
 
       <div class="settings-content">
         <DailyNotifications v-if="selectedTab == SettingsTab.Notifications" />
@@ -73,7 +88,11 @@
         :checked="selectedTab == SettingsTab.GeneralSettings"
         v-on:change="selectTab(SettingsTab.GeneralSettings)"
       />
-      <label name="tabName" for="general-tab">{{ t('generalSettings.message') }}</label>
+      <label name="tabName" for="general-tab"
+        ><img src="../assets/icons/s-settings.svg" height="30" />{{
+          t('generalSettings.message')
+        }}</label
+      >
 
       <div class="settings-content">
         <GeneralSettings v-if="selectedTab == SettingsTab.GeneralSettings" />
@@ -88,7 +107,11 @@
         :checked="selectedTab == SettingsTab.About"
         v-on:change="selectTab(SettingsTab.About)"
       />
-      <label name="tabName" for="about-tab">{{ t('aboutSettings.message') }}</label>
+      <label name="tabName" for="about-tab"
+        ><img src="../assets/icons/s-about.svg" height="30" />{{
+          t('aboutSettings.message')
+        }}</label
+      >
 
       <div class="settings-content">
         <About v-if="selectedTab == SettingsTab.About" />
@@ -133,9 +156,6 @@ function selectTab(value: SettingsTab) {
 </script>
 
 <style scoped>
-.header-block {
-  background-color: white;
-}
 .header-block .title {
   vertical-align: top;
   margin-top: 15px;
@@ -144,7 +164,7 @@ function selectTab(value: SettingsTab) {
 }
 
 .header-block .logo {
-  margin: 10px 20px;
+  margin: 10px 10px 10px 35px;
 }
 .tab-separator {
   margin-left: 10px;