From e4283a79b9a4b566d1475655d60d4a1c6485b62d Mon Sep 17 00:00:00 2001
From: JFH <20402845+jfhenon@users.noreply.github.com>
Date: Wed, 12 May 2021 23:48:41 +0200
Subject: [PATCH] improve dialog style

---
 src/editor/components/seDropdown.js           |  2 +-
 src/editor/components/seExplorerButton.js     |  2 +-
 src/editor/dialogs/SePlainAlertDialog.js      |  2 +-
 src/editor/dialogs/editorPreferencesDialog.js | 16 +++++++--
 src/editor/dialogs/exportDialog.js            |  8 ++---
 src/editor/dialogs/imagePropertiesDialog.js   |  3 +-
 src/editor/dialogs/svgSourceDialog.js         | 18 +++++++---
 .../extensions/ext-imagelib/ext-imagelib.js   |  4 +--
 .../extensions/ext-mathjax/ext-mathjax.js     |  2 +-
 .../extensions/ext-storage/storageDialog.js   |  4 +--
 src/editor/images/textmarker_bottom.svg       |  3 ++
 src/editor/images/textmarker_top.svg          |  6 ++--
 src/editor/images/tool_placemark.svg          | 11 ++++++
 src/editor/svgedit.css                        | 35 ++-----------------
 14 files changed, 59 insertions(+), 57 deletions(-)

