add draft of Rename Query dialog

src/assets/styles/dialogs.css

@@ -0,0 +1,30 @@
+.dialog {
+  border-radius: var(--border-radius-big);
+  box-shadow: 0px 2px 9px rgba(80, 103, 132, 0.8);
+}
+
+.dialog-header {
+  height: 46px;
+  line-height: 46px;
+  padding: 0 12px;
+  color: var(--color-text-base);
+  font-size: 16px;
+  font-weight: 600;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.dialog-body {
+  min-height: 100px;
+  background-color: var(--color-bg-light);
+  padding: 24px;
+  border-top: 1px solid var(--color-border-light);
+}
+
+.dialog-buttons-container {
+  display: flex;
+  justify-content: flex-end;
+  background-color: var(--color-bg-light);
+  padding: 24px;
+}

src/views/MyQueries.vue

@@ -36,7 +36,7 @@
                 <div class="second-column">
                   <div class="date-container">{{ query.createdAt | date }}</div>
                   <div class="icons-container">
-                    <rename-icon />
+                    <rename-icon @click="showRenameDialog" />
                     <copy-icon />
                     <export-icon />
                     <delete-icon />
@@ -49,14 +49,29 @@
       </div>
     </div>
   </div>
+
+  <modal name="rename" classes="dialog" height="auto">
+    <div class="dialog-header">
+      Rename query
+      <close-icon />
+    </div>
+    <div class="dialog-body">
+      <input type="text"/>
+    </div>
+    <div class="dialog-buttons-container">
+      <button class="secondary">Cancel</button>
+      <button class="primary">Rename</button>
+    </div>
+  </modal>
 </div>
 </template>
 
 <script>
-import RenameIcon from '@/components/svg/rename.vue'
-import CopyIcon from '@/components/svg/copy.vue'
-import ExportIcon from '@/components/svg/export.vue'
-import DeleteIcon from '@/components/svg/delete.vue'
+import RenameIcon from '@/components/svg/rename'
+import CopyIcon from '@/components/svg/copy'
+import ExportIcon from '@/components/svg/export'
+import DeleteIcon from '@/components/svg/delete'
+import CloseIcon from '@/components/svg/close'
 
 export default {
   name: 'MyQueries',
@@ -64,7 +79,8 @@ export default {
     RenameIcon,
     CopyIcon,
     ExportIcon,
-    DeleteIcon
+    DeleteIcon,
+    CloseIcon
   },
   data () {
     return {
@@ -103,6 +119,9 @@ export default {
       this.$store.commit('addTab', tab)
       this.$store.commit('setCurrentTabId', tab.id)
       this.$router.push('/editor')
+    },
+    showRenameDialog () {
+      this.$modal.show('rename')
     }
   }
 }