From 400dcc4eea9bc1466304c795875751fac60eae64 Mon Sep 17 00:00:00 2001
From: lana-k <skochetova89@gmail.com>
Date: Thu, 8 Oct 2020 22:36:13 +0200
Subject: [PATCH] add toolbar to my queries table

---
 src/assets/styles/tables.css     |  1 +
 src/assets/styles/textFields.css |  5 +++++
 src/views/MyQueries.vue          | 21 ++++++++++++++++++---
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/assets/styles/tables.css b/src/assets/styles/tables.css
index 99fab4d..9a7c7cb 100644
--- a/src/assets/styles/tables.css
+++ b/src/assets/styles/tables.css
@@ -4,6 +4,7 @@
   border-radius: 5px;
   position: relative;
   border: 1px solid var(--color-border-light);
+  box-sizing: border-box;
 }
 .header-container {
   overflow: hidden;
diff --git a/src/assets/styles/textFields.css b/src/assets/styles/textFields.css
index 497c9ba..e0b54d2 100644
--- a/src/assets/styles/textFields.css
+++ b/src/assets/styles/textFields.css
@@ -11,3 +11,8 @@ input[type="text"] {
 input[type="text"]::placeholder {
   color: var(--color-text-light-2);
 }
+
+input[type="text"]:focus {
+  outline: none;
+}
+
diff --git a/src/views/MyQueries.vue b/src/views/MyQueries.vue
index 55d4b5c..8c9a14c 100644
--- a/src/views/MyQueries.vue
+++ b/src/views/MyQueries.vue
@@ -1,6 +1,16 @@
 <template>
   <div>
     <div id="my-queries-content">
+      <div id="my-queries-toolbar">
+        <div id="toolbar-buttons">
+          <button>Import</button>
+          <button>Export</button>
+          <button>Delete</button>
+        </div>
+        <div id="toolbar-search">
+          <input type="text" placeholder="Search query by name"/>
+        </div>
+      </div>
       <div class="rounded-bg">
       <div class="header-container">
         <div>
@@ -87,15 +97,20 @@ export default {
 #my-queries-content {
   padding: 52px;
 }
-.rounded-bg {
+
+#my-queries-toolbar {
+  display: flex;
+  justify-content: space-between;
+}
+
+.rounded-bg,
+#my-queries-toolbar {
   margin: 0 auto;
   max-width: 1500px;
   width: 100%;
 }
 table {
   margin-top: 0;
-  width: 100%;
-  max-width: 100%;
 }
 tbody tr td {
   overflow: hidden;