add mobile icons

src/assets/main.css

@@ -12,6 +12,24 @@ body {
   padding: 20px;
 }
 
+.desktop {
+  display: none;
+}
+
+.mobile {
+  display: flex;
+}
+
+@media (min-width: 768px) {
+  .desktop {
+    display: flex;
+  }
+
+  .mobile {
+    display: none;
+  }
+}
+
 .task {
   display: flex;
   width: 100%;
@@ -38,13 +56,20 @@ span.myinput {
 }
 
 .mybtn {
-  padding: 8px 15px;
   color: #fff;
   border: none;
   border-radius: 5px;
   cursor: pointer;
 }
 
+.mybtn .mobile {
+  padding: 6px;
+}
+
+.mybtn .desktop {
+  padding: 8px 15px;
+}
+
 .primary {
   background-color: #007bff;
 }

src/components/TaskForm.vue

@@ -2,6 +2,8 @@
 import { useTaskStore, type Task } from '@/stores/tasks'
 import { ref } from 'vue'
 import { vOnClickOutside } from '@vueuse/components'
+import IconPlus from './icons/IconPlus.vue'
+import IconSave from './icons/IconSave.vue'
 
 const emit = defineEmits(['close'])
 const props = defineProps<{ taskId: string }>()
@@ -44,8 +46,36 @@ function escHandler() {
       @keydown.esc="escHandler"
       required
     />
-    <button type="submit" class="mybtn" :class="isNew ? 'primary' : 'green'" @click="submitForm">
-      {{ isNew ? 'Добавить' : 'Сохранить' }}
+    <button type="submit" class="mybtn" :class="isNew ? 'green' : 'primary'" @click="submitForm">
+      <span class="desktop">{{ isNew ? 'Добавить' : 'Сохранить' }}</span>
+      <span class="mobile">
+        <IconPlus v-if="isNew" :size="24" />
+        <IconSave v-else :size="24" />
+      </span>
     </button>
   </div>
 </template>
+
+<style scoped>
+.desktop {
+  display: none;
+}
+
+.mobile {
+  display: flex;
+}
+
+.mybtn.mobile {
+  padding: 6px;
+}
+
+@media (min-width: 768px) {
+  .desktop {
+    display: flex;
+  }
+
+  .mobile {
+    display: none;
+  }
+}
+</style>

src/components/icons/IconClose.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const props = defineProps<{ size: number }>()
+</script>
+
+<template>
+  <svg
+    :width="props.size"
+    :height="props.size"
+    viewBox="0 0 1024 1024"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill="#000000"
+      d="M195.2 195.2a64 64 0 0 1 90.496 0L512 421.504 738.304 195.2a64 64 0 0 1 90.496 90.496L602.496 512 828.8 738.304a64 64 0 0 1-90.496 90.496L512 602.496 285.696 828.8a64 64 0 0 1-90.496-90.496L421.504 512 195.2 285.696a64 64 0 0 1 0-90.496z"
+    />
+  </svg>
+</template>

src/components/icons/IconPlus.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const props = defineProps<{ size: number }>()
+</script>
+
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    x="0px"
+    y="0px"
+    :width="props.size"
+    :height="props.size"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M 12 2 C 6.4889971 2 2 6.4889971 2 12 C 2 17.511003 6.4889971 22 12 22 C 17.511003 22 22 17.511003 22 12 C 22 6.4889971 17.511003 2 12 2 z M 12 4 C 16.430123 4 20 7.5698774 20 12 C 20 16.430123 16.430123 20 12 20 C 7.5698774 20 4 16.430123 4 12 C 4 7.5698774 7.5698774 4 12 4 z M 11 7 L 11 11 L 7 11 L 7 13 L 11 13 L 11 17 L 13 17 L 13 13 L 17 13 L 17 11 L 13 11 L 13 7 L 11 7 z"
+    ></path>
+  </svg>
+</template>

src/components/icons/IconSave.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+const props = defineProps<{ size: number }>()
+</script>
+
+<template>
+  <svg
+    :width="props.size"
+    :height="props.size"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M18.1716 1C18.702 1 19.2107 1.21071 19.5858 1.58579L22.4142 4.41421C22.7893 4.78929 23 5.29799 23 5.82843V20C23 21.6569 21.6569 23 20 23H4C2.34315 23 1 21.6569 1 20V4C1 2.34315 2.34315 1 4 1H18.1716ZM4 3C3.44772 3 3 3.44772 3 4V20C3 20.5523 3.44772 21 4 21L5 21L5 15C5 13.3431 6.34315 12 8 12L16 12C17.6569 12 19 13.3431 19 15V21H20C20.5523 21 21 20.5523 21 20V6.82843C21 6.29799 20.7893 5.78929 20.4142 5.41421L18.5858 3.58579C18.2107 3.21071 17.702 3 17.1716 3H17V5C17 6.65685 15.6569 8 14 8H10C8.34315 8 7 6.65685 7 5V3H4ZM17 21V15C17 14.4477 16.5523 14 16 14L8 14C7.44772 14 7 14.4477 7 15L7 21L17 21ZM9 3H15V5C15 5.55228 14.5523 6 14 6H10C9.44772 6 9 5.55228 9 5V3Z"
+      fill="#0F0F0F"
+    />
+  </svg>
+</template>

src/views/TasksView.vue

@@ -3,6 +3,7 @@ import { useTaskStore, type Task } from '@/stores/tasks'
 import TaskForm from '@/components/TaskForm.vue'
 import { ref } from 'vue'
 import IconEdit from '@/components/icons/IconEdit.vue'
+import IconClose from '@/components/icons/IconClose.vue'
 
 const store = useTaskStore()
 const form = ref({ show: false, id: '' })
@@ -44,7 +45,10 @@ function openForm(id: string) {
           v-show="!(form.show && form.id === task.id)"
           @click="deleteTask(task.id)"
         >
-          Удалить
+          <span class="desktop">Удалить</span>
+          <span class="mobile">
+            <IconClose :size="24" />
+          </span>
         </button>
       </li>
     </ul>