fix: lighthouse audit

package.json

@@ -1,6 +1,6 @@
 {
   "name": "todo.it",
-  "version": "0.8.5-beta",
+  "version": "0.8.6-beta",
   "description": "Another todo app but with features",
   "repository": "https://github.com/begprod/todo.it",
   "homepage": "https://begprod.github.io/todo.it/",

src/components/BaseTask/BaseTask.spec.ts

@@ -35,7 +35,7 @@ describe('BaseTask', () => {
   });
 
   it('correctly apply css classes when dayId "backlog" and task is not done', () => {
-    expect(wrapper.html()).toContain('!bg-gray-100 !border-gray-300');
+    expect(wrapper.html()).toContain('!bg-zinc-100 !border-gray-300');
   });
 
   it('correctly apply css classes when task is done', async () => {
@@ -49,6 +49,6 @@ describe('BaseTask', () => {
       },
     });
 
-    expect(wrapper.html()).toContain('!bg-teal-50 !border-teal-200 line-through');
+    expect(wrapper.html()).toContain('!bg-teal-100 !border-teal-200 line-through');
   });
 });

src/components/BaseTask/BaseTask.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="group flex items-start p-2 !pr-0 lg:p-4 bg-sky-100 border-sky-300 rounded-md"
+    class="group flex items-start p-2 !pr-0 lg:p-4 bg-sky-200 border-sky-300 rounded-md"
     :class="classes"
   >
     <div
@@ -85,7 +85,7 @@ watchThrottled(
 );
 
 const classes = computed(() => ({
-  '!bg-teal-50 !border-teal-200 line-through': props.task.isDone,
-  '!bg-gray-100 !border-gray-300': props.task.dayId === 'backlog' && !props.task.isDone,
+  '!bg-teal-100 !border-teal-200 line-through': props.task.isDone,
+  '!bg-zinc-100 !border-gray-300': props.task.dayId === 'backlog' && !props.task.isDone,
 }));
 </script>

src/components/layouts/partials/BaseFooter/BaseFooter.vue

@@ -1,15 +1,15 @@
 <template>
   <footer class="bg-white">
     <div
-      class="container flex flex-col items-center justify-center mx-auto p-5 pb-10 text-sm text-center text-gray-500"
+      class="container flex flex-col items-center justify-center mx-auto p-5 pb-10 text-sm text-center text-gray-700"
     >
       <p>
-        made with <span class="text-red-500 text-md">❤</span> by
-        <a href="https://github.com/begprod" class="text-blue-600">begprod</a>
+        made with <span class="text-red-600 text-md">❤</span> by
+        <a href="https://github.com/begprod" class="underline">begprod</a>
       </p>
       <p>
         <a
-          class="text-blue-600"
+          class="underline"
           href="https://github.com/begprod/todo.it#install-application-on-your-device"
           target="_blank"
           rel="noreferrer"

src/components/layouts/partials/BaseFooter/__snapshots__/BaseFooter.spec.ts.snap

@@ -2,9 +2,9 @@
 
 exports[`BaseFooter > correctly render component 1`] = `
 "<footer class=\\"bg-white\\">
-  <div class=\\"container flex flex-col items-center justify-center mx-auto p-5 pb-10 text-sm text-center text-gray-500\\">
-    <p> made with <span class=\\"text-red-500 text-md\\">❤</span> by <a href=\\"https://github.com/begprod\\" class=\\"text-blue-600\\">begprod</a></p>
-    <p><a class=\\"text-blue-600\\" href=\\"https://github.com/begprod/todo.it#install-application-on-your-device\\" target=\\"_blank\\" rel=\\"noreferrer\\"> Install app on device instruction <span class=\\"inline-block ml-2 -rotate-12 origin-center\\">→</span></a></p>
+  <div class=\\"container flex flex-col items-center justify-center mx-auto p-5 pb-10 text-sm text-center text-gray-700\\">
+    <p> made with <span class=\\"text-red-600 text-md\\">❤</span> by <a href=\\"https://github.com/begprod\\" class=\\"underline\\">begprod</a></p>
+    <p><a class=\\"underline\\" href=\\"https://github.com/begprod/todo.it#install-application-on-your-device\\" target=\\"_blank\\" rel=\\"noreferrer\\"> Install app on device instruction <span class=\\"inline-block ml-2 -rotate-12 origin-center\\">→</span></a></p>
   </div>
 </footer>"
 `;

