From 2ac23591df38dc2c0f91f771fcdc3929334d8076 Mon Sep 17 00:00:00 2001
From: Nazar Kanaev <nkanaev@live.com>
Date: Sat, 4 Jul 2020 16:32:20 +0100
Subject: [PATCH] tab styling

---
 template/index.html                    | 15 ++++++++++++---
 template/static/images/list.svg        |  1 +
 template/static/images/plus-square.svg |  1 +
 template/static/images/upload.svg      |  1 +
 template/static/stylesheets/app.css    |  9 ++++++++-
 5 files changed, 23 insertions(+), 4 deletions(-)
 create mode 100644 template/static/images/list.svg
 create mode 100644 template/static/images/plus-square.svg
 create mode 100644 template/static/images/upload.svg

diff --git a/template/index.html b/template/index.html
index 3f744fd..830981e 100644
--- a/template/index.html
+++ b/template/index.html
@@ -110,13 +110,22 @@
         <b-modal id="settings-modal" hide-header hide-footer lazy>
             <ul class="nav nav-tabs mx-n3 px-3 mb-3 mt-n3 pt-2 bg-light rounded-top">
                 <li class="nav-item">
-                    <a class="nav-link" href="#" :class="{active: settings=='create'}" @click.prevent="settings='create'">New Feed</a>
+                    <a class="nav-link" href="#" :class="{active: settings=='create'}" @click.prevent="settings='create'">
+                        <img src="./static/images/plus-square.svg" alt="" class="tab-icon">
+                        New Feed
+                    </a>
                 </li>
                 <li class="nav-item">
-                    <a class="nav-link" href="#" :class="{active: settings=='manage'}" @click.prevent="settings='manage'">Manage Feeds</a>
+                    <a class="nav-link" href="#" :class="{active: settings=='manage'}" @click.prevent="settings='manage'">
+                        <img src="./static/images/list.svg" alt="" class="tab-icon">
+                        Manage Feeds
+                    </a>
                 </li>
                 <li class="nav-item">
-                    <a class="nav-link" href="#" :class="{active: settings=='import'}" @click.prevent="settings='import'">Import/Export</a>
+                    <a class="nav-link" href="#" :class="{active: settings=='import'}" @click.prevent="settings='import'">
+                        <img src="./static/images/upload.svg" alt="" class="tab-icon">
+                        Import/Export
+                    </a>
                 </li>
             </ul>
             <div v-if="settings=='create'">
diff --git a/template/static/images/list.svg b/template/static/images/list.svg
new file mode 100644
index 0000000..5ce38ea
--- /dev/null
+++ b/template/static/images/list.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-list"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg>
\ No newline at end of file
diff --git a/template/static/images/plus-square.svg b/template/static/images/plus-square.svg
new file mode 100644
index 0000000..c380e24
--- /dev/null
+++ b/template/static/images/plus-square.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-square"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>
\ No newline at end of file
diff --git a/template/static/images/upload.svg b/template/static/images/upload.svg
new file mode 100644
index 0000000..91eaff7
--- /dev/null
+++ b/template/static/images/upload.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-upload"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>
\ No newline at end of file
diff --git a/template/static/stylesheets/app.css b/template/static/stylesheets/app.css
index b8edbc0..278f05d 100644
--- a/template/static/stylesheets/app.css
+++ b/template/static/stylesheets/app.css
@@ -44,6 +44,13 @@ select.form-control:not([multiple]):not([size]) {
   margin-right: 7px;
 }
 
+.tab-icon {
+  width: 1rem;
+  height: 1rem;
+  margin-top: -3px;
+  margin-right: .1rem;
+}
+
 .feed-icon {
   width: 16px;
   height: 16px;
@@ -143,7 +150,7 @@ select.form-control:not([multiple]):not([size]) {
 }
 
 .nav-tabs .nav-link.active {
-  color: inherit;
+  color: var(--color-primary);
   border-radius: 0 !important;
   border-color: var(--color-primary);
   background-color: transparent;