From 0cd25bdb9104646214952098fc5ab4b2dbd89fa0 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Wed, 19 Oct 2022 14:18:18 +0300
Subject: [PATCH] =?UTF-8?q?=D0=A1=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB=D0=B0=20?=
 =?UTF-8?q?=D0=BA=D0=BD=D0=BE=D0=BF=D0=BA=D1=83=20=D0=B4=D0=BE=D0=B1=D0=B0?=
 =?UTF-8?q?=D0=B2=D0=BB=D0=B5=D0=BD=D0=B8=D1=8F=20=D0=BA=D0=BB=D0=B8=D0=B5?=
 =?UTF-8?q?=D0=BD=D1=82=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/HeaderAddClientButton.vue | 28 ++++++++++++++++++++++++
 src/components/TheHeader.vue             |  4 +++-
 tailwind.config.js                       |  1 +
 3 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 src/components/HeaderAddClientButton.vue

diff --git a/src/components/HeaderAddClientButton.vue b/src/components/HeaderAddClientButton.vue
new file mode 100644
index 0000000..0b21dbf
--- /dev/null
+++ b/src/components/HeaderAddClientButton.vue
@@ -0,0 +1,28 @@
+<template lang="pug">
+  button.add-client-button.flex.items-center.justify-center
+    .icon-wrapper.flex.items-center.justify-center.icon-plus.text-xsm
+    .icon-wrapper.flex.items-center.justify-center.icon-person.text-m
+</template>
+
+<script>
+export default {
+  name: "HeaderAddClientButton",
+};
+</script>
+
+<style lang="sass" scoped>
+.add-client-button
+  width: 80px
+  height: 40px
+  background-color: var(--btn-blue-color)
+  color: var(--default-white)
+  border-radius: 4px
+  &:hover
+    background-color: var(--btn-blue-color-4)
+  &:active
+    background-color: var(--font-dark-blue-color)
+
+.icon-wrapper
+  width: 24px
+  height: 24px
+</style>
diff --git a/src/components/TheHeader.vue b/src/components/TheHeader.vue
index 41a622f..949cecd 100644
--- a/src/components/TheHeader.vue
+++ b/src/components/TheHeader.vue
@@ -6,6 +6,7 @@
     .charge-person-container
       header-charge-person(:info="chargePersonInfo")
     .flex.ml-auto
+      header-add-client-button.mr-9
       button.header-buttons.flex.justify-center.items-center.mr-8.p-0
         .icon-bell.text-xxl
       .flex.justify-centflexer.items-center
@@ -19,9 +20,10 @@ import img from "@/assets/images/avatar.svg";
 import chargePersonAvatar from "@/assets/images/charge-person-avatar.svg";
 import HeaderInputs from "./HeaderInputs.vue";
 import HeaderChargePerson from "./HeaderChargePerson.vue";
+import HeaderAddClientButton from "./HeaderAddClientButton.vue";
 export default {
   name: "TheHeader",
-  components: { HeaderInputs, HeaderChargePerson },
+  components: { HeaderInputs, HeaderChargePerson, HeaderAddClientButton },
   data() {
     return {
       avatarSrc: img,
diff --git a/tailwind.config.js b/tailwind.config.js
index 2380927..958dff2 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -25,6 +25,7 @@ module.exports = {
       },
       spacing: {
         "6px": "6px",
+        "10px": "10px",
       },
     },
   },