From e469d2065c182840f005ca18dd321257171fad37 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Sat, 25 May 2019 23:56:12 +0300
Subject: [PATCH] Demo cosmetics

---
 src/AppTopBar.vue          |  2 +-
 src/assets/styles/app.scss | 40 ++++++++++++++++++++++----------------
 2 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/src/AppTopBar.vue b/src/AppTopBar.vue
index fa8c1c068..064ea648a 100644
--- a/src/AppTopBar.vue
+++ b/src/AppTopBar.vue
@@ -13,7 +13,7 @@
                 <transition name="p-input-overlay" @enter="onThemesMenuEnter" @leave="onThemesMenuLeave">
                     <ul v-if="themesMenuVisible">
                         <li class="topbar-submenu-header">THEMING</li>
-                        <li><router-link to="/icons" @click.native="hideThemesMenu()"><i className="pi pi-fw pi-search"/><span>Icons</span></router-link></li>
+                        <li><router-link to="/icons" @click.native="hideThemesMenu()"><i class="pi pi-fw pi-search"/><span>Icons</span></router-link></li>
                         <li class="topbar-submenu-header">FREE THEMES</li>
                         <li><a href="#" @click="changeTheme($event, 'nova-light', false)"><img src="./assets/images/layouts/themeswitcher-nova-light.png" alt="Nova Light" /><span>Nova Light</span></a></li>
                         <li><a @click="changeTheme($event, 'nova-dark', false)"><img src="./assets/images/layouts/themeswitcher-nova-dark.png" alt="Nova Dark" /><span>Nova Dark</span></a></li>
diff --git a/src/assets/styles/app.scss b/src/assets/styles/app.scss
index 441800d35..223aba3eb 100644
--- a/src/assets/styles/app.scss
+++ b/src/assets/styles/app.scss
@@ -40,7 +40,7 @@
     border-top-right-radius: $val;
 }
 
-$focusBorderColor:#aeb6be;
+$focusBorderColor:#8dcdff;
 
 body {
     margin: 0px;
@@ -109,28 +109,29 @@ body {
     .topbar-menu {
         list-style-type: none;
         float: right;
-        margin: 25px 60px 0 0;
+        margin: 0 60px 0 0;
         padding: 0;
         height: 100%;
 
         > li {
             display: inline-block;
+            height: 70px;
+            line-height: 70px;
 
             > a {
                 text-decoration: none;
-                color: #34495e;
+                color: #484848;
                 min-width: 120px;
                 font-size: 16px;
                 display: inline-block;
                 text-align: center;
-                padding-bottom: 8px;
-                border-bottom: 4px solid transparent;
                 user-select: none;
+                line-height: inherit;
                 cursor: pointer;
-                @include transition(border-color .2s);
+                @include transition(background-color .2s);
 
                 &:hover {
-                    border-bottom-color: #41b883;
+                    background-color: #eeeeee;
                 }
 
                 &:focus {
@@ -146,7 +147,7 @@ body {
 
                 > ul {
                     position: absolute;
-                    top: 45px;
+                    top: 70px;
                     left: -75px;
                     width: 250px;
                     max-height: 300px;
@@ -156,21 +157,26 @@ body {
                     box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
                     overflow: auto;
                     list-style-type: none;
-                    padding: 15px 0;
+                    padding: 4px 0;
                     margin: 0;
                     border-radius: 3px;
 
-                    > li.topbar-submenu-header {
-                        padding: 6px 12px;
-                        font-weight: bold;
-                        text-align: left;
-                        color: #ffffff;
-                        background-color: #484848;
+                    > li {
+                        margin: 2px 0;
+                        line-height: 1;
+                        
+                        &.topbar-submenu-header {
+                            padding: 6px 12px;
+                            font-weight: bold;
+                            text-align: left;
+                            color: #ffffff;
+                            background-color: #484848;
+                        }
                     }
 
                     a {
                         text-decoration: none;
-                        color: #404C51;
+                        color: #484848;
                         padding: 6px 12px;
                         display: block;
                         user-select: none;
@@ -333,7 +339,7 @@ body {
                 border-radius: 4px;
                 -webkit-border-radius: 4px;
                 font-size: 14px;
-                color: #494c52;
+                color: #484848;
                 transition: background-color .2s;
 
                 &:hover {