From 44403f2a950d732b8f1a096b25b108469dcc70e8 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Sat, 4 Jul 2020 10:28:27 +0300
Subject: [PATCH] CSS refactor on showcase

---
 src/AppTopBar.vue                   |  2 +-
 src/assets/styles/app/_content.scss |  2 +-
 src/assets/styles/app/_footer.scss  |  2 +-
 src/assets/styles/app/_topbar.scss  | 18 +++++++-----------
 src/views/Home.vue                  |  2 +-
 5 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/src/AppTopBar.vue b/src/AppTopBar.vue
index bc6314fd5..d6f9d02be 100755
--- a/src/AppTopBar.vue
+++ b/src/AppTopBar.vue
@@ -57,7 +57,7 @@
                         <li><a @click="changeTheme($event, 'nova-accent')"><img src="demo/images/themes/nova-accent.png" alt="Nova Accent" /><span>Nova Accent</span></a></li>
                         <li><a @click="changeTheme($event, 'nova-vue')"><img src="demo/images/themes/nova-vue.png" alt="Nova Vue" /><span>Nova Vue</span></a></li>
                         <li><a @click="changeTheme($event, 'luna-amber', true)"><img src="demo/images/themes/luna-amber.png" alt="Luna Amber" /><span>Luna Amber</span></a></li>
-                        <li><a @click="changeTheme($event, 'luna-blue', true)"><img src="demo/images/themes/una-blue.png" alt="Luna Blue" /><span>Luna Blue</span></a></li>
+                        <li><a @click="changeTheme($event, 'luna-blue', true)"><img src="demo/images/themes/luna-blue.png" alt="Luna Blue" /><span>Luna Blue</span></a></li>
                         <li><a @click="changeTheme($event, 'luna-green', true)"><img src="demo/images/themes/luna-green.png" alt="Luna Green" /><span>Luna Green</span></a></li>
                         <li><a @click="changeTheme($event, 'luna-pink', true)"><img src="demo/images/themes/luna-pink.png" alt="Luna Pink" /><span>Luna Pink</span></a></li>
                         <li><a @click="changeTheme($event, 'rhea')"><img src="demo/images/themes/rhea.png" alt="Rhea" /><span>Rhea</span></a></li>
diff --git a/src/assets/styles/app/_content.scss b/src/assets/styles/app/_content.scss
index 0f712b90f..eaf678d46 100644
--- a/src/assets/styles/app/_content.scss
+++ b/src/assets/styles/app/_content.scss
@@ -192,7 +192,7 @@
         .card-header {
             display: flex;
             align-items: center;
-            justify-content: between;
+            justify-content: space-between;
         }
     }
 }
\ No newline at end of file
diff --git a/src/assets/styles/app/_footer.scss b/src/assets/styles/app/_footer.scss
index 183675ba0..c12b9e6fc 100644
--- a/src/assets/styles/app/_footer.scss
+++ b/src/assets/styles/app/_footer.scss
@@ -1,5 +1,5 @@
 .layout-footer {
-    font-size: 14px;
+    font-size: 1rem;
     background-color: var(--surface-a);
 
     a {
diff --git a/src/assets/styles/app/_topbar.scss b/src/assets/styles/app/_topbar.scss
index 62d8903f1..8d3767a74 100644
--- a/src/assets/styles/app/_topbar.scss
+++ b/src/assets/styles/app/_topbar.scss
@@ -41,7 +41,7 @@
         &:focus {
             outline: 0 none;
             transition: box-shadow .2s;
-            box-shadow: 0 0 0 0.2em $focusBorderColor;
+            box-shadow: 0 0 0 0.2rem $focusBorderColor;
         }
     }
 
@@ -77,13 +77,13 @@
                 color: var(--text-color);
                 min-width: 120px;
                 font-size: 16px;
-                display: inline-block;
+                display: block;
                 text-align: center;
                 user-select: none;
                 line-height: 68px;
-                cursor: pointer;
                 border-bottom: 2px solid transparent;
-                transition: border-bottom-color .3s;
+                transition: border-bottom-color .2s;
+                cursor: pointer;
 
                 &:hover, &:focus {
                     border-bottom-color: var(--primary-color);
@@ -128,7 +128,6 @@
                             text-transform: uppercase;
                 
                             &:first-child {
-                                border-top: 0 none;
                                 padding-top: 1rem;
                             }
                         }
@@ -138,30 +137,27 @@
                         text-decoration: none;
                         color: var(--text-color);
                         padding: .5rem;
-                        display: block;
+                        display: flex;
+                        align-items: center;
                         user-select: none;
                         border-radius: 3px;
                         cursor: pointer;
 
                         &:hover {
                             background-color: var(--surface-c);
-                            cursor: pointer;
                         }
 
                         span {
                             margin-left: .5rem;
-                            vertical-align: middle;
                         }
 
                         i {
-                            vertical-align: middle;
+                            font-size: 18px;
                             color: var(--text-color-secondary);
-                            vertical-align: middle;
                         }
 
                         img {
                             width: 32px;
-                            vertical-align: middle;
                             margin-right: .5rem;
                         }
                     }
diff --git a/src/views/Home.vue b/src/views/Home.vue
index bdb12fd1d..46d905467 100755
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -14,7 +14,7 @@
 
         <div class="features">
             <h4>Features</h4>
-            <p class="features-tagline">Congratulations! <span role="img" aria-label="celebrate">🎉</span> Your quest to find the UI library for Vue.js is now complete.</p>
+            <p class="features-tagline">Congratulations! <span role="img" aria-label="celebrate" class="p-mx-2">🎉</span> Your quest to find the UI library for Vue.js is now complete.</p>
 
             <div class="p-grid">
                 <div class="p-col-12 p-md-4">