From 1af8501e0acdce9d61765152f14d49f71e432687 Mon Sep 17 00:00:00 2001
From: Kavya Nekkalapu <knekkal@us.ibm.com>
Date: Tue, 19 Jan 2021 14:25:17 -0500
Subject: [PATCH] fix search alignment in topology toolbar

---
 .../components/topology_toolbar.jsx           |  8 +++----
 .../topology_toolbar.spec.jsx.snap            | 22 ++++++++-----------
 app/stylesheet/toolbar.scss                   | 11 +++++++++-
 3 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/app/javascript/components/topology_toolbar.jsx b/app/javascript/components/topology_toolbar.jsx
index 89ab7756f64..13d37cee9cd 100644
--- a/app/javascript/components/topology_toolbar.jsx
+++ b/app/javascript/components/topology_toolbar.jsx
@@ -43,13 +43,11 @@ const TopologyToolbar = () => (
             <button type="button" className="clear" aria-hidden="true" onClick={resetSearchClick}>
               <span className="pficon pficon-close" />
             </button>
+            <button type="button" className="btn btn-default search-topology-button" onClick={searchClick}>
+              <span className="fa fa-search" />
+            </button>
           </div>
         </div>
-        <div className="form-group search-button">
-          <button type="button" className="btn btn-default search-topology-button" onClick={searchClick}>
-            <span className="fa fa-search" />
-          </button>
-        </div>
       </form>
     </div>
   </div>
diff --git a/app/javascript/spec/toolbar/__snapshots__/topology_toolbar.spec.jsx.snap b/app/javascript/spec/toolbar/__snapshots__/topology_toolbar.spec.jsx.snap
index 7483138cc8d..caad6010f84 100644
--- a/app/javascript/spec/toolbar/__snapshots__/topology_toolbar.spec.jsx.snap
+++ b/app/javascript/spec/toolbar/__snapshots__/topology_toolbar.spec.jsx.snap
@@ -80,21 +80,17 @@ exports[`<TopologyToolbar /> renders ok 1`] = `
                 className="pficon pficon-close"
               />
             </button>
+            <button
+              className="btn btn-default search-topology-button"
+              onClick={[Function]}
+              type="button"
+            >
+              <span
+                className="fa fa-search"
+              />
+            </button>
           </div>
         </div>
-        <div
-          className="form-group search-button"
-        >
-          <button
-            className="btn btn-default search-topology-button"
-            onClick={[Function]}
-            type="button"
-          >
-            <span
-              className="fa fa-search"
-            />
-          </button>
-        </div>
       </form>
     </div>
   </div>
diff --git a/app/stylesheet/toolbar.scss b/app/stylesheet/toolbar.scss
index 31732967481..72f961ae6ff 100644
--- a/app/stylesheet/toolbar.scss
+++ b/app/stylesheet/toolbar.scss
@@ -178,7 +178,7 @@
   max-height: 610px !important;
 }
 
-.topology_refresh,.search-topology-button {
+.topology_refresh {
   background-color: inherit;
   border: none;
   background-image: none;
@@ -187,6 +187,15 @@
   position: relative;
 }
 
+.search-topology-button {
+    background-color: #f1f1f1;
+    position: absolute;
+    right: -29px;
+    top: 0px;
+    width: 25px;
+    height: 26px;
+}
+
 .topology_toolbar {
   margin-bottom: 20px;
   .text {