From bb631ecc12bc5880873e6c5084cb139911a40799 Mon Sep 17 00:00:00 2001
From: Robert von Burg <eitch@eitchnet.ch>
Date: Thu, 28 Apr 2022 14:58:58 +0200
Subject: [PATCH] [Fix] styling fixes

---
 bower.json                    |  6 +++---
 strolch-wc-dialog-button.html | 19 ++++++++++++++++---
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/bower.json b/bower.json
index 6c62cf3..f0257fb 100644
--- a/bower.json
+++ b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "strolch-wc-dialog-button",
   "description": "Strolch WebComponent Dialog Button",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "authors": [
     "Robert von Burg"
   ],
@@ -19,10 +19,10 @@
   "homepage": "https://github.com/strolch-li/strolch-wc-dialog-button",
   "ignore": [],
   "dependencies": {
-    "polymer": "Polymer/polymer#^1.11.3",
+    "polymer": "Polymer/polymer#^1.12.0",
 
     "strolchjs": "strolch-li/strolchjs#^0.5.1",
-    "strolch-wc-styles": "strolch-li/strolch-wc-styles#^0.4.0",
+    "strolch-wc-styles": "strolch-li/strolch-wc-styles#^0.4.2",
     "strolch-wc-util-behavior": "strolch-li/strolch-wc-util-behavior#^0.3.0",
 
     "paper-icon-button": "PolymerElements/paper-icon-button#^1.1.6",
diff --git a/strolch-wc-dialog-button.html b/strolch-wc-dialog-button.html
index 8166f61..1f74bb5 100644
--- a/strolch-wc-dialog-button.html
+++ b/strolch-wc-dialog-button.html
@@ -4,21 +4,31 @@
 <link rel="import" href="../paper-button/paper-button.html">
 <link rel="import" href="../paper-dialog/paper-dialog.html">
 
-<link rel="import" href="../strolch-wc-styles/strolch-wc-styles.html">
 <link rel="import" href="../strolch-wc-util-behavior/strolch-wc-util-behavior.html">
 
 <dom-module id="strolch-wc-dialog-button">
     <template>
         <!-- Style -->
-        <style is="custom-style" include="strolch-wc-styles">
+        <style is="custom-style">
             :host {
                 pointer-events: all !important;
             }
 
+            .title {
+                color: var(--paper-dialog-button-color);
+            }
+
             .aligned-dialog {
                 margin: 0;
                 min-width: 300px;
             }
+
+            .dialog-headline {
+                padding: 0 8px;
+                margin: 8px 0;
+                @apply(--layout-horizontal);
+                @apply(--layout-center);
+            }
         </style>
 
         <!-- Content -->
@@ -36,7 +46,10 @@
                           on-iron-overlay-closed="onClose">
 
                 <template is="dom-if" if="[[dialogHeadline]]">
-                    <h2>[[dialogHeadline]]</h2>
+                    <div class="dialog-headline">
+                        <paper-icon-button icon="close" on-tap="toggleDialog"></paper-icon-button>
+                        <h2 class="title">[[dialogHeadline]]</h2>
+                    </div>
                 </template>
 
                 <p>[[dialogContent]]</p>