diff --git a/src/editor/components/seDropdown.js b/src/editor/components/seDropdown.js
index 91b24afb..450a6e3d 100644
--- a/src/editor/components/seDropdown.js
+++ b/src/editor/components/seDropdown.js
@@ -40,7 +40,7 @@ class Dropdown extends ListComboBox {
         ::slotted(*) {
           padding: 4px;
           background: #E8E8E8;
-          border: 1px solid #B0B0B0;
+          border: 1px solid #5a6162;
           width: 100%;
         }
         [part~="popup"] {
diff --git a/src/editor/components/seExplorerButton.js b/src/editor/components/seExplorerButton.js
index 4d5a5b50..04126acb 100644
--- a/src/editor/components/seExplorerButton.js
+++ b/src/editor/components/seExplorerButton.js
@@ -67,7 +67,7 @@ template.innerHTML = `
   .menu-item {
     line-height: 1em;
     padding: 0.5em;
-    border: 1px solid #B0B0B0;
+    border: 1px solid #5a6162;
     background: #E8E8E8;
     margin-bottom: -1px;
     white-space: nowrap;
diff --git a/src/editor/dialogs/SePlainAlertDialog.js b/src/editor/dialogs/SePlainAlertDialog.js
index 2cc06e8c..a3b2c0b1 100644
--- a/src/editor/dialogs/SePlainAlertDialog.js
+++ b/src/editor/dialogs/SePlainAlertDialog.js
@@ -52,7 +52,7 @@ export default class SePlainAlertDialog extends PlainAlertDialog {
             background: #DDD;
             overflow: auto;
             text-align: left;
-            border: 1px solid #B0B0B0;
+            border: 1px solid #5a6162;
             padding: 1em;
             border-radius: 5px;
             -moz-border-radius: 5px;
diff --git a/src/editor/dialogs/editorPreferencesDialog.js b/src/editor/dialogs/editorPreferencesDialog.js
index 8d81006c..9b7e793c 100644
--- a/src/editor/dialogs/editorPreferencesDialog.js
+++ b/src/editor/dialogs/editorPreferencesDialog.js
@@ -71,7 +71,8 @@ template.innerHTML = `
   }
   #svg_prefs #svg_prefs_container {
     padding: 10px;
-    background-color: #B0B0B0;
+    background-color: #5a6162;
+    color: #c5c5c5;
     border: 1px outset #777;
     opacity: 1.0;
     font-family: Verdana, Helvetica, sans-serif;
@@ -83,6 +84,17 @@ template.innerHTML = `
     margin-left: 1em;
     overflow: auto;
   }
+
+  #tool_prefs_save {
+    width: 30%;
+    background-color: #c79605;
+    margin-left: 20%;
+  }
+
+  #tool_prefs_cancel {
+    width: 30%;
+    background-color: #c8c8c8;
+  }
   
   #svg_prefs #svg_docprops_prefs {
     float: left;
@@ -138,11 +150,9 @@ template.innerHTML = `
     <div id="svg_prefs_container">
       <div id="tool_prefs_back" class="toolbar_button">
         <button id="tool_prefs_save">
-          <img class="svg_icon" src="./images/ok.svg" alt="icon" width="16" height="16" />
           OK
         </button>
         <button id="tool_prefs_cancel">
-          <img class="svg_icon" src="./images/cancel.svg" alt="icon" width="16" height="16" />
           Cancel
         </button>
       </div>
diff --git a/src/editor/dialogs/exportDialog.js b/src/editor/dialogs/exportDialog.js
index 18f4df44..28e74306 100644
--- a/src/editor/dialogs/exportDialog.js
+++ b/src/editor/dialogs/exportDialog.js
@@ -6,10 +6,10 @@ template.innerHTML = `
  
   #dialog_content {
     margin: 10px 10px 5px 10px;
-    background: #DDD;
+    background: #5a6162;
     overflow: auto;
     text-align: left;
-    border: 1px solid #B0B0B0;
+    border: 1px solid #c8c8c8;
   }
 
   #dialog_content p, #dialog_content select, #dialog_content label {
@@ -24,7 +24,7 @@ template.innerHTML = `
     top: 50%;
     max-width: 400px;
     z-index: 50001;
-    background: #CCC;
+    background: #5a6162;
     border: 1px outset #777;
     font-family:Verdana,Helvetica,sans-serif;
     font-size:0.8em;
@@ -72,11 +72,9 @@ template.innerHTML = `
       </div>
       <div id="dialog_buttons">
         <button id="export_ok">
-          <img class="svg_icon" src="./images/ok.svg" alt="icon" width="16" height="16" />
           Ok
         </button>
         <button id="export_cancel">
-          <img class="svg_icon" src="./images/cancel.svg" alt="icon" width="16" height="16" />
           Cancel
         </button>
       </div>
diff --git a/src/editor/dialogs/imagePropertiesDialog.js b/src/editor/dialogs/imagePropertiesDialog.js
index 45249fff..1a52cf5a 100644
--- a/src/editor/dialogs/imagePropertiesDialog.js
+++ b/src/editor/dialogs/imagePropertiesDialog.js
@@ -16,7 +16,8 @@ template.innerHTML = `
   }
   #svg_docprops #svg_docprops_container {
     padding: 10px;
-    background-color: #B0B0B0;
+    background-color: #5a6162;
+    color: #c5c5c5;
     border: 1px outset #777;
     opacity: 1.0;
     font-family: Verdana, Helvetica, sans-serif;
diff --git a/src/editor/dialogs/svgSourceDialog.js b/src/editor/dialogs/svgSourceDialog.js
index 0f78cc4d..ae76e1f4 100644
--- a/src/editor/dialogs/svgSourceDialog.js
+++ b/src/editor/dialogs/svgSourceDialog.js
@@ -14,7 +14,8 @@ template.innerHTML = `
   }
  
   #svg_source_editor #svg_source_container {
-    background-color: #B0B0B0;
+    background-color: #5a6162;
+    color: #c5c5c5;
     opacity: 1.0;
     text-align: center;
     border: 1px outset #777;
@@ -42,18 +43,27 @@ template.innerHTML = `
   
   #svg_source_editor #tool_source_back {
     text-align: left;
-    margin: 5px 10px;
+    height: 30px;
   }  
+  #tool_source_save {
+    width: 20%;
+    background-color: #c79605;
+    margin-left: 30%;
+    margin-top: 5px;
+  }
+
+  #tool_source_cancel {
+    width: 20%;
+    background-color: #c8c8c8;
+  }
   </style>
   <elix-dialog id="svg_source_editor" aria-label="SVG Source Editor" closed>
     <div id="svg_source_container">
       <div id="tool_source_back" class="toolbar_button">
         <button id="tool_source_save">
