labels added

src/components/LabelDotTemplate.vue

@@ -0,0 +1,27 @@
+<script setup>
+const props = defineProps({
+  color: {
+    type: String,
+    default: '#EF2D56FF'
+  },
+  bg_color: {
+    type: String,
+    default: '#FFFFFF'
+  }
+})
+</script>
+
+<template>
+  <span class="color-dot" :style="{ borderColor: color, backgroundColor: bg_color }"></span>
+</template>
+
+<style scoped>
+.color-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  border: 1px solid; /* чтобы border-color работал */
+  vertical-align: middle;
+}
+</style>

src/components/LabelTemplate.vue

@@ -0,0 +1,45 @@
+<script setup>
+const props = defineProps({
+  text: {
+    type: String,
+    required: true,
+    default: 'label'
+  },
+  color: {
+    type: String,
+    default: '#EF2D56FF'
+  },
+  bg_color: {
+    type: String,
+    default: '#FFFFFF'
+  }
+})
+</script>
+
+<template>
+  <label class="custom_label"
+         :style="{color: color, backgroundColor: bg_color, borderColor: color}"
+  >
+    {{ text }}
+  </label>
+</template>
+
+<style scoped>
+.custom_label {
+  font-family: 'Heebo', sans-serif;
+  font-size: 0.75rem;
+  font-weight: 500;
+  letter-spacing: 0.025rem;
+  font-style: normal;
+  text-transform: uppercase;
+  border-radius: 1.25rem;
+  -webkit-border-radius: 1.25rem;
+  -moz-border-radius: 1.25rem;
+  padding: 0.35rem 0.75rem;
+  border-style: solid;
+  border-width: 0.125rem;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  -box-shadow: none;
+}
+</style>

src/components/ManageLabels.vue

@@ -0,0 +1,7 @@
+<template>
+  <n-button type="primary">
+    <router-link :to="{ name: 'labels' }" class="router-link-button">
+      Manage labels
+    </router-link>
+  </n-button>
+</template>

src/components/Navbar/NavBar.vue

@@ -28,6 +28,7 @@ const authMenu = computed(() => {
   }
 
   return [
+    { label: 'Labels', key: 'labels' },
     { label: 'Personal', key: 'personal' },
   ]
 })
@@ -137,7 +138,7 @@ const renderLabel = (option) => {
   display: flex;
   align-items: center;
   margin-left: auto;
-  min-width: 150px;
+  min-width: 250px;
   padding-right: 16px;
   box-sizing: border-box;
 }