From ff1dcbabfc55bba309fa44137142c1177491e79d Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Tue, 22 Oct 2019 15:37:55 +0300
Subject: [PATCH] Refactor on dataview demo and doc

---
 src/views/dataview/DataViewDemo.vue | 26 ++++++++++++++++++++++++--
 src/views/dataview/DataViewDoc.vue  | 26 +++++++++++++++++++++++---
 2 files changed, 47 insertions(+), 5 deletions(-)

diff --git a/src/views/dataview/DataViewDemo.vue b/src/views/dataview/DataViewDemo.vue
index 7fd7940b9..a2ea7ba44 100644
--- a/src/views/dataview/DataViewDemo.vue
+++ b/src/views/dataview/DataViewDemo.vue
@@ -40,7 +40,6 @@
 						<Panel :header="slotProps.data.vin" style="text-align: center">
 							<img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
 							<div class="car-detail">{{slotProps.data.year}} - {{slotProps.data.color}}</div>
-							<hr class="ui-widget-content" style="border-top: 0" />
 							<Button icon="pi pi-search"></Button>
 						</Panel>
 					</div>
@@ -123,15 +122,38 @@ export default {
             }
         }
     }
+
+    .car-detail {
+        padding: 0 1em 1em 1em;
+        border-bottom: 1px solid #d9dad9;
+        margin: 1em;
+    }
+
+    .p-panel-content {
+        padding: 1em;
+    }
 }
+
 @media (max-width: 1024px) {
 	.p-dataview {
         .car-details {
-
             img {
                 width: 75px;
             }
         }
     }
 }
+
+/* Dark Theme such as luna-amber, luna-blue, luna-green and luna-pink */
+.dark-theme {
+    .p-dataview {
+        .car-details {
+            border-bottom-color: #191919;
+        }
+
+        .car-detail {
+            border-bottom: 1px solid #191919;
+        }
+    }
+}
 </style>
\ No newline at end of file
diff --git a/src/views/dataview/DataViewDoc.vue b/src/views/dataview/DataViewDoc.vue
index 18a71cf5a..83bb54802 100644
--- a/src/views/dataview/DataViewDoc.vue
+++ b/src/views/dataview/DataViewDoc.vue
@@ -58,7 +58,6 @@ export default {
 		&lt;Panel :header="slotProps.data.vin" style="text-align: center"&gt;
 			&lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
 			&lt;div class="car-detail"&gt;{{slotProps.data.year}} - {{slotProps.data.color}}&lt;/div&gt;
-			&lt;hr class="ui-widget-content" style="border-top: 0" /&gt;
 			&lt;Button icon="pi pi-search"&gt;&lt;/Button&gt;
 		&lt;/Panel&gt;
 	&lt;/div&gt;
@@ -444,7 +443,6 @@ export default {
             &lt;Panel :header="slotProps.data.vin" style="text-align: center"&gt;
                 &lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
                 &lt;div class="car-detail"&gt;{{slotProps.data.year}} - {{slotProps.data.color}}&lt;/div&gt;
-                &lt;hr class="ui-widget-content" style="border-top: 0" /&gt;
                 &lt;Button icon="pi pi-search"&gt;&lt;/Button&gt;
             &lt;/Panel&gt;
         &lt;/div&gt;
@@ -520,18 +518,40 @@ export default {
             }
         }
     }
+
+    .car-detail {
+        padding: 0 1em 1em 1em;
+        border-bottom: 1px solid #d9dad9;
+        margin: 1em;
+    }
+
+    .p-panel-content {
+        padding: 1em;
+    }
 }
 
 @media (max-width: 1024px) {
 	.p-dataview {
         .car-details {
-
             img {
                 width: 75px;
             }
         }
     }
 }
+
+/* Dark Theme such as luna-amber, luna-blue, luna-green and luna-pink */
+.dark-theme {
+    .p-dataview {
+        .car-details {
+            border-bottom-color: #191919;
+        }
+
+        .car-detail {
+            border-bottom: 1px solid #191919;
+        }
+    }
+}
 </CodeHighlight>
 			</TabPanel>
 		</TabView>