src/components/layouts/partials/BaseHeader/BaseHeader.vue

@@ -13,6 +13,8 @@
         <img
           src="@/assets/images/github-mark.svg"
           class="w-7 lg:w-10 opacity-80 hover:opacity-100 transition-all duration-300"
+          width="40"
+          height="40"
           alt="todo.it github"
         />
       </a>

src/components/layouts/partials/BaseHeader/__snapshots__/BaseHeader.spec.ts.snap

@@ -4,8 +4,8 @@ exports[`BaseHeader > correctly render component 1`] = `
 "<header data-v-d3c55262=\\"\\" class=\\"sticky top-0 w-full bg-white z-[100]\\">
   <div data-v-d3c55262=\\"\\" class=\\"container mx-auto p-5 flex items-center justify-between\\">
     <div data-v-d3c55262=\\"\\" class=\\"flex items-center\\"><a data-v-d3c55262=\\"\\" href=\\"/todo.it/\\" class=\\"flex items-end font-bold\\">
-        <div data-v-d3c55262=\\"\\" class=\\"logo-gradient gradient-animation text-2xl lg:text-4xl\\">todo.it</div><sub data-v-d3c55262=\\"\\" class=\\"logo-sub-gradient gradient-animation text-sm ml-2 bottom-0\\"> v0.8.5-beta</sub>
-      </a></div><a data-v-d3c55262=\\"\\" href=\\"https://github.com/begprod/todo.it\\" target=\\"_blank\\"><img data-v-d3c55262=\\"\\" src=\\"/todo.it/src/assets/images/github-mark.svg\\" class=\\"w-7 lg:w-10 opacity-80 hover:opacity-100 transition-all duration-300\\" alt=\\"todo.it github\\"></a>
+        <div data-v-d3c55262=\\"\\" class=\\"logo-gradient gradient-animation text-2xl lg:text-4xl\\">todo.it</div><sub data-v-d3c55262=\\"\\" class=\\"logo-sub-gradient gradient-animation text-sm ml-2 bottom-0\\"> v0.8.6-beta</sub>
+      </a></div><a data-v-d3c55262=\\"\\" href=\\"https://github.com/begprod/todo.it\\" target=\\"_blank\\"><img data-v-d3c55262=\\"\\" src=\\"/todo.it/src/assets/images/github-mark.svg\\" class=\\"w-7 lg:w-10 opacity-80 hover:opacity-100 transition-all duration-300\\" width=\\"40\\" height=\\"40\\" alt=\\"todo.it github\\"></a>
   </div>
 </header>"
 `;

src/components/ui/BaseAccordion/BaseAccordion.vue

@@ -56,7 +56,7 @@ const clickHandler = () => {
 };
 
 const classes = computed(() => ({
-  'opacity-30 z-0': !isOpen.value && !props.isActive,
+  'opacity-60 z-0': !isOpen.value && !props.isActive,
   ...(props.additionalClasses ? { [props.additionalClasses]: true } : {}),
 }));
 </script>

src/components/ui/BaseEmptyListMessage/BaseEmptyListMessage.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-center justify-center h-16 text-sm lg:text-lg text-neutral-200">
+  <div class="flex items-center justify-center h-16 text-sm lg:text-lg text-neutral-500">
     <v-icon class="mr-2" name="md-cancel-outlined" />
     {{ message }}
   </div>

src/components/ui/controls/BaseContentEditableInput/BaseContentEditableInput.spec.ts

@@ -33,7 +33,7 @@ describe('BaseContentEditableInput', () => {
     });
 
     expect(wrapper.find('.contenteditable-field').classes()).not.toContain('is-active-placeholder');
-    expect(wrapper.find('.contenteditable-field').classes()).toContain('opacity-25');
+    expect(wrapper.find('.contenteditable-field').classes()).toContain('opacity-60');
 
     await wrapper.setProps({
       textSize: 'lg',

src/components/ui/controls/BaseContentEditableInput/BaseContentEditableInput.vue

@@ -67,7 +67,7 @@ const keyDownHandler = () => {
 
 const classes = computed(() => ({
   'is-active-placeholder': fieldIsEmpty.value && props.isContentEditable,
-  'opacity-25': !props.isContentEditable,
+  'opacity-60': !props.isContentEditable,
   'text-base lg:text-lg': props.textSize === 'lg',
   'sub-text text-sm': props.textSize === 'sm',
   'font-normal': props.fontWeight === 'normal',