Merge pull request ManageIQ#7554 from kavyanekkalapu/fix_search-topology

Fix search alignment in topology toolbar
DavidResende0 · Feb 1, 2021 · ee6bd58 · ee6bd58
2 parents 0e63a0b + 1af8501
commit ee6bd58
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 19 deletions.
diff --git 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
@@ -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
@@ -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 {