add patch to test

src/components/Button.vue

@@ -6,7 +6,7 @@
     :class="[look, 'default']"
   >
     <i v-if="icon" :class="[icon, 'icon']"></i>
-    {{ text }}
+    <span v-if="text.length" class="text">{{ text }}</span>
   </button>
 </template>
 
@@ -39,7 +39,7 @@ defineProps({
   }
 }
 .button--black {
-  height: 4.5rem;
+  height: 3.5rem;
   border-radius: 0.5rem;
   padding: 1.3rem 2rem 1.3rem;
   color: var(--white);
@@ -53,18 +53,23 @@ defineProps({
   color: var(--white);
 }
 .button--red {
-  height: 4rem;
+  height: 3.5rem;
+  min-width: 3.5rem;
   border-radius: 0.5rem;
   color: var(--red);
   background-color: var(--white);
   border: 0.1rem solid var(--red);
   .icon {
+    margin-right: 0;
     font-size: 1.4rem;
     color: var(--red);
   }
+  .text {
+    margin-left: 1rem;
+  }
 }
 .button--white {
-  height: 4rem;
+  height: 3.5rem;
   border-radius: 0.5rem;
   color: var(--black);
   background-color: var(--white);
@@ -72,6 +77,10 @@ defineProps({
   .icon {
     font-size: 1.4rem;
     color: var(--black);
+    margin-right: 0;
+  }
+  .text {
+    margin-left: 1rem;
   }
 }
 .no-text {
@@ -83,10 +92,10 @@ defineProps({
   }
 }
 .link--grey {
-  color: var(--grey-dark);
+  color: var(--grey-semi-dark);
   .icon {
     font-size: 1.4rem;
-    color: var(--grey-dark);
+    color: var(--grey-semi-dark);
   }
 }
 .link--red {
@@ -98,6 +107,7 @@ defineProps({
     color: var(--red);
   }
 }
+
 .icon {
   margin-right: 1rem;
   font-size: 2rem;

src/components/ImageItem.vue

@@ -7,33 +7,23 @@
         @click="$emit('trigger')"
       >
         <img v-if="href" :src="href" alt="" loading="lazy" class="photo-img" />
+        <div v-if="selected" class="button-check">
+          <i class="bi bi-check-lg" />
+        </div>
+        <div class="photo-info">
+          <span v-if="created"><i class="bi bi-clock"></i> {{ created }}</span>
+          <div class="button-info">
+            <Link
+              look="button--white no-text"
+              icon="bi bi-download"
+              type="external"
+              target="_blank"
+              :path="hrefHd"
+            />
+          </div>
+        </div>
       </button>
     </div>
-    <div class="photo-info">
-      <div class="button-info">
-        <div :class="['button-check', { 'delete-checked': selectedDelete }]">
-          <Button
-            look="button--white no-text"
-            :icon="selectedDelete ? 'bi bi-check-square-fill' : ''"
-            @click="$emit('triggerSelect')"
-          />
-        </div>
-        <Link
-          look="button--white no-text"
-          icon="bi bi-download"
-          type="external"
-          target="_blank"
-          :path="hrefHd"
-        />
-      </div>
-      <span v-if="created"><i class="bi bi-clock"></i> {{ created }}</span>
-      <div class="button-info">
-        <div class="button-disable">
-          <Button look="button--white no-text" icon="bi bi-eye" />
-        </div>
-        <Button look="button--red no-text" icon="bi bi-trash" />
-      </div>
-    </div>
   </div>
 </template>
 
@@ -45,8 +35,7 @@ const props = defineProps({
   created: { type: String, default: null },
   href: { type: String, default: null },
   hrefHd: { type: String, default: null },
-  selected: { type: Boolean, default: false },
-  selectedDelete: { type: Boolean, default: false }
+  selected: { type: Boolean, default: false }
 })
 </script>
 
@@ -58,27 +47,31 @@ const props = defineProps({
   padding: 0;
 }
 .selected {
-  border: 0.2rem solid var(--blue);
-  border-radius: 1rem;
+  border: 0.1rem solid var(--blue);
+  border-radius: 0.5rem;
+  box-shadow: 0px 4px 4px 0px #00000040;
 }
 .wrapper-image {
   position: relative;
 }
 .photo-img {
-  border-radius: 1rem;
+  border-top-right-radius: 0.5rem;
+  border-top-left-radius: 0.5rem;
   height: 12rem;
   width: 100%;
   object-fit: cover;
 }
-.button-info {
+.button-check {
+  background-color: var(--white);
+  border-radius: 50%;
+  position: absolute;
+  height: 1.6rem;
+  width: 1.6rem;
   display: flex;
-}
-.button-disable,
-.button-check {
-  margin-right: 1rem;
-}
-.button-check {
-  opacity: 0.5;
+  justify-content: center;
+  align-items: center;
+  top: 1rem;
+  right: 1rem;
 }
 .delete-checked {
   opacity: 1;
@@ -87,6 +80,6 @@ const props = defineProps({
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 2rem;
+  padding: 1rem;
 }
 </style>

src/components/InputCheckbox.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="input-checkbox">
+    <i v-if="isChecked && !isIndeterminate" class="icon bi bi-check-square"></i>
+    <i v-if="!isChecked && !isIndeterminate" class="icon bi bi-square"></i>
+    <i v-if="isIndeterminate && !isChecked" class="icon bi bi-dash-square"></i>
+    <input
+      id="checkbox"
+      v-model="inputValue"
+      type="checkbox"
+      @input="updateValue($event.target.checked)"
+      class="input"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watchEffect, defineEmits } from 'vue'
+const emit = defineEmits()
+const props = defineProps({
+  name: { type: String, default: null },
+  isChecked: { type: Boolean, default: false },
+  isIndeterminate: { type: Boolean, default: false }
+})
+
+const htmlCheckbox = <HTMLInputElement>document.getElementById('checkbox')
+
+watchEffect(async () => {
+  if (htmlCheckbox) {
+    htmlCheckbox.indeterminate = props.isIndeterminate
+  }
+})
+
+let inputValue = ref<boolean>(props.isChecked)
+
+function updateValue(value: boolean): void {
+  if (htmlCheckbox) {
+    htmlCheckbox.indeterminate = false
+  }
+  inputValue.value = value
+  emit('trigger', { isChecked: value, isIndeterminate: false })
+}
+</script>
+
+<style lang="scss" scoped>
+.input-checkbox {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 2rem;
+  width: 2rem;
+}
+.input {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  cursor: pointer;
+  position: absolute;
+  height: 100%;
+  width: 100%;
+}
+.icon {
+  font-size: 2rem;
+  position: absolute;
+  color: var(--grey-semi-dark);
+}
+</style>

src/components/Link.vue

@@ -72,7 +72,7 @@ const titleImg = computed<string>(() =>
   text-decoration: underline;
 }
 .button {
-  height: 4.5rem;
+  height: 4rem;
   border-radius: 0.5rem;
   padding: 1.3rem 2rem 1.3rem;
   background-color: var(--black);
@@ -119,8 +119,8 @@ const titleImg = computed<string>(() =>
   align-items: center;
   border-radius: 50%;
   padding: 0;
-  height: 4.5rem;
-  width: 4.5rem;
+  height: 4rem;
+  width: 4rem;
   .icon {
     color: var(--white);
     font-size: 2.8rem;

src/components/Loader.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="lds-ring">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</template>
+
+<script></script>
+
+<style scoped scss>
+.lds-ring {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+.lds-ring div {
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  width: 64px;
+  height: 64px;
+  margin: 8px;
+  border: 8px solid var(--blue);
+  border-radius: 50%;
+  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  border-color: var(--blue) transparent transparent transparent;
+}
+.lds-ring div:nth-child(1) {
+  animation-delay: -0.45s;
+}
+.lds-ring div:nth-child(2) {
+  animation-delay: -0.3s;
+}
+.lds-ring div:nth-child(3) {
+  animation-delay: -0.15s;
+}
+@keyframes lds-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>