-          <img class="svg_icon" src="./images/ok.svg" alt="icon" width="16" height="16" />
           Apply Changes
         </button>
         <button id="tool_source_cancel">
-          <img class="svg_icon" src="./images/cancel.svg" alt="icon" width="16" height="16" />
           Cancel
         </button>
       </div>
diff --git a/src/editor/extensions/ext-imagelib/ext-imagelib.js b/src/editor/extensions/ext-imagelib/ext-imagelib.js
index e094d8a1..ab722fc6 100644
--- a/src/editor/extensions/ext-imagelib/ext-imagelib.js
+++ b/src/editor/extensions/ext-imagelib/ext-imagelib.js
@@ -529,7 +529,7 @@ export default {
           'bottom: 25px;' +
           'min-width: 300px;' +
           'min-height: 200px;' +
-          'background: #B0B0B0;' +
+          'background: #5a6162;' +
           'border: 1px outset #777;' +
           '}' +
           '#imgbrowse h1 {' +
@@ -567,7 +567,7 @@ export default {
           'list-style: none;' +
           'padding: .5em;' +
           'background: #E8E8E8;' +
-          'border-bottom: 1px solid #B0B0B0;' +
+          'border-bottom: 1px solid #5a6162;' +
           'line-height: 1.2em;' +
           'font-style: sans-serif;' +
           '}' +
diff --git a/src/editor/extensions/ext-mathjax/ext-mathjax.js b/src/editor/extensions/ext-mathjax/ext-mathjax.js
index 93b4fc2f..84c95b3e 100644
--- a/src/editor/extensions/ext-mathjax/ext-mathjax.js
+++ b/src/editor/extensions/ext-mathjax/ext-mathjax.js
@@ -260,7 +260,7 @@ export default {
           'position: absolute;' +
           'top: 50px;' +
           'padding: 10px;' +
-          'background-color: #B0B0B0;' +
+          'background-color: #5a6162;' +
           'border: 1px outset #777;' +
           'opacity: 1.0;' +
           'font-family: Verdana, Helvetica, sans-serif;' +
diff --git a/src/editor/extensions/ext-storage/storageDialog.js b/src/editor/extensions/ext-storage/storageDialog.js
index 132cd277..9e6e7bd6 100644
--- a/src/editor/extensions/ext-storage/storageDialog.js
+++ b/src/editor/extensions/ext-storage/storageDialog.js
@@ -9,7 +9,7 @@ template.innerHTML = `
     background: #DDD;
     overflow: auto;
     text-align: left;
-    border: 1px solid #B0B0B0;
+    border: 1px solid #5a6162;
   }
 
   #dialog_content p, #dialog_content select, #dialog_content label {
@@ -24,7 +24,7 @@ template.innerHTML = `
     top: 50%;
     max-width: 400px;
     z-index: 50001;
-    background: #CCC;
+    background: #5a6162;
     border: 1px outset #777;
     font-family:Verdana,Helvetica,sans-serif;
     font-size:0.8em;
diff --git a/src/editor/images/textmarker_bottom.svg b/src/editor/images/textmarker_bottom.svg
index e69de29b..6913d021 100644
--- a/src/editor/images/textmarker_bottom.svg
+++ b/src/editor/images/textmarker_bottom.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+    <path stroke-width="4" stroke="#f9bc01" fill="none" d="M 0 30 h 100 z M 30 40 h 40 v 20 h -40 z"/>
+</svg>
\ No newline at end of file
diff --git a/src/editor/images/textmarker_top.svg b/src/editor/images/textmarker_top.svg
index f5929042..1af75d49 100644
--- a/src/editor/images/textmarker_top.svg
+++ b/src/editor/images/textmarker_top.svg
@@ -1,3 +1,3 @@
-  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-            <path stroke-width="4" stroke="#f9bc01" fill="none" d="M 0 60 h 100 z M 30 30 h 40 v 20 h -40 z"/>
-        </svg>
\ No newline at end of file
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+    <path stroke-width="4" stroke="#f9bc01" fill="none" d="M 0 60 h 100 z M 30 30 h 40 v 20 h -40 z"/>
+</svg>
\ No newline at end of file
diff --git a/src/editor/images/tool_placemark.svg b/src/editor/images/tool_placemark.svg
index e69de29b..4f2626e4 100644
--- a/src/editor/images/tool_placemark.svg
+++ b/src/editor/images/tool_placemark.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-1 -1 110 110">
+     <line fill="none" id="svg_4" marker-start="url(#se_marker_start_svg_4)" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="5" x1="0" x2="42.58373" y1="0" y2="56.42415"/>
+     <line fill="none" id="svg_5" stroke="#000000" stroke-linecap="round" stroke-width="5" x1="99.99999" x2="42.58373" y1="56.42415" y2="56.42415"/>
+     <rect fill="none" height="26.47059" id="svg_2" stroke="#000000" stroke-dasharray="10,10" stroke-linecap="round" stroke-linejoin="round" stroke-width="5" width="55.02392" x="44.01914" y="16.71827"/>
+     <rect fill="none" height="32.73994" id="svg_3" stroke="#000000" stroke-dasharray="10,10" stroke-linecap="round" stroke-linejoin="null" stroke-width="5" width="55.98086" x="44.01914" y="67.56966"/>
+     <defs>
+      <marker class="leftarrow" id="se_marker_start_svg_4" markerHeight="5" markerUnits="strokeWidth" markerWidth="5" orient="auto" refX="0" refY="50" viewBox="0 0 100 100">
+        <path d="m0,50l100,40l-30,-40l30,-40l-100,40z" fill="#000000" id="svg_1" stroke="#000000" stroke-width="10"/>
+      </marker>
+    </defs>
+    </svg>
\ No newline at end of file
diff --git a/src/editor/svgedit.css b/src/editor/svgedit.css
index 457a8028..5a27587e 100644
--- a/src/editor/svgedit.css
+++ b/src/editor/svgedit.css
@@ -471,7 +471,7 @@ input[type=text] {
   border-top: 1px solid var(--border-color);
   border-right: 1px solid #FFFFFF;
   border-bottom: 1px solid #FFFFFF;
-  background-color: #B0B0B0;
+  background-color: #5a6162;
 }
 
 .dropdown ul {
@@ -495,7 +495,7 @@ input[type=text] {
   width: 120px;
   padding: 4px;
   background: #E8E8E8;
-  border: 1px solid #B0B0B0;
+  border: 1px solid #5a6162;
   margin: 0 0 -1px 0;
   line-height: 16px;
 }
@@ -625,10 +625,6 @@ ul li.current {
   padding-right: .3em;
 }
 
-#svg_source_editor {
-  display: none;
-}
-
 .overlay {
   position: absolute;
   top: 0;
@@ -640,19 +636,6 @@ ul li.current {
   z-index: 5;
 }
 
-#svg_source_editor #svg_source_container {
-  position: absolute;
-  top: 30px;
-  left: 30px;
-  right: 30px;
-  bottom: 30px;
-  background-color: #B0B0B0;
-  opacity: 1.0;
-  text-align: center;
-  border: 1px outset #777;
-  z-index: 6;
-}
-
 #save_output_btns {
   display: none;
   text-align: left;
@@ -668,20 +651,6 @@ ul li.current {
   margin-left: 30px;
 }
 
-#svg_docprops #svg_docprops_container,
-#svg_prefs #svg_prefs_container {
-  position: absolute;
-  top: 50px;
-  padding: 10px;
-  background-color: #B0B0B0;
-  border: 1px outset #777;
-  opacity: 1.0;
-/*  width: 450px;*/
-  font-family: Verdana, Helvetica, sans-serif;
-  font-size: .8em;
-  z-index: 20001;
-}
-
 /* ------------ */
 
 .dropdown li.tool_button {