From 43661d1b39a30d6fa9ff34778c68f6f5fbb42c18 Mon Sep 17 00:00:00 2001
From: Quincy Morgan <quincy.morgan@icloud.com>
Date: Thu, 28 Feb 2019 16:20:19 -0500
Subject: [PATCH] Merge add search bar UI with draw mode buttons UI

---
 css/80_app.css     | 34 ++++++++++++++++++++--------------
 modules/ui/init.js | 10 ++++------
 2 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/css/80_app.css b/css/80_app.css
index c3a47586a..94937f647 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -308,29 +308,29 @@ button.disabled {
     cursor: not-allowed;
 }
 
-.joined button {
+.joined > * {
     border-radius: 0;
     border-right: 1px solid rgba(0,0,0,.5);
 }
-[dir='rtl'] .joined button {
+[dir='rtl'] .joined > * {
     border-left: 1px solid rgba(0,0,0,.5);
     border-right: none;
 }
 
-.fillL .joined button {
+.fillL .joined > * {
     border-right: 1px solid #fff;
 }
-.joined button:first-child {
+.joined > *:first-child {
     border-radius: 4px 0 0 4px;
 }
-[dir='rtl'] .joined button:first-child {
+[dir='rtl'] .joined > *:first-child {
     border-radius: 0 4px 4px 0;
 }
-.joined button:last-child {
+.joined > *:last-child {
     border-right-width: 0;
     border-radius: 0 4px 4px 0;
 }
-[dir='rtl'] .joined button:last-child {
+[dir='rtl'] .joined > *.bar-button:last-child {
     border-radius: 4px 0 0 4px;
 }
 
@@ -469,7 +469,7 @@ button[disabled].action:hover {
     margin: 0 5px;
 }
 .tool-group button.bar-button {
-    flex: 1 1 auto;
+    flex: 0 0 auto;
     flex-flow: row nowrap;
     align-items: center;
     padding: 0 10px;
@@ -501,10 +501,10 @@ button[disabled].action:hover {
     padding-right: 0 !important;
     padding-left: 0 !important;
 }
-.tool-group button > .icon {
+.tool-group button.bar-button .icon {
     flex: 0 0 20px;
 }
-.tool-group button .label {
+.tool-group button.bar-button .label {
     flex: 0 1 auto;
     padding: 0 5px;
 }
@@ -605,22 +605,28 @@ button.add-note svg.icon {
 
 .search-add {
     width: 100%;
-    min-width: 200px;
-    max-width: 600px;
+    justify-content: center;
 }
 .search-add .search-wrap {
     position: relative;
     width: 100%;
+    min-width: 200px;
+    max-width: 400px;
+    border-radius: 20px 0 0 20px;
+    background: #fff;
+}
+.search-add .search-wrap:only-child {
+    border-radius: 20px;
 }
 .search-add input[type='search'] {
     position: relative;
     width: 100%;
     height:100%;
     border: none;
-    border-radius: 20px;
     font-size: 14px;
     text-indent: 25px;
-    padding: 5px 10px
+    padding: 5px 10px;
+    border-radius: inherit;
 }
 .search-add input[type='search']:focus {
     border-bottom-left-radius: 0;
diff --git a/modules/ui/init.js b/modules/ui/init.js
index 8845d6f40..942f0be84 100644
--- a/modules/ui/init.js
+++ b/modules/ui/init.js
@@ -116,13 +116,11 @@ export function uiInit(context) {
             .append('div')
             .attr('class', 'tool-group center-area');
 
-        centerArea.append('div')
-            .attr('class', 'search-add')
-            .call(uiSearchAdd(context), bar);
+        var addArea = centerArea.append('div')
+            .attr('class', 'search-add joined');
 
-        centerArea.append('div')
-            .attr('class', 'modes joined')
-            .call(uiModes(context), bar);
+        addArea.call(uiSearchAdd(context), bar);
+        addArea.call(uiModes(context), bar);
 
         centerArea.append('div')
             .attr('class', 'notes')