From 5eaf1679976c4cfcc3a7e1bcdccfb96dbe394b79 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Thu, 2 Jul 2020 14:36:26 +0300
Subject: [PATCH] Updated FlexGrid Demo

---
 src/AppMenu.vue                     | 8 ++++++--
 src/views/flexgrid/FlexGridDemo.vue | 7 ++++---
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/AppMenu.vue b/src/AppMenu.vue
index 298003b79..cb3121783 100755
--- a/src/AppMenu.vue
+++ b/src/AppMenu.vue
@@ -10,18 +10,22 @@
                 <router-link to="/accessibility">Accessibility</router-link>
             </div>
 
-            <div class="menu-category">PrimeFlex Utilities</div>
+            <div class="menu-category">PrimeFlex</div>
             <div class="menu-items">
                 <router-link to="/display">Display</router-link>
                 <router-link to="/elevation">Elevation</router-link>
                 <router-link to="/flexbox">FlexBox</router-link>
                 <router-link to="/formlayout">FormLayout</router-link>
                 <router-link to="/flexgrid">Grid System</router-link>
-                <router-link to="/icons">Icons</router-link>
                 <router-link to="/spacing">Spacing</router-link>
                 <router-link to="/text">Text</router-link>
             </div>
 
+            <div class="menu-category">PrimeIcons</div>
+            <div class="menu-items">
+                <router-link to="/icons">Icons v4.0</router-link>
+            </div>
+
             <div class="menu-category">Form</div>
             <div class="menu-items">
                 <router-link to="/autocomplete">AutoComplete</router-link>
diff --git a/src/views/flexgrid/FlexGridDemo.vue b/src/views/flexgrid/FlexGridDemo.vue
index 54e003615..98da2e827 100755
--- a/src/views/flexgrid/FlexGridDemo.vue
+++ b/src/views/flexgrid/FlexGridDemo.vue
@@ -447,11 +447,12 @@ export default {
 .flexgrid-demo {
     .box,
     .sample-layout > div {
-        background-color: #c2c8ce;
+        background-color: var(--surface-e);
         text-align: center;
         padding-top: 1rem;
         padding-bottom: 1rem;
         border-radius: 4px;
+        box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
     }
 
     .box-stretched {
@@ -463,13 +464,13 @@ export default {
     }
 
     .sample-layout > div {
-        border: 1px solid #ffffff;
+        border: 1px solid var(--surface-d);
     }
 
     .vertical-container {
         margin: 0;
         height: 200px;
-        background: #eaecee;
+        background: var(--surface-d);
         border-radius: 4px;
     }