Fixes #41: Alignment fixes in bottom bar

src/editor/components/seList.js

@@ -16,7 +16,7 @@ template.innerHTML = `
 }
 </style>
   <label>Label</label>
-  <elix-dropdown-list>
+  <elix-dropdown-list style="height:22px; width:22px">
     <slot></slot>
   </elix-dropdown-list>
   
@@ -35,6 +35,9 @@ export class SeList extends HTMLElement {
     this._shadowRoot.append(template.content.cloneNode(true));
     this.$dropdown = this._shadowRoot.querySelector('elix-dropdown-list');
     this.$label = this._shadowRoot.querySelector('label');
+    if(this.getAttribute('id') === 'tool_font_family') {
+      this.$dropdown.style.width = '66px';
+      }
   }
   /**
    * @function observedAttributes

src/editor/components/sePalette.js

@@ -24,7 +24,7 @@ template.innerHTML = `
   }
   </style>
   <div title="Click to change fill color, shift-click to change stroke color">
-    <elix-centered-strip style="width:300px">
+    <elix-centered-strip style="width:300px;padding:5px;background: #fff; border-radius: 5px;">
     </elix-centered-strip>
   </div>
 `;

src/editor/components/seSpinInput.js

@@ -5,9 +5,8 @@ const template = document.createElement('template');
 template.innerHTML = `
   <style>
   img {
-    top: 2px;
-    left: 1px;
     position: relative;
+    margin:0 2px 0 0;
   }
   span {
     bottom: 1px;
@@ -19,7 +18,7 @@ template.innerHTML = `
   }
   elix-number-spin-box{
     width: 54px;
-    height: 25px;
+    height: 24px;
   }
   </style>
   <img src="./images/logo.svg" alt="icon" width="12" height="12" aria-labelledby="label" />

src/editor/svgedit.css

@@ -389,6 +389,7 @@ hr {
   min-height: 40px;
   border-bottom: none;
   overflow: auto;
+  right:2px;
 }
 
 #tools_top .tool_sep {
@@ -646,8 +647,12 @@ input[type=text] {
 #tools_bottom se-spin-input {
   float: left;
   vertical-align: middle;
+  display:flex;
+  align-items: center;
+}
+#tools_bottom elix-dropdown-list{
+  width:22px;
 }
-
 .bottom-icon {
   width: 22px;
 }