From b7bf00eb897c9d57ad1fac07ae8ffa8f13c4de85 Mon Sep 17 00:00:00 2001
From: lana-k <skochetova89@gmail.com>
Date: Fri, 9 Oct 2020 14:56:19 +0200
Subject: [PATCH] add toolbar buttons style

---
 src/assets/styles/buttons.css | 22 ++++++++++++++++++++--
 src/views/MyQueries.vue       |  6 +++---
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/assets/styles/buttons.css b/src/assets/styles/buttons.css
index 9afc81b..154279d 100644
--- a/src/assets/styles/buttons.css
+++ b/src/assets/styles/buttons.css
@@ -1,3 +1,7 @@
+button:focus {
+  outline: none;
+}
+
 button.primary {
   background: var(--color-accent);
   border: 1px solid var(--color-accent-shade);
@@ -30,7 +34,21 @@ button.primary:disabled {
   cursor: default;
 }
 
-button.primary:focus {
-  outline: none;
+button.toolbar {
+  background: transparent;
+  border: none;
+  box-sizing: border-box;
+  height: 36px;
+  padding: 0 12px;
+  color: var(--color-text-base);
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
 }
 
+button.toolbar:hover {
+  color: var(--color-accent);
+}
+
+
+
diff --git a/src/views/MyQueries.vue b/src/views/MyQueries.vue
index c7fa56c..56347bd 100644
--- a/src/views/MyQueries.vue
+++ b/src/views/MyQueries.vue
@@ -3,9 +3,9 @@
     <div id="my-queries-content">
       <div id="my-queries-toolbar">
         <div id="toolbar-buttons">
-          <button>Import</button>
-          <button>Export</button>
-          <button>Delete</button>
+          <button class="toolbar">Import</button>
+          <button class="toolbar">Export</button>
+          <button class="toolbar">Delete</button>
         </div>
         <div id="toolbar-search">
           <input type="text" placeholder="Search query by name"/>